WooCommerce + Elementor: クールなものを作ろう

公開: 2022-07-27

開発者を雇わずに WordPress ウェブサイトを微調整してデザインしたいですか? 良いニュース: WordPress ページビルダープラグインを使用すれば、完全に可能です。

WordPress ページビルダープラグインには、直感的なドラッグアンドドロップインターフェイスが付属しており、美しいカスタムページや Web サイトを作成できます。したがって、スキルセットや技術的なノウハウに関係なく、ページビルダープラグインを使用すると、コードを 1 行も書かずに、理想的な Web サイトを簡単に設計できます。

さて、どの WordPress ページビルダープラグインを検討すべきか迷っているなら、あなたは正しい場所にいます. この記事では、最も一般的なオプションの 1 つである、ゴールドスタンダードと見なされている Elementor について説明します。 Elementor は 2 番目に多くインストールされている WordPress プラグインであり、200 万回のアクティブなインストールがあり、WordPress Web サイトの約 15.9% で使用されています。

Elementor の簡単な概要から始めて、プラグインのインターフェイス、機能、および価格をさらに見直して、それがサイトにとって正しい選択であるかどうかを判断できるようにします. さあ行こう！

Elementor プラグイン: 概要

Elementor は、WooCommerce または WordPress テーマに付属する標準のページテンプレートと比較して、独自の Web ページと投稿を作成できる視覚的なドラッグアンドドロップの WordPress ページビルダープラグインです。

コーディングは不要で、設定を簡単に構成し、ドラッグアンドドロップツールを使用してページのコンテンツと要素を整理できます。

Elementorインターフェースがどのように機能するかを見て、プラグインのレビューから始めましょう.

Elementor プラグインインターフェイスについて

他の多くのページビルダープラグインと比較して、Elementor は最もシンプルでシームレスなインターフェイスの 1 つを備えています。プラグインを初めて起動すると、次のようなページが表示されます。

点線のような灰色の領域はコンテンツ領域です。この領域の外側には、通常のテーマが表示されますが、点線の領域内では、ウィジェットを追加して独自のデザインを作成できます。

左側にはウィジェットが表示されます。ウィジェットは、ページをデザインするために組み立てることができるビルディングブロックとして機能します。これらのウィジェットの下には、画像に示すように、デザインをプレビューしたり、変更を元に戻したり、レスポンシブモードに切り替えたりするための一般設定があります。

ページ上で目的の要素をドラッグアンドドロップするのがいかに簡単かを次に示します。

ページに要素をドロップすると、Elementor は要素を 2 つのレイアウト構造に分割し、以下に示すように 2 つの異なる構造要素を提供します。

これらの構造要素は次のとおりです。

セクション:青色でマークされています。
列:黒でマークされたセクションの内側にあります。セクション内に必要な数の列を追加できます。

要素をドロップすると、幅を調整し、列のギャップと高さを変更することで、レイアウトを簡単にカスタマイズできます。

さらに、特定の要件に応じて適切なセクション構造を選択し、列内に画像、ビデオ、アイコンなどの他の要素を追加することもできます.

たとえば、以下の画像に示すように、画像を追加し、デフォルトの Elementor 画像ライブラリから 1 つを選択しました。画像のサイズと配置を変更したり、キャプションを追加したり、適切な URL にリンクしたりできます。

要素、構造、または列をさらにスタイル設定するには、サイドバーの [スタイル] タブと [詳細] タブを使用できます。スタイルを設定したいコンテンツをクリックし、サイドバーのタブをクリックして変更を加えます。

サイドバーの右隅に表示される四角いアイコンをクリックするだけで、タブから要素サイドバーに移動することもできます。

したがって、Elementor は非常に使いやすく、シンプルなドラッグアンドドロップと簡単なカスタマイズオプションを使用して、夢の Web サイトをすぐに構築できます。

時間をかけずに、Elementor ページビルダーの機能に飛び込みましょう。

WooCommerce の優れたページビルダーとなる Elementor の主な機能

WordPress および WooCommerce Web サイトの中で最も人気のあるページビルダーの 1 つとなっている Elementor の優れた利点を次に示します。

豊富な既製のテンプレートライブラリ

Elementor には、さまざまなテンプレートが用意されています。下の [テンプレートの追加] アイコンをクリックして、テンプレートを追加します。

Elementor テンプレートライブラリの 300 以上のテンプレートから選択し、ワンクリックでページに追加します。

Elementor 2.0 のリリース以降、これらのテンプレートには 2 つの形式があります。

ブロック:ページ全体ではなく、特定のセクションのデザインを提供します。たとえば、ブロックを使用して、会社概要セクションまたは事前構築済みの連絡先セクションを既存のページレイアウトに追加できます。

ページ –フルページのデザインを提供します。ワンクリックでインポートして、必要に応じて微調整できます。

デザインの一部をブロックやテンプレートとして保存して、後で他のページや Web サイトで再利用することもできます。これにより、Web サイト全体で共通のテンプレートデザインを維持するのに非常に便利です。

また、毎回ゼロから新しいページデザインを作成する手間も省けます。

レスポンシブデザインコントロールとモバイルプレビュー

モバイルの使用は毎月一貫して増加しており、Web デザイナーの約 73.1% が、レスポンシブでないページデザインが Web サイトの放棄の最大の理由の 1 つだと考えています。

Elementor で作成したすべてのデザインとページは自動的に応答し、モバイルデバイスで見栄えがします。さらに、インターフェイスから離れることなく、Web サイトが他のデバイスでどのように表示されるかをすばやくプレビューできます。

サイドバーの下部にある [レスポンシブモード] ボタンをクリックし、下の画像で強調表示されているボタンをクリックして、Web サイトのデスクトップ、モバイル、およびタブレットバージョンをプレビューします。

デバイスの種類に基づいてページのデザインをカスタマイズし、特定のデバイスで特定のウィジェットを表示または非表示にすることができます。たとえば、Web サイトのデスクトップバージョンに巨大なヒーロー画像がある場合、その画像をサイトのモバイルバージョンに表示することは避けることができます。 Elementor のレスポンシブデザインコントロールを使用して、トグル 1 回クリックするだけで、その画像または非表示にしたいセクションを選択して、モバイルデバイスで非表示にすることができます。

したがって、Web サイトが 100% レスポンシブであることを保証するため、デスクトップ、タブレット、モバイルデバイスを含むすべてのデバイスで見栄えがよくなります。

無限のカスタマイズオプション

Elementor のカスタマイズは無限であり、ウェブサイトとその要素をどのようにデザインできるかに制限はありません。

Elementor エディターの [スタイル] メニューと [詳細] メニューには、スタイルのカスタマイズオプションが多数用意されています。色、幅、サイズ、CSS フィルター、境界線など、いくつかの属性に従ってコンテンツのスタイルを設定できます。

同時に、詳細メニューでは、以下に示すように、レイアウト、モーション効果、背景、境界線、属性、およびその他の要素を管理できます。

詳細なレイアウトコントロール

カスタマイズオプションをさらに詳しく調べると、Elementor を使用するとレイアウトデザインを詳細に制御できるため、カスタムコードを記述できないためにデザインの柔軟性を犠牲にする必要はありません。

Elementor では、多くの直感的な制御オプションを使用して、セクション、ウィジェット、および列を必要な場所に正確に配置することが簡単になります。

詳細メニューのレイアウトコントロールを使用すると、次のことができます。

セクション、ウィジェット、および列のマージンとパディングを手動で設定します。
セクションの幅(デフォルト、全幅、インライン、カスタム) を選択します。
列内のウィジェットの位置を調整します - デフォルト、固定、および絶対。
柱と柱の間の隙間を調整して余白を作り、すっきりとしたレイアウトに。

したがって、コーディングのスキルがなくても、ウィジェットの配置を簡単に調整し、必要に応じて列とセクションをカスタマイズできます。

変更の取り消し/やり直しによる進行状況の完全な改訂履歴

Elementor の優れた機能の 1 つは、行ったすべての変更の履歴全体をプレビューして、すべてのアクションを履歴に記録できることです。

さらに、必要に応じて、簡単に変更を元に戻し、以前のバージョンに戻すことができます。また、新しいデザインを保存するときはいつでも、必要に応じて完全に新しいリビジョンに簡単に戻すことができます。

クリーンなコードを残す

将来何らかの理由で Elementor を無効にしたい場合でも、Divi Builder のような大量のショートコードが残ることを心配する必要はありません。

Elementor はクリーンなコードを残し、最適なパフォーマンスとページ速度を保証します。

Elementor のその他の機能

Elementor ページビルダープラグインのその他の機能は次のとおりです。

ヘッダーとフッターのエディター: Elementor を使用すると、コーディングのスキルがなくても、サイトのヘッダーとフッターを簡単に編集できます。
インラインテキスト編集:この機能を使用すると、画面上でテキストをライブで編集できるため、既存のテキストコンテンツの編集やブログ投稿の作成が簡単になります。
RTL および翻訳対応: Elementor には 23 の翻訳言語が用意されており、RTL 言語を完全にサポートしているため、追加の言語に簡単に翻訳できます。
WooCommerce ウィジェット:価格表や価格表など、事前に構築された WooCommerce ウィジェットを提供して、e コマース Web サイトの構築を簡単にします。
サードパーティの統合: Elementor は、ActiveCampaign や MailChimp などのサードパーティの統合をサポートしています。
グローバルな色とタイポグラフィのオプション: Elementor では、グローバルなタイポグラフィと色を設定して、すべてのページにわたって包括的なデザインを作成できます。さらに、800 以上の Google フォントからウェブサイトのデザインを選択することもできます。
メンテナンスモード: Elementor のメンテナンスモードテンプレートを利用して、Web サイトをメンテナンスモードに設定できます。

Elementor Proレビュー

コアの Elementor ページビルダーはオープンソースで無料ですが、追加の便利な機能を提供する Elementor Pro バージョンにアップグレードできます.

新しい Elementor Pro プラグインのいくつかの機能を簡単に紹介します。

WordPressテーマ全体を構築できます。
スライダー、ソーシャル共有ボタン、フォーム、カウントダウンタイマー、ログインフォームなど、よりエキサイティングなウィジェットがあります。
高品質のプレミアム Elementor Pro テンプレートを多数提供します。

したがって、より多くの機能、プレミアムテンプレート、およびグローバルウィジェットが必要な場合は、Elementor Pro プラグインをわずか 49 ドルから購入できます.

Elementorの価格レビュー

シンプルで基本的なスタイルのウェブサイトを構築したい場合は、最も機能が豊富な無料のページビルダーであることを考えると、プラグインの無料バージョンで十分です.

ただし、よりプロフェッショナルな Web サイトを作成するために、Elementor は VIP サポートや Elementor Expert Profile などのプレミアム機能を備えた 4 つのプレミアムプランを提供しています。

Elementor プラグインの Essential、Expert、Studio、Agency プランの年間料金は、49 ドル、199 ドル、499 ドル、999 ドルです。したがって、Elementor はすべての人に適しています。Web デザイナー、開発者、エージェンシーのオーナーなど、Elementor はあらゆるニーズと要求に対応する機能を提供します。

結論：最終評決

この包括的なレビューの後、Elementor は WordPress または WooCommerce Web サイトを構築するために必要なすべての必須機能を提供すると言っても過言ではありません.

軽量でシンプル、わかりやすく、肥大化していないインターフェイスが付属しているため、コーディングの経験がない Web サイトデザイナーでも美しい Web サイトを構築できます。そして最良の部分は、すべての人のニーズに合わせた価格プランが付属していることです. さらに、Elementor の開発者は、新しい機能と改善を引き続きリリースし、展開しています。

プラグインの使いやすさ、全体的な機能、パフォーマンス、サポート、インターフェイス、および価格を確認した後、Elementor を WordPress ページビルダープラグインのトップにランク付けします。そのため、Elementor プラグインを自分でチェックアウトして試し、特定のビジネス要件に適したプランを選択してください。