そんな疑問にお答えします。
どうも、こんにちは。
友太郎(@yutarou_sakai)です。
この記事ではWordPressプラグインである「Elementor」の使い方を徹底解説しています。
- Elementorの基本的な使い方が分かる
- Elementorの基本ウィジェットの使い方が分かる
- Elementor Proの特徴まで分かる
僕は現在Elementor専門でWeb制作をしておりまして、毎日Elementorをこねくり回しています。
毎日Elementorを使っていくうちに、もっとElementorを皆さんに知ってほしいと思い、今回は初心者の方に向けてElementorのインストール方法～基本的な29のウィジェットの使い方までご紹介しています。
また、動画で学べるElementor講座・Elementor Pro講座を作成しました。今なら「WordPress開設講座」と「Elementor講座」は無料で受講可能です。オンライン動画で詳しく解説しているのでいつでもどこでも受講できます。本気で学びたい方はぜひチェックしてください。
タップできる目次
- Elementorの基本的な使い方
- Elementorの基本操作
- Elementorのウィジェット29個を全部紹介
- Inner Sectionウィジェットの使い方
- 見出しウィジェットの使い方
- 画像ウィジェットの使い方
- テキストエディターウィジェットの使い方
- 動画ウィジェットの使い方
- ボタンウィジェットの使い方
- 区切り線ウィジェットの使い方
- スペーサーウィジェットの使い方
- Googleマップウィジェットの使い方
- アイコンウィジェットの使い方
- 画像ボックスウィジェットの使い方
- アイコンボックスウィジェットの使い方
- Ster Ratingウィジェットの使い方
- 画像カルーセルウィジェットの使い方
- 画像ギャラリーウィジェットの使い方
- アイコンリストウィジェットの使い方
- カウンターウィジェットの使い方
- プログレスバーウィジェットの使い方
- 推薦文ウィジェットの使い方
- タブウィジェットの使い方
- アコーディオン・切り替えウィジェットの使い方
- ソーシャルアイコンウィジェットの使い方
- アラートウィジェットの使い方
- SoundCloudウィジェットの使い方
- ショートコードウィジェットの使い方
- HTMLウィジェットの使い方
- メニューアンカーウィジェットの使い方
- サイドバーウィジェットの使い方
- Read Moreウィジェットの使い方
- Elementor Proの魅力とその学習方法
Elementorの基本的な使い方
ElementorはWordPressのプラグインです。
そのため、すでにWordPressのインストールが完了し、管理画面にログインできている状況を想定しています。
まだWordPressのインストールが済んでいないという方は【初心者向け】WordPressでホームページを作る方法を徹底解説！！で簡単に始められるよう解説していますので、まずはこちらを参考にWordPressをインストールしてみてください。
Elementorのインストールと有効化
まずはElementorをインストールしていきます。
WordPressの管理画面から「プラグイン>新規追加」をクリック。
検索ボックスに「Elementor」と入力すると、画像左の「Elementor Website Builder」が出てきますので「今すぐインストール>有効化」と進んでください。
管理画面の左メニュー欄に「Elementor」という項目が追加されていれば、インストール＆有効化の完了です！
Elementorで固定ページを作る
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のページ属性の話が出ましたので、Elementorで使う二つのページ属性について軽く解説します。
そんなに難しくありませんし、使うのはどちらか一つですのでサクッといきましょう。
Elementor キャンバス
「Elementor キャンバス」を選択すると、ヘッダーもフッターもないまっさらなページが表示されます。
例えば商品やサービスを紹介するためのLP（ランディングページ）を作る際はこちらを設定してください。
※今回は「Elementor キャンバス」を設定した状態で解説します。
Elementor 全幅
「Elemento 全幅」を選択すると、ヘッダーとフッターが付いたページが表示されます。
Elementorでコーポレートサイトを制作するときなどは、こちらを選択してください。
Elementorの基本操作
これからさっそくElementorの具体的な操作方法をご紹介していきます。
まずは、Elementorで共通して大切な「セクション」「カラム」「ウィジェット」の追加と削除の方法からです！
セクションの追加と削除
「セクション」とはElementorの色々な要素を入れていく一番大きな箱です。
このセクションをどんどん積み重ねながら、中に色々な要素入れていきながらページを作っていきます。
Elementorの編集画面にやってきたら、左のメニュー欄と右の作業スペースが表示されます。
この作業スペースの「+」マークをクリックするとセクションを追加することができます。
ここでセクションの構造を選ぶことができます。
あとから追加・削除も可能ですので、適当に選んでみてください。
セクションはセクションにマウスを乗せた時に中央上部に表示される「×」ボタンで簡単に削除可能です。
追加も削除も簡単にできますので、まずは色々と試してみてください！
カラムの追加と削除
現在、セクションの中に二つ「+」マークが付いた箱があるのですが、これら一つ一つを「カラム」と呼びます。
このカラムを上手く使うことで、様々な配置で要素を表示し、ページを作成していくことが可能になります。
現在の構成は上図のようになっていますね。
そしてカラムにマウスを乗せると左上に編集マークが現れます。
それを右クリックするとカラムの編集メニューが表示されますので、そこからカラムの追加・複製・削除が可能です。
この編集メニューはめちゃめちゃ使いますので、表示のさせ方はぜひ覚えておきましょう。
ウィジェットの追加と削除
カラムが追加できたら、次は「ウィジェット」を追加していきます。
それぞれの特徴を持った豊富なウィジェットがElementor最大の魅力です！！
Elementor編集画面の左メニュー欄から、適当なウィジェットを選んでドラッグ＆ドロップでカラムに追加してみてください。
カラムに重ねた時に青く表示されれば追加可能です。
今回「見出し」ウィジェットの追加してみると、このような形になりました。
別のウィジェットでも何かしら表示されていればOKです！
ウィジェットにマウスを合わせて右上に表示される「ペン」マークを右クリックすることで、ウィジェットの編集・複製・削除などが可能です。
この辺りはカラムやセクションと同じですね！
Elementorのウィジェット29個を全部紹介
さて、Elementorの基本的な使い方が分かったところで、Elementorに用意されている29個のウィジェットをすべて紹介してきます。
すべて覚える必要はありませんので、この記事を参考書代わりにするためにブックマークしておいてください。
Inner Sectionウィジェットの使い方
Inner Sectionウィジェット（内部セクションウィジェット）は、カラムの中にさらにセクションを追加することができるウィジェットです。
画像ではセクション→赤、カラム→青、Inner Sectionウィジェット→緑で表示しています。
そしてInner Sectionウィジェットの中にもカラムがありますので、かなり自由度が高い配置をすることができるようになります。
ただし、Inner Sectionウィジェットの中にInner Sectionウィジェットを入れることはできません！
見出しウィジェットの使い方
見出しウィジェットはそのまま見出しを追加することができます。
専門的なことを言うとHTMLのh1、h2などの見出しタグが設定されているウィジェットです。
デザイン的な理由で使ってもいいですが、SEO対策を考えるなら見出しウィジェットのh1、h2などのタグを適切に設定する必要があります。
画像ウィジェットの使い方
画像ウィジェットはページに画像を追加することができます。
お好きな画像を追加可能で、画像サイズ・キャプション・リンクなども設定可能です。
テキストエディターウィジェットの使い方
テキストエディターウィジェットは自由にテキストを入力できるテキストボックスを追加できます。
テキストを追加するだけではなく、テキストのフォントや大きさ・色なども設定可能です。
動画ウィジェットの使い方
動画ウィジェットはYouTubeやvimeoなどの動画を簡単に表示することができます。
YouTubeにアップロードされている動画ならURLを入力することで簡単に埋め込みことができますので、とても便利です。
ボタンウィジェットの使い方
ボタンウィジェットはボタンを追加することができます。
このボタンがけっこう便利でボタンの文字や色を変更できることはもちろん、アニメーションの設定などもできますので、ぜひ活用してください。
区切り線ウィジェットの使い方
区切り線ウィジェットはそのまま区切り線を追加することができます。
区切り線の太さや色の変更もできますし、区切り線の種類（ドットなど）も設定可能ですので、使い方によってはかなり使えるウィジェットです。
スペーサーウィジェットの使い方
スペーサーウィジェットはめっちゃシンプルでスペースを追加してくれます。
Googleマップウィジェットの使い方
GoogleマップウィジェットはGoogleマップを追加できるウィジェットです。
表示したい住所を入力することで簡単に設定可能ですので、お店のホームページなんかにも最適ですね。
アイコンウィジェットの使い方
アイコンウィジェットはElementorで用意されているアイコンを表示することができます。
アイコンの種類はかなり多いですし、アイコンの色も変えられるのでかなりお気に入りです。
画像ボックスウィジェットの使い方
画像ボックスウィジェットは画像・見出し・テキストエディタ－がひとまとまりになったウィジェットです。
それぞれ用意してもいいですが、初めから用意されていると楽でいいですよね。
アイコンボックスウィジェットの使い方
アイコンボックスウィジェットはアイコン・見出し・テキストエディターがひとまとまりになったウィジェットです。
こちらも簡単でありがたいです。
Ster Ratingウィジェットの使い方
Ster Ratingウィジェットは星での評価が表示されます。
お店や商品の評価を表示するときに使えますね。
画像カルーセルウィジェットの使い方
画像カルーセルウィジェットは画像をスライドショーのようにカルーセル表示してくれます。
表示させたい画像を追加するだけですので、とても簡単に使えます。
画像ギャラリーウィジェットの使い方
画像ギャラリーウィジェットは登録した画像を一覧で表示してくれます。
ポートフォリオのように使う事もできますね。
アイコンリストウィジェットの使い方
アイコンリストウィジェットはアイコンとテキストエディターが一つになったようなイメージです。
ただ一つ特徴があるのは、リストになっているので、連続して特徴を並べるときとかに使えます。
カウンターウィジェットの使い方
カウンターウィジェットは指定した数字がバー―っと表示されるウィジェットです。
ちょっと何言ってるかわからないと思いますので、ぜひ実際に使ってみてください。
けっこうおもしろいですよ。
プログレスバーウィジェットの使い方
プログレスバーウィジェットは達成度などを視覚的に表してくれるウィジェットです。
よく使われるのは、ポートフォリオなどで自分のスキルレベルを表示するために使ったりしますね。
推薦文ウィジェットの使い方
推薦文ウィジェットはいわゆるお客様の声を作れるウィジェットです。
同じような形を再現しようとするとけっこう大変ですので、とてもありがたいですね。
タブウィジェットの使い方
タブウィジェットはタブごとに任意のテキストを入力できるウィジェットです。
サービスのプラン別の説明であったり、向きを変えて制作事例を並べたりもできます。
アコーディオン・切り替えウィジェットの使い方
アコーディオンウィジェットはQ&Aなどを簡単に作れるウィジェットです。
アコーディオンウィジェットとほとんど同じ、切り替えウィジェットもあります。
できることはほとんど同じなので、どっちを使っても良いかと思います。
ソーシャルアイコンウィジェットの使い方
ソーシャルアイコンウィジェットはSNSアイコンを簡単に並べて表示できるウィジェットです。
ホームページを作ったりするときはけっこう使うかと思います。
SNSアイコンの種類もかなり多いですし、リンクの設定もできますので、とても使いやすいウィジェットです。
アラートウィジェットの使い方
アラートウィジェットはより目立たせることができるテキストエディターみたいなウィジェットです。
なんか使えそうですが、正直あまり使いません。
SoundCloudウィジェットの使い方
SoundCloudウィジェットはSoundCloudという音声メディアを埋め込めるウィジェットです。
SoundCloudを使っていない方にはあまり縁がないウィジェットです。
ショートコードウィジェットの使い方
ショートコードウィジェットはWordPressで使えるショートコードを埋め込めるウィジェットです。
使い方によってはかなり化けるウィジェットですので、ぜひ覚えておいてください。
HTMLウィジェットの使い方
HTMLウィジェットはHTMLコードを埋め込めるウィジェットです。
HTMLのスキルがある方にとっては、かなり自由度が高くなるウィジェットですね。
メニューアンカーウィジェットの使い方
メニューアンカーウィジェットはページ内にアンカーリンクを埋め込めるウィジェットです。
アンカーリンクを埋め込むと、ボタンのリンクにアンカーリンクIDを設定して埋め込んだ場所まで飛べるようにしたらり、ヘッダーメニューにリンクを設定してLPの使い勝手を上げたりと、かなり使えるウィジェットです。
サイドバーウィジェットの使い方
サイドバーウィジェットはページのブログのサイドバーを追加することができます。
サイドバーのスタイルはテーマによったりします。
Read Moreウィジェットの使い方
Read Moreウィジェットを使うと、Read More（続きを読む）表示ができます。
ただし、アーカイブページで「the_content」があるWordPressテーマでのみ使えます。
Elementor Proの魅力とその学習方法
ざっとElementorの使い方とウィジェットを紹介しました。
無料のElementorでもこれだけ機能が豊富で、まだ紹介しきれていないところもあるのですが、実は有料版のElementor Proを使うとさらに機能が豊富になります。もっと言えば、これからElementorを使ったサイト制作を本格的にやっていこうと考えているなら、Elementor Proの導入は必須と言えます。
ウィジェットの種類が増えたり、ヘッダー・フッターを自由に編集・追加ができたり、使えるテンプレートの数が格段に増えたりと…。
サイト制作の案件を一件受注できたら十分ペイできる金額ですので、ぜひElementor Proを導入して本格的にサイト制作をやっていきましょう！
また、この記事の冒頭でもお伝えしたのですが、現在動画で学べるElementor講座・Elementor Pro講座をご用意しました！
Elementorの使い方だけでなく、Elementorを使用したコーポレートサイト制作や案件の獲得方法まで、まるっと自分のペースで学ぶことができます。
本気でWeb系フリーランスとして稼ぎたいならチェック必須です。
>>プログラミングなしでホームページを作り在宅で月5万円稼げるスキルを身につけるコース
WordPressプラグインのElementorを使ってみたいけど使い方が分からない…。とりあえず基本的な使い方を網羅的に学びたいな。各ウィジェットの使い方を簡単に知りたいです。