プロフェッショナルな外観のウェブサイトをデザインすることは、すべての人に適しているわけではありません。特に、コーディングとウェブデザインのプロフェッショナルである必要があると私たち全員が感じていたためです。 今日では、Webサイトを設計するためのこれまでになく簡単なソリューションを提供するために、WordPressエコシステム用の新しいツールが登場しており、これはほとんどの初心者の手の届くところにあります。
WordPressレイアウトの設計に関しては、すでにプラグインを提出する必要がありました 視覚的な作曲家、レイアウト設計に関しては間違いなく最高のツールの XNUMX つです。 ただし、このソリューションはすべての人に適しているわけではないことに注意してください。 これが、このチュートリアルで、 WordPressのプラグイン エレメンターは、 WordPressのプラグイン フリーミアム (無料ですが、サブスクリプションで拡張可能)。
WordPress用Elementorの入手先
プラグインの可能性をあなたに見てもらうことを真剣に検討しています。無料のソリューションは、費用を支払うことなく始めるのに役立ちます。 この無料ソリューションは WordPress.org。 であること WordPressのプラグイン、後者は他のものと同じようにインストールされます ダッシュボードからのプラグイン.
プラグインが完全にあなたを満足させることができれば、サイト上のすべての機能を備えた完全なライセンスを取得することができます 公式エレメンター.
Elementorの主な機能
プラグインの概要からチュートリアルを開始する前に、まずプラグインの主な機能（無料バージョンとフルバージョン）を紹介します。
| バージョン無料 | フルバージョン |
|---|---|
| 複数の列 | ナビゲーションメニュー、記事 |
| モジュールテキスト、タイトル | モジュール WooCommerce (製品、カテゴリ) |
| ビデオモジュール、画像、カルーセル、ギャラリー、Soundcloud | Facebook統合（ページ、ボタン、コメント） |
| 共有モジュール | 表の価格 |
| HTMLモジュール | ポートフォリオ、フォーム |
| WordPressウィジェットのモジュール | 検索モジュール |
これは、プラグインによって提供されるさまざまな機能のやや網羅的なリストであることに注意してください。 詳細については、 自分のウェブサイトを調べる.
Elementorを使い始める
ここでは、インストールプロセス全体については説明しません。 これはWordPressプラグインであるため、インストール手順はすでにで説明されています。 前のチュートリアル。 ただし、インストール後、プラグインのホームページに移動します。
このページが画面に表示されている場合は、正しくインストールされています。 Elementorプラグイン. 現在、このチュートリアルでは完全版を使用していますが、インターフェースは無料版とあまり変わらないはずです。
編集インターフェースに行く前に、ライセンスを登録することをお勧めします。 これは、フルバージョンを選択した人にのみ有効です。 無料版をお持ちの場合は、次のセクションに進むことができます。 ライセンスを登録するために、ライセンスの登録を求める通知がWordPressに表示されます。
それをクリックするだけで登録ページに移動し、をクリックする必要があります アクティブにしましょう.
あなたのライセンスが有効であれば、通常は確認ページが必要です。
このページが表示されない場合は、プラグインの開発者に詳細をお問い合わせください。 問題の支援.
Elementorの使い方
Elementorは、WordPressのページと投稿で動作します。 従来のインターフェイスを使用している場合でも、新しいGutenbergインターフェイスを使用している場合でも、ElementorBuilderを使用するように求めるボタンが表示されます。
実際には、Elementorを使用して投稿を編集する必要は必ずしもありません。 したがって、プラグインはページでのみ使用することをお勧めします。 ボタンをクリックすると、（WordPressカスタマイザーを使用する人のために）déjàvuの雰囲気を与えるElementorデザインインターフェースにアクセスできます。
したがって、左側にはプラグインによって提供されるさまざまなコントロールがあり、右側には変更のライブプレビューがあります。 このチュートリアルでは、Twenty SixteenWordPressテーマを使用しています。
Elementorセクション
Elementor のセクションは、Elementor が提供する機能のブロックのグループです。 セクションの数は、フル バージョンを使用しているかどうかと、使用しているかどうかによって異なります。 WooCommerce、Yoast SEO またはその他の互換性のあるプラグイン。 これらの条件に応じて、インターフェイス上のセクションの数が増えたり減ったりします。 プラグイン付きのフルバージョンを使用しているため、 WooCommerce アクティブ化すると、インターフェイスは次のようになります。
Elementorブロックの配置方法
セクションを展開すると、Elementorブロックが見つかります。 さまざまなElementorブロックは、破線で強調表示された領域に「ドラッグアンドドロップ」によって配置されます。
Elementorのレイアウトを選択する方法
Elementorにブロックを追加する前に、強調表示されたセクションの「+」ボタンをクリックしてレイアウトを選択することを忘れないでください。
ニーズに応じて、自分に最適なレイアウトを選択します。 レイアウトを選択すると、同じ領域のそのセクションの表現が強調表示されます。 このセクションには、選択に対応する同じ数の列が表示されます。 私の場合、3列の列を選択しました。
内部に「+」記号が付いたさまざまなブロックは、Elementorブロックを受け入れることができる領域です。 最初にレイアウトを選択せずにElementorブロックを追加すると、デフォルトで単一列のレイアウトが選択されます。
Elementorセクションは、同じ「ドラッグアンドドロップ」の原則に従って、セクション間で並べ替えることができます。 使用しなくなったセクションを削除することもできます。
これは、タイトルブロックとテキストブロックの2つのブロックを含むセクションの例です。
他のデザインツールの使い方
デザインが完成したら、作業を保存することをお勧めします。 このオプションは、さまざまなElementorセクションを表示するセクションの一番下にあります。
直接保存（公開）するか、下書きまたはテンプレートとして保存するかを選択できます。 これらのさまざまなポイントについては、後で詳しく説明します。
設計中に、Elementorの追加インターフェイスなしで変更をプレビューすることもできます。 あなたがしなければならないのは目のアイコンをクリックすることです。
設計中にエラーが発生することがあります（非自発的なアクション）。 この場合、Elementorは履歴を提供します。これにより、すべてのアクションをナビゲートできます。
これにより、簡単に戻ることができます。
履歴ボタンの直前にある[ブラウザ]オプションを使用すると、訪問者が使用するブラウザに関連してさまざまなセクションをさらに変更できます。 このオプションを使用すると、セクション構造（列幅）の高度な変更にアクセスできます。 ここでは慎重に変更を加える必要があります。
[設定]ボタンを使用すると、タイトル、注目の画像、ステータスなど、ページに固有の特定のオプションを変更できます。
このチュートリアルは以上です。次のチュートリアルでは、Elementorについて詳しく説明します。 ご覧になることを躊躇しないでください サイトofficiel これははるかに成功した例を提供します。
