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

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

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

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

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

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

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

また、初心者でもステップ・バイ・ステップでElmentorについて学べるオンライン講座「Elementorの教科書」も提供していますので、興味がありましたらぜひご覧ください。

クリックできる目次

Elementorの使い方ロードマップ

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

STEP
Elementorの初期設定
STEP
Elementorの基本操作
STEP
【Elementorの操作】セクションの編集方法
STEP
【Elementorの操作】ウィジェットの使い方
STEP
【Elementorの応用操作】レスポンシブ対応の方法
STEP
【Elementorの応用操作】便利機能の操作方法

この6つのステップに順番で取り組んでいくことで、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のレスポンシブ機能で自在にデザインを適用させる方法 CSSなどを使ってのレスポンシブ対応は非常に面倒ですが、Elementorなら直感かつ自由にレスポンシブ対応を行うことができます。

【Elementorの応用操作】便利機能の操作方法

  • マージン・パディング
  • 開始アニメーションの設定方法
  • 【履歴(リビジョン)】の使い方
  • ナビゲーターの使い方
  • 無料テンプレートを利用して独自LPを作る方法
  • オリジナルテンプレートを作る方法
あわせて読みたい
Elementorの便利機能を使いこなしてサイト制作効率を上げる Elementorの便利機能をいくつか紹介します。これらの機能を上手く使うことで、サイト制作効率を上げることができます。

Elementorのよくある質問

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

Elementorって何ができますか?

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

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

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

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

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

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

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

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

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

あわせて読みたい
ElementorとElementor Proの違い【有料版にする意味ある?】 「ElementorとElementor Proの違いは?」「有料版にする意味はありますか?」という質問への見解をまとめます。

また、Elementor Proを使ったWeb制作の方法は、「Elementorの教科書」にて徹底解説しています。

ぜひ、Elementorを使ったノーコードWeb制作スキルを習得し、オンラインで副業ができる生活をめざしましょう。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
クリックできる目次