Skip to content Skip to sidebar Skip to footer

Elementor基礎講座①
セクション/カラム/ウィジェットの概念

Elementorウェブサイトビルダーは、WordPressのプラグインの一つで、ユーザーがドラッグ&ドロップ によってレスポンシブなウェブサイトを作成・編集できるツールです。

つまり極端な話、コーディングの知識がなくとも視覚的にレイアウトしたものが、そのままweb上に出力されてしまうというびっくりツールなのです。

慣れれば無料版でもかなり作り込めます。

基礎講座①では、Elementorを使う上で理解しておくべき、3種類のボックスについて説明します。

Elementorを搭載したWordPressテーマには必ず、
固定ページを表示した際、上部のバーに「Elementor で編集」と出てきます。

そこを押したらElementorの編集画面が起動します。

入れ子構造を理解する

Elementorは3種類のボックス(セクション/カラム/ウィジェット)が入れ子構造になることによってできています。

①セクション

入れ子構造の、一番外側。
コンテンツのエリア全体を囲う部分になります。

セクションには大元の「セクション」とその中に収まる「内部セクション」とがあります。
基本的に役割は同じです。親と子の関係です。
セクションをより細分化したいときに「内部セクション」を作ります。
「内部セクション」はこの後説明しますが、「ウィジェットパネル」から挿入することができます。

②カラム

入れ子構造の真ん中。
その名の通り、コンテンツのカラム(列)を決めるボックスになります。
カラムとカラムの間を摘んで幅を調整することもできます。
左上のアイコンを摘んで配置を入れ替えたりもできます。
セクションや、この後紹介するウィジェットもですが、アイコンを右クリックで、「コピー&ペースト」や「複製」、「スタイルのみのコピー&ペースト」など、時短機能も充実しています。

カラムは1つのセクションの中に8個くらいしか入れられなかったと思います。(確か)

③ウィジェット

入れ子構造の一番内側。
テキストや画像、動画、ボタン、テーブル、カルーセルなどなど、要素の1個1個になります。
プロ版や、Elementorの機能を拡張するプラグインをインストールすることによって、非常に様々なウィジェットを呼び出すことができます。
中にはタブの切り替えウィジェットだったり、スライダーになるウィジェットなど、それだけで複雑な機能を兼ね備えたウィジェットもあります。

ウィジェットは画面左のパネルの右上にある
格子ボタンを押すと、ズラーっと並んで出てきます。
使いたいウィジェットをドラッグ&ドロップすることで
「カラム」や「セクション」の中に突っ込むことができます。

カスタマイズする

セクション/カラム/ウィジェットは、それぞれ細かく自分の思い通りの状態にカスタマイズすることができます。
ものによって、特にウィジェットは種類がとてつもなくたくさんあるので、出来ること出来ないことはありますが、基本の操作は同じなので、簡単に説明していきます。

①「コンテンツ」の編集

セクション/カラム/ウィジェットのいずれかを選択した状態で、画面左のパネルから「コンテンツ」タブを選択。
ここでは、文章を書き換えたり、配置や位置を設定したり、コンテンツそのものの設定ができます。

②「スタイル」の編集

色や書体、背景の設定など、コンテンツの見た目の部分をいじれます。

③「高度な設定」

マージンやパディングで細かい配置や、レイアウトを調整したり、IDを付与したり、表示アニメーションを設定したりとその他様々な設定ができます。

これらの機能を組み合わせることで、レイアウトの面ではほぼできないことはありません。

他にも色々な機能がありますが、まずは触って慣れるところから始めましょう!

Leave a comment