ブロック

WordPressブロックエディター向けの314個のブロック

本物のブロックに本物の設定パネルが付いており、WordPressのインサーターから挿入できます。ショートコードも独自のキャンバスも、覚える別のエディターもありません。訪問者に見えるものはすべて、サイドバーのコントロールで編集できます。

更新日:

314
ブロックの総数
228
無料プランでは
209
インサーター内
105
デモ単位
10
カテゴリ
ライブラリ

今すぐ挿入できるブロック209種類

ファミリーで絞り込むか、名前、キーワード、ブロックの機能で検索できます。プレミアムブロックには印が付いており、すべてのプランにそれらすべてが含まれます。

WordPressのブロックインサーターを開き、Canvasのブロックカテゴリを表示した画面。コアブロックと並んでCanvasブロックが一覧表示されています。

WordPress 標準のインサーターに、コアブロックの下に Canvas のファミリーが表示されます。ショートコードは使用せず、別のエディターも開きません。

209件をすべて表示

投稿

31件のブロックは、ブロックインサーターの「投稿」の下に表示されます。

Academic Works 無料

学術系デザインに沿って表示されるポートフォリオ項目:書籍の一覧、ジャーナル論文のカード、そして各ページの詳細情報。

Agency Works 無料

ポートフォリオのプロジェクトを、エージェンシー風のカルーセルまたはグリッドで表示したり、単一のプロジェクトページ(属性、問い合わせCTA、関連プロジェクト)を表示したりできます。

ライブで確認:Agency Works(ポートフォリオ、新しいタブで開きます)

Blog Archive Loop 無料

メインクエリ(インデックス、カテゴリー、タグ、作成者、日付)のブログループです。テーマの blog-entry パーツとページネーションを使用します。

ライブで確認:Blog Archive Loop(ホーム、新しいタブで開きます) ドキュメントに記載のBlog Archive Loopブロックの設定

Blog Loop 無料

組み合わせ可能なブログ記事のループです。投稿ごとのカードは、Post Image/Title/Meta/Excerptブロックで組み立てます。コンテナー、ページネーション、タイムラインの装飾部分はレイアウトによって決まります。

ライブで確認:Blog Loop(ブログ | グリッド、新しいタブで開きます) ドキュメントに記載のBlog Loopブロックの設定

Blog Single Post 無料

単一のブログ投稿レイアウト(タイトル、メタ情報、画像、コンテンツ、タグ、シェア、ナビゲーション、投稿者、コメント、関連記事、サイドバー)。single.html用です。

ドキュメントに記載のBlog Single Postブロックの設定

Construction Projects 無料

Projects 投稿タイプのプロジェクトをポートフォリオグリッド(2〜5列)として表示するか、単一のプロジェクトページ(属性、お問い合わせCTA、関連プロジェクト)を描画します。

ライブで確認:Construction Projects(プロジェクト | 5カラム、新しいタブで開きます)

Illustrator Works 無料

ポートフォリオの項目を、色付きの枠を持つ正方形カードのフィルター可能なグリッドで表示したり、個別のプロジェクトページの各パーツとして表示したりできます。

ライブで確認:Illustrator Works(ホーム、新しいタブで開きます)

Interior Projects 無料

Projects投稿タイプのスタジオ制作事例を、絞り込み可能なポートフォリオグリッドとして表示します。または、単一の制作事例ページ(詳細サイドバー、相談CTA、関連プロジェクト)を表示します。

ライブで確認:Interior Projects(Stonecroft、新しいタブで開きます)

Law Firm Cases 無料

Portfolio投稿タイプの事例をカードとして表示したり、単一の事例ページ(属性、お問い合わせCTA、関連事例)を表示したりできます。

ライブで確認:Law Firm Cases(最近の事例、新しいタブで開きます)

Photo Shots 無料

Shots投稿タイプの写真を展開式のプレビューグリッドで表示したり、単一のショットページ(フレーム、撮影情報、問い合わせCTA、関連ショット)を表示したりします。

ライブで確認:Photo Shots(探索、新しいタブで開きます)

Post Archive Index 無料

日付とタイトルを表示するすべてのレコードを、必要に応じて年と月でグループ化します。「公開したものすべて」のインデックスです。

ドキュメントに記載のPost Archive Indexブロックの設定

Post Content 無料

現在の投稿の全文を表示します。ショートコードや埋め込みを含め、すべてのコンテンツフィルターを適用します。

ライブで確認:Post Content(プレビュー画像付きの標準投稿、新しいタブで開きます) ドキュメントに記載のPost Contentブロックの設定

Post Date 無料

投稿の公開日だけを単独で表示します。メタリストでは表示できない、バイライン向けの公開日です。

ライブで確認:Post Date(スロー・ウェブ:最高の読書体験がなぜ静かになりつつあるのか、新しいタブで開きます) ドキュメントに記載のPost Dateブロックの設定

Post Excerpt 無料

設定可能な長さで、単語の区切りで切り詰めた現在の投稿の抜粋を表示します。

ライブで確認:Post Excerpt(ブログ | グリッド、新しいタブで開きます) ドキュメントに記載のPost Excerptブロックの設定

Post Image 無料

現在の投稿のアイキャッチ画像を、サイズを指定して表示します。パーマリンクへのリンクを付けることもできます。

ライブで確認:Post Image(ブログ | ミックスフィード、新しいタブで開きます) ドキュメントに記載のPost Imageブロックの設定

Post Media 無料

現在の投稿の冒頭にあるメディアボックスです。投稿形式に応じて、アイキャッチ画像、動画または音声の埋め込み、ギャラリースライダー、サムネイルグリッド、引用、リンク、またはステータスカードが表示されます。

ライブで確認:Post Media(ブログ | タイムライン・左サイドバー、新しいタブで開きます) ドキュメントに記載のPost Mediaブロックの設定

Post Meta 無料

日付、投稿者、カテゴリー、コメント数など、設定可能な投稿メタ情報を表示します。

ライブで確認:Post Meta(ブログ | ミックスフィード、新しいタブで開きます) ドキュメントに記載のPost Metaブロックの設定

Post Read More 無料

現在の投稿のパーマリンクへ向かう「続きを読む」リンクまたはボタンを表示します。

ライブで確認:Post Read More(ホーム、新しいタブで開きます) ドキュメントに記載のPost Read Moreブロックの設定

Post Reading Bar 無料

現在の投稿について、読了時間、文字サイズ、印刷、シェアとスクロールのコントロールを表示します。

ライブで確認:Post Reading Bar(プレビュー画像付きの標準投稿、新しいタブで開きます) ドキュメントに記載のPost Reading Barブロックの設定

Post Share 無料

現在の投稿のソーシャル共有リンクを表示します。共有先のネットワーク、スタイル、サイズを設定できます。

ライブで確認:Post Share(Event Single、新しいタブで開きます) ドキュメントに記載のPost Shareブロックの設定

Post Terms 無料

現在の投稿のタクソノミーの項目(カテゴリーまたはタグ)を、テキスト、バッジ、ピル、タグクラウド、インラインカテゴリーのいずれかのスタイルで表示します。

ライブで確認:Post Terms(ブログ | ミックスフィード、新しいタブで開きます) ドキュメントに記載のPost Termsブロックの設定

Post Title 無料

現在の投稿タイトルを、任意の見出しタグ内に表示します。オプションでパーマリンクへのリンクを付けることもできます。

ライブで確認:Post Title(ブログ | ミックスフィード、新しいタブで開きます) ドキュメントに記載のPost Titleブロックの設定

Post Table of Contents 無料

投稿内の見出しの目次です。機能するアンカーリンクと、読者の位置に合わせて移動するマーカーが付きます。

ライブで確認:Post Table of Contents(リブランディングを経ても使えるデザイントークンの実践ガイド、新しいタブで開きます) ドキュメントに記載のPost Table of Contentsブロックの設定

投稿 無料

グリッド、リスト、メイソンリー、タイムラインなど多彩なレイアウトで投稿をクエリして表示します。カテゴリー、タグ、カスタム投稿タイプ、並べ替えによるフィルタリングに対応しています。

ライブで確認:投稿(ブログ | グリッド、新しいタブで開きます) ドキュメントに記載の投稿ブロックの設定

Recent Comments 無料

サイト全体の承認済みの最新コメントを表示します。各コメントには投稿者のアバター、名前、冒頭の数語が表示され、スレッドへのリンクが付きます。

ライブで確認:Recent Comments(ウィジェット、新しいタブで開きます) ドキュメントに記載のRecent Commentsブロックの設定

Resume Works 無料

Worksの投稿タイプのプロジェクトを、コンパクトなリストまたはタイルグリッドで表示したり、個別のプロジェクトページ(属性、CTA、関連プロジェクト)を表示したりします。

ライブで確認:Resume Works(作品、新しいタブで開きます)

コンテンツ

30件のブロック。ブロックインサーターの「コンテンツ」に一覧表示されます。

Background Video / Audio 無料

ヒーロー、セクション背景、デザインされたプレーヤーに使用できる、自己ホスト型のループ再生動画または音声レイヤーです。メディア要素のみを出力するため、配置を決めるラッパーはご自身で管理できます。

ライブで確認:Background Video / Audio(メディアアクション、新しいタブで開きます) ドキュメントに記載のBackground Video / Audioブロックの設定

Cascading Images すべてのプランに含まれています

画像ごとの移動、回転、拡大縮小、z-index、アニメーション遅延、任意の装飾用背景シェイプを使った、レイヤー構成の画像レイアウト。

ライブで確認:Cascading Images(Cascading Images、新しいタブで開きます) ドキュメントに記載のCascading Imagesブロックの設定

チャート すべてのプランに含まれています

用意したデータセットからチャートを描画し、レポートや価格比較の数値をひと目で読み取れるようにします。チャートの種類、データ、ラベルはすべて入力した設定から決まります。

ライブで確認:チャート(サービス - レイアウト1、新しいタブで開きます) ドキュメントに記載のチャートブロックの設定

Circle Stack すべてのプランに含まれています

円形のアバター、アイコン、テキストバッジを横に並べて表示します。チームの紹介、ソーシャルプルーフ、フォロワー数の表示に最適です。

ライブで確認:Circle Stack(Circle Stacks、新しいタブで開きます) ドキュメントに記載のCircle Stackブロックの設定

クライアント 無料

クライアント、パートナー、ブランドのロゴを、レスポンシブグリッドまたはowl-carouselで表示します。任意でリンクやライトボックスに対応します。

ライブで確認:クライアント(クライアント、新しいタブで開きます) ドキュメントに記載のクライアントブロックの設定

Data Table すべてのプランに含まれています

仕様一覧やプラン比較など、構造化された情報を行と列で配置します。訪問者が並べ替えられる列見出しと、任意で末尾に表示できる要約行を備えています。

ライブで確認:Data Table(ユーザープロフィール、新しいタブで開きます) ドキュメントに記載のData Tableブロックの設定

Map 無料

Google MapsまたはOpenStreetMapの地図です。カスタムマーカー、ズームレベル、Google Mapsでは地図タイプとスタイルの上書きに対応しています。

ライブで確認:Map(マップ、新しいタブで開きます) ドキュメントに記載のMapブロックの設定

Hover Card 無料

マウスポインターに合わせて3Dに傾く画像カードです。タイトルとカテゴリのキャプションが、手前に浮き上がるように表示されます。

ライブで確認:Hover Card(Hover Parallax、新しいタブで開きます) ドキュメントに記載のHover Cardブロックの設定

Icon Browser 無料

有効化されたアイコンパックのすべてのアイコンを検索できる一覧グリッドです。

ライブで確認:Icon Browser(アイコン、新しいタブで開きます) ドキュメントに記載のIcon Browserブロックの設定

Inline SVG 無料

SVGパスデータから描画するベクターアイコン。サイズ、色、viewBox、レイヤーごとの不透明度をサイドバーのコントロールで設定できます。

ライブで確認:Inline SVG(料金、新しいタブで開きます) ドキュメントに記載のInline SVGブロックの設定

Link Tiles 無料

アイコンとラベルのタイルを並べたグリッドで、それぞれがページにリンクします。存在しないページを指すタイルは除外されます。

ライブで確認:Link Tiles(リストグループ・カード、新しいタブで開きます) ドキュメントに記載のLink Tilesブロックの設定

Lists & Cards 無料

Bootstrapベースのリストグループとカード。複数のスタイル、色、レイアウトに対応します。

ライブで確認:Lists & Cards(リストグループ・カード、新しいタブで開きます) ドキュメントに記載のLists & Cardsブロックの設定

Media Embed 無料

ホスティングサービスの動画や音声、アップロード済みのファイル、またはプロバイダーから提供された埋め込みアドレスから、動画または音声プレーヤーをページに配置できます。選択したアスペクト比に合わせてサイズが調整されます。

ライブで確認:Media Embed(メディア埋め込み、新しいタブで開きます) ドキュメントに記載のMedia Embedブロックの設定

Nav Tree 無料

インデントされた多階層のリンクツリーです。サイドパネルやドキュメントのサイドバーで使用するナビゲーションリストです。

ドキュメントに記載のNav Treeブロックの設定

Navbar 無料

ブランド、ハンバーガーボタン、ドロップダウンリンク、そして任意で末尾に置ける検索フォーム、ボタン、テキストを備えた、折りたたみ可能なナビゲーションバーです。

ライブで確認:Navbar(ナビゲーション、新しいタブで開きます) ドキュメントに記載のNavbarブロックの設定

Overlay Content 無料

オーバーレイ内の1つのコンテンツレイヤー。配置を揃えられ、必要に応じてマスクを適用でき、トリガーアイコンと入れ子のブロックを含みます。

ライブで確認:Overlay Content(アイテムオーバーレイ、新しいタブで開きます) ドキュメントに記載のOverlay Contentブロックの設定

Overlay Item 無料

画像カードの上にオーバーレイを重ねたもの:バッジ、色味レイヤー、1つ以上のオーバーレイコンテンツレイヤー。

ライブで確認:Overlay Item(アイテムオーバーレイ、新しいタブで開きます) ドキュメントに記載のOverlay Itemブロックの設定

ページタイトル 無料

ページタイトル(ヒーローバー)のブロックです。見出し、サブタイトル、パンくずリストを内部に配置でき、配置、背景画像、パララックス、ダークカラーを選択できます。

ライブで確認:ページタイトル(ページタイトル左揃えレイアウト、新しいタブで開きます) ドキュメントに記載のページタイトルブロックの設定

Page Title Buttons 無料

ページタイトル帯に表示されるアクションボタンです。ダイナミックモードでは各ページ独自のボタンを読み込み、ここで作成したボタンを表示することもできます。リンクのないボタンは、スクロールトリガーになります。

ライブで確認:Page Title Buttons(ボタン、新しいタブで開きます) ドキュメントに記載のPage Title Buttonsブロックの設定

Particles 無料

セクション用のアニメーション付きパーティクル背景レイヤーです。ラインウェブ、スターフィールド、バブル、スノー、ローポリから選べます。

ライブで確認:Particles(Particles、新しいタブで開きます) ドキュメントに記載のParticlesブロックの設定

Preloader 無料

デザインシステムのローダースタイルのいずれにも対応する、アニメーション付きのCSSローディングインジケーターです。

ライブで確認:Preloader(プリローダー、新しいタブで開きます) ドキュメントに記載のPreloaderブロックの設定

Pricing Switcher すべてのプランに含まれています

対になったPricing Tableブロック全体で、月額/年間(または任意の2状態)の料金表示を切り替えるトグルスイッチです。

ライブで確認:Pricing Switcher(料金、新しいタブで開きます) ドキュメントに記載のPricing Switcherブロックの設定

Q&A Item 無料

1つの質問とその回答を、それぞれ独自のマーカー付きで配置できます。インタビューを構成する基本的なブロックです。

ライブで確認:Q&A Item(Jane Doe on Twenty Years of Building Type、新しいタブで開きます) ドキュメントに記載のQ&A Itemブロックの設定

Rounded Skill 無料

パーセンテージに合わせて満たされる円形のスキルリングです。中央には数値、独自のテキスト、アイコン、またはカウンターを表示できます。

ライブで確認:Rounded Skill(Pie & Skills、新しいタブで開きます) ドキュメントに記載のRounded Skillブロックの設定

Scroll Arrow すべてのプランに含まれています

ヒーローセクション向けのアニメーション付きスクロールダウン矢印。ターゲットとなるセクションのアンカーへスムーズにスクロールします。

ライブで確認:Scroll Arrow(Christmas Sale Store、新しいタブで開きます) ドキュメントに記載のScroll Arrowブロックの設定

Star Rating 無料

1つのスコアとして設定する星評価です。半分の星、カスタムアイコン、任意のラッパー要素に対応しています。

ライブで確認:Star Rating(結果、新しいタブで開きます) ドキュメントに記載のStar Ratingブロックの設定

Testimonials 無料

お客様からいただいたお声を、グリッド、切り替わるカルーセル、または吹き出し形式で表示します。各お声には投稿者、写真、星評価を付けられます。

ライブで確認:Testimonials(お客様の声 & Twitter、新しいタブで開きます) ドキュメントに記載のTestimonialsブロックの設定

Thumbnails 無料

ホバーエフェクトとオプションのキャプションを備えた画像サムネイルグリッド。ライトボックスとリンクオーバーレイに対応。

ドキュメントに記載のThumbnailsブロックの設定

Ticker 無料

項目、方向、速度、スタイルを設定できる、スクロールするお知らせティッカーです。

ライブで確認:Ticker(ティッカー、新しいタブで開きます) ドキュメントに記載のTickerブロックの設定

Twitter Feed 無料

ページの読み込み時に取得される、アカウントの最新ツイートを切り替え表示するフィードです。表示するアカウント、表示件数、ウィジェットのレイアウトを選択できます。

ライブで確認:Twitter Feed(ウィジェット、新しいタブで開きます) ドキュメントに記載のTwitter Feedブロックの設定

Canvas

29個のブロック。ブロックインサーターの Canvas の下に一覧表示されます。

Alert 無料

Bootstrapのalert、またはCanvasのstyle-msgシステムを使用したアラートと通知ボックスです。塗りつぶし、枠線付き、拡張版のバリエーションに対応し、任意でアイコンと閉じるボタンを追加できます。

ライブで確認:Alert(スタイルボックス、新しいタブで開きます) ドキュメントに記載のAlertブロックの設定

ボタン 無料

スタイルのバリエーション、サイズ、形状、色、アイコン、ホバーエフェクト、シャドウ設定を備えた、フル機能のボタンです。

ライブで確認:ボタン(ボタン、新しいタブで開きます) ドキュメントに記載のボタンブロックの設定

Code Highlight すべてのプランに含まれています

Prism.jsによる構文ハイライト付きのコードブロックです。15以上の言語に対応し、オプションでクリップボードへのコピーボタンを追加できます。

ライブで確認:Code Highlight(コードハイライター、新しいタブで開きます) ドキュメントに記載のCode Highlightブロックの設定

カウンター 無料

アイコン、接頭辞・接尾辞、キャプションラベルを備えた、アニメーション付きの数値カウンターです。

ライブで確認:カウンター(カウンター、新しいタブで開きます) ドキュメントに記載のカウンターブロックの設定

Divider 無料

アイコンを任意で追加できる水平の区切り線。スタイルのバリエーション、配置、幅のプリセット、スクロール先へのリンクに対応します。

ライブで確認:Divider(区切り線、新しいタブで開きます) ドキュメントに記載のDividerブロックの設定

Dropcap 無料

スタイル付きのドロップキャップ文字と、それに続く段落テキスト。ボックス、枠線、円、枠線付き円のバリエーションに対応し、左または右に配置できます。

ライブで確認:Dropcap(見出し・ドロップキャップ、新しいタブで開きます) ドキュメントに記載のDropcapブロックの設定

見出し 無料

サブタイトルを任意で追加できる、スタイル付きの見出しです。Heading Block、Title Block、Emphasis Title、Fancy Title の各タイプに対応します。

ライブで確認:見出し(見出し・ドロップキャップ、新しいタブで開きます) ドキュメントに記載の見出しブロックの設定

ハイライト 無料

マーカー、下線、グラデーション、アウトライン、テキストのみなど、スタイルを切り替えられるハイライトテキストです。前後に任意の周辺テキストを追加でき、ブロックレベルのHTMLタグにも対応します。

ドキュメントに記載のハイライトブロックの設定

Icon Box 無料

アイコン、タイトル、説明文を備えた機能ボックスです。アイコンのスタイル、サイズ、レイアウト、ホバー効果を複数から選べます。

ライブで確認:Icon Box(注目ボックス、新しいタブで開きます) ドキュメントに記載のIcon Boxブロックの設定

Icon List 無料

繰り返し項目付きのアイコンリスト。各項目には、アイコン(CSSクラス)、テキストラベル、任意のリンクを設定できます。標準、大、特大のサイズバリエーションに対応しています。

ライブで確認:Icon List(アイコンリスト、新しいタブで開きます) ドキュメントに記載のIcon Listブロックの設定

Login Form すべてのプランに含まれています

Canvasのスタイルで WordPressのログインフォームを表示します。ログイン済みのユーザーにはウェルカムメッセージを表示します。

ライブで確認:Login Form(ログイン・新規登録、新しいタブで開きます) ドキュメントに記載のLogin Formブロックの設定

通知 無料

ボタンのクリック、またはページの読み込み時に自動で表示される、トースト通知を表示します。

ライブで確認:通知(通知、新しいタブで開きます) ドキュメントに記載の通知ブロックの設定

Page Title Heading 無料

ページ/投稿のタイトルを見出しとして表示します。動的(コンテキスト)と静的(リテラル)のソースモードに対応しています。

ライブで確認:Page Title Heading(ページタイトル左揃えレイアウト、新しいタブで開きます) ドキュメントに記載のPage Title Headingブロックの設定

Page Title Subtitle 無料

ページのサブタイトルを表示します。動的モードでは _canvas_page_subtitle メタを読み取り、静的モードでは任意のテキストを表示します。

ライブで確認:Page Title Subtitle(ページタイトル左揃えレイアウト、新しいタブで開きます) ドキュメントに記載のPage Title Subtitleブロックの設定

Plain Image 無料

figureラッパーなしの素のimg要素です。クラスを正確に制御でき、任意でリンクや、Retina(2x)用のsrcsetペアを設定できます。

ライブで確認:Plain Image(Shape Dividers、新しいタブで開きます) ドキュメントに記載のPlain Imageブロックの設定

Portfolio Excerpt すべてのプランに含まれています

現在のポートフォリオ項目の短縮抜粋を表示します。

ライブで確認:Portfolio Excerpt(Imagination を開く、新しいタブで開きます) ドキュメントに記載のPortfolio Excerptブロックの設定

Pricing Table すべてのプランに含まれています

柔軟に使える料金ボックスのカードです。デフォルト、シンプル、ミニマル、拡張の各レイアウトに対応し、料金切り替え、機能リスト、CTAボタンを任意で追加できます。

ライブで確認:Pricing Table(料金、新しいタブで開きます) ドキュメントに記載のPricing Tableブロックの設定

Process Steps 無料

番号またはアイコンのステップ表示を、破線のコネクターとともに表示します。オプションで、前へ/次へのナビゲーション付きのBootstrap 5タブのコンテンツを有効にできます。

ライブで確認:Process Steps(Process Steps、新しいタブで開きます) ドキュメントに記載のProcess Stepsブロックの設定

Progress Bar 無料

パーセント表示のカウンター付きのアニメーション・スキル/プログレスバー。水平または垂直の向きに対応し、Bootstrap のストライプパターンも使えます。

ライブで確認:Progress Bar(プログレスバー・スキル、新しいタブで開きます) ドキュメントに記載のProgress Barブロックの設定

Promo Box 無料

見出し、サブテキスト、CTAボタンを備えた、プロモーション用のCTAボックスです。デフォルト、枠線、ライト、ダークのスタイルに対応しています。

ライブで確認:Promo Box(Promo Boxes、新しいタブで開きます) ドキュメントに記載のPromo Boxブロックの設定

引用 無料

デフォルトの枠線、アイコン付きの引用、吹き出しのスタイルを持つブロッククォート。逆方向の配置、出典フッター、枠線やアイコンの色の任意上書きに対応しています。

ライブで確認:引用(引用・ブロッククォート、新しいタブで開きます) ドキュメントに記載の引用ブロックの設定

Read More 無料

「続きを読む」リンクで開閉する、アニメーション付きの折りたたみコンテンツエリア。

ライブで確認:Read More(Read More、新しいタブで開きます) ドキュメントに記載のRead Moreブロックの設定

Register Form すべてのプランに含まれています

Canvasのスタイルが適用されたユーザー登録フォームです。WordPressの設定でユーザー登録を有効にしておく必要があります。

ライブで確認:Register Form(ログイン・新規登録、新しいタブで開きます) ドキュメントに記載のRegister Formブロックの設定

Shape Divider 無料

セクションの切り替えに使う、SVG製の装飾用シェイプディバイダーです。

ライブで確認:Shape Divider(Shape Dividers、新しいタブで開きます) ドキュメントに記載のShape Dividerブロックの設定

Social Icons 無料

ホバーアニメーション付きのソーシャルアイコンリンクをまとめて配置します。複数のスタイルとサイズから選べ、必要に応じてスティッキー配置も設定できます。

ライブで確認:Social Icons(Social Icons、新しいタブで開きます) ドキュメントに記載のSocial Iconsブロックの設定

Stat List 無料

太字の数値と短いラベルの組み合わせを並べたリストです。経験年数、ローンチ数、受賞歴などに使えます。

ライブで確認:Stat List(チーム、新しいタブで開きます) ドキュメントに記載のStat Listブロックの設定

Styled Icon 無料

単独で使えるアイコンです。塗りつぶし、枠線付き、シンプルなスタイル、形状のバリエーション、カラーオプション、任意のリンク設定に対応しています。

ライブで確認:Styled Icon(スタイル付きアイコン、新しいタブで開きます) ドキュメントに記載のStyled Iconブロックの設定

Team Member 無料

写真、名前、役職、経歴、ソーシャルリンク、数値を持つチームメンバーを1人、カード、名簿の行、統計カード、重ねたカード、リーダーのポートレートのいずれかの形式で表示します。

ライブで確認:Team Member(チーム、新しいタブで開きます) ドキュメントに記載のTeam Memberブロックの設定

インタラクティブ

25個のブロック。ブロックインサーターの「インタラクティブ」に表示されます。

アコーディオン 無料

開閉できるタイトル付きのパネルを重ねて配置できます。質問や参考資料が多くても1ページにまとまり、訪問者は必要な部分だけを開いて読めます。

ライブで確認:アコーディオン(トグル・アコーディオン、新しいタブで開きます) ドキュメントに記載のアコーディオンブロックの設定

AJAX Button 無料

AJAXで外部コンテンツをコンテナに読み込むボタンです。追加、先頭に挿入、置き換えの挿入モードに対応しています。

ライブで確認:AJAX Button(AJAX Button、新しいタブで開きます) ドキュメントに記載のAJAX Buttonブロックの設定

カルーセル 無料

レスポンシブ対応のowl-carouselスライダーです。ブレークポイントごとのアイテム数、自動再生、ナビゲーション矢印、ドット、ライトボックス、遅延読み込みに対応します。

ライブで確認:カルーセル(カルーセル、新しいタブで開きます) ドキュメントに記載のカルーセルブロックの設定

Countdown すべてのプランに含まれています

jQuery countdownプラグインを利用した、カウントダウンまたはカウントアップのタイマー。

ライブで確認:Countdown(カウンター、新しいタブで開きます) ドキュメントに記載のCountdownブロックの設定

Flip Card すべてのプランに含まれています

表面と裏面にそれぞれ独自の背景を持ち、ホバー時に裏返る3Dフリップカードです。

ライブで確認:Flip Card(Flip Cards、新しいタブで開きます) ドキュメントに記載のFlip Cardブロックの設定

Gallery 無料

マソンリーレイアウト対応、列数の設定、間隔の調整、オプションのライトボックスに対応した画像ギャラリー。

ライブで確認:Gallery(Gallery、新しいタブで開きます) ドキュメントに記載のGalleryブロックの設定

Cookie Consent 無料

プライバシー設定モーダルとサービスごとの同意トグルを備えたクッキー同意バー。

ライブで確認:Cookie Consent(GDPR Layout 2、新しいタブで開きます) ドキュメントに記載のCookie Consentブロックの設定

Hover 3D 無料

マウス移動に応じてCSSのパースペクティブによる傾きエフェクトが動く、テーマのJSモジュールを使ったカードです。

ドキュメントに記載のHover 3Dブロックの設定

Image Compare すべてのプランに含まれています

ビフォー/アフターの画像比較スライダー。向き、位置のオフセット、ハンドルのスタイル、左右のラベルを設定できます。

ライブで確認:Image Compare(Image Compare、新しいタブで開きます) ドキュメントに記載のImage Compareブロックの設定

Image Hotspot すべてのプランに含まれています

ホバーまたはクリックでツールチップを表示する、配置されたホットスポットピンを備えたインタラクティブ画像。

ライブで確認:Image Hotspot(画像ホットスポット、新しいタブで開きます) ドキュメントに記載のImage Hotspotブロックの設定

Image Slider すべてのプランに含まれています

FlexSlider採用の画像スライダー。スライド/フェードアニメーション、自動再生、矢印、ドット、サムネイルナビゲーション、タッチスワイプに対応。

ライブで確認:Image Slider(画像スライダー、新しいタブで開きます) ドキュメントに記載のImage Sliderブロックの設定

Modal すべてのプランに含まれています

ボタンやリンクをクリックしたとき、またはページの読み込み時に自動で、モーダル/ポップアップダイアログを表示します。

ライブで確認:Modal(モーダル・ポップオーバー、新しいタブで開きます) ドキュメントに記載のModalブロックの設定

Nav 無料

タブ、ピル、下線式のナビゲーションストリップ。アクティブ、無効の状態と、1階層のドロップダウンに対応。

ライブで確認:Nav(ナビゲーション、新しいタブで開きます) ドキュメントに記載のNavブロックの設定

Off-Canvas 無料

ボタンまたはリンクで開く、Bootstrap 5 のオフキャンバス・スライドパネル(開始・終了・上・下)。

ライブで確認:Off-Canvas(Bootstrap Off-Canvas、新しいタブで開きます) ドキュメントに記載のOff-Canvasブロックの設定

ページネーション 無料

ページネーションの行です。円形、角丸、ピル型、3D、透明、ボタンのいずれかのスタイルで、3つのサイズと任意の配置に対応します。

ライブで確認:ページネーション(Paginations & Progress Bars、新しいタブで開きます) ドキュメントに記載のページネーションブロックの設定

Parallax Image すべてのプランに含まれています

オーバーレイとコンテンツを任意で備えた、全幅のパララックス画像セクションです。

ライブで確認:Parallax Image(パララックス要素、新しいタブで開きます) ドキュメントに記載のParallax Imageブロックの設定

Scroll Reveal すべてのプランに含まれています

ページをスクロールすると、コンテンツがアニメーションで表示されます。

ドキュメントに記載のScroll Revealブロックの設定

Slider すべてのプランに含まれています

Canvas Slider を選択すると、サイトの任意の場所に埋め込めます。スライド、エフェクト、ナビゲーション、高さは、スライダー自体で設定します。

ライブで確認:Slider(ホーム・リビング&インテリアデコレーション、新しいタブで開きます) ドキュメントに記載のSliderブロックの設定

Tab Strip 無料

パネルの内容が、ページ内の他の通常のブロックで構成されるタブストリップです。

ライブで確認:Tab Strip(ユーザープロフィール、新しいタブで開きます) ドキュメントに記載のTab Stripブロックの設定

タブ 無料

関連するコンテンツを見出し付きのタブに分けて、訪問者が一度に1つのセクションだけを読めるようにします。これにより、長い比較ページや仕様ページも、ざっと確認できる長さに保てます。

ライブで確認:タブ(タブ、新しいタブで開きます) ドキュメントに記載のタブブロックの設定

Text Fill Scroll すべてのプランに含まれています

要素が画面内にスクロールされると、テキストの色が徐々に塗りつぶされます。

ドキュメントに記載のText Fill Scrollブロックの設定

Text Rotator 無料

見出し要素内で、テキストを回転させたり、タイプ入力風にアニメーション表示したりします。

ライブで確認:Text Rotator(見出し・ドロップキャップ、新しいタブで開きます) ドキュメントに記載のText Rotatorブロックの設定

トグル 無料

長い回答や、初期状態でページを占有させたくない用語のセットに便利です。訪問者がクリックして開く見出しの後ろに、コンテンツの一部を隠しておけます。

ライブで確認:トグル(トグル・アコーディオン、新しいタブで開きます) ドキュメントに記載のトグルブロックの設定

Video Facade 無料

サムネイル画像の裏で遅延読み込みされる動画埋め込み。iframeはクリック時にのみ読み込まれ、ページを高速化します。

ドキュメントに記載のVideo Facadeブロックの設定

YouTube Background 無料

オーバーレイコンテンツの背後で、ミュート状態で流れるYouTube動画の背景。

ライブで確認:YouTube Background(Event Single | Full Width Video、新しいタブで開きます) ドキュメントに記載のYouTube Backgroundブロックの設定

WooCommerce

24個のブロックは、ブロックインサーターでWooCommerceの下に表示されます。

Conference Tickets すべてのプランに含まれています

チケット商品のカテゴリーごとの料金ボックス。各ボックスには数量セレクトと、リアルタイムに反映されるカートに追加リンクがあります。

ライブで確認:Conference Tickets(チケット、新しいタブで開きます) ドキュメントに記載のConference Ticketsブロックの設定

Store Price Filter すべてのプランに含まれています

商品グリッドをその場で絞り込む、2つのハンドルを持つ価格範囲コントロールです。

ライブで確認:Store Price Filter(フィルター付きショップ、新しいタブで開きます) ドキュメントに記載のStore Price Filterブロックの設定

ウィッシュリスト 無料

お客様が保存した商品を、価格、在庫状況、カートに追加ボタンとともに表示します。テーマオプションのウィッシュリストで選んだページに配置してください。

ドキュメントに記載のウィッシュリストブロックの設定

Wishlist Button 無料

現在の商品をお客様のウィッシュリストに保存します。商品テンプレートと商品カードで使用してください。

ドキュメントに記載のWishlist Buttonブロックの設定

Add to Cart すべてのプランに含まれています

現在の商品の WooCommerce「カートに追加」フォームを表示します。数量入力欄は任意で追加できます。

ライブで確認:Add to Cart(チェック柄のショートドレス、新しいタブで開きます) ドキュメントに記載のAdd to Cartブロックの設定

Cart Table すべてのプランに含まれています

商品明細、数量、合計を含むWooCommerceのカートテーブルを表示します。

ライブで確認:Cart Table(カート、新しいタブで開きます) ドキュメントに記載のCart Tableブロックの設定

Cart Totals すべてのプランに含まれています

小計、配送料、チェックアウトボタンを含む、WooCommerceのカート合計パネルを表示します。

ライブで確認:Cart Totals(カート、新しいタブで開きます) ドキュメントに記載のCart Totalsブロックの設定

Checkout Billing すべてのプランに含まれています

WooCommerceのチェックアウト請求先住所フォームを表示します。

ドキュメントに記載のCheckout Billingブロックの設定

Checkout Order Review すべてのプランに含まれています

明細と合計を含む、WooCommerceのチェックアウト注文レビューの概要を表示します。

ドキュメントに記載のCheckout Order Reviewブロックの設定

クロスセル すべてのプランに含まれています

現在のWooCommerceカートからクロスセル商品を表示します。カートが有効で、クロスセル商品が含まれている場合にのみ表示されます。

ライブで確認:クロスセル(カート、新しいタブで開きます) ドキュメントに記載のクロスセルブロックの設定

WooCommerce Notices すべてのプランに含まれています

WooCommerceの通知を表示します:エラー、成功メッセージ、情報通知。

ライブで確認:WooCommerce Notices(カート、新しいタブで開きます) ドキュメントに記載のWooCommerce Noticesブロックの設定

Product Carousel すべてのプランに含まれています

WooCommerceの商品を、スクロール可能なowl-carouselで表示します。自動再生、ナビゲーション矢印、ドット、レスポンシブのブレークポイントに対応しています。

ライブで確認:Product Carousel(カルーセル、新しいタブで開きます) ドキュメントに記載のProduct Carouselブロックの設定

Product Categories すべてのプランに含まれています

WooCommerceの商品カテゴリーを、サムネイル、名前、商品数付きのレスポンシブなカードグリッドで表示します。

ライブで確認:Product Categories(ブルーのラウンドネックTシャツ、新しいタブで開きます) ドキュメントに記載のProduct Categoriesブロックの設定

Product Gallery Linker すべてのプランに含まれています

クリックした画像に合わせて、商品ギャラリーのカルーセルを移動させるサムネイル一覧。

ライブで確認:Product Gallery Linker(メンズ アビエーター サングラス、新しいタブで開きます) ドキュメントに記載のProduct Gallery Linkerブロックの設定

Product Images すべてのプランに含まれています

WooCommerceの商品のアイキャッチ画像と、任意でギャラリーのサムネイルを表示します。

ライブで確認:Product Images(チェック柄のショートドレス、新しいタブで開きます) ドキュメントに記載のProduct Imagesブロックの設定

Product Meta すべてのプランに含まれています

商品メタ情報カードを表示します:SKU、カテゴリー、タグ。

ライブで確認:Product Meta(チェック柄のショートドレス、新しいタブで開きます) ドキュメントに記載のProduct Metaブロックの設定

Product Price すべてのプランに含まれています

セール価格や通貨書式を含め、WooCommerceの商品価格を表示します。

ライブで確認:Product Price(チェック柄のショートドレス、新しいタブで開きます) ドキュメントに記載のProduct Priceブロックの設定

Product Rating すべてのプランに含まれています

現在のWooCommerce商品の星評価と、必要に応じてレビュー件数を表示します。

ライブで確認:Product Rating(チェック柄のショートドレス、新しいタブで開きます) ドキュメントに記載のProduct Ratingブロックの設定

Product Share すべてのプランに含まれています

現在のWooCommerce商品について、SNSで共有するためのリンクを含む「Share:」カードを表示します。

ライブで確認:Product Share(チェック柄のショートドレス、新しいタブで開きます) ドキュメントに記載のProduct Shareブロックの設定

Product Short Description すべてのプランに含まれています

商品の短い説明を、段落の構造をそのまま保って表示します。

ライブで確認:Product Short Description(チェック柄のショートドレス、新しいタブで開きます) ドキュメントに記載のProduct Short Descriptionブロックの設定

Product Tabs すべてのプランに含まれています

WooCommerceの商品データタブ(説明、追加情報、レビュー)を表示します。

ライブで確認:Product Tabs(チェック柄のショートドレス、新しいタブで開きます) ドキュメントに記載のProduct Tabsブロックの設定

商品 すべてのプランに含まれています

WooCommerceの商品を、グリッドまたはリスト形式で表示します。ソース、カテゴリー、タグ、並び順で絞り込めます。

ライブで確認:商品(商品、新しいタブで開きます) ドキュメントに記載の商品ブロックの設定

Related Products すべてのプランに含まれています

現在の商品に関連する WooCommerce 商品のグリッドを表示します。単一商品テンプレートでのみ表示されます。

ライブで確認:Related Products(チェック柄のショートドレス、新しいタブで開きます) ドキュメントに記載のRelated Productsブロックの設定

Variation Swatches すべてのプランに含まれています

可変商品のバリエーションを選択する、カラーのドットやボタン型のピル。

ライブで確認:Variation Swatches(ピンクのプリントドレス、新しいタブで開きます) ドキュメントに記載のVariation Swatchesブロックの設定

ヘッダー

22個のブロックが、ブロック挿入ツールの「ヘッダー」の下に一覧表示されます。

App Menu 無料

小型デバイスで画面下部に固定される、アプリ風のナビゲーションバーです。

ライブで確認:App Menu(メニュー - App Style 1、新しいタブで開きます) ドキュメントに記載のApp Menuブロックの設定

Color Scheme Toggle 無料

訪問者向けのダークモード切り替えです。テーマオプション > Color Scheme > Dark Mode で Dark Mode Switch がオンになっていて、表示位置にヘッダーを含む設定の場合に、サイトに表示されます。

ドキュメントに記載のColor Scheme Toggleブロックの設定

Header Button 無料

作成したヘッダーに配置する、テーマのボタンクラスでスタイルを整えた行動喚起ボタン/リンクです。

ライブで確認:Header Button(ホーム、新しいタブで開きます) ドキュメントに記載のHeader Buttonブロックの設定

Header Cart 無料

作成したヘッダー用のWooCommerceミニカートアイコンとドロップダウン。WooCommerceが無効の場合は何も表示されません。

ライブで確認:Header Cart(ホーム、新しいタブで開きます) ドキュメントに記載のHeader Cartブロックの設定

Header Container 無料

ビルドしたヘッダーのルートです。ロゴ、ナビゲーションなどのヘッダーパーツをその中にドロップします。

ライブで確認:Header Container(イタリアンレストラン、新しいタブで開きます) ドキュメントに記載のHeader Containerブロックの設定

Header Icon Link 無料

構築済みのヘッダー用の、アイコンのみの単一のリンクです(ウィッシュリスト、アカウント、ユーザー、カートトリガー、ログインモーダル)。.header-misc-icon のマークアップを使用します。

ライブで確認:Header Icon Link(ヘッダーSaaS、新しいタブで開きます) ドキュメントに記載のHeader Icon Linkブロックの設定

Header Info 無料

作成したヘッダーで使用する、小さなインラインの情報・連絡先要素です。電話番号、メール、営業時間、テキストを表示でき、任意でアイコンとリンクを追加できます。

ライブで確認:Header Info(Menu - Style 7、新しいタブで開きます) ドキュメントに記載のHeader Infoブロックの設定

Header Logo 無料

構築したヘッダーのサイトロゴです。初期設定ではテーマオプションのサイトロゴを使用し、任意の画像で上書きすることもできます。

ライブで確認:Header Logo(イタリアンレストラン、新しいタブで開きます) ドキュメントに記載のHeader Logoブロックの設定

Header Navigation 無料

構築したヘッダーのメインナビゲーションメニューです。メニューと配置を選択します。

ライブで確認:Header Navigation(イタリアンレストラン、新しいタブで開きます) ドキュメントに記載のHeader Navigationブロックの設定

Header Root 無料

構築したヘッダーの最も外側の要素です。バリエーション用のクラスと、テーマのスティッキーヘッダースクリプトが読み取る data-sticky-* 属性を保持します。#header-wrap グループ(およびその他のヘッダーコンテンツ)をこの内側に配置してください。

ライブで確認:Header Root(ホーム、新しいタブで開きます) ドキュメントに記載のHeader Rootブロックの設定

Header Search 無料

ヘッダー検索の切り替えです。テーマの検索ドロップダウンに接続されている #top-search トリガーを出力します。

ライブで確認:Header Search(ホーム、新しいタブで開きます) ドキュメントに記載のHeader Searchブロックの設定

Header Shop Search 無料

ヘッダー行に常に表示される商品検索フィールドです。ストアやディレクトリで、ヘッダー検索トグルの代わりに使えます。アイコンのみが表示された状態のシンプルなフィールド、または送信ボタン付きの入力グループから選択できます。

ライブで確認:Header Shop Search(ヘッダーディレクトリ、新しいタブで開きます) ドキュメントに記載のHeader Shop Searchブロックの設定

Header Side Panel Trigger 無料

サイドパネルを開くヘッダーアイコンです。テーマオプションでサイドパネルが有効になっている間のみ表示されます。

ドキュメントに記載のHeader Side Panel Triggerブロックの設定

Header Social 無料

構築済みヘッダー用の、ソーシャルまたは連絡先のアイコンリンクを一列に並べたものです。top-socialのマークアップとスタイルを使用します。

ライブで確認:Header Social(オンラインファッションストア - ショップサイドバー、新しいタブで開きます) ドキュメントに記載のHeader Socialブロックの設定

Header Topbar 無料

構築済みヘッダーの上にある細いユーティリティ行(#top-bar)です。Top Links、Header Social、Header Info、Language Switcherのいずれかを内部に配置できます。

ドキュメントに記載のHeader Topbarブロックの設定

Header Wishlist 無料

ヘッダーに表示されるハートのアイコンで、ウィッシュリストへリンクし、保存されている商品数も表示します。

ドキュメントに記載のHeader Wishlistブロックの設定

Header Zone 無料

Header Containerの行内に配置する配置用スロットです。ロゴ、ナビゲーション、またはヘッダー部品をまとめたものを内側にドロップし、配置・順序・表示設定のフィールドで位置を調整します。

ライブで確認:Header Zone(イタリアンレストラン、新しいタブで開きます) ドキュメントに記載のHeader Zoneブロックの設定

Icon Nav List 無料

オフキャンバスメニューパネルで使われる、縦方向のBootstrap .nav アイコンリンクリスト(nav-item > nav-link > アイコン + テキスト)。

ライブで確認:Icon Nav List(ユーザープロフィール、新しいタブで開きます) ドキュメントに記載のIcon Nav Listブロックの設定

Language Switcher 無料

構築したヘッダーに配置するコンパクトな言語ドロップダウン。現在の言語を表示し、他の言語を一覧表示します。primary-menu with-arrows のマークアップを使用します。

ドキュメントに記載のLanguage Switcherブロックの設定

Mega Menu Column すべてのプランに含まれています

1つのメガメニュー列(.mega-menu-column)には、見出しとリンクリスト、フラットなリンク、自由なウィジェットコンテンツのいずれかを入れられます。1つ以上をRowブロックの中に配置して、メガメニューのコンテンツとして使用します(外観 > メニュー > メガメニューでは、外側のパネルの種類とスタイルを引き続き設定します)。

ライブで確認:Mega Menu Column(メガメニュー、新しいタブで開きます) ドキュメントに記載のMega Menu Columnブロックの設定

Page Menu 無料

固定表示やサイドドット表示のバリエーションを備えた、サブヘッダー用のページナビゲーションバーです。1ページ内のアンカースクロールまたは通常のリンクを使用できます。1ページに1つだけ使用してください。

ライブで確認:Page Menu(サブメニュー付きページ、新しいタブで開きます) ドキュメントに記載のPage Menuブロックの設定

Top Links 無料

トップバーのリンクメニュー。任意で1階層のドロップダウンを追加でき、.top-linksのマークアップとスタイルを使用します。

ライブで確認:Top Links(オンラインファッションストア - ショップサイドバー、新しいタブで開きます) ドキュメントに記載のTop Linksブロックの設定

レイアウト

19個のブロックは、ブロックインサーターの「レイアウト」に一覧表示されます。

カラム 無料

レスポンシブグリッドの列(.col-*)。ブレークポイントごとに幅を設定し、任意のコンテンツを配置できます。

ライブで確認:カラム(カラムとグリッド、新しいタブで開きます) ドキュメントに記載のカラムブロックの設定

コンテナ 無料

レスポンシブ対応の.containerラッパーです。内側に行と列を配置して、セクションのレイアウトを組み立てます。

ドキュメントに記載のコンテナブロックの設定

Copyrights 無料

フッターの著作権バーの一部です。リンク付きの著作権表示行、またはインラインのリンクメニューのいずれかです。両方を並べて配置するには、Wrapperの「Copyrights Bar」バリエーションを挿入します。

ライブで確認:Copyrights(フッター - レイアウト2、新しいタブで開きます) ドキュメントに記載のCopyrightsブロックの設定

Footer About 無料

ロゴ、説明、(任意)住所を含むフッターの「About」列です。.footer-logoのマークアップを使用します。

ライブで確認:Footer About(フッター - レイアウト2、新しいタブで開きます) ドキュメントに記載のFooter Aboutブロックの設定

フッター連絡先 無料

ラベル/値の形式の大きな連絡先行。.footer-big-contactsのマークアップとスタイルを使用します。

ライブで確認:フッター連絡先(フッター - レイアウト3、新しいタブで開きます) ドキュメントに記載のフッター連絡先ブロックの設定

Footer Instagram 無料

フッターのInstagram/フォトストリームウィジェット:任意でリンクを設定できる画像のメーソンリーグリッドを表示します。マークアップには.masonry-thumbsを使用します。

ライブで確認:Footer Instagram(フッター - レイアウト4、新しいタブで開きます) ドキュメントに記載のFooter Instagramブロックの設定

Footer Widget Area 無料

フッターウィジェットの行を組み立てるルート要素です。Footer About、Widget Links、Footer Contacts、Subscribe、Footer Instagramの各ブロックをドラッグして内側に配置できます。

ライブで確認:Footer Widget Area(フッター - レイアウト2、新しいタブで開きます) ドキュメントに記載のFooter Widget Areaブロックの設定

Grid Filter すべてのプランに含まれています

Isotope でフィルター可能なグリッドを制御する、カテゴリーフィルターバー(.grid-filter)。項目はタクソノミーまたは手動リストから取得します。

ライブで確認:Grid Filter(ポートフォリオフィルタースタイル、新しいタブで開きます) ドキュメントに記載のGrid Filterブロックの設定

Hero 無料

各ページの Hero パネルで割り当てられた Hero、または選択した1つの Hero を表示します。Hero は Canvas → Heroes で作成します。

ライブで確認:Hero(セクション、新しいタブで開きます) ドキュメントに記載のHeroブロックの設定

Image Element 無料

図版やキャプションで囲まれていない素の画像です。ロゴやバッジなど、ほかのコンテンツと並べて配置するインライン画像に使います。

ライブで確認:Image Element(ホーム、新しいタブで開きます) ドキュメントに記載のImage Elementブロックの設定

Inline Contact 無料

アイコンとテキストからなる連絡先項目(メール、電話、Skypeなど)を、中黒(・)区切りでフラットに並べたインライン表示です。#copyrightsバーの連絡先行に使います。

ライブで確認:Inline Contact(お問い合わせ、新しいタブで開きます) ドキュメントに記載のInline Contactブロックの設定

Inline Text 無料

コンテナ内に直接置かれ、独自の段落やspanを持たないテキストのまとまりです。インライン要素のみが対象です。

ライブで確認:Inline Text(全幅レイアウト、新しいタブで開きます) ドキュメントに記載のInline Textブロックの設定

Line Break 無料

スペーシングに使う単一の改行。詳細パネルでレスポンシブ用のクラスを追加すると、特定の画面サイズでのみ行を改行できます。

ライブで確認:Line Break(Hover Parallax、新しいタブで開きます) ドキュメントに記載のLine Breakブロックの設定

ページタイトル 無料

各ページでヘッダーの下に表示されるページタイトルのバンドを表示します。ページごとのページタイトルパネルとテーマオプションで設定した内容が反映されます。バンド自体はページタイトルのテンプレートパーツです。

ライブで確認:ページタイトル(ページタイトル左揃えレイアウト、新しいタブで開きます) ドキュメントに記載のページタイトルブロックの設定

Quantity Input 無料

.quantity ステッパー:マイナス・プラスボタンで挟まれた数値入力欄です。商品に依存しない汎用的な部品で、「カートに入れる」の行を作るにはボタンと組み合わせて使います。

ライブで確認:Quantity Input(カート数量、新しいタブで開きます) ドキュメントに記載のQuantity Inputブロックの設定

Row 無料

グリッドの行です。内部に Canvas Column ブロックを配置すると、レスポンシブなグリッドでコンテンツをレイアウトできます。

ライブで確認:Row(カラムとグリッド、新しいタブで開きます) ドキュメントに記載のRowブロックの設定

Page Slider 無料

各ページのSliderパネルで割り当てたスライダー、または選択した1つのスライダーを表示します。スライド、エフェクト、高さはスライダー自体で設定します。

ライブで確認:Page Slider(Canvas Slider、新しいタブで開きます) ドキュメントに記載のPage Sliderブロックの設定

Widget Links 無料

フッターのリンクリスト列です。.widget_links のマークアップとスタイルを使用します。

ライブで確認:Widget Links(ウィジェット、新しいタブで開きます) ドキュメントに記載のWidget Linksブロックの設定

Wrapper 無料

指定したクラスのみを持ち、他のブロックを内包する素のHTML要素です。エディター用の余分なクラスを付けずに、正確なラッパー要素が必要なデザインで使用します。

ライブで確認:Wrapper(セクション、新しいタブで開きます) ドキュメントに記載のWrapperブロックの設定

イベント

16 個のブロック。ブロックインサーターの「Events」に一覧表示されます。

Conference Program すべてのプランに含まれています

イベントのレコードから作成される、日別タブ付きのセッションアジェンダ、または今後のイベントカードの一覧。

ライブで確認:Conference Program(Canvas 開発カンファレンス、新しいタブで開きます) ドキュメントに記載のConference Programブロックの設定

Event Archive Grid すべてのプランに含まれています

メインクエリ(アーカイブ + カテゴリ)用のイベントグリッドです。event-entry-gridパーシャルと共通のページネーションを使用します。

ライブで確認:Event Archive Grid(イベント、新しいタブで開きます) ドキュメントに記載のEvent Archive Gridブロックの設定

Event Categories すべてのプランに含まれています

現在のイベントに割り当てられたカテゴリーを表示します。テキスト、バッジ、ピルの各スタイルに対応しています。canvas_event投稿タイプでのみ表示されます。

ドキュメントに記載のEvent Categoriesブロックの設定

Event Content すべてのプランに含まれています

現在のイベントの投稿コンテンツ全体を、the_contentフィルターを通して表示します。canvas_event投稿タイプでのみ表示されます。

ライブで確認:Event Content(Event Single、新しいタブで開きます) ドキュメントに記載のEvent Contentブロックの設定

Event Date すべてのプランに含まれています

イベントの開始日と終了日を、任意で時刻とカレンダーアイコン付きで表示します。canvas_eventの投稿タイプでのみ表示されます。

ドキュメントに記載のEvent Dateブロックの設定

Event Excerpt すべてのプランに含まれています

現在のイベントの短縮された抜粋を表示します。

ドキュメントに記載のEvent Excerptブロックの設定

Event Image すべてのプランに含まれています

現在のイベントのアイキャッチ画像を表示します。canvas_event投稿タイプでのみ表示されます。

ライブで確認:Event Image(Event Single、新しいタブで開きます) ドキュメントに記載のEvent Imageブロックの設定

Event Location すべてのプランに含まれています

イベント会場の名称と住所を表示します。任意でGoogle マップへのリンクと位置情報アイコンを追加できます。canvas_event 投稿タイプでのみ表示されます。

ドキュメントに記載のEvent Locationブロックの設定

Event Meta すべてのプランに含まれています

イベントのメタデータ(日付、場所、主催者、料金)を表示します。各項目は個別に表示・非表示を切り替えられます。canvas_eventの投稿タイプでのみ表示されます。

ライブで確認:Event Meta(イベント詳細 | 両側サイドバー、新しいタブで開きます) ドキュメントに記載のEvent Metaブロックの設定

Event Navigation すべてのプランに含まれています

前後のイベントへのナビゲーションリンクを表示します。ラベルは設定でき、サムネイルは任意で表示できます。canvas_eventの投稿タイプでのみ表示されます。

ライブで確認:Event Navigation(イベント詳細 | 両側サイドバー、新しいタブで開きます) ドキュメントに記載のEvent Navigationブロックの設定

Event Organizer すべてのプランに含まれています

イベント主催者を表示します。主催者のWebサイトへのリンク(任意)と人物アイコンが付きます。canvas_event 投稿タイプでのみ表示されます。

ドキュメントに記載のEvent Organizerブロックの設定

Event Posts すべてのプランに含まれています

canvas_event投稿を、レスポンシブなカードグリッドで取得して表示します。開催予定、過去、またはすべてのイベントでの絞り込みに対応します。任意のページに配置できます。

ライブで確認:Event Posts(イベント一覧、新しいタブで開きます) ドキュメントに記載のEvent Postsブロックの設定

Event Price すべてのプランに含まれています

イベントの価格を表示します。価格が未設定の場合は、設定で変更できる無料ラベルを表示します。テキストとバッジのスタイルに対応しています。canvas_event 投稿タイプでのみ表示されます。

ドキュメントに記載のEvent Priceブロックの設定

Related Events すべてのプランに含まれています

共通のカテゴリに基づいて関連イベントのグリッドを表示します。canvas_event投稿タイプでのみ表示されます。

ライブで確認:Related Events(Spring Music Fest、新しいタブで開きます) ドキュメントに記載のRelated Eventsブロックの設定

Event Title すべてのプランに含まれています

現在のイベントタイトルを、設定可能な見出しタグの中に表示します。パーマリンクへのリンクを任意で付けられます。canvas_event投稿タイプでのみ表示されます。

ドキュメントに記載のEvent Titleブロックの設定

Events Calendar すべてのプランに含まれています

イベントを月単位のグリッドで表示するカレンダーです。前月・翌月・今日に移動するコントロールがあり、各日付から、その日に開催されるイベントにリンクできます。

ライブで確認:Events Calendar(Events Calendar、新しいタブで開きます) ドキュメントに記載のEvents Calendarブロックの設定

ポートフォリオ

8個のブロックが、ブロック挿入ツールの「Portfolio」の下に一覧表示されます。

Portfolio Archive Grid すべてのプランに含まれています

メインクエリ(アーカイブとカテゴリー)用のポートフォリオグリッド。portfolio-entry-gridパーシャルと#portfolioオーバーレイグリッドを使用します。

ライブで確認:Portfolio Archive Grid(ポートフォリオ、新しいタブで開きます) ドキュメントに記載のPortfolio Archive Gridブロックの設定

Portfolio Categories すべてのプランに含まれています

現在のポートフォリオ案件に割り当てられたタクソノミーカテゴリーを表示します。ポートフォリオの個別テンプレート内で使用してください。

ライブで確認:Portfolio Categories(Meridian Brand Identity、新しいタブで開きます) ドキュメントに記載のPortfolio Categoriesブロックの設定

Portfolio Content すべてのプランに含まれています

現在のポートフォリオのプロジェクトの全コンテンツを表示します。ポートフォリオの個別テンプレート内で使用します。

ライブで確認:Portfolio Content(Imagination を開く、新しいタブで開きます) ドキュメントに記載のPortfolio Contentブロックの設定

Portfolio Image すべてのプランに含まれています

現在のポートフォリオ案件のメディア領域を表示します。注目画像、ギャラリースライダー、案件動画、サムネイルグリッドのいずれかを表示します。ポートフォリオの個別テンプレート内で使用してください。

ライブで確認:Portfolio Image(Imagination を開く、新しいタブで開きます) ドキュメントに記載のPortfolio Imageブロックの設定

Portfolio Meta すべてのプランに含まれています

ポートフォリオのプロジェクト詳細(クライアント、日付、スキル、URL)を表示します。ポートフォリオの個別テンプレート内で使用します。

ライブで確認:Portfolio Meta(Imagination を開く、新しいタブで開きます) ドキュメントに記載のPortfolio Metaブロックの設定

Portfolio Navigation すべてのプランに含まれています

前後のポートフォリオ案件へのナビゲーションリンクを表示します。ポートフォリオの個別テンプレート内で使用します。

ライブで確認:Portfolio Navigation(Imagination を開く、新しいタブで開きます) ドキュメントに記載のPortfolio Navigationブロックの設定

Portfolio Related すべてのプランに含まれています

共通のカテゴリーに基づいて、関連するポートフォリオのプロジェクトを表示します。ポートフォリオの個別テンプレート内で使用します。

ライブで確認:Portfolio Related(Imagination を開く、新しいタブで開きます) ドキュメントに記載のPortfolio Relatedブロックの設定

Portfolio Title すべてのプランに含まれています

現在のポートフォリオプロジェクトのタイトルを表示します。ポートフォリオの個別テンプレート内で使用してください。

ライブで確認:Portfolio Title(Meridian Brand Identity、新しいタブで開きます) ドキュメントに記載のPortfolio Titleブロックの設定

フォーム

5個のブロックがブロックインサーターの「Forms」に表示されます。

Form すべてのプランに含まれています

動作するフォームです。内部にForm Fieldブロックと Form Submit Buttonブロックを配置してください。送信内容は検証、保存、メール送信されます。

ライブで確認:Form(フォームスタイル、新しいタブで開きます) ドキュメントに記載のFormブロックの設定

Form Embed すべてのプランに含まれています

フォームIDを選択することで、Canvasのフォームをサイト内の任意の場所に埋め込めます。

ライブで確認:Form Embed(ショップ一覧、新しいタブで開きます) ドキュメントに記載のForm Embedブロックの設定

Form Field すべてのプランに含まれています

単一のフォーム入力欄です。Canvas Formの内部で使用し、ユーザーの入力を収集します。

ライブで確認:Form Field(フォーム要素、新しいタブで開きます) ドキュメントに記載のForm Fieldブロックの設定

Form Submit Button すべてのプランに含まれています

Canvas フォームの送信ボタンです。スタイルのバリエーション、サイズ、全幅表示、アイコンに対応しています。

ライブで確認:Form Submit Button(フォームスタイル、新しいタブで開きます) ドキュメントに記載のForm Submit Buttonブロックの設定

Quick Contact すべてのプランに含まれています

「Quick Quotation」のコンパクトなお問い合わせフォームのウィジェットです(名前/メール/メッセージ)。Canvas のフォーム CSS でスタイル設定されています。

ライブで確認:Quick Contact(ウィジェット、新しいタブで開きます) ドキュメントに記載のQuick Contactブロックの設定

デモ専用ブロック

デモとともに導入される105ブロック

一部のデザインには、そのデザイン内でしか意味を持たないブロックが必要です。これらのブロックは常に登録されるため、インポートしたデモは今後もずっと表示され続けますが、必要としていないサイトではブロックインサーターに表示されません。

投稿 72

Academic Posts, Album Tiles, Architecture Projects, Architecture Team, Arrangement Gallery, Artist Bubbles, Bakery Menu, Barber Items, and 64 more.

72件の Posts ブロックをすべて見る
学術投稿、アルバムタイル、建築プロジェクト、建築チーム、アレンジメントギャラリー、アーティストバブル、ベーカリーメニュー、バーバーアイテム、ビューティーキット、バイクレンタル、記帳代行サービス、ボットテンプレート、ブランディングエージェンシー制作実績、ブランディングスタジオ制作実績、カフェメニュー、キャンペーン、強みグリッド、ケアサービス、活動、チャンネル動画、クリーナーチーム、クリーニングサービス、カンファレンススピーカー、カンファレンススポンサー、コワーキングスペース、クリエイターショーケース、クロスフィットクラス、クロスフィットワークアウト、歯科チーム、歯科施術、医師、不動産物件、イベントスケジュール、イベントスピーカー、イベントスピーカー、フェスティバルラインナップ、フードトラックメニュー、サッカークラブニュース、ゲーミング試合、ヘッドフォン製品、ヘッドフォンストア、ホステルルーム、保険補償、幼稚園ニュース、幼稚園プログラム、ライフスタイルエピソード、ライフスタイル投稿、ローンプログラム、武道の種目、医療の診療科、医療の専門分野、医療の医師、メニューアイテム、引っ越し業者の投稿、引っ越しサービス、NFTアイテム、ペットサービス、フォトグラファーのショット、プラットフォームモジュール、ポッドキャストエピソード、レシピアイテム、レジデンス、個人建築家の制作実績、スパ施術、テニスニュース、テニストーナメント、セラピー施術、トラックコレクション、旅行ホテル、旅行パッケージ、ワインテイスティング、ヨガクラス。

WooCommerce 10

Channel Merch, Event Passes, Fashion Cart Part, Fashion Product Part, Fashion Products, Gear Products, Illustrator Prints, Lifestyle Picks, Store Products, eCommerce Products.

コンテンツ 7

記事カード、ファイナンス計算機、フォーラムのディスカッション、フォーラムメンバー、フォーラムのトピック、レシピカテゴリー、賃貸計算機。

インタラクティブ6

オーディオプレーヤーバー、設定オプション、ドメイン検索、ホスト価格、ホストスライダー、トラック再生ボタン。

Canvas 4

歯科FAQ、ドットグリッド背景、ライブ取引フィード、バーチャルカード。

ヘッダー3

Forum Header Dropdown, Forum Search Overlay, Photographer Menu.

ポートフォリオ 3

Motion Works, Portfolio Grid, Videographer Works.

Canvas テーマオプションの「Blocks」セクション。Canvasが登録するすべてのブロックを一覧表示し、各ブロックの横にチェックボックスがあります。

テーマオプションには、Canvas が登録するすべてのブロックが、デモ専用のものを含めて一覧表示されます。各ブロックには切り替えスイッチがあり、オフにするとブロック挿入ツールから除外され、フロントエンドのアセットの読み込みも停止します。

デモをインポートすると、そのブロックが作成されたページに表示され、完全に編集可能になります。他のCanvasブロックと同じ設定パネルも使えます。デモを元に戻すと、ブロックも一緒に削除されます。

共通コントロール

すべてのブロックに共通する項目

Canvasが登録するすべてのブロックには7つの設定があり、そのうち最初の4つは、当社のブロックだけでなく、WordPressのコアブロックやサードパーティ製ブロックにも設定されます。エディターに追加されるためです。

設定パネルを開いたサイドバーとともに、WordPressエディターで選択されたCanvasブロック

選択したブロックのサイドバーです。訪問者に見えるものはすべてここで調整できるため、開くコードビューはありません。

アニメーション

ブロックがビューポートに入ると表示され、速度、遅延、任意の退場アニメーションを設定できます。モーションは、訪問者の「動きを減らす」設定を尊重します。

カスタムCSS

コアの設定項目で希望の表現ができない場合は、個々のブロックインスタンスに対してCSSを記述できます。そのCSSはそのブロックにのみ適用され、ページに出力される前にフィルタリングされます。

カスタム属性

サイドバーから、ブロックのルート要素にデータ属性やARIA属性を追加できます。これにより、サードパーティのスクリプトやテストハーネスから要素を見つけられるようになります。

表示条件

ログイン状態、ユーザー権限、デバイスの画面サイズ、テーマオプションの値によって、ブロックの表示と非表示を切り替えられます。そのため、1つのページで複数の対象者に対応できます。

ブロックの初期設定

ブロックを好みの設定で一度構成し、その設定を、以降このサイトに挿入するすべてのブロックのデフォルトとして保存できます。

グローバルスタイルプリセット

名前を付けてスタイルを保存し、サイト内のどのブロックにも適用できます。後からプリセットを変更すると、それを使用しているすべてのブロックも一緒に変わります。

ブロックごとのアセット読み込み

ページは実際に表示するブロックのCSSとJavaScriptだけを読み込むため、スライダーのないページはスライダー用スクリプトをダウンロードしません。

セクションから始める

183種類のブロックパターン

パターンは、完成したセクションを通常のブロックとしてページに追加し、そのあとで編集できます。内部に生のHTMLはないため、見出し、画像、アイコン、リンクはすべてサイドバーで操作できる項目のままです。

パターンは挿入ツール内で17個のカテゴリーに分けられています:

  • ヘッダー
  • コンテンツ
  • フォーム
  • フッター
  • ブログ
  • Hero
  • Gallery
  • コールトゥアクション
  • 料金
  • ページ
  • 機能
  • イベント
  • ポップアップ
  • ソーシャル
  • Testimonials
  • ポートフォリオ
  • よくある質問

パターンはロックされるのではなくラベルで区別されます。プレミアムパターンはラベル付きでインサーターに表示され、内部のブロックが無料のものであれば、そのまま完全に表示されます。テーマに同梱されている173件のブロックテンプレートと4件のスタイルバリエーションも、サイトエディターで同じように動作します。

すべてのブロックを両プランで

上位プランへ段階的に進む必要はありません。年間と買い切りのどちらでも、同じ314個のブロック、同じ183個のパターン、同じ88個のデモが提供されます。