STEP4:Elementor でページを作ってみる

1 Elementor の起動方法

ここでは、Elementorを使って固定ページを作成してみましょう。

*ページ名は、「Elementor_日付(例:20220527)」に、テンプレートは「Elementor 全幅」にしてください

2-1 基本操作

Elementorを使う際の基本的な操作方法です

補足:ページを保存する際は「下書き保存」、公開する際は「公開」をクリックします。一度公開されたページの場合は、「更新」ボタンになっています

2-2 ナビゲーター機能について

ナビゲーターを機能を使うことで、ページの構造を捉えやすくなります。あと何故かウィジェットをドラッグ移動できないときも、ナビゲーターからだと移動できます

2-3 ヒストリー機能について

間違えて消しちゃった、編集前の画面に戻したい ときに使えます

3-1 レイアウト:セクションについて

Elementorのレイアウトの基本をなすものです

3-2 レイアウト:カラムについて

(注意)今後のアップデートで、セクション/カラム というものが「コンテナ」に変わることが発表されています。そのうち弊社の環境も移行されるはずですので、頭の片隅においていただければ…

参考:コンテナの使い方

4 ページを実際に作ってみる

以下の動画を見ながらページを作成してみましょう

ページの作成が完了したら、公開ボタンを押します

*各ウィジェットの詳しい説明は、以下リンクをご参照ください

・YouTube動画

・ウェブサイト

5 応用編:レスポンシブデザインを調整する

動画の最後にあったレスポンシブについてです。作成したページをレスポンシブ画面幅で確認し、変なところがあれば調整しましょう(編集したら更新ボタンを押します)

6 メニューにページを表示させる

ダッシュボード画面に戻り、メニューに先ほど作成したページを表示させましょう

*ダッシュボード画面への戻り方

  1. 左上の三本線のアイコンをクリックします
  2.  「ダッシュボード」に戻る をクリックします

今回は「Elementor」というメニュー項目の下に表示させたいので、下図のように設定します

作成したページが、メニュー上に表示されていればOKです

これでレッスンは完了です!できあがったページをぜひ見せてください✨