DIVI Builder でセクション、行、列、モジュールを垂直および水平に整列させる方法

Divi を使用してサイトを構築する場合、コンテンツを垂直方向に整列させるオプションは、デザイン ツールキットへの貴重な追加となる可能性があります。レイアウトによっては、コンテンツをさまざまな方法 (中央、下、上) で垂直方向に配置する必要がある場合があります。最も一般的なニーズは、マテリアルを垂直方向に揃えることです。これは、コンテンツに対称的な間隔の素敵なタッチを追加します。これは、複数の列レイアウトを使用する場合に非常に便利です。さらに、垂直方向に中央に配置されたコンテンツは、ブラウザの幅全体にわたって中央に配置されたままとなるため、同様の応答性を実現するためにカスタムのパディングやマージンを使用する必要がなくなります。

このレッスンでは、数行の簡単な CSS を使用して、任意の列のコンテンツを垂直方向に配置する方法を説明します。デモンストレーションの目的で、Divi のプレハブ レイアウトをいくつか使用します。 CSS に詳しくなくても心配する必要はありません。ほんの数秒で、これをデザインに適用できるようになります。

• Flex と Divi の違いを理解する
• これは必須ですか?
• 事前構成されたレイアウトをページに追加します。
• 方法 1: フレックスと自動マージンを使用してコンテンツを垂直に配置する
• コンテンツを下部に揃える
• 行の列のコンテンツの垂直方向の配置
• 方法 2: 列のフレックス方向を使用してコンテンツを垂直方向に整列する
• 1 列だけのレイアウトはどうなるでしょうか?
• DIVI の垂直方向と水平方向の配置に関する最終的な考え

Flex と Divi の違いを理解する

Flex (または Flexbox) CSS 属性は、項目を水平および垂直のスタック (テーブルのようなもの) に配置するための単なる手段です。ただし、一般的なテーブルとは異なり、フレックス機能を使用すると、含まれるコンテンツのサイズに合わせて「柔軟」なボックスを構築できます。

Divi は、行設定として「列の高さを均等にする」を選択した場合に flex 属性を使用します。簡単に言えば、これにより、すべての列のサイズが、最も多くの情報を含む列のサイズに合わせて調整されます。 「列の高さの均等化」は行コンテナーのフレックスをトリガーするため、CSS を列に追加して各列 (またはボックス) の内容を変更することでこれを利用できます。

たとえば、行内のampの列に「margin: auto」を追加すると、その列のコンテンツ (1 つまたは複数のモジュール) が垂直方向の中央に配置されます。

「align-items: center;」を追加すると、すべての列 (およびそのコンテンツ) が垂直方向の中央に配置されます。あなたの列に。

もちろん、flex プロパティには、Web デザインにおけるさらに多くのアプリケーションや、テーマで利用できるより高度な CSS があります。ただし、このチュートリアルでは物事をシンプルにしておきたいと思いました。

これは必須ですか?

技術的な意味では、いいえ。カスタム間隔を使用して、コンテンツ/モジュールを列内に垂直に配置できます (パディングとマージン)。amp、Divi の間隔オプションを使用して、モジュールをキュー内の垂直方向の中央に配置し、列の上下のパディングを均等にすることができます。列に上部パディングを追加して、コンテンツを下揃えにすることもできます。ページにさらにコンテンツを追加する場合、間隔の変更が必要になる場合があります。さらに、複数のブラウザ サイズにわたってこの調整を維持することには問題が生じる可能性があります。

したがって、特定の間隔を気にせずに情報を垂直方向に配置する方法を探している場合は、これが有益であることがわかると思います。

このパーティーを始めましょう!

事前構成されたレイアウトをページに追加します。

インテリア デザイン会社のポートフォリオ ページ レイアウトから始めます。このレイアウトをページに含める新しいページを作成します。その後、ページに名前を付けます。ドロップダウンメニューから「Divi Builderを使用」を選択し、次に「Visual Builderを使用」を選択します。次に、ドロップダウン メニューから「既製のレイアウトを選択」を選択します。次に、「ライブラリからロード」ウィンドウから Interior Design Company Layout Pack を選択します。最後に、レイアウトの選択からポートフォリオページを選択し、「このレイアウトを使用する」をクリックします。

レイアウトがページに読み込まれたら、開始する準備が整いました。

方法 1: フレックスと自動マージンを使用してコンテンツを垂直に配置する

2 行目 (ページ タイトルのある行のすぐ下にある行) の行設定を開きます。デザイン オプションの [サイズ設定] オプション グループを切り替えて開きます。[列の高さを均等にする] がすでにアクティブであることに注意してください。これは、flex プロパティ (「display: flex;」) が行に追加されたことを示します。

[列 2 のメイン要素] 入力ボックスの下で、同じ行の [詳細設定] タブの設定に移動し、次の CSS スニペットを追加します。

2 番目の列の内容が垂直方向の中央に配置されるように再配置されました。

01

マージン: 自動;

コンテンツを下部に揃える

次のようにマージン値を変更してコンテンツを下揃えにして、すべてのモジュールが列の一番下にスタックされるようにすることができます。

01	マージン: 自動 0;

行の列のコンテンツの垂直方向の配置

各列に個別に「margin: auto」を追加するのではなく、行設定のメイン要素に次のスニペットを追加することで、行内のすべての列のコンテンツを垂直方向の中央に配置できます。

01

整列項目: 中央;

列内のすべての情報を下部に揃えたい場合は、このスニペットを使用することもできます。

01	align-items: フレックスエンド;

CSS スニペットのあるメイン要素を右クリックし、「メイン要素の拡張」を選択することで、Divi のスタイルの拡張機能を使用できることを覚えておいてください。

次に、ページ上のすべての列のすべてのコンテンツを垂直方向の中央に配置するには、メイン要素 CSS をページ (またはセクション) 全体のすべての行に適用します。

すべてが垂直方向のバランスが取れています。

ただし、列に「margin: auto」が追加されたため、白い列の背景色が行全体を覆わなくなっていることに気付いたかもしれません。この問題を解決するには、行の背景色を白に変更し、行のパディングを削除します。代わりに、余白を変更せずに列のコンテンツを中央に配置する方法を説明します。

方法 2: 列のフレックス方向を使用してコンテンツを垂直方向に整列する

最初に行に追加された flex プロパティを使用しました。その結果、各列はマージンを変更することで垂直方向に整列できる「フレックス ボックス」になりました。

ただし、フレックス方向を利用すると、列 (および列の背景) のサイズを同じに保つ「列の高さの均等化」効果を犠牲にすることなく、列のテキストを整列させることができます。これを実現するには、数行の CSS をキューに追加して、キュー内のすべてのモジュールを垂直方向に積み重ねて中央に配置します。

前のampの行に戻りましょう。カスタム CSS を右クリックし、「カスタム CSS スタイルをリセット」を選択すると、行設定にあるカスタム CSS を削除できます。

次に、列 2 の Main 要素に次の CSS を適用します。

010203

表示: フレックス;フレックス方向: 列;コンテンツの位置調整: 中央;

コンテンツを下揃えにするには、「justify-content: center」を「justify-content: flex-end」に変更します。

この構成が気に入っているのは、コンテンツを垂直に配置して行を全幅にしても、コンテンツは中央に留まるからです。

さまざまな量のテキストを使用して垂直方向に配置された宣伝文を作成する

列のコンテンツを垂直方向の中央に配置すると、宣伝文句を作成するのに役立ちます。ご存知かもしれませんが、すべての宣伝文に機能やサービスを説明する同じ量のテキストが含まれているわけではありません。これらの宣伝文句を垂直方向の中央に配置すると、レイアウトが美しく見えるようになります。

デジタル決済ホームページのレイアウトでは、この例のamp文を垂直方向に配置します。

サイトの外観をより現実的に表現するために、まず宣伝文にさまざまな量の本文コンテンツを追加します。

次に、行設定で「列の高さを均等にする」必要があります。

これで、CSS スニペットを使用してテキストを配置し、デザインを調整できるようになりました。

行設定の「詳細」タブの「メイン要素」セクションに以下を追加することで、列のコンテンツを垂直方向の中央に配置できます。

01

整列項目: 中央;

下に揃えるには以下のように変更してください。

01	align-items: フレックスエンド;

カスタム CSS スタイルをリセットし、次のカスタム余白を追加することで、最初の列を下揃え、3 番目の列を上揃えにすることもできます。

 列 1 の主要要素 CSS:

01	マージン: 自動 自動 0;

 列 3 の主要要素 CSS:

01	マージン: 0 自動 自動;

1 列だけのレイアウトはどうなるでしょうか?

1 列のコンテンツを垂直方向の中央に配置するために CSS スニペットやフレックスは必要ありません。必要なのは、テキストの上下（またはモジュール）の間隔が等しいことを確認することだけです。ほとんどの消費者は、隣接するマテリアルを正しく整列させたいため、多くの列を含むレイアウトで垂直方向に中央揃えのコンテンツを必要とします。

DIVI の垂直方向と水平方向の配置に関する最終的な考え

このソリューションはカスタム CSS のいくつかの小さなスニペットに依存していますが、時間のかかる手順を簡単に解決したい人にとっては役立つと思います。このアプローチに関するご意見や、これまでにどのように時間と労力を節約したかのampをお気軽にお聞かせください。