Elementor の設定と使い方

Elementor icon

Elementor の特徴

  •  WYSIWYG対応のオーサリングソフトのような感覚で WordPressを編集できる基本機能が無料の WordPress用のウェブサイトビルダープラグイン
  • Smush, Yoast, WooCommerceなど人気のプラグインとシームレスに連携

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

開発元

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

アップグレード

Fences
Start11
PassFab 4Winkey banner
ToDo Buckup
Revo Uninstaller banner1
Repairit banner
Fences
Start11
PassFab 4Winkey banner
ToDo Buckup
Revo Uninstaller banner1
Repairit banner

プランの比較

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

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

インストール

Elementor 004

Elementor 002

Elementor 003

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

アップグレード

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

StreamFab banner
CleverGet banner
DVDFab banner
Prof. Media banner
Epubor banner
StreamFab banner
CleverGet banner
DVDFab banner
Prof. Media banner
Epubor banner

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で編集 から行う。

関連記事
Microsoft Clarity icon

Microsoft Clarity for WordPress の導入と設定

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

Ad-Inserter-Pro-icon

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

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

Ad-Inserter-Pro-icon

Ad Inserter の設定と使い方

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

AICP-icon

Ad Invalid Click Protector の使い方

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

GTrancelate-icon

GTranslate WordPress の設定と使い方

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