Elementor Flexbox コンテナを 6 つの簡単なステップで使用する方法

新しいものを試してみましたか  Elementor フレックスボックス コンテナ 特徴？

さて、話題になっているのは、Web サイトをすべてのデバイス向けに最適化し、サイトの読み込みを高速化する素晴らしい追加機能であるということです。

どうやって？ 

新しいフレックス コンテナは、前のセクション/内部セクションとは少し異なる方法 (フロントエンドとバックエンドの両方) で動作します。そして、これらの新しくて異なる働き方が魔法を起こすのです。

このブログでは、Elementor フレックスボックス コンテナーが Web サイトを構築するために提供する新しいオプションについて学びます。 Elementor Flexbox Container の使用方法をステップバイステップのガイドで説明します。

それで読み続けてください…

Elementor Flexbox コンテナとは何ですか?

Elementor Flexbox コンテナは、すべての CSS Flexbox 機能を Elementor エディタにもたらします。新しく追加された機能により、高度なレイアウトを簡単に作成して、サイズに関係なくすべてのデバイスで Web ページが美しく見えるようにすることができます。

注記: CSS フレックスボックス コンテナーは、名前が示すように、デバイスに応答するデザインを作成するための高度な柔軟性を提供します。フレックスボックスが導入される前は、ブロック、インライン、テーブル、位置などの複数のレイアウト モードを使用してレスポンシブ デザインを作成するのはかなり複雑でした。しかし、フレックスボックス コンテナを使用すると、複数のレイアウト モードは必要なくなります。

また、Elementor フレックスボックス コンテナに関しては、セクションを使用する必要はなくなります。セクションなしでコンテナ内にウィジェットを追加できます。コンテナ内にコンテナを無限に追加することもできます。

ウィジェットとコンテナを追加すると、各デバイスのレイアウトとともにコンテナ内のウィジェットの配布を制御できます。さらに、コンテナーごとに個別のカスタマイズ設定を取得できます (コンテナー内のコンテナーも含む)。これにより、設計デバイスの応答性を高めるための最高の柔軟性が得られます。 

新しいElementor Flexコンテナとセクションの違い

コンテナとセクションの違いは何なのか疑問に思われるでしょう。まあ、かなりの違いがあります。主な違いは次のとおりです。

• あなたはできる フレックスボックスを使用してコンテナにウィジェットを追加する 一方、セクションの場合は、列を追加してからそこにウィジェットを追加する必要があります。
• の中に フレックスコンテナ、ウィジェットの幅はデフォルトでインラインです 一方、列セクション構造では、ウィジェットの幅はデフォルトで全幅になります。
• 以前は、セクション内に内部セクションを 1 つだけ追加できましたが、 最新のフレックス コンテナーでは、必要なだけコンテナーを追加できます。
• 列セクション構造を使用すると、列またはインライン配置を使用してウィジェットの方向を変更できます。最新のフレックス コンテナでは、列、行、列の反転、または行の反転を使用してウィジェットの方向を変更できるようになりました。
• 列セクション構造では、Web ページの応答性を高めるために、逆列または重複セクションが使用されました。最新のフレックスコンテナ方式では、 各デバイスのウィジェットまたはコンテナのカスタム順序。
• セクション/列構造の配置オプションは、左、中央、および右です。一方、フレックス コンテナでは、flex-start、flex-center、flex-End などの配置オプションが利用できます。

さて、あなたはこれらの変化があなたにどのような利益をもたらすかを考えているはずです。詳細については、次のセクションに進んでください。

Elementor Flexbox コンテナを使用する利点

新しい機能が顧客にとって有用であることを確認するために、プラグインに新しい機能が追加される前に、多くの調査が行われます。 Elementor flex コンテナーについても同様です。これ エレメンター ユーザーに多大なメリットをもたらすため、この機能が追加されました。

Elementor フレックスボックス コンテナを使用すると得られる利点をいくつか示します。

• セクションと内部セクションはフレックスコンテナに置き換えられるので、ビルドできます より最適化されたウェブサイト.
• Flexbox は、Elementor Flexbox の列と内部セクションの数を減らします。その結果、バックエンドで生成されるコードが少なくなります。私もess DOM を使用すると速度が向上します WordPress サイト用。
• Flexbox コンテナの設定により、次のことが可能になります。 デバイスに対応した Web サイトを構築する 以前よりも柔軟性が向上しました。
• 今ならできる 完全なセクションにハイパーリンクを設定します。 以前は、ウィジェットはハイパーリンクしかできませんでした。
• セクションに内部セクションを 1 つしか追加できなかったためにこれまで不満を抱いていた場合は、フレックス コンテナーが最適です。フレックスコンテナを使用すると、次のことができます コンテナ内にコンテナを無制限に追加します。

Elementor Flexbox コンテナを 6 つのステップで使用する方法

以下の手順に従って、Web サイトで Elementor Flexbox コンテナを使用して外観をより最適化する方法を学習してください。このプロセスは 6 つの簡単なステップで構成されます。

ステップ 1: Elementor Experiments で Flexbox コンテナをアクティブ化する

まず、Elementor でフレックスボックス コンテナを利用するには、フレックスボックス コンテナ機能が必要です。そのために、 Elementor ⇒ 設定に移動します。 WordPress ダッシュボードから。次に、「実験」タブに移動して、 下にスクロールして「Flexbox Container」オプションを見つけます。

選択肢を見つけたら ドロップダウン メニューから [アクティブ] を選択して、Elementor Flexbox Container をアクティブにします。 最後に、一番下までスクロールして、 「変更を保存」をクリックします”を押してステータスを保存します。

ステップ 2: 新しいページを作成する

フレックス コンテナをアクティブ化したら、この機能を使用できるように新しいページを作成します。そのためには、次の場所に移動してください ページ ⇒ 全ページ その後 「新規追加」をクリックします。 次に、タイトルを入力し、 「Elementorで編集」をクリックします

ステップ 3: コンテナーを追加する

ここで、セクションの代わりにコンテナを追加する必要があります。そのために、  + アイコンをクリックして、好みの構造を選択します。

注記： ナビゲーターの構造に注目すると、その構造は実際には列ではなく、その中に他のコンテナーを含むコンテナーであることがわかります。あなたもすることができます 左側のメニューから 1 つのコンテナをドラッグ アンド ドロップします。 

コンテナーの多くのオプションをカスタマイズできます。

• コンテナの幅: コンテナの幅をボックス化または全幅として選択できます。
• 幅： コンテナの幅としてボックス化を選択した場合、幅は 928Px になります。一方、全幅を選択した場合、コンテナの幅はビューポートの幅の 100% になります。ただし、両方の幅の値を変更できます。
• オーバーフロー： オーバーフロー値をデフォルト、非表示、または自動として選択できます。
• HTMLタグ: コンテナの HTML タグを変更することもできます。 div、ヘッダー、フッター、メイン、記事、セクションなどのオプションが表示されます。新たにタグが追加されました。このようにして、eを回すことができますコンテナ全体をタグ付きのリンクにリンクします。

注記：  「アイテム」にも多くのオプションがあります (詳細は後ほど)。さらに、次のことができます。 内部コンテナごとに上記のすべての設定をカスタマイズします 同じように。

ステップ 4: ウィジェットを追加する

ウィジェットを追加するプロセスは、列セクションの構造と同じです。必要がある ウィジェットを検索し、各コンテナの + アイコンにドラッグ アンド ドロップします。。たとえば、1 つの見出し、1 つのビデオ、および 1 つのソーシャル共有アイコンを追加します。

ステップ 5: コンテナーの内容をカスタマイズする 

次に、コンテナ ウィジェットをカスタマイズします。このために、コンテナを編集します。次に、左側のパネルの「レイアウト」に移動し、「項目」オプションを展開します。プレイできるオプションは次のとおりです。

• 方向: デフォルトの方向は行です。ただし、行、列、反転行、反転列などの 4 つのオプションが表示されます。列または反転列を選択すると、メイン コンテナ内のすべてのコンテナが異なる Elementor フレックスボックス列として表示されます。

注: 列を選択した場合は、内部コンテナーの幅を調整する必要があります。

• コンテナを整列させる: 位置合わせを Flex Start、center、flex-end、Scratch として設定できます。 Flex は開始点からコンテナ要素を配置します。t、フレックス中心値を使用すると、アイテムを中心に配置できます。一方で、 フレックスエンドを使用すると、内容器をすべて底面に表示できます。 また、ストレッチ オプションを使用すると、内側のコンテナーが割り当てられている場合、余分なスペースを占有します。これらはすべて、方向を行として選択した場合に適用されます。

一方、あなたが選択した場合、 列としての方向の場合、flex-start と center の値は行と同じように機能します。しかし、 flex-end の場合、コンテナは右にシフトされ、スクラッチが発生します。、左側のスペースを占有します。

• コンテンツを正当化する:  コンテンツを正当化するための 6 つのオプションがあります。 フレックス開始、中心、フレックス終了、間隔、周囲の間隔、均等な間隔。 Space between は、各項目の間に同じスペースを追加します。ただし、項目の上部または下部にスペースは追加されません。

[周囲のスペース] オプションを使用すると、各コンテナの上部と下部の両方にスペースが追加されます。また、均等なスペースのオプションを使用すると、すべてのウィジェットと内部コンテナーの周囲に同じスペースが追加されます。

• 要素のギャップ:  このオプションを使用すると、要素 (ウィジェットと内部セクション) の間にスペースを追加できます。

• 包む： 選ぶ ラップなし 置く すべての項目を 1 行に そして コンテンツが複数行に渡って流れるように折り返す。

ステップ 6: 公開とプレビュー

手順 4 を繰り返して、すべてのコンテナ設定をカスタマイズできます。カスタマイズが完了したら、「公開」ボタンをクリックしてページを公開します。次に、プレビュー ボタンをクリックして、新しいフレックス コンテナ構造を備えたページを確認できます。

セクションベースのElementorページをFlexboxコンテナに変換する方法

セクション/列ベースの構造を新しい Elementor Flex コンテナに変換するのは非常に簡単です。これは、以下に示す 4 つの簡単な手順に従って行うことができます。

ステップ 1: 変換したいセクションを選択します

各セクションを個別に変換する必要があります。したがって、まず、変換したいセクションを選択します。あなたはできる 6 つの点をクリックします セクションを選択するか、 ナビゲーターからセクションを選択します (オプションは左下隅にあります)。

ステップ 2: 「変換」をクリックして変換を行います

ここで変換するには、左側のパネルに、 レイアウトの下の「コンテナに変換」オプション。クリック で 変換する ボタン.

ステップ 3: 前のセクションを削除する

変換プロセスが完了すると、次のことがわかります。 同じセクションの 2 つのバージョン。 1 つはセクションベースで、もう 1 つはコンテナベースです。上部のバージョンはセクションベースです。 以前の/オリジナルのバージョンを削除します。

ステップ 4: 更新とプレビュー

ページのすべてのセクションに対して手順 1 から手順 3 を繰り返すことができます。すべてのセクションを Flexbox コンテナ レイアウトに変換し終わったら、 保存する更新ボタン。これで、プレビュー ボタンをクリックして、同じページをコンテナ レイアウトで表示できるようになります。

Elementorで水平および垂直のFlexboxコンテナを作成できますか?

はい、Elementor は数秒以内に水平および垂直のフレックスボックス コンテナーを作成することをサポートしています。 Elementor コンテナの 6 つのドットを選択し、レイアウト タブから水平方向または垂直方向を選択するだけです。したがって、フレックスボックスコンテナを問題なく作成できます。

新しい Flexbox コンテナで Elementor アドオン機能を使用できますか?

はい。絶対にできます。 

使用できます ElementsKit - Elementor の究極のアドオン 追加のウィジェットやその他の機能を Elementor ページ ビルダーに追加します。このエレメンター アドオン は 100% は、Elementor の新しい Flexbox コンテナと互換性があります。

Elementor セクションをコンテナ レイアウトに変換するのと同じプロセス (上記のセクションを参照) を使用して、ElementsKit セクション/ページを変換できます。 

ElementsKitには付属しています 500 以上の Ready セクション、35 以上の Ready ページ、85 以上のカスタム アドオン 生活を楽にする機能。簡単にできます 完全なウェブサイトを作成する ElementsKit Premade テンプレートをわずか数分で使用できます。

これは、ElementsKit で事前に作成されたページがどのようにスムーズに Elementor Flexbox コンテナに変換されるかを示す例です。

まとめ

この新しく追加された Elementor になぜこれほど多くの要素があるのかが理解できたと思います。 Elementor Flex コンテナは、Web サイトを作成する方法を探していたすべての WordPress Web サイトビルダーにとって本当にありがたいものです。 より最適化された、 もっと早く そして応答性の高い デバイスのサイズに関係なく。

さらに嬉しいことに、以前に作成した Web サイトをコンテナベースに最適化された Web サイトにすぐに変えることができます。ただし、フレックス コンテナーはまだ実験モードです。したがって、アクティブな機能として公開されるまでは、ライブ Web サイトで使用することはお勧めできません。

それまでは、ステージング サイトで Elementor flex コンテナを自由に試してみてください。そして試してみてください ElementsKit 顧客の注目を集め、Web サイトの成功を高める、素晴らしい見栄えの Web サイトをより柔軟にデザインできます。