Elementor入門チュートリアル1、インストールと基本操作

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

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

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

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

大事なテーマ選び

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

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

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

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

『Astra』はWordPressのテーマ検索で見つかる

Elementorのインストール

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

Elementorのインストール

Elementorは検索で見つかる

このようにElementorはWordPressのプラグインセクションから見つけることが出来るので、『Elementor』で検索しインストール → 有効化しましょう。

Elementorでページを編集

早速新しい固定ページを作ってみましょう。
この例では、Astraを使っています。

Elementorでページを作り始める

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

テーマによってはサイドバーがあったりと少し違うかもしれませんが、似たような画面が出てきます。
左側のリストはウィジェットのリストです。

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

Elementorキャンバスを選択

もしヘッダーも何もない完全にまっさらなページでElementorを使いたい場合は、ページ作成の画面で右側にあるページ属性から『Elementor キャンバス』を選びます。
これでページを作り始めれば、何もないページから作り出すことが可能です。

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

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

編集画面

Elementorでテキストがドロップされた

左側に出てきたのが、このウィジェットの編集画面です。右側にも同じようにテキストが出ていますよね。
これはテキストエディターウィジェットです。
このウィジェットは名前の通りテキストを表示させるものです。
テキストを変えてみましょう。

これからタブについて簡単に説明しますが、これは次回からの記事で詳しく説明しています。

スタイルタブ

編集画面の上にスタイルと書いてるタブがあります。
これを押してみてください。

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

文字色を変えてみましょう。
右側のテキストの色も変わります。

詳細タブ

今度はスタイルタブの右側にある詳細タブをクリックします。

Elementorの詳細タブ

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

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

またウィジェットのリストに戻りたい時は、編集画面の右上のアイコンをクリックします。

Elementor前に戻るボタン

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

Elementorでウィジェット上で右クリックすると削除が出てくる

ウィジェット上で右クリックすると、このようなメニューが出てきて一番下の『削除』を押すとこのウィジェットを削除できます。

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

セクション

ここではセクションの基本的な説明をします。

セクションをカラムで分割して使う

この赤いプラスボタンを押します。

するとこの画面が表示されます。
これはどのようにセクションを分割するかを選択する画面です。
どれか選んでみましょう。

セクションの設定が出てきます。そして実際のセクションが二分割されてるのがわかると思います。
ここではセクションの設定を詳しくは説明しませんので、ウィジェットリストに戻ります。

分割されたカラムにウィジェットを挿入

それでは左のウェジェットリストから、好きなウィジェットを分割されたカラムに挿入してみましょう。

左側にテキストウィジェット、右側に画像ウィジェットを入れてみました。
セクションを分割してそこにウィジェットを挿入する。
Elementorを使ってレイアウトを作る際の基本的な操作はこれだけです。

セクションを上に追加する

Elementorのセクションを追加する
Elementorの新しいセクションが上に追加される

このように新しいセクション上に追加されました。プラスボタンを押してセクションを分割することができます。

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

次にどうやってElementorで作ったページを保存して、プレビューし、この画面から抜け出す方法を紹介します。
最初は自分もどうやって元のページに戻るのかわかりませんでした。
ちょっとだけわかりづらいです。

ページ保存方法

このように、ウィジェットリストの下にある公開ボタンの横の矢印を押すと下書き保存が出てきます。
これを押せば保存されます。

公開を押すと即公開されますので気をつけてください。

ページのプレビューは下の目のアイコン

Elementorのプレビューアイコン

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

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

まずは一番左上のメニューボタンを押します。

Elementorプレビューでダッシュボードに戻るボタン

その下のボタンのラベルの通り、ダッシュボードに戻るには、下の青いボタンをクリックしてください。


いかがだったでしょうか?
次回は、今回軽く説明したウィジェットの編集画面のそれぞれのタブの中の機能を詳しく説明していきます。

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

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

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

Naomi Suzuki

このサイトを運営してるナオミです。エンジニア歴13年、海外在住歴20年。
WordPressの情報やハッキングを防ぐ脆弱性の情報と自分の海外での生活の一部を無料のメルマガで配信しています。

目次

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

Elementorの無料ウェブサイトテンプレート
新規追加されました。

WordPressの最新情報が
毎週届く無料メールマガジン

DiviやElementorの情報だけでなく、脆弱性が見つかったプラグインやテーマのリストも毎週届きます。セキュリティの強化につながります。 

管理人のナオミが書くメルマガ
海外でエンジニア歴10年以上
DiviとElementorに精通