WordPressプラグインのElementorを使ってみたいけど使い方がわからない…。とりあえず基本的な使い方を網羅的に学びたいなぁ。各ウィジェットの使い方を簡単に知りたいです。
そんな疑問にお答えします。
どうも、こんにちは。
YUTAROU(@yutarou_sakai)です。
この記事では、Elementor初心者の方に向けてElementor基本的な30のウィジェットをご紹介しています。
また、Elementorで月5万円稼ぐロードマップもご用意していますので、気になる方はチェックしてみてください。
Elementorのウィジェット31個を全部紹介
さて、Elementorの基本的な使い方が分かったところで、Elementorに用意されている31個のウィジェットを紹介してきます。
すべて覚える必要はありませんので、この記事を参考書代わりにするためにブックマークしておいてください。
WordPressの開設方法やElementorの基礎知識がまだチェックできていない方は、以下の記事を参考に準備してみてください。
１．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テーマでのみ使えます。
３０．Text Pathウィジェットの使い方
Text Pathウィジェットを使うと、上画像のような変わったテキストのスタイルを使うことができます。
このウィジェットのおかげで、無料版でもデザインの幅が広がります。
Elementor Proの魅力とその学習方法
ざっと、Elementorの使い方とウィジェットを紹介しました。
無料のElementorでもこれだけ機能が豊富なのですが、実は有料版のElementor Proを使うとさらに機能が豊富になります。
- さらに、31個のウィジェットが追加される
- ホームページ制作には欠かせないページビルダー機能が追加される
- 超高機能なアドオン（拡張機能）プラグインが使える
これからElementorを使ったサイト制作を本格的にやっていこうと考えているなら、Elementor Proの導入は必須と言えます。
サイト制作の案件を一件受注できたら十分ペイできる金額ですので、ぜひElementor Proを導入して本格的にサイト制作をやっていきましょう。