1. Elementorページビルダーを起動する
Elementorページビルダーで新しいページや投稿をデザインするには、「固定ページ」または「投稿」> 「新規追加」に進みます。「Elementorで編集」をクリックすると、Elementorエディタが起動します。
あるいは、既存のページを編集したい場合には、そのページに移動し、編集画面を開きます。そこから「Elementor で編集する」ボタンをボタンをクリックすればOKです。
画面の左側に、Elementorのサイドバーがあり、ボタンや見出しなど、デザインに追加できる要素がすべて揃っています。
Elementor のサイドバーには、Global Widget（グローバルウィジェット）もあります。複数のデザインで同じウィジェットを利用することを考えている場合には、グローバルウィジェットとして保存するのが便利です。これを利用すれば、カスタム要素にいつでも簡単にアクセスできるようになります。また、複数のページがシェアしているウィジェットを一箇所でまとめて編集できるようになり、その変更はウェブサイト全体に反映されます。
右側にはライブプレビュー画面があり、ここでデザインを作成します。編集した内容は自動的に更新され、リアルタイムで変更を確認することができます。
2. セクション、カラム、ウィジェットを追加する
Elementorエディタでは、3つの主要なビルディングブロックを使用できます。セクション、カラム、ウィジェットです。Elementorの既製ウィジェットについてはすでに触れましたが、これをどのようにデザインに追加するかを見ていきましょう。
まずは通常、メイン画面に表示される「+」アイコンをクリックして、セクションを作成します。このアイコンをクリックすると、次に「構造の選択」が表示されます。
表示される構造は、1つ、または複数のカラムで構成されており、最終的にはこのカラムの中にウィジェットを配置していきます。見やすいレイアウトを作成する上で、非常に重要な選択です。
構造を選択すると、セクションがレイアウトに追加されます。このセクションを別な場所へ移動するには、クリックすると表示される青い点線のハンドルを掴んでください。
セクションを編集するには、「Ctrl」キーを押しながら青い点線のハンドルをクリックします。設定メニューが表示され、選択したセクションのコピーや削除など、簡単な変更が行えます。
より複雑な編集には、「Ctrl」キーを押しながら青いハンドルをクリックし、「セクションの編集」を選びます。そうすると、サイドバーが切り替わり、変更可能な項目が全て表示されます。
このセクションにウィジェットも追加することができます。サイドバーから使用したいウィジェットを探して、メイン画面にドラッグしましょう。
ウィジェットをドラッグすると、これをドロップできるセクションとカラムが強調されて表示されます。追加したい場所が決まったらマウスを離しましょう。選択したセクションにウィジェットが追加されます。
3. サイト設定を編集する
Elementor でサイト全体の設定を編集することができます。また、サイトの画像などの要素に追加できる線や影も変更できます。
このような設定をサイト全体で調整することで、統一された外観と雰囲気を作り上げることができます。また、各ページごとに変更するよりもはるかに楽で簡単です。利用可能なサイト設定を表示するには、サイドバーのハンバーガーメニューをクリックします。
各オプションを確認し、必要に応じて変更してみてください。サイトの設定が完了したら、サイドバーの一番下にある「更新」ボタンをクリックして更新しましょう。
4. 変更履歴を確認する
デザインを編集している間、Elementorがその編集内容を自動で記録しています。そのため、いつでも変更を取り消すことができ、間違いに気づいた時にはとても助かります。
変更履歴のおかげで、様々な変更を試して、気に入らなければすぐに削除する、というような実験を行うことができます。ユーザーがこのように実験を気軽に行えることで、デザイン性が向上します。
変更履歴を表示するには、サイドバーの下部にある「履歴」アイコンをクリックします。「アクション」タブが適用されたすべての変更を記録するため、セクションの作成から既存テキストの編集まで、何でも可能です。
「保存」を押すたびに、そのページの現在の状態が新しいリビジョンとして記録されます。このように保存されたリビジョンはすべて、「リビジョン」タブで確認することができます。以前保存した状態に戻したい場合は、「リビジョン」一覧から希望のものをクリックするだけです。
Elementorでページを構築する2つの方法
Elementorの基本的な流れを理解したところで、この知識を使ってページをデザインしてみましょう。まずは無料のElementorプラグインを使って、WordPressの一般的なページを作成します。
1. WordPressの一般的なページの作成方法
ひとつとしてウェブページはありません。ですが、一方でさまざまなサイトに見られる共通要素も存在し、見出し、本文が挙げられます。このセクションでは、そのような必須要素を組み込んだページの作成方法をご紹介します。
まず、「固定ページ」>「新規追加」> 「Elementorで編集」で新規ページを作成します。次に「+」アイコンをクリックし、セクションを追加します。1カラムのレイアウトを選択して、まずは見出しから取りかかりましょう。
サイドバーに「見出し」ウィジェットがあります。このウィジェットを追加したセクションにドラッグ＆ドロップします。それからサイドバーに見出しのテキストを入力し、さまざまな設定を用いてタイトルのスタイルを変更しましょう。
次に「+」アイコンをクリックして、2つ目のセクションを追加します。今度は、マルチカラムレイアウトを選択して、画像を埋め込み、補足のテキストを追加してみましょう。
サイドバーから「テキストエディター」ウィジェットをドラッグして、追加したセクションにドロップします。その後、サイドバーの設定からテキストを追加し、スタイルを設定しましょう。
テキストが完成したら、「画像」ウィジェットをドラッグ＆ドロップでこのセクションに追加してください。
サイドバーから「プレビュー」のサムネイルをクリックします。これで、WordPressのメディアライブラリを使用して、画像をアップロードしたり、以前アップロードしたグラフィックを選択したりすることができます。
実際に作成したデザインを確認するには、サイドバーの下部にある目のアイコンをクリックすると、新しいタブにページレイアウトのプレビューが表示されます。
満足するデザインが完成したら、「公開」ボタンをクリックしましょう。ちなみに、すでにページが公開されている場合は、このボタンは「更新」と表示されています。
上記内容以外で、ご不明点等ございましたらお気軽にお問い合わせください。