【徹底解説】Elementorの使い方!!29のウィジェットを全部紹介します。

WordPressプラグインのElementorを使ってみたいけど使い方が分からない…。とりあえず基本的な使い方を網羅的に学びたいな。各ウィジェットの使い方を簡単に知りたいです。

そんな疑問にお答えします。

どうも、こんにちは。
友太郎(@yutarou_sakai)です。

この記事ではWordPressプラグインである「Elementor」の使い方を徹底解説しています。

この記事で分かること
  • Elementorの基本的な使い方が分かる
  • Elementorの基本ウィジェットの使い方が分かる
  • Elementor Proの特徴まで分かる

僕は現在Elementor専門でWeb制作をしておりまして、毎日Elementorをこねくり回しています。

>>僕のサイト制作チームはこちら

毎日Elementorを使っていくうちに、もっとElementorを皆さんに知ってほしいと思い、今回は初心者の方に向けてElementorのインストール方法~基本的な29のウィジェットの使い方までご紹介しています。

また、YouTubeで学べるElementor講座を作成しているので、動画が良い方はこちらをご覧ください。

タップできる目次

Elementorの基本的な使い方

ElementorはWordPressのプラグインです。
そのため、すでにWordPressのインストールが完了し、管理画面にログインできている状況を想定しています。

まだWordPressのインストールが済んでいないという方は【初心者向け】WordPressでホームページを作る方法を徹底解説!!で簡単に始められるよう解説していますので、まずはこちらを参考にWordPressをインストールしてみてください。

Elementorのインストールと有効化

まずはElementorをインストールしていきます。

WordPressの管理画面から「プラグイン>新規追加」をクリック。

【徹底解説】Elementorの使い方!!29のウィジェットを全部紹介します。  Elementorのインストールと有効化

検索ボックスに「Elementor」と入力すると、画像左の「Elementor Website Builder」が出てきますので「今すぐインストール>有効化」と進んでください。

管理画面の左メニュー欄に「Elementor」という項目が追加されていれば、インストール&有効化の完了です!

Elementorで固定ページを作る

Elementorは基本的に「固定ページ」を編集する形でサイトを作っていきます。

管理画面の左メニュー欄で「固定ページ>新規追加」をクリック。

【徹底解説】Elementorの使い方!!29のウィジェットを全部紹介します。  Elementorで固定ページを作る

WordPressのバージョンや入れているテーマによって多少固定ページの編集画面レイアウトが違うかもですが、だいたい同じような画面が出てくると思います。

ここからElementorの編集画面に入って行くわけですが、一旦ここでいくつか設定をしていきます。

設定する項目は3つ

  • タイトル
  • パーマリンク
  • ページ属性

後から変更することも可能ですが、とりあえず先に設定を済ませちゃいます。

タイトルはそのままページのタイトルです。
Elementorで作成するページはLP(ランディングページ)のことも多いため、一概にタイトルが表示される訳ではありませんが、ブラウザ上部のタブには表示されますので、一応関連したタイトルを設定しましょう。

パーマリンクはいわゆるURLです。
例えば、当ブログのこの記事なら「https://sakaiyutarou.com/」までがブログのURLで、パーマリンクを「elementor-how-to-use」に設定することで、記事のURLが「https://sakaiyutarou.com/elementor-how-to-use」となります。
この辺りはSEO対策にも関わってきますので、しっかりと設定しておきましょう。

ページ属性はページの特徴を決める感じです。
Elementorでは「Elementor キャンバス」もしくは「Elementor 全幅」で編集していきますので、必ずどちらかを選択するようにしてください。
どちらかを選択したら、必ず「下書き保存」をしてから「Elementorで編集」ボタンを押すようにしてください。

Elementorキャンバスの設定

【徹底解説】Elementorの使い方!!29のウィジェットを全部紹介します。  Elementorキャンバスの設定

Elementorのページ属性の話が出ましたので、Elementorで使う二つのページ属性について軽く解説します。

そんなに難しくありませんし、使うのはどちらか一つですのでサクッといきましょう。

Elementor キャンバス

「Elementor キャンバス」を選択すると、ヘッダーもフッターもないまっさらなページが表示されます。

例えば商品やサービスを紹介するためのLP(ランディングページ)を作る際はこちらを設定してください。

※今回は「Elementor キャンバス」を設定した状態で解説します。

Elementor 全幅

「Elemento 全幅」を選択すると、ヘッダーとフッターが付いたページが表示されます。

Elementorでコーポレートサイトを制作するときなどは、こちらを選択してください。

Elementorの基本操作

これからさっそくElementorの具体的な操作方法をご紹介していきます。

まずは、Elementorで共通して大切な「セクション」「カラム」「ウィジェット」の追加と削除の方法からです!

セクションの追加と削除

「セクション」とはElementorの色々な要素を入れていく一番大きな箱です。

このセクションをどんどん積み重ねながら、中に色々な要素入れていきながらページを作っていきます。

【徹底解説】Elementorの使い方!!29のウィジェットを全部紹介します。  Elementorの基本操作  セクションの追加と削除

Elementorの編集画面にやってきたら、左のメニュー欄と右の作業スペースが表示されます。

この作業スペースの「+」マークをクリックするとセクションを追加することができます。

【徹底解説】Elementorの使い方!!29のウィジェットを全部紹介します。  Elementorの基本操作  セクションの追加と削除、構造

ここでセクションの構造を選ぶことができます。

あとから追加・削除も可能ですので、適当に選んでみてください。

【徹底解説】Elementorの使い方!!29のウィジェットを全部紹介します。  Elementorの基本操作  セクションの削除

セクションはセクションにマウスを乗せた時に中央上部に表示される「×」ボタンで簡単に削除可能です。

追加も削除も簡単にできますので、まずは色々と試してみてください!

カラムの追加と削除

【徹底解説】Elementorの使い方!!29のウィジェットを全部紹介します。  Elementorの基本操作  カラムの追加と削除

現在、セクションの中に二つ「+」マークが付いた箱があるのですが、これら一つ一つを「カラム」と呼びます。

このカラムを上手く使うことで、様々な配置で要素を表示し、ページを作成していくことが可能になります。

【徹底解説】Elementorの使い方!!29のウィジェットを全部紹介します。  Elementorの基本操作  カラムの構成

現在の構成は上図のようになっていますね。

【徹底解説】Elementorの使い方!!29のウィジェットを全部紹介します。  Elementorの基本操作  カラムの編集

そしてカラムにマウスを乗せると左上に編集マークが現れます。
それを右クリックするとカラムの編集メニューが表示されますので、そこからカラムの追加・複製・削除が可能です。

この編集メニューはめちゃめちゃ使いますので、表示のさせ方はぜひ覚えておきましょう。

ウィジェットの追加と削除

カラムが追加できたら、次は「ウィジェット」を追加していきます。

それぞれの特徴を持った豊富なウィジェットがElementor最大の魅力です!!

【徹底解説】Elementorの使い方!!29のウィジェットを全部紹介します。  Elementorの基本操作  ウィジェットの追加

Elementor編集画面の左メニュー欄から、適当なウィジェットを選んでドラッグ&ドロップでカラムに追加してみてください。

カラムに重ねた時に青く表示されれば追加可能です。

【徹底解説】Elementorの使い方!!29のウィジェットを全部紹介します。  Elementorの基本操作  ウィジェットの追加完了

今回「見出し」ウィジェットの追加してみると、このような形になりました。
別のウィジェットでも何かしら表示されていればOKです!

【徹底解説】Elementorの使い方!!29のウィジェットを全部紹介します。  Elementorの基本操作  ウィジェットの編集

ウィジェットにマウスを合わせて右上に表示される「ペン」マークを右クリックすることで、ウィジェットの編集・複製・削除などが可能です。

この辺りはカラムやセクションと同じですね!

Elementorのウィジェット29個を全部紹介

さて、Elementorの基本的な使い方が分かったところで、Elementorに用意されている29個のウィジェットをすべて紹介してきます。

すべて覚える必要はありませんので、この記事を参考書代わりにするためにブックマークしておいてください。

Inner Sectionウィジェットの使い方

【徹底解説】Elementorの使い方!!29のウィジェットを全部紹介します。  Elementorのウィジェット29個を全部紹介  Inner Sectionウィジェットの使い方

Inner Sectionウィジェット(内部セクションウィジェット)は、カラムの中にさらにセクションを追加することができるウィジェットです。

画像ではセクション→赤、カラム→青、Inner Sectionウィジェット→緑で表示しています。

そしてInner Sectionウィジェットの中にもカラムがありますので、かなり自由度が高い配置をすることができるようになります。

ただし、Inner Sectionウィジェットの中にInner Sectionウィジェットを入れることはできません!

見出しウィジェットの使い方

【徹底解説】Elementorの使い方!!29のウィジェットを全部紹介します。  Elementorのウィジェット29個を全部紹介  見出しウィジェットの使い方

見出しウィジェットはそのまま見出しを追加することができます

専門的なことを言うとHTMLのh1、h2などの見出しタグが設定されているウィジェットです。

デザイン的な理由で使ってもいいですが、SEO対策を考えるなら見出しウィジェットのh1、h2などのタグを適切に設定する必要があります。

画像ウィジェットの使い方

【徹底解説】Elementorの使い方!!29のウィジェットを全部紹介します。  Elementorのウィジェット29個を全部紹介  画像ウィジェットの使い方

画像ウィジェットはページに画像を追加することができます

お好きな画像を追加可能で、画像サイズ・キャプション・リンクなども設定可能です。

テキストエディターウィジェットの使い方

【徹底解説】Elementorの使い方!!29のウィジェットを全部紹介します。  Elementorのウィジェット29個を全部紹介  テキストエディターウィジェットの使い方

テキストエディターウィジェットは自由にテキストを入力できるテキストボックスを追加できます

テキストを追加するだけではなく、テキストのフォントや大きさ・色なども設定可能です。

動画ウィジェットの使い方

【徹底解説】Elementorの使い方!!29のウィジェットを全部紹介します。  Elementorのウィジェット29個を全部紹介  動画ウィジェットの使い方

動画ウィジェットはYouTubeやvimeoなどの動画を簡単に表示することができます

YouTubeにアップロードされている動画ならURLを入力することで簡単に埋め込みことができますので、とても便利です。

ボタンウィジェットの使い方

【徹底解説】Elementorの使い方!!29のウィジェットを全部紹介します。  Elementorのウィジェット29個を全部紹介  ボタンウィジェットの使い方

ボタンウィジェットはボタンを追加することができます

このボタンがけっこう便利でボタンの文字や色を変更できることはもちろん、アニメーションの設定などもできますので、ぜひ活用してください。

区切り線ウィジェットの使い方

【徹底解説】Elementorの使い方!!29のウィジェットを全部紹介します。  Elementorのウィジェット29個を全部紹介  区切り線ウィジェットの使い方

区切り線ウィジェットはそのまま区切り線を追加することができます

区切り線の太さや色の変更もできますし、区切り線の種類(ドットなど)も設定可能ですので、使い方によってはかなり使えるウィジェットです。

スペーサーウィジェットの使い方

【徹底解説】Elementorの使い方!!29のウィジェットを全部紹介します。  Elementorのウィジェット29個を全部紹介  スペーサーウィジェットの使い方

スペーサーウィジェットはめっちゃシンプルでスペースを追加してくれます

Googleマップウィジェットの使い方

【徹底解説】Elementorの使い方!!29のウィジェットを全部紹介します。  Elementorのウィジェット29個を全部紹介  Googleマップウィジェットの使い方

GoogleマップウィジェットはGoogleマップを追加できるウィジェットです。

表示したい住所を入力することで簡単に設定可能ですので、お店のホームページなんかにも最適ですね。

アイコンウィジェットの使い方

【徹底解説】Elementorの使い方!!29のウィジェットを全部紹介します。  Elementorのウィジェット29個を全部紹介  アイコンウィジェットの使い方

アイコンウィジェットはElementorで用意されているアイコンを表示することができます

アイコンの種類はかなり多いですし、アイコンの色も変えられるのでかなりお気に入りです。

画像ボックスウィジェットの使い方

【徹底解説】Elementorの使い方!!29のウィジェットを全部紹介します。  Elementorのウィジェット29個を全部紹介  画像ボックスウィジェットの使い方

画像ボックスウィジェットは画像・見出し・テキストエディタ-がひとまとまりになったウィジェットです。

それぞれ用意してもいいですが、初めから用意されていると楽でいいですよね。

アイコンボックスウィジェットの使い方

【徹底解説】Elementorの使い方!!29のウィジェットを全部紹介します。  Elementorのウィジェット29個を全部紹介  アイコンボックスウィジェットの使い方

アイコンボックスウィジェットはアイコン・見出し・テキストエディターがひとまとまりになったウィジェットです。

こちらも簡単でありがたいです。

Ster Ratingウィジェットの使い方

【徹底解説】Elementorの使い方!!29のウィジェットを全部紹介します。  Elementorのウィジェット29個を全部紹介  Ster Ratingウィジェットの使い方

Ster Ratingウィジェットは星での評価が表示されます。

お店や商品の評価を表示するときに使えますね。

画像カルーセルウィジェットの使い方

【徹底解説】Elementorの使い方!!29のウィジェットを全部紹介します。  Elementorのウィジェット29個を全部紹介  画像カルーセルウィジェットの使い方

画像カルーセルウィジェットは画像をスライドショーのようにカルーセル表示してくれます。

表示させたい画像を追加するだけですので、とても簡単に使えます。

画像ギャラリーウィジェットの使い方

【徹底解説】Elementorの使い方!!29のウィジェットを全部紹介します。  Elementorのウィジェット29個を全部紹介  画像ギャラリーウィジェットの使い方

画像ギャラリーウィジェットは登録した画像を一覧で表示してくれます。

ポートフォリオのように使う事もできますね。

アイコンリストウィジェットの使い方

【徹底解説】Elementorの使い方!!29のウィジェットを全部紹介します。  Elementorのウィジェット29個を全部紹介  アイコンリストウィジェットの使い方

アイコンリストウィジェットはアイコンとテキストエディターが一つになったようなイメージです。

ただ一つ特徴があるのは、リストになっているので、連続して特徴を並べるときとかに使えます。

カウンターウィジェットの使い方

【徹底解説】Elementorの使い方!!29のウィジェットを全部紹介します。  Elementorのウィジェット29個を全部紹介  カウンターウィジェットの使い方

カウンターウィジェットは指定した数字がバー―っと表示されるウィジェットです。

ちょっと何言ってるかわからないと思いますので、ぜひ実際に使ってみてください。
けっこうおもしろいですよ。

プログレスバーウィジェットの使い方

【徹底解説】Elementorの使い方!!29のウィジェットを全部紹介します。  Elementorのウィジェット29個を全部紹介  プログレスバーウィジェットの使い方

プログレスバーウィジェットは達成度などを視覚的に表してくれるウィジェットです。

よく使われるのは、ポートフォリオなどで自分のスキルレベルを表示するために使ったりしますね。

推薦文ウィジェットの使い方

【徹底解説】Elementorの使い方!!29のウィジェットを全部紹介します。  Elementorのウィジェット29個を全部紹介  推薦文ウィジェットの使い方

推薦文ウィジェットはいわゆるお客様の声を作れるウィジェットです。

同じような形を再現しようとするとけっこう大変ですので、とてもありがたいですね。

タブウィジェットの使い方

【徹底解説】Elementorの使い方!!29のウィジェットを全部紹介します。  Elementorのウィジェット29個を全部紹介  タブウィジェットの使い方

タブウィジェットはタブごとに任意のテキストを入力できるウィジェットです。

サービスのプラン別の説明であったり、向きを変えて制作事例を並べたりもできます。

アコーディオン・切り替えウィジェットの使い方

【徹底解説】Elementorの使い方!!29のウィジェットを全部紹介します。  Elementorのウィジェット29個を全部紹介  アコーディオンウィジェットの使い方

アコーディオンウィジェットはQ&Aなどを簡単に作れるウィジェットです。

【徹底解説】Elementorの使い方!!29のウィジェットを全部紹介します。  Elementorのウィジェット29個を全部紹介  切り替えウィジェットの使い方

アコーディオンウィジェットとほとんど同じ、切り替えウィジェットもあります。

できることはほとんど同じなので、どっちを使っても良いかと思います。

ソーシャルアイコンウィジェットの使い方

【徹底解説】Elementorの使い方!!29のウィジェットを全部紹介します。  Elementorのウィジェット29個を全部紹介  ソーシャルアイコンウィジェットの使い方

ソーシャルアイコンウィジェットはSNSアイコンを簡単に並べて表示できるウィジェットです。

ホームページを作ったりするときはけっこう使うかと思います。
SNSアイコンの種類もかなり多いですし、リンクの設定もできますので、とても使いやすいウィジェットです。

アラートウィジェットの使い方

【徹底解説】Elementorの使い方!!29のウィジェットを全部紹介します。  Elementorのウィジェット29個を全部紹介  アラートウィジェットの使い方

アラートウィジェットはより目立たせることができるテキストエディターみたいなウィジェットです。

なんか使えそうですが、正直あまり使いません。

SoundCloudウィジェットの使い方

【徹底解説】Elementorの使い方!!29のウィジェットを全部紹介します。  Elementorのウィジェット29個を全部紹介  SoundCloudウィジェットの使い方

SoundCloudウィジェットはSoundCloudという音声メディアを埋め込めるウィジェットです。

SoundCloudを使っていない方にはあまり縁がないウィジェットです。

ショートコードウィジェットの使い方

【徹底解説】Elementorの使い方!!29のウィジェットを全部紹介します。  Elementorのウィジェット29個を全部紹介  ショートコードウィジェットの使い方

ショートコードウィジェットはWordPressで使えるショートコードを埋め込めるウィジェットです。

使い方によってはかなり化けるウィジェットですので、ぜひ覚えておいてください。

HTMLウィジェットの使い方

【徹底解説】Elementorの使い方!!29のウィジェットを全部紹介します。  Elementorのウィジェット29個を全部紹介  HTMLウィジェットの使い方

HTMLウィジェットはHTMLコードを埋め込めるウィジェットです。

HTMLのスキルがある方にとっては、かなり自由度が高くなるウィジェットですね。

メニューアンカーウィジェットの使い方

【徹底解説】Elementorの使い方!!29のウィジェットを全部紹介します。  Elementorのウィジェット29個を全部紹介  メニューアンカーウィジェットの使い方

メニューアンカーウィジェットはページ内にアンカーリンクを埋め込めるウィジェットです。

アンカーリンクを埋め込むと、ボタンのリンクにアンカーリンクIDを設定して埋め込んだ場所まで飛べるようにしたらり、ヘッダーメニューにリンクを設定してLPの使い勝手を上げたりと、かなり使えるウィジェットです。

サイドバーウィジェットの使い方

【徹底解説】Elementorの使い方!!29のウィジェットを全部紹介します。  Elementorのウィジェット29個を全部紹介  サイドバーウィジェットの使い方

サイドバーウィジェットはページのブログのサイドバーを追加することができます

サイドバーのスタイルはテーマによったりします。

Read Moreウィジェットの使い方

【徹底解説】Elementorの使い方!!29のウィジェットを全部紹介します。  Elementorのウィジェット29個を全部紹介  Read Moreウィジェットの使い方

Read Moreウィジェットを使うと、Read More(続きを読む)表示ができます

ただし、アーカイブページで「the_content」があるWordPressテーマでのみ使えます。

Elementor Proの魅力とその学習方法

ざっとElementorの使い方とウィジェットを紹介しました。

無料のElementorでもこれだけ機能が豊富で、まだ紹介しきれていないところもあるのですが、実は有料版のElementor Proを使うとさらに機能が豊富になります。もっと言えば、これからElementorを使ったサイト制作を本格的にやっていこうと考えているなら、Elementor Proの導入は必須と言えます。

ウィジェットの種類が増えたり、ヘッダー・フッターを自由に編集・追加ができたり、使えるテンプレートの数が格段に増えたりと…。

サイト制作の案件を一件受注できたら十分ペイできる金額ですので、ぜひElementor Proを導入して本格的にサイト制作をやっていきましょう!

また、ぼくの公式LINEで未経験から最速でWeb制作スキルを身につける5日間の講座を無料で配信中です。多くの受講者さんが結果を出していますので、ぜひあなたも今すぐ無料で受講を開始しましょう。
≫未経験から最速でWeb制作スキルを身につける5日間の講座を今すぐ無料で受ける