カスタムページ領域

What is this? ⇒ これは「イメージ・アコーディオン」の事例です。

当ページは、プラグイン「ELEMENTOR」で編集しております。

要素(ウジェット)とカスタムページ領域

ELEMENTORによるページ編集は、画面左側の要素ボックス欄から要素(ウジェット)を選択し、画面右側のカスタムページ領域に、ドラッグ&ドロップして、要素(ウジェット)をカスタムページ領域に貼り付けることが、基本的な操作になります。

カスタムページ領域の特性を知ることが基本

ネット上のELEMENTORの取説は、前記の要素ボックスの中のウジェットの機能を紹介する記事が殆どで、カスタムページ領域を解説している記事は皆無に近い存在です。実は、ウジェットの機能が分かってもウジェットの挿入先であるカスタムページ領域の事が分からないと、ELEMENTORが分かったとは言えません。

特に、ELEMENTORのテンプレート見本を使うには、このカスタムページ領域の特性・機能を十分把握していないとテンプレート見本は使いこなせません。今回、筆者が無料テンプートの中身を調べる過程で、そのカスタムページ領域の理解が如何に大事かが分かりました。当ページでは、その「領域」を中心に解説して行きたいと思います。

<Elementor紹介記事の一例ですが>
https://saisyuppatu.com/elementor-function-introduction-2/

カスタムページ領域とは?

↑↑↑クリックして拡大↑↑↑

カスタム領域は、大きく分けて3つの領域があります。

1.セクション領域(左図の薄茶の領域)
2.カラム領域(左図の薄青の領域)
3.ウジェット領域(左図の緑色の領域)

左図で言うと、一番外側を構成しているのがセクションです。セクションの中にあって横方向に領域を分けているのがカラム(段組)です。左図の例だと2段のカラムを表しています。カラムの中にあって見出しとかテキストとか画像等の部品がウジェットです。

領域を操作する3つのボタン

領域を作成すると、その領域に対する操作(例えばコピーとか追加、削除等)をつかさどるボタンが、領域のある部分をオンマウスすることで表示されます。前記の領域図で言うと、セクション操作ボタンやカラム操作ボタン、ウジェット操作ボタン等がそれに相当します。

セクション操作ボタン

セクション領域の上辺真ん中部分にオンマウスすると、左図のようなセクション操作ボタン群が表示されます。ボタン群の左から

1.セクションを追加(現在のセクションの直前に空のセクションを追加)
2.セクションを編集
3.セクションを削除(現在のセクションを削除する)

カラム編集ボタン

カラム領域の左上部分にオンマウスすると、左図のようなカラムの編集ボタンが表示されます。カラム編集とは、カラムのレイアウト・スタイル・詳細等を設定します。

ウジェット編集ボタン

ウジェット領域の右上部分にオンマウスすると、左図のようなウジェットの操作ボタンが表示されます。ウジェット編集とは、ウジェットのレイアウト・スタイル・詳細等を設定します。

領域ボタンに共通する右クリックボタン

セクション操作

カラム操作

ウジェット操作

Duplicate(複製)とAdd(追加)操作の違い

Duplicateセクション

セクションでの「複製」クリックは、現在、選択しているセクション(アクティブ・セクションと言う)の縦方向直下に、アクティブ・セクションの複製が作成される。

Duplicateカラム

カラムでの「複製」クリックは、現在、選択しているカラム(アクティブ・カラムと言う)の横方向右隣に、アクティブ・カラムの複製が作成される。

Addカラム

カラムでの「新しいカラムの追加」クリックは、現在、選択しているカラム(アクティブ・カラムと言う)の横縦方向右隣に、空白のカラムが追加される。

Duplicate Widget

Widgetでの「複製」クリックは、現在、選択しているWidget(アクティブ・Widgetと言う)の横方向右隣に、アクティブ・Widgetの複製が作成される。