WordPressブロックエディター向けの314個のブロック
本物のブロックに本物の設定パネルが付いており、WordPressのインサーターから挿入できます。ショートコードも独自のキャンバスも、覚える別のエディターもありません。訪問者に見えるものはすべて、サイドバーのコントロールで編集できます。
更新日:
今すぐ挿入できるブロック209種類
ファミリーで絞り込むか、名前、キーワード、ブロックの機能で検索できます。プレミアムブロックには印が付いており、すべてのプランにそれらすべてが含まれます。

WordPress 標準のインサーターに、コアブロックの下に Canvas のファミリーが表示されます。ショートコードは使用せず、別のエディターも開きません。
209件をすべて表示
投稿
31件のブロックは、ブロックインサーターの「投稿」の下に表示されます。
Academic Works 無料
学術系デザインに沿って表示されるポートフォリオ項目:書籍の一覧、ジャーナル論文のカード、そして各ページの詳細情報。
Agency Works 無料
ポートフォリオのプロジェクトを、エージェンシー風のカルーセルまたはグリッドで表示したり、単一のプロジェクトページ(属性、問い合わせCTA、関連プロジェクト)を表示したりできます。
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用です。
Construction Projects 無料
Projects 投稿タイプのプロジェクトをポートフォリオグリッド(2〜5列)として表示するか、単一のプロジェクトページ(属性、お問い合わせCTA、関連プロジェクト)を描画します。
Illustrator Works 無料
ポートフォリオの項目を、色付きの枠を持つ正方形カードのフィルター可能なグリッドで表示したり、個別のプロジェクトページの各パーツとして表示したりできます。
Interior Projects 無料
Projects投稿タイプのスタジオ制作事例を、絞り込み可能なポートフォリオグリッドとして表示します。または、単一の制作事例ページ(詳細サイドバー、相談CTA、関連プロジェクト)を表示します。
Law Firm Cases 無料
Portfolio投稿タイプの事例をカードとして表示したり、単一の事例ページ(属性、お問い合わせCTA、関連事例)を表示したりできます。
Photo Shots 無料
Shots投稿タイプの写真を展開式のプレビューグリッドで表示したり、単一のショットページ(フレーム、撮影情報、問い合わせCTA、関連ショット)を表示したりします。
Post Archive Index 無料
日付とタイトルを表示するすべてのレコードを、必要に応じて年と月でグループ化します。「公開したものすべて」のインデックスです。
Post Author 無料
アバター、表示名、経歴の説明を含む、現在の投稿者プロフィールカードを表示します。
ライブで確認:Post Author(スロー・ウェブ:最高の読書体験がなぜ静かになりつつあるのか、新しいタブで開きます) ドキュメントに記載のPost Authorブロックの設定
Post Comments 無料
コメント一覧と送信フォームを含む、WordPress のコメントテンプレートを表示します。
ライブで確認:Post Comments(スロー・ウェブ:最高の読書体験がなぜ静かになりつつあるのか、新しいタブで開きます) ドキュメントに記載のPost Commentsブロックの設定
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 Navigation 無料
現在の投稿の前後の投稿へのナビゲーションリンクを表示します。
ライブで確認:Post Navigation(スロー・ウェブ:最高の読書体験がなぜ静かになりつつあるのか、新しいタブで開きます) ドキュメントに記載のPost Navigationブロックの設定
Post Read More 無料
現在の投稿のパーマリンクへ向かう「続きを読む」リンクまたはボタンを表示します。
ライブで確認:Post Read More(ホーム、新しいタブで開きます) ドキュメントに記載のPost Read Moreブロックの設定
Post Reading Bar 無料
現在の投稿について、読了時間、文字サイズ、印刷、シェアとスクロールのコントロールを表示します。
ライブで確認:Post Reading Bar(プレビュー画像付きの標準投稿、新しいタブで開きます) ドキュメントに記載のPost Reading Barブロックの設定
Post Reading Time 無料
記録の本文から計算した、読了までの推定時間です。
ライブで確認:Post Reading Time(スロー・ウェブ:最高の読書体験がなぜ静かになりつつあるのか、新しいタブで開きます) ドキュメントに記載のPost Reading Timeブロックの設定
Post Related 無料
現在の投稿と同じカテゴリの関連投稿を、グリッド形式で表示します。
ライブで確認:Post Related(スロー・ウェブ:最高の読書体験がなぜ静かになりつつあるのか、新しいタブで開きます) ドキュメントに記載のPost Relatedブロックの設定
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、関連プロジェクト)を表示したりします。
コンテンツ
30件のブロック。ブロックインサーターの「コンテンツ」に一覧表示されます。
Background Video / Audio 無料
ヒーロー、セクション背景、デザインされたプレーヤーに使用できる、自己ホスト型のループ再生動画または音声レイヤーです。メディア要素のみを出力するため、配置を決めるラッパーはご自身で管理できます。
ライブで確認:Background Video / Audio(メディアアクション、新しいタブで開きます) ドキュメントに記載のBackground Video / Audioブロックの設定
Cascading Images すべてのプランに含まれています
画像ごとの移動、回転、拡大縮小、z-index、アニメーション遅延、任意の装飾用背景シェイプを使った、レイヤー構成の画像レイアウト。
ライブで確認:Cascading Images(Cascading Images、新しいタブで開きます) ドキュメントに記載のCascading Imagesブロックの設定
チャート すべてのプランに含まれています
用意したデータセットからチャートを描画し、レポートや価格比較の数値をひと目で読み取れるようにします。チャートの種類、データ、ラベルはすべて入力した設定から決まります。
Circle Stack すべてのプランに含まれています
円形のアバター、アイコン、テキストバッジを横に並べて表示します。チームの紹介、ソーシャルプルーフ、フォロワー数の表示に最適です。
ライブで確認:Circle Stack(Circle Stacks、新しいタブで開きます) ドキュメントに記載のCircle Stackブロックの設定
クライアント 無料
クライアント、パートナー、ブランドのロゴを、レスポンシブグリッドまたはowl-carouselで表示します。任意でリンクやライトボックスに対応します。
Data Table すべてのプランに含まれています
仕様一覧やプラン比較など、構造化された情報を行と列で配置します。訪問者が並べ替えられる列見出しと、任意で末尾に表示できる要約行を備えています。
ライブで確認:Data Table(ユーザープロフィール、新しいタブで開きます) ドキュメントに記載のData Tableブロックの設定
Map 無料
Google MapsまたはOpenStreetMapの地図です。カスタムマーカー、ズームレベル、Google Mapsでは地図タイプとスタイルの上書きに対応しています。
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ブロックの設定
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 無料
ホバーエフェクトとオプションのキャプションを備えた画像サムネイルグリッド。ライトボックスとリンクオーバーレイに対応。
Ticker 無料
項目、方向、速度、スタイルを設定できる、スクロールするお知らせティッカーです。
Twitter Feed 無料
ページの読み込み時に取得される、アカウントの最新ツイートを切り替え表示するフィードです。表示するアカウント、表示件数、ウィジェットのレイアウトを選択できます。
ライブで確認:Twitter Feed(ウィジェット、新しいタブで開きます) ドキュメントに記載のTwitter Feedブロックの設定
Canvas
29個のブロック。ブロックインサーターの Canvas の下に一覧表示されます。
Alert 無料
Bootstrapのalert、またはCanvasのstyle-msgシステムを使用したアラートと通知ボックスです。塗りつぶし、枠線付き、拡張版のバリエーションに対応し、任意でアイコンと閉じるボタンを追加できます。
ボタン 無料
スタイルのバリエーション、サイズ、形状、色、アイコン、ホバーエフェクト、シャドウ設定を備えた、フル機能のボタンです。
Code Highlight すべてのプランに含まれています
Prism.jsによる構文ハイライト付きのコードブロックです。15以上の言語に対応し、オプションでクリップボードへのコピーボタンを追加できます。
ライブで確認:Code Highlight(コードハイライター、新しいタブで開きます) ドキュメントに記載のCode Highlightブロックの設定
カウンター 無料
アイコン、接頭辞・接尾辞、キャプションラベルを備えた、アニメーション付きの数値カウンターです。
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 Breadcrumbs 無料
現在のページや投稿のパンくずリスト(ホーム > 親 > 現在)を表示します。
ライブで確認:Page Title Breadcrumbs(ページタイトル左揃えレイアウト、新しいタブで開きます) ドキュメントに記載のPage Title Breadcrumbsブロックの設定
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 無料
太字の数値と短いラベルの組み合わせを並べたリストです。経験年数、ローンチ数、受賞歴などに使えます。
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 無料
マソンリーレイアウト対応、列数の設定、間隔の調整、オプションのライトボックスに対応した画像ギャラリー。
Cookie Consent 無料
プライバシー設定モーダルとサービスごとの同意トグルを備えたクッキー同意バー。
ライブで確認:Cookie Consent(GDPR Layout 2、新しいタブで開きます) ドキュメントに記載のCookie Consentブロックの設定
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階層のドロップダウンに対応。
Off-Canvas 無料
ボタンまたはリンクで開く、Bootstrap 5 のオフキャンバス・スライドパネル(開始・終了・上・下)。
ライブで確認:Off-Canvas(Bootstrap Off-Canvas、新しいタブで開きます) ドキュメントに記載のOff-Canvasブロックの設定
ページネーション 無料
ページネーションの行です。円形、角丸、ピル型、3D、透明、ボタンのいずれかのスタイルで、3つのサイズと任意の配置に対応します。
ライブで確認:ページネーション(Paginations & Progress Bars、新しいタブで開きます) ドキュメントに記載のページネーションブロックの設定
Parallax Image すべてのプランに含まれています
オーバーレイとコンテンツを任意で備えた、全幅のパララックス画像セクションです。
ライブで確認:Parallax Image(パララックス要素、新しいタブで開きます) ドキュメントに記載のParallax Imageブロックの設定
Slider すべてのプランに含まれています
Canvas Slider を選択すると、サイトの任意の場所に埋め込めます。スライド、エフェクト、ナビゲーション、高さは、スライダー自体で設定します。
ライブで確認:Slider(ホーム・リビング&インテリアデコレーション、新しいタブで開きます) ドキュメントに記載のSliderブロックの設定
Tab Strip 無料
パネルの内容が、ページ内の他の通常のブロックで構成されるタブストリップです。
ライブで確認:Tab Strip(ユーザープロフィール、新しいタブで開きます) ドキュメントに記載のTab Stripブロックの設定
タブ 無料
関連するコンテンツを見出し付きのタブに分けて、訪問者が一度に1つのセクションだけを読めるようにします。これにより、長い比較ページや仕様ページも、ざっと確認できる長さに保てます。
Text Fill Scroll すべてのプランに含まれています
要素が画面内にスクロールされると、テキストの色が徐々に塗りつぶされます。
Text Rotator 無料
見出し要素内で、テキストを回転させたり、タイプ入力風にアニメーション表示したりします。
ライブで確認:Text Rotator(見出し・ドロップキャップ、新しいタブで開きます) ドキュメントに記載のText Rotatorブロックの設定
トグル 無料
長い回答や、初期状態でページを占有させたくない用語のセットに便利です。訪問者がクリックして開く見出しの後ろに、コンテンツの一部を隠しておけます。
Video Facade 無料
サムネイル画像の裏で遅延読み込みされる動画埋め込み。iframeはクリック時にのみ読み込まれ、ページを高速化します。
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 無料
現在の商品をお客様のウィッシュリストに保存します。商品テンプレートと商品カードで使用してください。
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 Order Review すべてのプランに含まれています
明細と合計を含む、WooCommerceのチェックアウト注文レビューの概要を表示します。
クロスセル すべてのプランに含まれています
現在の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 がオンになっていて、表示位置にヘッダーを含む設定の場合に、サイトに表示されます。
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 Social 無料
構築済みヘッダー用の、ソーシャルまたは連絡先のアイコンリンクを一列に並べたものです。top-socialのマークアップとスタイルを使用します。
ライブで確認:Header Social(オンラインファッションストア - ショップサイドバー、新しいタブで開きます) ドキュメントに記載のHeader Socialブロックの設定
Header Topbar 無料
構築済みヘッダーの上にある細いユーティリティ行(#top-bar)です。Top Links、Header Social、Header Info、Language Switcherのいずれかを内部に配置できます。
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 のマークアップを使用します。
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-*)。ブレークポイントごとに幅を設定し、任意のコンテンツを配置できます。
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 で作成します。
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 ブロックを配置すると、レスポンシブなグリッドでコンテンツをレイアウトできます。
Page Slider 無料
各ページのSliderパネルで割り当てたスライダー、または選択した1つのスライダーを表示します。スライド、エフェクト、高さはスライダー自体で設定します。
ライブで確認:Page Slider(Canvas Slider、新しいタブで開きます) ドキュメントに記載のPage Sliderブロックの設定
Widget Links 無料
フッターのリンクリスト列です。.widget_links のマークアップとスタイルを使用します。
ライブで確認:Widget Links(ウィジェット、新しいタブで開きます) ドキュメントに記載のWidget Linksブロックの設定
Wrapper 無料
指定したクラスのみを持ち、他のブロックを内包する素のHTML要素です。エディター用の余分なクラスを付けずに、正確なラッパー要素が必要なデザインで使用します。
イベント
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 Content すべてのプランに含まれています
現在のイベントの投稿コンテンツ全体を、the_contentフィルターを通して表示します。canvas_event投稿タイプでのみ表示されます。
ライブで確認:Event Content(Event Single、新しいタブで開きます) ドキュメントに記載のEvent Contentブロックの設定
Event Date すべてのプランに含まれています
イベントの開始日と終了日を、任意で時刻とカレンダーアイコン付きで表示します。canvas_eventの投稿タイプでのみ表示されます。
Event Image すべてのプランに含まれています
現在のイベントのアイキャッチ画像を表示します。canvas_event投稿タイプでのみ表示されます。
ライブで確認:Event Image(Event Single、新しいタブで開きます) ドキュメントに記載のEvent Imageブロックの設定
Event Location すべてのプランに含まれています
イベント会場の名称と住所を表示します。任意でGoogle マップへのリンクと位置情報アイコンを追加できます。canvas_event 投稿タイプでのみ表示されます。
Event Meta すべてのプランに含まれています
イベントのメタデータ(日付、場所、主催者、料金)を表示します。各項目は個別に表示・非表示を切り替えられます。canvas_eventの投稿タイプでのみ表示されます。
ライブで確認:Event Meta(イベント詳細 | 両側サイドバー、新しいタブで開きます) ドキュメントに記載のEvent Metaブロックの設定
Event Navigation すべてのプランに含まれています
前後のイベントへのナビゲーションリンクを表示します。ラベルは設定でき、サムネイルは任意で表示できます。canvas_eventの投稿タイプでのみ表示されます。
ライブで確認:Event Navigation(イベント詳細 | 両側サイドバー、新しいタブで開きます) ドキュメントに記載のEvent Navigationブロックの設定
Event Organizer すべてのプランに含まれています
イベント主催者を表示します。主催者のWebサイトへのリンク(任意)と人物アイコンが付きます。canvas_event 投稿タイプでのみ表示されます。
Event Posts すべてのプランに含まれています
canvas_event投稿を、レスポンシブなカードグリッドで取得して表示します。開催予定、過去、またはすべてのイベントでの絞り込みに対応します。任意のページに配置できます。
ライブで確認:Event Posts(イベント一覧、新しいタブで開きます) ドキュメントに記載のEvent Postsブロックの設定
Event Price すべてのプランに含まれています
イベントの価格を表示します。価格が未設定の場合は、設定で変更できる無料ラベルを表示します。テキストとバッジのスタイルに対応しています。canvas_event 投稿タイプでのみ表示されます。
Related Events すべてのプランに含まれています
共通のカテゴリに基づいて関連イベントのグリッドを表示します。canvas_event投稿タイプでのみ表示されます。
ライブで確認:Related Events(Spring Music Fest、新しいタブで開きます) ドキュメントに記載のRelated Eventsブロックの設定
Event Title すべてのプランに含まれています
現在のイベントタイトルを、設定可能な見出しタグの中に表示します。パーマリンクへのリンクを任意で付けられます。canvas_event投稿タイプでのみ表示されます。
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 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 ブロックをすべて見る
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 が登録するすべてのブロックが、デモ専用のものを含めて一覧表示されます。各ブロックには切り替えスイッチがあり、オフにするとブロック挿入ツールから除外され、フロントエンドのアセットの読み込みも停止します。
デモをインポートすると、そのブロックが作成されたページに表示され、完全に編集可能になります。他のCanvasブロックと同じ設定パネルも使えます。デモを元に戻すと、ブロックも一緒に削除されます。
すべてのブロックに共通する項目
Canvasが登録するすべてのブロックには7つの設定があり、そのうち最初の4つは、当社のブロックだけでなく、WordPressのコアブロックやサードパーティ製ブロックにも設定されます。エディターに追加されるためです。

選択したブロックのサイドバーです。訪問者に見えるものはすべてここで調整できるため、開くコードビューはありません。
アニメーション
ブロックがビューポートに入ると表示され、速度、遅延、任意の退場アニメーションを設定できます。モーションは、訪問者の「動きを減らす」設定を尊重します。
カスタムCSS
コアの設定項目で希望の表現ができない場合は、個々のブロックインスタンスに対してCSSを記述できます。そのCSSはそのブロックにのみ適用され、ページに出力される前にフィルタリングされます。
カスタム属性
サイドバーから、ブロックのルート要素にデータ属性やARIA属性を追加できます。これにより、サードパーティのスクリプトやテストハーネスから要素を見つけられるようになります。
表示条件
ログイン状態、ユーザー権限、デバイスの画面サイズ、テーマオプションの値によって、ブロックの表示と非表示を切り替えられます。そのため、1つのページで複数の対象者に対応できます。
グローバルスタイルプリセット
名前を付けてスタイルを保存し、サイト内のどのブロックにも適用できます。後からプリセットを変更すると、それを使用しているすべてのブロックも一緒に変わります。
183種類のブロックパターン
パターンは、完成したセクションを通常のブロックとしてページに追加し、そのあとで編集できます。内部に生のHTMLはないため、見出し、画像、アイコン、リンクはすべてサイドバーで操作できる項目のままです。
パターンは挿入ツール内で17個のカテゴリーに分けられています:
パターンはロックされるのではなくラベルで区別されます。プレミアムパターンはラベル付きでインサーターに表示され、内部のブロックが無料のものであれば、そのまま完全に表示されます。テーマに同梱されている173件のブロックテンプレートと4件のスタイルバリエーションも、サイトエディターで同じように動作します。
すべてのブロックを両プランで
上位プランへ段階的に進む必要はありません。年間と買い切りのどちらでも、同じ314個のブロック、同じ183個のパターン、同じ88個のデモが提供されます。
