この記事ではこれからElementorの勉強を始めるにあたって知っておくべき機能を説明します。

初めてElementorを触る際の初期導入についてはこちら

1.セクション、カラム、ウィジェットの役割について

画面中央の＋ボタンを選択すると、セクション形状の選択画面が表示されます。この形状は後から変更可能なので今回は説明の為に2カラムのセクションを選択します。

セクションとカラムを生成した後は左側の項目からウィジェットを挿入していきます。同じカラムに挿入されたウィジェットは縦並びに配置されていきます。

挿入されたウィジェットを選択すると、各ウィジェットごとに専用の項目が表示されます。

この時点で左下の項目「ナビゲーター」より、現在のセクション、カラムウィジェットの構造を確認すると「セクション」の下に「カラム」が二つあり、それぞれの「カラム」に「見出しウィジェット」、「テキストエディターウィジェット」、「画像ウィジェット」が配置されている事が確認できます。

※ナビゲーターはページ制作において、構造が複雑になった時に活用するのでおぼえておきましょう。

2.カラムの設定項目について

カラムとはセクション内に生成する仕切りのようなものであり、必要数に応じてカラムの数を増やすことで各ウィジェットを横並びに配置することが出来ます。

カラム数を３にしてそれぞれのカラムに画像ウィジェットを挿入すると、上記のように画像を横並びに配置できます。

カラムのレイアウト項目では、カラム幅を調整すること画像ウィジェットのサイズを調整することが可能です。

スタイル項目では、カラムの背景を設定することが出来ます。ページの背景とは異なるエリアの生成などに使用します。

参考例

背景を赤色に、各ウィジェットを囲むカラム内の色を白色にしています。

3.ウィジェットの設定項目について

各ウィジェットには「コンテンツ」、「スタイル」「高度な設定」の設定項目が存在します。「コンテンツ」、「スタイル」はウィジェットごとに項目の内容が異なるので、ここでは主に使用するウィジェットのみを紹介します。

3.1見出し

「見出し」ウィジェットのコンテンツ項目では、表示される文章とリンク、配置を設定する事が出来ます。サイズ、HTMLタグはデフォルトの状態で問題ありません。

スタイル項目では、フォントの色、大きさ、種類、字間などを変更することが出来ます。文字色、書体以外の項目はほぼ使用しません。

3.2テキストエディター

「テキスエディター」ウィジェットのコンテンツ項目では、文章を編集することが出来ます。必要に応じてビジュアル編集、テキスト編集に切り替えてください。

※テキスト編集ではbrやspanなどHTML形式の記述が可能となります。

スタイル項目では、「見出し」ウィジェットのようにフォントの色、大きさ、種類、字間などを変更することが出来ます。加えて文章の左揃え、中央揃えなども設定することが出来ます。

3.3画像

「画像」ウィジェットのコンテンツ項目では、表示する画像、配置、キャプション、リンクを設定出来ます。キャプション機能は前述の「見出し」ウィジェットで表現することが出来るので、使用しません。

スタイル項目では、画像のサイズ関連を調整することが出来ますが、前述の2.カラムの設定項目についてより、カラム幅の調整でサイズを変更可能なのでこちらの項目を編集することはあまりありません。

3.4ボタン

「画像」ウィジェットのコンテンツ項目では、 ボタンの表示、リンク先、配置などを設定することが出来ます。

スタイル項目では、ボタンの色やボタン内の文字の設定が出来ます。

3.5内部セクション

「内部セクション 」ウィジェット はカラム内にセクションを作成する事ができるウィジェットです。内部セクションウィジェットを利用することでセクション内のレイアウトに幅を持たせることが出来ます。

参考例

このセクションでは、カラムを２つ生成し、左側のカラム内に内部セクションを挿入し、その中にカラムを二つ生成しています。

4.高度な設定について

高度な設定項目では、主にウィジェットやカラム、セクションへのマージンとパディングの数値を設定します。

※マージンとは外側の余白、パディングは内側の余白を意味します。

マージンは外側に余白を作成して他要素との間隔を開けるので、画像のように白色の領域が空白として作成されます。

パディングは内側に余白を作成して他要素との間隔を開けるので、画像のように背景の範囲が広がるように作成されます。

4.テーマビルダー（Theme Builder）について

テーマビルダーとはサイト制作において、何度も使用する部分をテンプレートとして保存し、各部分に貼り付ける機能です。ここでは主に使用するヘッダーとフッターを中心に説明します。

woedpress画面の項目「テンプレート」より「Theme Builder」を選択します。

テーマビルダーの画面が表示されるので、中央下の「switch to table view」を選択してください。

※Elementorのバージョンによってはこの画面が表示されない場合があります。

テーマビルダーの画面が表示されたら、「新規追加」を選択してください。

今回はヘッダーを作成するのでテンプレートは「Header」を選択します。

テンプレートの作成画面は固定ページの作成画面と変わりません

ヘッダーを構築したら左下の公開を選択してください。

このような画面が表示されるので、「ADD CONDITION」を選択してください。

画面中央に「 Entire Site 」が表示されたのを確認したら、「SAVE＆CLOSE」を選択してください。

最後にTheme Builderに先程作成したテンプレートを確認し、項目「Instances」のステータスがEntire Siteになってたら設定完了です。（正しく設定されていない場合はステータスがnoneとなります）

フッターもヘッダー同様の手順で作成することが出来ます。またヘッダー、フッターを編集する時は固定ページではなく、Theme Buikderページから編集を行う必要があります。