【保存版】Elementorの使い方をステップ・バイ・ステップで徹底解説

WordPressプラグインのElementorを使ってみたいけど使い方がわからない…。とりあえず基本的な使い方を網羅的に学びたいなぁ。

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

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

僕はElementorを使ったノーコードWeb制作で、サイト制作の副業をしています。

そんな僕がElementorのインストール方法から具体的な使い方までを徹底解説します。

ぜひこの記事をブックマークして、何度も振り返られるようにしましょう。

また、Elementorを使ったノーコードWeb制作で月5万円を目指すロードマップも用意していますので、興味がありましたらご覧ください。

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

Elementorの使い方ロードマップ

Elementorの使い方を以下の手順で解説します。

STEP
Elementorの初期設定
STEP
Elementorの基本操作
STEP
【Elementorの操作】セクションの編集方法
STEP
【Elementorの操作】ウィジェットの使い方

この4つのステップに順番で取り組んでいくことで、Elementorの使い方をしっかりと身につけることができます。

あ、ちなみにWordPressがすでに用意されている前提ですので、まだの方はレンタルサーバーの契約とWordPressのインストールからはじめてみてください。

あわせて読みたい
【画像で解説】初心者におすすめなWordPressブログ用サーバーと始め方 WordPressでブログを始めたいけどサーバーの契約って難しそう。どのサーバーを選べばいいのかわからないし、誰か丁寧に教えて下さい。。。 そんな方に向けてこの記事を...

Elementorの初期設定

  • Elementorインストール&有効化
  • Elementorに最適なテーマ
  • Elementorで固定ページを作ろう
  • Elementorキャンバスの設定

まずは、Elementorのインストール方法と準備をしていきましょう。

あわせて読みたい
【5分でできる】Elementorのインストールと初期設定 Elementorのインストールと初期設定について、スクショをたくさん使って解説します。5分で準備完了です。

Elementorの基本操作

  • セクションの追加と削除
  • カラムの追加と削除
  • セクションとカラムの修正方法
  • ウィジェットの追加と削除
  • 作成中のページのプレビュー方法
  • 作成中のページのプレビュー方法【スマホビュー】
  • 公開&下書き保存の方法
  • タイトル設定&パーマリンク設定

次に、Elementorの基本操作です。

これらの操作を身につけておくことで、今後のElementorライフがめちゃめちゃ快適になります。

あわせて読みたい
【Elementorの基本操作】最初に覚えておくべき8つの必須知識 Elementorの基本操作を身につけるために、最初に覚えるべき8つの必須知識をスクショたくさんで解説します。

【Elementorの操作】セクションの編集方法

  • 背景に画像を追加する方法
  • 画像のサイズと位置の修正
  • 背景オーバーレイ
  • セクションの複製
  • シェイプ区切り

Elementorは「セクション」というブロックで構成されています。

この「セクション」を制することで、Elementorを制することができるのです。

あわせて読みたい
Elementorの「セクション」を編集する5つの方法【背景画像】 Elementorの基本である「セクション」の編集方法をマスターすれば、かなり自由にサイト制作ができるようになります。

【Elementorの操作】ベーシックウィジェットの使い方

  • Inner Sectionウィジェットの使い方
  • 見出しの使い方
  • 画像ウィジェットの使い方
  • テキストエディターウィジェットの使い方
  • 動画ウィジェットの使い方
  • ボタンウィジェットの使い方
  • 区切り線ウィジェットの使い方
  • スペーサーウィジェットの使い方
  • Googleマップウィジェットの使い方
  • アイコンウィジェットの使い方
あわせて読みたい
Elementorの30個のウィジェットをすべて紹介!! この記事では、Elementor初心者の方に向けてElementorの基本的な30のウィジェットをご紹介しています。

【Elementorの操作】一般ウィジェットの使い方

  • 画像ボックスウィジェットの使い方
  • アイコンボックスウィジェットの使い方
  • Star Ratingウィジェットの使い方
  • 画像カルーセルウィジェットの使い方
  • 画像ギャラリーウィジェットの使い方
  • アイコンリストウィジェットの使い方
  • カウンターウィジェットの使い方
  • プログレスバーウィジェットの使い方
  • 推薦文ウィジェットの使い方
  • タブウィジェットの使い方
  • アコーディオン・切り替えウィジェットの使い方
  • ソーシャルアイコンウィジェットの使い方
  • アラートウィジェットの使い方
  • SoundCloudウィジェットの使い方
  • ショートコードウィジェットの使い方
  • HTMLウィジェットの使い方
  • メニューアンカーウィジェットの使い方
  • サイドバーウィジェットの使い方
  • Read Moreウィジェットの使い方
  • Text Pathウィジェットの使い方
あわせて読みたい
Elementorの30個のウィジェットをすべて紹介!! この記事では、Elementor初心者の方に向けてElementorの基本的な30のウィジェットをご紹介しています。

Elementorのよくある質問

読者さんからよくいただく、Elementorに関しての質問もまとめておきます。

Elementorって何ができますか?

Elementorは個人のホームページや企業のコーポレートサイト、商品・サービスを紹介するランディングページをノーコード(プログラミングなし)で作ることができます。

Elementor Proを使ったほうがいいですか?

目的によるかと思います。簡単なLPぐらいなら無料版のElementorでまったく問題ないですが、Web制作案件を受注していきたいならElementor Proは必須になってきます。

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

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

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

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

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

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

また、Elementorを使ったノーコードWeb制作で月5万円を目指すロードマップも用意していますので、興味がありましたらご覧ください。

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

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

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

この記事を書いた人

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

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

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

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