Elementor の設定と使い方

Elementor icon

Elementorは WordPress用のウェブサイトビルダープラグイン。

Elementor の特徴

  •  WYSIWYG対応のオーサリングソフトのような感覚で WordPressを編集
  • 基本機能は無料で利用可能
  • Smush、Yoast、WooCommerceなど人気のプラグインとシームレスに連携

WYSIWYG(ウィジウィグ)は What You See Is What You Get(見たままをGETできる)の略で、ワープロソフトやグラフィックソフトのように完成時のイメージを編集して Webページを作成できる。

開発元

  • 開発元:Elementor Ltd
  • 開発元の拠点:イスラエル

システム要件

  • バージョン:3.27.3
  • WordPress:バージョン 6.3 以上(6.7.1までサポート)
  • PHP:バージョン 7.4 以上

プランの比較

無料版 Pro - Essential Pro - Advance
利用可能サイト数 1 1 3
ウィジェット Base 40+ Base +  Pro用50 Base +  Pro用82
テンプレート
テーマビルダー
モーションエフェクト
動的コンテンツの作成
価格 無料 59米ドル/ 年 99米ドル/ 年
アップグレード

Elementor Pro は Elementor Core(無料版)の拡張機能で、Elementor Proのライセンスを購入すると Elementorの管理画面(ダッシュボード)右上に追加プラグインのダウンロードアイコンが表示されるので、ダウンロードして WordPressにインストール後、WordPressの Elementorのメニューから「ライセンス」を開き、アカウント情報を入力して接続する。

アップグレード

Elementorはホスティングサービスも扱っており、Elementor Pro サブスクリプションとは別に WordPressのホスティングプランも提供している。

Epubor 800x120-25323
CleverGet 800x120-25323
StreamFab 800x120-25323
DVDFab 800x120-25323
Start11 800x120-25323
Fences 800x120-25323
Epubor 800x120-25323
CleverGet 800x120-25323
StreamFab 800x120-25323
DVDFab 800x120-25323
Start11 800x120-25323
Fences 800x120-25323

インストール

Elementor 004

Elementor 002

Elementor 003

WordPressの管理画面にログインし、左サイドパネルの プラグイン を開いて「新規プラグインを追加」で elementor を検索し、Elementor Website Builder をインストールして有効化。

Start11 800x120-25323
Fences 800x120-25323
DVDFab 800x120-25323
StreamFab 800x120-25323
Epubor 800x120-25323
Start11 800x120-25323
Fences 800x120-25323
DVDFab 800x120-25323
StreamFab 800x120-25323
Epubor 800x120-25323

Elementor の使い方

Elementor 011

Elementor 005

WordPressで投稿や固定ページの編集画面を開き、タイトルを入力してから「Elementorで編集」をクリック。

無料版の Elementor Coeのエディタではタイトルを直接編集できないので、変更する場合はページ設定で編集する。

Elementor 012

使用しているテーマを反映した状態で Elementorのエディタが開く。

Elementor 010

Elementor 013

左サイドパネルから使用するウィジェットをドラッグして追加すると、左サイドパネルがウィジェットの設定画面になるので編集。

編集画面は公開時の見え方とほぼ同じため、プレビューで確認しなくても直感的にデザインできる。

Elementor 014

ブロックエディタなので追加したウィジェットはコンテナをドラッグして再配置でき、削除する場合はコンテナを「✕」で閉じる。

ウィジェットの設定画面はコンテナ右の編集アイコンをクリックすると表示される。

Elementor 015

Elementor 016

テキスト・画像・動画などの基本的なコンテンツのほか、タブや画像カルーセルなども無料で使用できる。

Elementor Proにアップグレードするとサイトの設定、タイトルの編集、動的なウィジェットなど多彩な機能が利用可能になる。

Elementor 017

作成したコンテンツは左サイドパネル下の「公開」で公開するか、下書きとして保存する場合は「公開」のメニューリストから選択。

Elementor 018

Elementor 019

Elementor 020

Elementorエディタ左上のハンバーガーボタンから 終了 を選択すると WordPressの標準エディタに戻るので、右上の WordPressアイコンをクリック。

Elementor 021

Elementorを使用した投稿や固定ページは WordPressの標準エディタではコンテンツを編集できないため、修正や更新は Elementorで編集 から行う。

備考

WordPressで見栄えのするウェブサイトをオーサリングソフトのような感覚で制作できるオールインワンタイプのプラグインで、無料版では利用できるウィジェットは限られているが、それでも一般的なブログとは一線を画したページデザインにできる。

関連記事

Ad Invalid Click Protector の使い方

Googleアドセンスのクリックを繰り返す悪質な行為「アドセンス狩り」の 対策として人気の WordPress用 プラグイン AICP を利用するための動作条件などを紹介

GTranslate WordPress の設定と使い方

翻訳精度が高い Google のニューラル翻訳 を利用して翻訳されたページを サブドメインやサブディレクトリで配信できるリーズナブルな Wordpress の翻訳プラグイン

Microsoft Clarity for WordPress の導入と設定

見やすい UIでスクロールの奥行きやデッドクリックなどを確認でき、サイトのユーザーエクスペリエンスの分析に最適な、ウェブサイトのユーザー インタラクションを把握できる無料の行動分析ツール

Ad Inserter Pro のインストールと設定

広告の表示位置を柔軟に設定できるだけでなく、クリック詐欺の防止・アドブロックを検出時に指定した広告の表示やコンテンツの非表示化、ブロック毎のIMPやCTRなどのレポートも表示可能な広告管理プラグイン

Ad Inserter の設定と使い方

広告を表示するデバイス の指定や見出し・コンテンツ・コメントなど柔軟な表示設定ができ、広告別の表示 / 非表示 設定やアドブロックの検知も可能な WordPress 用の広告管理プラグイン