Elementor – インストールと基本操作【初心者必見】

『WordPressでもっと自由にページを作りたい』
『カッコいいLPを作りたいけどHTMLもCSSもわからない』
『Elementor使いたいけどちょっとまだ分からない』

こんな風に思ったことありませんか？
このシリーズではサイトを感覚的に自由に作れるElementorの操作方法を紹介していきます。
最終的にはElementor Proを使った応用編(制作中)もありますので、このシリーズを完了する頃にはあなたも簡単にかっこいいウェブサイトが作れるようになりますよ。

＞＞Elementorの公式サイトはこちら
＞＞Elementor Proの購入完全ガイド
＞＞Elementor完全マニュアルはこちら

大事なテーマ選び

まず大事なのがテーマ選びです。
Elementorはプラグインなのでどのテーマにもインストールできます。
ですが使えないテーマもあれば、Elementorが遅くなるテーマもあるんです。
日本の激しくカスタマイズされたテーマでは使えないようです。

Elementor社がオススメするテーマ

• Astra(一番のオススメ)
• Hello
• OceanWP
• Layers
• GeneratePress
• Hestia
• Zakra

それぞれの特徴を簡単に説明した記事はこちらです。
＞＞Elementorと使うべきテーマはこの7つから選ぶべし！【じゃないとサイトが遅くなります】

ちなみにAstraはWordPressのテーマ検索で見つかります

Elementorのインストール

テーマが決まりましたらElementorをインストールします。

Elementorは検索で見つかる

ElementorはWordPressのプラグインセクションから見つけることが出来ます。
WordPressのダッシュボードから「プラグイン」→「新規プラグインを追加」で『Elementor』で検索し、インストール → 有効化しましょう。

Elementorでページを編集

早速新しい固定ページを作ってみましょう。
この例では、Astraを使っています。
WordPressのダッシュボードから「固定ページ」→「新規固定ページを追加」をクリックすると、以下のような画面が現れます。

ページのタイトルを入れた後に「Elementorで編集」というボタンをクリックします。
ここでエラーが出たり何かおかしくなったら、テーマとElementorの相性が悪いということなので、違うテーマで試してみてください。

「Elementorで編集」をクリックすると、テーマによってはサイドバーがあったりと少し違うかもしれませんが、上部にトップバー、左側にウィジェットのリストが並んだ画面が出てきます。

トップバーが出てこない時

もし、トップバーが画面上に見当たらない場合は、Elementorの「設定」で「機能」のタブをクリックし、「Editor Top Bar」を有効にして、画面一番下の「変更を保存」をクリックしてください。

ヘッダーも何もないスクリーンでページを作る場合

ヘッダーも何もない完全にまっさらなページでElementorを使いたい場合は、まず、トップバーの左から3つめの「サイト設定」のアイコンをクリックします。

サイト設定のメニューが出てくるので、「レイアウト」をクリックします。

「デフォルトページレイアウト」を『Elementor Canvas』に設定し、変更を保存します。

これでページを作り始めれば、何もないページから作り始めることが可能です。

基本はドラッグ&ドロップ

使いたいウィジェットを掴んでドロップすることで、ページにそのウィジェットを挿入することができます。

例ではテキストエディターウィジェットを挿入してみます。
このウィジェットは名前の通りテキストを表示させるものです。

編集画面

左側に出てきたのが、テキストエディターウィジェットの編集画面です。
右側にも同じようにテキストが出ていますよね。

スタイルタブ

テキストの見た目を変えてみましょう。
編集画面の上にスタイルと書いてるタブがあります。これをクリックしてみてください。
下のような画面が表示されます。

この画面はウィジェットによって変わります。
この場合はテキストエディターなので、文字色や書体などのテキストに関する設定を変えることができます。

文字色を変えてみましょう。
編集画面の文字色を変えると、右側のテキストの色も変わります。

「高度な設定」タブ

今度はスタイルタブの右側にある「高度な設定」タブをクリックします。

ここでは更に細かくウィジェットのカスタマイズができます。
マージンはこのウィジェットの外側のスペースで、パディングは内側のスペースを表します。
何か値を入れてみましょう。

パディングに数値を入れると、枠から文字までのスペースが変更されたのが確認できます。

ウィジェットリストに戻りたい時

ウィジェットのリストに戻りたい時は、トップバーの左から2番目の＋アイコンをクリックします。

ウィジェットを削除する方法

ウィジェット上で右クリック（Macの場合はCtrl+クリック）するとメニューが出て来るので、一番下の『削除』を押すとウィジェットを削除できます。

これでどうやってウィジェットをページに追加して、カスタマイズするかわかったと思います。
でももっと複雑にウィジェットを追加したいですよね。
例えば、画面を三等分に分けて三つ画像を表示するとか。
次はその方法を紹介します。

コンテナ

ここではコンテナの基本的な使い方を説明をします。

コンテナを分割して使う

画面のプラスボタンを押します。

すると、FlexboxかGridのどちらを使うか選択する画面が現れます。

Flexboxは、コンテナ内の様々な大きさの要素を画面幅に応じて自動的に配置することができます。
Gridは、コンテナ内の要素を整然と配置するのに向いています。
作りたいレイアウトに応じて使い分けましょう。

ここではFlexboxを使って説明していきます。

Frexboxを選択すると、下の画面が表示されます。
これはどのようにコンテナを分割するかを選択する画面です。
ここでは左右に2分割してみます。

コンテナが2分割で配置されました。

分割されたコンテナにウィジェットを挿入

それではウェジェットリストから、好きなウィジェットを分割されたコンテナに挿入してみましょう。
トップバーの左から2番目の＋マークをクリックしてウィジェットリストを表示します。

ウィジェットリストを表示させたら、使いたいウィジェットを掴んでコンテナにドロップします。

例では左側にテキストエディターウィジェット、右側に画像ウィジェットを入れ、画像を挿入してみました。

『コンテナを分割してそこにウィジェットを挿入する。』
Elementorを使ってレイアウトを作る際の基本的な操作はこれだけです。

コンテナを上に追加する

コンテナ上部の＋ボタンを押します。

新しいコンテナが上に追加されました。
プラスボタンをクリックして、FlexboxかGridを選んだら、あとは同じ流れでレイアウトしていきます。

コンテナについてもっと詳しく知りたい方は、以下の記事もチェックしてくださいね。

Elementor のコンテナウィジェットの使い方【基礎】

Elementorで作ったページの保存とプレビュー

それではElementorで作ったページを保存してプレビューし、編集を終了しましょう。

ページ保存方法

トップバーの「公開」ボタン右横の下向きの矢印をクリックすると、メニューが出てきます。「下書きを保存」をクリックして保存します。

公開ボタンを押すと即公開されますので、途中の場合は下書き保存にしましょう。

ページのプレビューは「公開」ボタンの左側の、目のアイコン

このアイコンをクリックすると新しいページが開き、ページのプレビューを見ることが出来ます。

ダッシュボードに戻る方法

トップバーの一番左のElementorのロゴをクリックすると、メニューに「Exit to WordPress」と出てくるのでクリックします。

Elementorで編集する前の画面に戻るので、左上のWordPressのロゴをクリックすると、ダッシュボードに戻ります。

---

いかがだったでしょうか？
今回軽く説明したウィジェットの編集画面のそれぞれのタブの中の機能については以下の記事で詳しく説明しています。
併せてチェックしてくださいね。

＞＞Elementor『コンテンツタブとスタイルタブ、テキストエディター編』【初心者】

また、ElementorはWordPressのプラグインの1つですが、Elementorと相性の良いおすすめのプラグインも以下の記事で紹介をしています。
＞＞ElementorのオススメのプラグインTOP５

Elementor Proになると更に色々できるのですが、それは応用編(制作中)で説明します。
もし購入を考えてる方はここからどうぞ。
＞＞Elementor Proの購入完全ガイド