WordPressでElementorPageBuilderを使用する方法

WordPressページビルダーについて話すとき、最も人気があり、アクティブなインストールの数が最も多く、コミュニティが最大ののは間違いなくElementorです。 これまでのところ、Elementorで構築されたサイトは約800万以上あります。 WordPressサイトを構築する際の使いやすさ、速度、および大きな可能性のために、多くの専門家によって推奨されています。

ElementorのProバージョンをテストし、ランディングページを作成しました。 ドラッグアンドドロップ機能が付属しており、任意のテーマで機能し、すべてのFree、Pro、およびWordPressウィジェットを同時に使用できます。 この記事を読んで、WordPressを使用したElementorのインストールと構成について詳しく見ていきましょう。

Elementor Page Builderを選ぶ理由

Elementorは、現時点で市場に出回っている最初で最も先進的なWordPressページビルダーの1つです。 また、その周りには巨大なエコシステムがあり、多くの小規模な作成者が、最終結果に必要な時間を短縮するために使用できる便利なアドオンとテンプレートを構築しています。

Elementorの場合、最終結果は、必要なすべての機能または必要になる可能性のあるすべての機能を備えた、非常に優れたサイトになる可能性があります。 Elementorを使用して構築できないタイプのWordPressサイトはありません。 追加の機能が必要な場合は、ショートコードを使用して簡単に実装できます。

Elementor PageBuilderの機能

Elementorの無料バージョンには限られた数の要素が付属していますが、Proバージョンでは、QI、Ultimate Add Onsなどのアドオンを入手できます。さらに、サイトを簡単に構築するための便利な要素とテンプレートがたくさんあります。 。

GutenbergとElementor用のCrocoblockアドオンを除外するのは公平ではありません。これは、ネイティブのElementorの機能を拡張するため、ほとんどのElementorユーザーに人気のあるツールの1つです。

Elementorはその機能を4つのカテゴリーに分けました。

1.基本的なウィジェット

基本ウィジェットには無料バージョンが付属しており、目次、ポートフォリオ、フォームなどの高度なオプションを必要としない魅力的なWebサイトを構築するにはこれらで十分です。 また、無料版では、ヘッダー/ナビゲーションメニューを作成することはできず、好きなナビゲーションメニューでいくつかのクールなWordPressテーマを見つける必要があるかもしれません。

2.プロウィジェット

Elementor Proを備えたProウィジェットは、あらゆる種類のWebサイトを構築するために必要となる可能性のあるほぼすべての側面とすべてのウィジェットをカバーしています。 さまざまなカテゴリ、投稿タイプから投稿を追加して選択するか、最新のもの、価格表、ギャラリー、フリップボックス、Easy Social Media Networks embed、Various Media Carousels、Lottie Widget、およびHotSpotをリストします（これについては後で説明します）。

3.テーマ要素

テーマ要素にはElementorProも付属しており、もちろんすべてのテンプレートページと単一の投稿テンプレートを作成することが重要です。 ご存知のように、カテゴリ、タグ、作成者などのコンテンツが動的に入力されるページがあります。

これらのページでは、テーマ要素を使用してテンプレートを作成する必要があります。 同じことがシングルポストにも当てはまります。シングルポストでは、毎回作成しなくても、すべてのポストで使用される美しいテンプレートをデザインできます。 慣れているようにコンテンツを追加するだけで完了です。

4.WooCommerceウィジェット

そして最後になりましたが、WooCommerceウィジェット。 これらのウィジェットを使用すると、WooCommerce要素を使用して、テーマビルダー、テンプレートページ、および単一の製品テンプレートと同様のアイテムを簡単に作成できます。

Elementor PageBuilderの価格とプラン

Elementor Proには5つの異なるプランが付属しており、それらすべてに同じElementorProページビルダーと次のような機能が含まれています。

• ドラッグアンドドロップライブエディター
• レスポンシブデザイン
• 90以上のベーシックウィジェットとプロウィジェット
• 300以上のベーシックテンプレートとプロテンプレート
• テーマビルダー

最低プランは、49ドルの価格で1つのサイトに不可欠です。 このプランでは、プレミアムサポートを利用できます。つまり、24時間以内に応答が期待できます。 次のプランはAdvancedで、同じタイプのサポートで99ドルの価格で3つのサイトのライセンスをカバーします。

おそらく最も人気のあるのは、25サイトで199ドルのエキスパートです。 さらに、Elementorエキスパートプロファイルを取得します。このプロファイルでは、Elementorで完了したプロジェクトを投稿し、いくつかの新しいクライアントを取得できます。

トップの1つは、$ 499の価格で100サイトのStudioであり、VIPサポートの追加のメリットがあります。つまり、優先順位が高く、チケットは30分で回答されます。 同じことが1000ドルの価格で1000サイトのための最も高価な計画エージェンシーに付属しています。

すべてのプランは毎年であり、サブスクリプションの有効期限が切れた場合にサイトで何が起こるか疑問に思う場合、答えは、サイトは以前と同じように見えますが、ElementroProの要素やテンプレートを編集または使用することはできません。

Elementorのシステム/ホスティング要件

Elementorのシステム要件ページによると、128MBのPHP、MySQL 5.6以降、またはMariaDB10.0以上でも動作するはずです。 また、PHP7以降でも動作するはずです。 テストの目的で、2GBのPHPメモリを搭載したVultrHFを使用しました。

もちろん、最新のWordPressバージョンと最新の他のすべてのプラグインが必要になります。

Elementor PageBuilderをインストールして構成する

Elementorの無料バージョンのインストールは、WordPressプラグインリポジトリの他のプラグインと同じです。WordPressダッシュボード→プラグイン→新規追加に移動し、Elementorを参照して、プラグインをインストールしてアクティブ化します。

Proバージョンの場合、Elementorでアカウントを自動的に作成するプランを購入する必要があります。 そこにログインすると、最新のProバージョンをダウンロードするためのダウンロードボタンが表示されます。

Elementorダッシュボードにログインしたまま、WordPressダッシュボード→プラグイン→新規追加を選択してアップロードを選択し、コンピューターからElementor Proのダウンロードファイルを参照し、インストールしてアクティブ化します。

WordPressダッシュボードの左側のサイドバーで完了したら、Elementorに移動し、[ライセンス]をクリックし、[接続してアクティブ化]ボタンをクリックします。

クリックすると、Elementorのダッシュボードに自動的にリダイレクトされてアクティブになります。 緑色の[アクティブ化]ボタンをクリックすると、完了です。 Elementor Proが接続され、アクティブ化されています。

アクティベーション後、Elementorがアクティブであることの確認が表示されます。 ただし、ステージングドメインでサイトを構築していて、ライブ用に別のライセンスを購入したくない場合は、ステージング時にアカウントを簡単に切断して、ライブドメインでアクティブ化できます。

Elementorの使用を開始し、Webサイトを構築する時が来ました。 私の提案は、Elementor用に特別に構築されたElementorのHelloThemeを使用することです。

そのためには、まず「ホームページ」ページを作成し、Elementorで編集してみましょう。 [ページ]→[新規追加]に移動し、ホームページに名前を付けて公開し、[Elementorで編集]ボタンをクリックします。

[編集]ページに、レイアウトがデフォルトに設定されているために編集できない要素が表示されます。 空のキャンバスでElementorを使用するには、左下隅にある歯車のアイコンをクリックして、Elementor FullWidthまたはElementorCanvasを選択します。

サイトの構築を開始する前に、左上隅にあるハンバーガーアイコンをクリックして、残りのジョブに必要なすべてのグローバル設定を設定してください。

サイト設定は、テーマの設定と非常によく似ています。 ここでは、グローバルカラー、使用するフォント、および各HTMLタグの完全なサイトタイポグラフィを選択できます。

さらに、必要に応じてグローバルボタンスタイル、ヘッダー、フッター、カスタムCSSを設定できます。また、一貫性を保つために、設定する必要のあるすべてのものをサイト全体でそのように維持できます。

2番目のオプションはテーマビルダーです。これを使用すると、動的に生成された特定のページ、投稿、または製品によって自動的に使用されるテンプレートページと単一の投稿/製品テンプレートを作成できます。 上記のすべてを表示するには、すべてのWordPressテーマにテンプレートファイルが必要であるように、Elementorを使用すると、コードを1行も記述せずにそれを実行できます。

最後のオプションはユーザー設定です。Elementorで作業環境をセットアップできます。サイト自体に影響を与えるものはありませんが、管理者としてのUIに影響します。

サイトを開始するには、使用可能なすべてのウィジェットが左側のサイドバーに配置され、すべてを視覚的に、ドラッグアンドドロップで編集できます。 より簡単な方法が必要な場合は、フォルダーアイコンをクリックして、事前に作成されたブロックまたはテンプレートの1つを使用することから始めることができます。

フォルダアイコンがポップアップを開き、作成済みのブロックとテンプレート、および以前に保存したものを確認できます。 作成したブロックまたはテンプレート全体を保存して、他の内部ページで再利用することもできます。 保存したブロックをお客様の声に使用することは非常に一般的です。これは、すべてのページに表示されるべきではなく、一部のページに表示されるべき特定の行動の呼びかけです。

これまでの経験がなくてもウェブサイトの構築を開始するときに知っておくべきことがもう1つあります。使いやすく、非常に直感的で、数日でこれまでの経験がなくても、すばらしいウェブサイトを構築できる以上のことができます。 、プロ並みの1つでも言えます。

ただし、サイトはすべてのデバイスサイズで見栄えがする必要があり、デスクトップバージョンを編集したのと同じ方法で、他のすべてのサイズを編集できます。 要素とウィジェットはデスクトップバージョンにのみ追加でき、小さいサイズで見た目を騙すことができることに注意してください。

また、ウィジェットやセクションの可視性をさまざまなデバイスで簡単に設定できるため、デスクトップでは1つのセクションを表示し、タブレットやモバイルでは非表示にすることで、同様のセクションにさまざまなコンテンツを含めることができます。 同様に、別のものはデスクトップからは隠されていますが、タブレットとモバイルでは表示されます。

モバイル版とタブレット版を編集するには、左側のサイドバーの下部にあるアイコンレスポンシブモードをクリックすると、モバイルでサイトが表示されます。 また、上部では、さまざまな画面サイズを切り替えることができます。

より明確にするために、2つのセクションを追加しました。一方はモバイルとタブレットで非表示になり、もう一方はデスクトップで非表示になります。 以下の例をご覧ください。

最終結果はモバイル上にあります。

そして、デスクトップの最終結果には1つのセクションしかありませんが、別のセクションがあります。

CloudwaysでのElementorPageBuilderのパフォーマンス

Elementorは非常に優れたパフォーマンスを発揮し、GTMetrixで100点を獲得し、他のテストツールは非常に優れたパフォーマンスを示しています。 行ったすべてのテストで、ページサイズと画像がまったく同じになるように画像を最適化していないことに注意してください。

–GTMetrixでのElementorの結果

–PingdomツールでのElementorの結果

–WebPageTestでのElementorの結果

概要

直感的で使いやすいページビルダーが必要な場合、Elementorは素敵なウェブサイトを構築するために必要なすべての側面をカバーするかもしれません。 CSSの知識があれば、デザインからピクセルパーフェクトなサイトを構築することはそれほど難しくありません。

巨大なコミュニティと、Elementorの基本機能を拡張する何百ものアドオンと外部プラグインがあるため、Elementorを使用して構築できないタイプのWebサイトは表示されません。

Elementorが肥大化し、不要なコードが大量に読み込まれ、最適化が難しいことがよくありますが、テストからわかるように、ElementorはCloudwaysで非常にうまく機能しているようです。 25枚の画像と7つのセクション+ヘッダーとフッターを使用してランディングページをテストしました。これはホームページの平均を上回っています。

Elementorのもう1つの優れた点は、学習曲線が急ではなく非常に軽いことです。事前に作成されたテンプレートまたはブロックを使用することで、わずか数分で、非常に優れたデザインのモダンなWebサイトを作成できます。