【2024年版】Elementorの使い方を初心者向けに解説!WordPressで本格サイト構築

1. Elementorとは

Elementorは、WordPressユーザーに広く愛されている無料のページビルダープラグインです。直感的なドラッグ&ドロップ操作で、コーディング知識がなくても本格的なWebサイトを簡単に構築できます。

主な特長は以下の通りです。

・ビジュアルエディタで編集しながらリアルタイムにプレビュー可能・豊富なウィジェットで様々なコンテンツを自在にレイアウト・レスポンシブ対応で、スマホ/タブレット表示を確認しながら編集可能・無料版でも十分に実用的な機能が用意されている

この章では、Elementorの概要とその無料版での使い方を中心に解説していきます。WordPressサイトの本格運用に向けて、ページ構築の基本から応用までをカバーする予定です。

なお、より高度な機能を求める場合は、Elementor Proの有料版もご検討ください。それについては後の章で詳しく触れていきますので、ご期待ください。

ドラッグ&ドロップで直感的に操作可能

Elementorの最大の魅力は、ページ編集画面上でドラッグ&ドロップによる直感的な操作が可能な点です。

セクション、カラムなどの構造要素は、マウスでエリアを選択するだけで簡単に配置できます。また、ウィジェットの挿入も同様に、ウィジェットをドラッグしてカラム内にドロップするだけです。

例えば、以下のように画像ウィジェットを挿入できます。

・ウィジェット一覧から「画像」ウィジェットを選択

・カラムにドラッグ&ドロップ

・画像をアップロードし、設定を調整

このように、直感的な操作で自由にレイアウトを組み立てられるため、HTMLやCSSの知識がなくてもサイト構築が可能です。

Elementorでは、マウス操作に加えてキーボードショートカットも用意されています。「⌘Z」で直前の操作を取り消すなど、作業効率もアップします。

このようにElementorは初心者にも優しいページビルダーツールだと言えるでしょう。

2. Elementorのインストール方法

WordPressプラグインとしてインストール

Elementorをインストールする最も簡単な方法は、WordPressの公式ディレクトリからプラグインをインストールすることです。

手順は以下の通りです。

①WordPressの管理画面にログイン

②「プラグイン」>「新規追加」と進む

③検索ボックスに「Elementor」と入力し、検索結果から「Elementor Website Builder」を選択

④「今すぐインストール」をクリック

以上の手順でElementorのインストールが完了します。

インストール後は「プラグイン」画面から、Elementorの有効化を行います。

■2. Elementorのインストール方法

WordPressサイト構築のための無料ページビルダー「Elementor」のインストール手順について説明しました。WordPressの公式ディレクトリからプラグインをインストールする方法が最も簡単で、管理画面からインストールと有効化を行えば使用準備が整います。

Elementor Proの導入とライセンス認証

Elementor Proは、さらに高度な機能を使えるようになる有料版です。無料版と比べて、より高度なウィジェットやテーマビルダー、WooCommerceインテグレーションなどの機能が追加されています。

Elementor Proを利用するには、公式サイトから年間ライセンスを購入する必要があります。価格は下記の通りです。

エッセンシャルプラン：年間49ドル

エキスパート：年間199ドル

アンリミテッド：年間399ドル

ライセンスを購入後、Elementor本体の「ライセンス」メニューから認証キーを入力することで、Proの機能が使えるようになります。

1年間のサポートとアップデートが付いているので、Elementor本体のアップデートも忘れずに行いましょう。

Elementor Proの詳細な機能については、次の章で説明していきます。

3. Elementorの基本操作

ページ編集画面の概要

ElementorのページエディターはWordPressの投稿画面から起動します。通常のエディターよりも大きなキャンバス上で直感的にページ作りができるのが特徴です。

画面左側にはセクション、カラム、ウィジェットなどのエレメントが配置されています。これらをドラッグ&ドロップでキャンバス上に追加し、レイアウトを組み立てていきます。

セクション：ページの1つの領域を示す

カラム：セクション内のレイアウト単位

ウィジェット：実際のコンテンツを表示する部品

右側のパネルではエレメントごとのスタイル設定やレスポンシブ対応などの詳細な調整が可能です。プレビューウィンドウも確認しながら作業できるので、ビジュアル重視のページ制作に適しています。

以上がElementorのページ編集画面の基本的な構成となります。直感的な操作性と豊富な機能で、WordPressサイトの本格的な構築を支援してくれます。

セクション、カラム、ウィジェットの追加

Elementorの基本操作では、「セクション」「カラム」「ウィジェット」の3つの要素を組み合わせてページを構築していきます。

■セクションセクションとは、ページの大きな領域を分割するための要素です。背景色や背景画像を設定できます。

■カラムカラムはセクション内に並べて配置する縦長の領域です。以下のようにカラム数を変更できます。

1カラム | 2カラム | 3カラム | 4カラム

■ウィジェットウィジェットは実際のコンテンツ(テキスト、画像、ボタンなど)を表示する部品です。ドラッグ&ドロップでカラムの中にウィジェットを配置します。

このように、セクション→カラム→ウィジェットの階層で要素を積み重ねることで、自由度の高いレイアウトを作成できます。ウィジェットの並べ替えや複製、スタイル変更なども直感的に操作できるのがElementorの特徴です。

レイアウト編集の基本操作

Elementorのページ編集画面では、ドラッグ&ドロップでコンテンツの配置を直感的に行えます。まずは画面左側の「エレメント」セクションから、「セクション」をページ上にドラッグします。

セクションの中に「カラム」を配置し、さらにその中に「ウィジェット」を追加していくことで、コンテンツを構築していきます。

例えば、以下のようなレイアウトを作成できます。

セクション

カラム1

------------------------

ヘッダー

ウィジェット

------------------------

配置したウィジェットのスタイルは、画面右側の「スタイル」タブで細かく調整できます。フォントの種類や大きさ、配色などをこのタブで設定します。

また、Elementorの強力な「レスポンシブ」機能により、PCとモバイル端末で表示を自動的に最適化。ドラッグ&ドロップの操作感で直感的にレイアウトを組み立てられるのが大きな魅力です。

4. Elementorのウィジェット

無料版で利用できるウィジェット一覧

Elementorの無料版でも様々なウィジェットを利用できます。主なウィジェットは以下の通りです。

【表】・基本ウィジェットヘディング、画像、テキスト、ビデオ、ボタン、ディバイダー、スペーサー等

・サイトウィジェットナビゲーション、サイトタイトル、サイトロゴ等

・ボックスウィジェット
アイコンボックス、アコーディオン、アラート、カウンター等

・フォームウィジェットフォームフィールド、フィールドグループ、ファイルアップロード等

上記以外にも、Googleマップ、アイコンリスト、カードなど様々なウィジェットが用意されています。無料版でも十分にサイトを構築できますが、更に高度な機能が必要な場合はElementor Proを検討しましょう。

【導入部分】 4章ではElementorに搭載されているウィジェットについて解説します。Elementorは無料版でも様々なウィジェットを利用できますが、Elementor Proに切り替えるとさらに機能が拡張されます。

Elementor Proで追加されるウィジェット

Elementor Proではさらに多くのウィジェットが利用可能になります。主なウィジェットは以下の通りです。

フォームウィジェットを使えば、WordPressサイトに高度なフォーム機能を簡単に実装できます。ポートフォリオウィジェットでは、フィルター機能や美しいレイアウトで作品を紹介できます。

スライダーウィジェットはトップページの目玉コンテンツに最適で、ナビゲーションメニューウィジェットは大規模サイトでの高度なメニュー構築に役立ちます。

このようにElementor Proではサイト構築により高度なニーズに応えられるウィジェットが追加されています。より本格的なサイト作りが可能となります。

5. テンプレートの活用

Elementorのテンプレートライブラリ

Elementorには、美しくデザインされたページやセクションのテンプレートが多数用意されています。テンプレートを利用すれば、素早くサイトを構築できるだけでなく、デザインの参考にもなります。

テンプレートには以下の3種類があります。

ページテンプレート：完全な1ページ分のレイアウトのテンプレート

ブロックテンプレート：ページの一部分(セクション)のテンプレート

ポップアップテンプレート：ポップアップ用のテンプレート

テンプレートのインポートは、編集画面上部の「テンプレートを追加」ボタンから行えます。さまざまなカテゴリから目的のテンプレートを選び、ドラッグ&ドロップでページにレイアウトを追加できます。

また、自作のレイアウトをテンプレート化して保存することも可能です。再利用性の高いテンプレートを作成し、効率的なサイト構築を実現しましょう。

既製テンプレートのインポート方法

Elementorには多数の既製テンプレートが用意されており、これらをインポートすることで短時間でサイトのデザインを構築できます。

手順は以下の通りです。

1.Elementorの編集画面で「テンプレート」>「テンプレートライブラリ」を選択 2.「ブロック」や「ページ」などの種類からインポートしたいテンプレートを選択 3.プレビューでテンプレートを確認し、「インポート」をクリック

このように簡単な操作でテンプレートをサイトにインポートできます。

また、テンプレート自体をカスタマイズする機能もあります。例えば以下のようなカスタマイズが可能です。

コンテンツ：画像やテキストを変更

レイアウト：列の追加/削除など

スタイル：色や余白などの調整

このようにElementorには豊富な既製テンプレートとカスタマイズ機能が備わっており、サイト構築の大幅な効率化が可能になります。

自作テンプレートの保存と再利用

Elementorではページデザインを自作テンプレートとして保存し、後から簡単に呼び出して再利用することができます。これにより、サイト内の複数ページで同一のレイアウトを活用できるだけでなく、新規サイト作成時にも前回作ったテンプレートを流用可能です。

自作テンプレートの保存手順は以下の通りです。

①Elementorのページ編集画面で「保存テンプレート」ボタンをクリック

②「テンプレートタイプ」で「ページ」を選択

③テンプレートの名前を入力して「保存」

保存したテンプレートは後から以下の手順で呼び出せます。

①Elementorのページ編集画面から「テンプレートライブラリ」に移動

②「保存済みテンプレート」から自作テンプレートを選択

③「テンプレートを挿入」をクリック

このように、Elementorでは自由にテンプレートを作成・再利用できるので、サイト構築が非常に効率化されます。

6. Elementor Proの機能

Elementor Proの主な追加機能

Elementor Proには、無料版では利用できない様々な機能が追加されています。主な機能は以下の通りです。

■テーマビルダーサイト全体のヘッダー、フッター、アーカイブページ、シングルページなどをElementorで自由にカスタマイズできます。

■WooCommerceインテグレーション WooCommerceのプロダクトページやカートなどをElementorでデザインできるようになります。

■プロウィジェット Proでしか使えない機能的なウィジェットが60種類以上追加されます。

フォームウィジェット：コンタクトフォームの作成

価格表ウィジェット：料金表を作成

ポップアップウィジェット：ポップアップの作成

その他、Pro版ではロール管理やメンテナンスモード、スクロールナビゲーションなど、様々な機能拡張ができます。

テーマビルダーによるサイト全体のカスタマイズ

■Elementor Proには、サイト全体をElementorでデザインできる「テーマビルダー」機能が搭載されています。この機能を使えば、ヘッダー、フッター、シングルページ、アーカイブページなど、WordPressサイトを構成するほとんどすべての要素をElementorで自由にカスタマイズできます。

例えば、ヘッダーであれば以下のようにカスタマイズできます。

・ロゴ画像の変更

・メニューの配置変更

・検索窓の追加

・背景画像の設定

・スティッキーヘッダーの設定

このように、Elementorの直感的なドラッグ&ドロップ操作で、サイト全体の見た目をオリジナルにデザインすることができるのがテーマビルダーの最大の特徴です。

WooCommerceインテグレーション

Elementor Proでは、WordPressの人気EC(電子商取引)プラグイン「WooCommerce」と密接に連携しています。WooCommerceを使えば、Wordpressサイトに本格的なオンラインショップを構築することが可能です。

Elementor ProのWooCommerceインテグレーションにより、以下のようなメリットがあります。

・WooCommerceの製品ページやカート、チェックアウトページなどをElementorで自由にカスタマイズできる・製品アーカイブやプロダクトグリッドなどのWooCommerceウィジェットが利用可能・WooCommerceテンプレートの新規作成やインポートができる

したがって、WooCommerceとElementor Proを組み合わせることで、デザイン性の高いオンラインストアをドラッグ&ドロップで直感的に作り上げることができます。ECサイト構築の自由度が飛躍的に向上するでしょう。

このように、Elementor ProではWordPressサイト全般のみならず、WooCommerceを利用したECサイト構築もサポートされています。

7. Elementorに最適なWordPressテーマ

Astra などElementor対応テーマの紹介

Elementorを最大限活用するためには、Elementorと相性の良いWordPressテーマを選ぶことが重要です。特にAstraやOceanWPなどの無料テーマは、Elementorとのネイティブ統合に優れています。

Astraは軽量でカスタマイズ性に優れ、Elementorとの連携が緊密なテーマです。

主な特徴: ・Elementorの機能を最大限に発揮できるよう最適化・無駄のないシンプルなデザイン・細かいレイアウト設定が可能

OceanWPも同様にElementorとの連携が緊密で、豊富なフックを備えています。

主な特徴: ・Elementorウィジェットを追加でき、カスタマイズ性が高い・無料版でも十分な機能を備える・高速で軽量な設計

こうしたElementor対応テーマを使えば、Elementorの機能を存分に生かせるだけでなく、テーマ自体のカスタマイズ性も高められます。Elementorの本格運用には最適なテーマ選びが不可欠です。

テーマとElementorの相性

WordPressサイトを構築する際、テーマとページビルダーの相性は非常に重要です。Elementorはテーマを選ばずに利用できますが、一部のテーマではElementorの機能が制限されたり、意図しないレイアウトになる可能性があります。

そこで、Elementorをフルに活用するには、Elementor対応のテーマを選ぶことをおすすめします。例えば、次のようなテーマがElementorに最適化されています。

Astra：軽量でカスタマイズ性が高い無料テーマ。Elementorとの連携に優れる。

Hello Elementor：ElementorのデフォルトテーマでElementorに特化。機能は最小限。

OceanWP：Elementorとの連携に加え、WooCommerceにも対応。

このようにElementor対応のテーマを使えば、Elementorの機能を存分に発揮できます。テーマとの相性がよければ、サイト構築がスムーズに進められるでしょう。

8. Elementorのパフォーマンス最適化

高速化のためのプラグインとテクニック

Elementorを利用したサイト構築では、ページの描画速度低下に注意が必要です。多くのウィジェットやモジュールを配置すると、HTMLやCSSのコード量が膨れ上がり、ページの読み込み時間が長くなる可能性があります。

そこで、次のようなプラグインを利用してページの軽量化を図るのがおすすめです。

Autoptimize：CSSやJavaScriptなどのファイルの圧縮、結合を自動化

WP Smush Pro：画像ファイルのサイズを最適化

Flying Pages：ページキャッシュ機能でページ読み込み速度を向上

また、Elementorのウィジェットやモジュールの使い方にも工夫が必要です。以下のようなテクニックを意識しましょう。

・不要なセクションやウィジェットは削除する

・表示領域外のコンテンツは読み込まない「Lazy Load」を設定する

・ウィジェット内の短縮コードやショートコードは最小限にする

このように、プラグインを活用しながらElementorの設定を見直すことで、サイトの表示速度を向上させることができます。

サイトの軽量化方法

Elementorは非常に高機能なビジュアルビルダーですが、その分リソースを多く消費する傾向にあります。特に画像やビデオなどの重たいメディア素材を多用すると、サイトの表示速度が低下してしまいます。

そこで重要になるのが、以下のような軽量化対策です。

・画像/動画の圧縮　Webp形式への変換や適切な解像度設定により、メディア素材のファイルサイズを小さくします。

・キャッシュの活用　ページキャッシュプラグインを導入し、サーバーの負荷を軽減します。

・コンテンツの最小化　必要最小限のウィジェットやセクションのみ配置することで、無駄な読み込みを抑えます。

・レンダリングの最適化　Elementorの設定から「Improved Asset Load」などの最適化オプションをオンにします。

このように、適切な設定と運用を心がけることで、Elementorサイトでも十分な表示速度を実現できます。

9. Elementorのカスタマイズ

おすすめの無料/有料アドオン

Elementorの機能を拡張するためのさまざまなアドオンが提供されています。無料で利用できるおすすめの人気アドオンは以下の通りです。

Essential Addons for Elementor：様々なウィジェットを追加するオールインワンアドオン

ElementsKit Lite：レスポンシブレイアウトやヘッダー/フッターなどの機能を追加

Happy Addons for Elementor：ウィジェット、テンプレート、拡張機能などを搭載

また、有料のElementor Proには次のような拡張機能が含まれています。・テーマビルダーでサイト全体をカスタマイズ・WooCommerceインテグレーションによる製品ページ作成・リッチなコンテンツウィジェットやフォームウィジェット・追加ページスタイルやスクロールエフェクトなど

Elementor Proの価格は年額49ドル(約6,500円)からとリーズナブルです。

このように無料/有料アドオンを活用することで、Elementorの機能をより高度にカスタマイズでき、サイト構築がさらに効率的になります。ユーザーのニーズに合わせてアドオンを組み合わせるといった使い分けも可能です。

CSSによるカスタマイズ方法

Elementorでは、ページビルダーでの直感的な編集に加えて、CSSによるカスタマイズも可能です。これにより、テーマの標準設計を超えた細かな調整ができるようになります。

Elementorには、ページごとにCSSをカスタマイズする「カスタムCSS」という機能があります。

【手順】

①ページ編集画面の「設定」アイコンをクリック

②「カスタムCSS」を選択

③CSSを入力して「適用」ボタンを押す

例えば、以下のCSSでヘッダーの背景色を変更できます。

.site-header { background-color: #333; }

また、Elementor Proを利用すれば、「セレクターを追加」ボタンを使って特定のウィジェットだけをターゲットにCSSを設定できます。

さらに、「グローバルスタイル」機能でサイト全体のスタイル設定も可能です。一度設定すれば、すべてのページに反映されるので効率的です。

このようにElementorでは、直感的なビジュアル編集とCSSによる細かなカスタマイズを組み合わせることで、きめ細かいWebサイト構築が実現できます。

10. Elementorの運用とメンテナンス

既知の不具合と対処法

Elementorには一部不具合があり、それらへの対処が必要となる場合があります。主な不具合と対処法は以下の通りです。

ページの読み込みが遅い：キャッシュプラグインの導入など、パフォーマンス改善策を講じる

ウィジェットがズレる：正しい階層構造でウィジェットを配置するよう注意する

編集画面が反応しない：一旦ページを再読み込みした上で、作業を再開する

このように、Elementorでは様々な不具合が生じる可能性がありますが、適切な対処を行うことで解決できる場合がほとんどです。不具合発生時は公式サポートやオンラインコミュニティなどで情報収集し、対応策を講じるようにしましょう。また、Elementorの定期的なアップデートも不具合解消に有効です。

■10. Elementorの運用とメンテナンスこの章では、Elementorを安全かつ確実に運用し続けるための方法について解説します。...

定期的なアップデート

Elementorはアクティブに開発が行われており、新機能やバグ修正などが定期的に行われています。そのため、最新のバージョンに常にアップデートしておくことが重要です。

アップデートの確認は、WordPressの管理画面から簡単に行えます。新しいバージョンがリリースされると、管理画面の上部にアップデートの通知が表示されます。

Elementor：3.8.2

アップデート可能：アップデート

通知をクリックすると、上記のようにアップデートの詳細が表示されます。「アップデート」をクリックするだけで、安全かつ確実にアップデートが実行されます。

また、Elementor Proをご利用の場合は、新バージョンがリリースされると自動的にメールでも通知が届きますので、見逃すことなくアップデートできます。

このようにして、Elementorを最新の状態に保つことで、常に新機能を活用でき、安定した動作が期待できます。

Elementorは非常に優れたページビルダーツールですが、より先進的なノーコードWebサイト構築ツールとしてWebflowが注目されています。

・Webflowは、コーディング不要のクラウドベースのWebサイトビルダーである

・HTML、CSS、JavaScriptを自動生成し、完全にカスタマイズ可能なサイトを構築できる

・ドラッグ&ドロップのビジュアルエディタと高度なデザイン機能を備えている

・レスポンシブWebデザインに最適化されている

・E コマースサイトの構築にも対応しており、成長企業におすすめのツールとなっている

・Elementorに比べてより柔軟性が高く、本格的なWebサイト構築が可能である

Webflowは最先端のノーコードWebサイト構築ツールとして、Elementorよりも高度な機能とカスタマイズ性を備えており、今後の普及が期待されています。

‍

目次