想定どおりに入れ子になるブロック
ヘッダーレコードには Header Root が含まれます。Header Root には Container が含まれ、Container には Zone が含まれます。Zone はヘッダー行のセルで、一つ目にロゴ、次にメニュー、最後に検索アイコンとカートを配置します。
レイアウトはゾーンが担います
ゾーンは要素の配置を決めます。右に寄せたり、検索とカートをひとまとめのかたまりにしたりできます。マークアップを極力抑えたいときは、ゾーンを装飾のない素のままにしておくこともできます。
- ゾーンはブレークポイントごとに並び替えられるため、1つの設定でデスクトップ、タブレット、スマートフォンをカバーできます
- どのゾーンも特定のデバイス区分に限定でき、他のデバイスではマークアップに出力されないようにできます。
- 独自のCSSから指定したい場合に、ゾーンに追加するクラス
22個のヘッダーブロック
Header Root
ヘッダーそのものです。ほかのすべての要素はその中に配置されます。
Header Container
幅のコンテナを使うと、ヘッダーをボックス幅にしたり、全幅にしたり、ブレークポイントごとに切り替えたりできます。
Header Zone
ヘッダー行のセルです。ゾーンはパーツを格納し、その配置を決めます。
Header Logo
ロゴは、スティッキー時とダーク時の表示用に、別々のファイルを指定できます。
Header Navigation
ドロップダウンとメガメニューのパネルを備えたメインメニューです。
Header Search
クリックすると入力欄が開く検索アイコン、または常に表示されている入力欄。
Header Cart
商品数とドロップダウン形式の概要を表示する、WooCommerceのカートです。
Header Social
一度設定したプロフィールのソーシャルアイコンを一列に表示します。
Header Button
一般的なサイズ、スタイル、リンク設定を備えたコールトゥアクションボタンです。
Header Icon Link
電話番号やアカウントページなど、どこへでもリンクできる1つのアイコンです。
Header Info
連絡先、住所、営業時間をまとめて表示する小さなブロックです。
Header Shop Search
ストア向けの商品検索で、お使いのカタログを対象にします。
Header Topbar
トップバーのレコードを、ヘッダー行の上に配置します。
Mega Menu Column
メガメニューのパネル内にあるカラムです。これにより、パネルに実際のレイアウトを持たせられます。
スタートに使える7件のプリセット
プリセットとは、ワンクリックで適用できるレイアウト設定をまとめたものです。目的の動作を選び、その後はブロック設定で好きなように変更できます。
透明性
背景を設定しないため、ヘッダーの背後にあるものがそのまま表示されます。
半透明
背景を半透明にすると、後ろの画像が見えたままになり、テキストも読みやすく保てます。
フローティング
ヘッダーはページ内に浮いた状態で表示され、四辺すべてに余白があります。
フローティング・半透明
フローティング表示に加え、半透明の背景にも対応しています。
小さくフローティング
スクロール時に浮いて表示され、高さが抑えられたヘッダーです。
全幅スティッキー
画面の全幅に広がり、ページをスクロールしても固定されたままです。
上方向へのスクロール時に固定
訪問者が下にスクロールするとトップから消え、上にスクロールすると再び表示されます。
トップバー、メガメニュー、サイドパネルもレコードです
各ヘッダーを一度デザインし、サイト全体の既定値に設定したうえで、別の表示にしたいページでは個別に上書きしてください。
トップバー
トップバーは、独自のブロックを持つ独立したレコードです。電話番号、営業時間、言語切替、プロモーションなどを配置できます。Header Topbarブロックは、トップバーをヘッダー行の上に配置します。全体に一括で割り当てることも、ページごとに上書きすることもできます。
88件のデモのうち12件に、編集可能なトップバーが含まれています。
サイドパネル
サイドパネルは、画面の端からスライドして表示されるレコードです。セカンダリメニュー、カート、お問い合わせフォーム、ヘッダーに収まりきらない詳細情報などを表示するために使います。
6件のデモには、トリガーと接続済みのサイドパネルが同梱されています。
レコードの割り当ては項目ごとに行います。既定のサイドパネル、それが出てくる画面の端、ページを押し出すか上に重ねるか、トリガーの見た目を選択します。トップバー、メガメニュー、フッターも同じ方法で割り当てます。
94件のフィールド、テーマオプションで最大のセクション
テーマオプションには、個別のレコードでは管理すべきでない、サイト全体のヘッダー設定が含まれています。デモのインポートでこれらがすべて設定されるので、必要なものだけ変更してください。
- テーマオプションの533項目のうち、94項目がヘッダーに属します。
- 既定のヘッダーレコードを設定し、任意のページでそれを上書きできます
- スティッキー動作、高さ、余白、モバイルブレークポイント
- すべてのフィールドは、リファレンス記事に記載されています
40種類のヘッダーパターンから始める
パターンを挿入すると、並べ替え、名前の変更、削除が自由にできる通常のブロックが追加されます。ロックされたブロックはなく、触れないレイアウトのスクリーンショットでもありません。
- 他のどのカテゴリーよりも多い、40件のヘッダーパターン
- ページの反対側の末尾向けフッターパターン16個
- 合計183パターン、17カテゴリに分類
- すでにお使いのインサーターのパターンタブから挿入
フッターとコピーライトバーは別々のレコードとして管理されます
フッターはヘッダーとまったく同じように動作します。Footerレコードには列が、Copyrightsレコードには下部の細いバーが保存されるため、上のデザインに触れずに、サイト全体の著作権表記を変更できます。
6つのブロックと17個のオプション
会社概要の紹介文には Footer About、住所と電話番号には Footer Contacts、フィードには Footer Instagram、ウィジェットでできることすべてには Footer Widget Area、整ったリンク一覧には Widget Links、最下部のバーには Copyrights を使用します。
- ヘッダーと同じように、フッターをサイト全体またはページごとに割り当て
- 下のバー用の、コピーライトの個別レコード
- 始めるための16個のフッターパターン
- ページを組み立てながら、編集キャンバスでプレビューされます。
4種類のスタイル、または自分でデザイン
ヘッダー直下の帯エリアは、それ自体が独立したデザインの領域で、背後に57個のオプションがあり、公開する各ページで個別に上書きできます。
デフォルト、ミニ、テンプレート、カスタム
Default は標準のバンドです。Mini は下層ページ向けのコンパクトな版です。Template は指定された専用レイアウトの中から1つを選びます。Custom は、ブロックで自分で作成したページタイトルのレコードを表示します。
- Page Title, Heading, Subtitle, Breadcrumbs and Buttons blocks
- サイト全体のデフォルト設定で、個別のページごとに上書きできます
- 背景、高さ、配置、パンくずリストはすべて設定項目です
スロットブロックでテンプレートに配置されます
ヘッダーと同様に、HeroとSliderはそれぞれ独立したレコードです。スロットブロックはブロックテンプレート内に配置され、表示中のページに割り当てられたHeroまたはSliderを読み込みます。
- ブロックから構築された、Heroレコードと Sliderレコード
- Hero Slot と Slider Slot のブロックは、コンテンツではなくテンプレートに含まれています
- 1つのテンプレートですべてのページに対応し、各ページに個別の冒頭部分を持たせられます
- 88件のデモのうち12件に、編集可能なスライダーが含まれています
ヘッダーは、完成形を見ながら組み立てられます
スロットブロックは、ヘッダー、トップバー、ページタイトル、ヒーロー、フッターを編集キャンバスに反映します。そのため、ページは段落だけの箱ではなく、完成したページの見た目で開きます。
ブロックエディターのページです。ヘッダーとフッターは、訪問者に表示されるのと同じコードによって、コンテンツの周囲に描画されています。
単一のレンダラー
編集画面で見えるヘッダーは、訪問者に表示されるものと同じコードで描画されるため、正確さを保つための別のプレビューは存在しません。
サイト全体またはページごと
サイト全体のデフォルトとして、ヘッダー、トップバー、ページタイトル、ヒーロー、フッターを設定できます。その後、個別のページの設定画面から、特定のページでいずれも上書きできます。
設計段階からレスポンシブ対応
ゾーンはブレークポイントごとに並べ替えられ、デバイスの区分ごとに表示を制限することもできます。そのため、他の人が見る前にエディターでスマートフォンのレイアウトを確認できます。
モバイル用に2つ目のヘッダーは必要ですか？
1つのCanvasヘッダーで、通常はモバイルも対応できます。ゾーンはブレークポイントごとに並べ替えられ、それぞれデバイスの区分で制限できるためです。1つのヘッダーレコードで、スマートフォンではロゴを中央に配置し、連絡先を非表示にして、メニューをトグルの後ろに移動できます。本当に異なるデザインが必要な場合にのみ2つ目のレコードを作成してください。レイアウトの修正のためではありません。
1つのページで別のヘッダーを使用できますか？
はい、Canvasのすべてのヘッダー、トップバー、ページタイトル、フッターには、サイト全体のデフォルト設定とページごとの上書き設定があります。そのため、ランディングページには透明なヘッダーとロゴだけのトップバーを設定し、サイトの他のページは元の設定を維持できます。
ヘッダーはウィジェットエリアですか、それともメニューですか？
Canvasのヘッダーはそのどちらでもありません。ページと同じように、ブロックエディターで編集するレコードです。ヘッダー内のナビゲーション、ロゴ、検索、カート、ボタンは、それぞれ独自の設定パネルを持つブロックです。
ライセンスが失効すると、ヘッダーはどうなりますか？
Canvasのライセンスが期限切れになっても、ヘッダーとサイトのその他の部分は、現在と同じように表示され続けます。停止するのはサービスの方です。アップデート、デモのインポート、AI、プレミアムブロックの編集は、ライセンスを更新するまで停止します。ライセンスの確認が当社のサーバーに届かない場合は、14日間の猶予期間があります。
引き続きサイトエディターを使用できますか？
はい、Canvasは実際のブロックテンプレートをベースに構築されているため、テンプレートとテンプレートパーツはWordPressが保持する場所にそのまま置かれ、ヘッダーレコードはブロックによってテンプレートに配置されます。エディターの仕組みをご覧ください。
Canvasで次のウェブサイトを構築しましょう
初心者でも、フリーランサーでも、エージェンシーでも、同じブロックとデモを利用できます。まずは1つのサイトから始めて、同じライセンスで必要な数だけサイトを構築できます。