Elementorの30個のウィジェットをすべて紹介!!

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

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

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

この記事では、Elementor初心者の方に向けてElementor基本的な30のウィジェットをご紹介しています。

紹介動画も作っていますので、お好きな方でご覧ください。

また、Elementorで月5万円稼ぐロードマップもご用意していますので、気になる方はチェックしてみてください。

あわせて読みたい
ノーコードWeb制作で月5万円稼ぐロードマップ【副業初心者OK】 Web制作で副業を始めたいけどどうしたらいいんだろう?情報がたくさんありあすぎてどうやって始めればいいのか分からない…。Web制作で月5万円稼ぐまでの方法を誰か教え...
クリックできる目次

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

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

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

準備しよう!

WordPressの開設方法やElementorの基礎知識がまだチェックできていない方は、以下の記事を参考に準備してみてください。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

アコーディオンウィジェットの使い方

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

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

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

切り替えウィジェットの使い方

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

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

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

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

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

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

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

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

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

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

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

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

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

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

24.SoundCloudウィジェットの使い方

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

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

SoundCloudウィジェットの使い方

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

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

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

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

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

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

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

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

26.HTMLウィジェットの使い方

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

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

HTMLウィジェットの使い方

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

30.Text Pathウィジェットの使い方

Text Pathウィジェットを使うと、上画像のような変わったテキストのスタイルを使うことができます。

このウィジェットのおかげで、無料版でもデザインの幅が広がります。

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

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

無料のElementorでもこれだけ機能が豊富なのですが、実は有料版のElementor Proを使うとさらに機能が豊富になります。

  • さらに、31個のウィジェットが追加される
  • ホームページ制作には欠かせないページビルダー機能が追加される
  • 超高機能なアドオン(拡張機能)プラグインが使える

これからElementorを使ったサイト制作を本格的にやっていこうと考えているなら、Elementor Proの導入は必須と言えます。

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

さいごまでご覧いただきありがとうございます!
定期的にブログの新着記事情報を受け取りませんか?

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

YUTAROUのアバター YUTAROU 副業Webマーケター

マーケティングとコードと筋トレが好きです。
都内のITベンチャー企業でデータ分析やABテストをしてバリバリのマーケターとして働きながら、副業でブログやWeb制作メンターをしている24歳です。このブログではビジネスマンのための、副業方法やビジネススキルを発信しています。

詳細なプロフィールはこちらの記事にまとめています
YUTAROUのプロフィール

クリックできる目次
閉じる