この記事には広告を含む場合があります。
記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。
WordPressの公式プラグインである『Elementor』の基本操作をご紹介します。
『Elementor』はドラッグ&ドロップの直感的操作でページを1から作成していくことができます。
このプラグインを使えば
- 通常では作成できないおしゃれなトップページ
- リスト獲得用のランディングページ
- 商品販売用のセールスレター
- 期間限定のキャンペーンページ
などが作成できてしまいます！
では、Elementor（Ver.2.0.7）の基本操作について解説していきます。
Elementorのインストール&有効化
WordPressの管理画面より、①「プラグイン – 新規追加 – 」⇒②「Elementorと検索」⇒③「今すぐインストール」をします。
インストールができたら、続けて有効化をしましょう。
Elementorの基本操作
管理画面のメニューにElementorの項目が追加されますが、特に設定などをする必要はありません。
デフォルト状態で大丈夫です。
まずは属性テンプレートを選択する
まず、投稿か固定ページの新規追加画面へ行きましょう。
今回は固定ページで説明を進めていきます。
まずは右側にある固定ページの属性からテンプレートを選びます。
「Elementor Camvas」と「Elementor Full Width」が追加されています。
「Elementor Camvas」を選ぶと、ヘッダーもフッターもないまっさらなページになります。
ランディングページなどの作成に向いているでしょう。
「Elementor Full Width」を選ぶと、ヘッダーとフッターのあるフルワイドのページになります。
「デフォルトテンプレート」を選ぶと、ヘッダーとフッター、サイドバーありのページになります。
テーマSANGO使用時
使用目的に合った属性テンプレートを選び、下書き保存をしておきましょう。
Elementorのエディタで編集する
次に「Elementorで編集」をクリックします。
すると以下のElementor専用の編集画面に遷移します。
コンテンツ（要素）の追加&編集
左側は様々なコンテンツ（要素）が並んでいます。
この中から配置したいコンテンツを選び、右側に置いていく流れになります。
試しに「見出し」をドラッグ&ドロップで配置します。
見出しが追加されましたね。
今度はその見出しの文字と配置を中央に変更します。
赤枠部分を編集しました。
また、「スタイル」や「詳細」などの設定も可能です。
このようにして各要素を組み合わせていきます。
カラムの変更方法
デフォルトではワンカラムなので、2カラム、3カラムなどに変更する方法をお伝えします。
「新しいセクションの追加」を選択します。
以下の中から、使用するカラムを選択します。
以下の画像のように作成したカラムの中にコンテンツを配置していきます。
セクションを編集する
セクションとは下記画像の水色の枠部分の範囲を言います。
セクションの編集の際は、下記画像の赤枠部分をクリックします。
すると、左側が「Edit セクション」になります。
様々な編集ができますが、今回はセクションの背景をグラデーションに変更します。
「スタイル」⇒「背景」と選び、あとはグラデーションの色を設定していきます。
このようになりましたが、少し物足りないので、もう一手間加えます。
「Shape Divider」を選択し、セクションの下側に「Mountains」の効果を加えます。
どうでしょうか？
短時間で作った割にはある程度おしゃれなページが出来上がりました！
まとめ
いかがでしたでしょうか？
無料のプラグインでここまでできるのはすごいと思います！
PRO版にアップグレードするか、有料のアドオンを使用すれば、挿入できる「要素」を追加することができ、さらに制作の幅が広がります！
まずは実際にElmentorをインストールし触ってみてくださいね。
