DiviモジュールのCSSグリッドレイアウトを作成する方法

公開: 2021-04-02

すでにDiviでWebサイトを構築することに精通している人にとって、カスタムグリッドレイアウトの作成はDiviBuilderの中心的な側面です。 行を作成し、その行の複数の組み込み列レイアウトから選択するだけです。 列のレイアウトが整ったら、各列内に必要なコンテンツ/モジュールを追加するだけです。 しかし、これらのモジュールに追加のグリッドレイアウトが必要な場合はどうでしょうか。

このチュートリアルでは、単一の列内にDiviモジュールのCSSグリッドレイアウトを作成することにより、Diviのグリッドレイアウトを拡張する方法を探ります。 CSSグリッドプロパティ（およびCSS Flex）は、わずか数行のCSSでコンテンツの予測可能で応答性の高いグリッドレイアウトを作成するための一般的な方法です。 これにより、列内のすべてのモジュールを完全にレスポンシブなグリッドに編成できます。 これは、任意のDivi列に追加できるモジュールの追加のグリッドレイアウトと考えてください。 しかし、この手法の最も優れた点の1つは、隣接する各モジュールの高さと幅が同じであり、各モジュールでカスタムのパディングまたは高さの値を使用してこれを実行しようとする手間がかからないことです。

おそらく、私たちが飛び込んで、これがどのように機能するかを示すのが最善でしょう。

始めましょう！

スニークピーク

これは、このチュートリアルで構築するデザインの概要です。

そして、Fitness Gym LayoutPackのさまざまなモジュールとデザインを使用した同じテクニックを紹介します。

レイアウトを無料でダウンロード

このチュートリアルのデザインを手に入れるには、まず下のボタンを使用してデザインをダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。

ファイルをダウンロードする
無料でダウンロード

無料でダウンロード

Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。

正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。

セクションレイアウトをDiviライブラリにインポートするには、Diviライブラリに移動します。

[インポート]ボタンをクリックします。

移植性ポップアップで、[インポート]タブを選択し、コンピューターからダウンロードファイルを選択します。

次に、インポートボタンをクリックします。

divi通知ボックス

完了すると、セクションレイアウトがDiviBuilderで使用できるようになります。

チュートリアルに取り掛かりましょう。

始めるために必要なもの

コーナータブの拡張

開始するには、次のことを行う必要があります。

  1. まだインストールしていない場合は、Diviテーマをインストールしてアクティブ化します。
  2. WordPressで新しいページを作成し、Divi Builderを使用してフロントエンド（ビジュアルビルダー）のページを編集します。
  3. 「最初から構築」オプションを選択します。

その後、Diviでデザインを開始するための空白のキャンバスが作成されます。

Diviモジュール用のカスタムCSSグリッドレイアウトの作成

パート1：モジュールをDivi列に追加する

モジュールをグリッドレイアウトに整理する前に、まず、使用するすべてのモジュールを列に追加しましょう。

まず、DiviBuilderのデフォルトの通常セクションに新しい1列の行を作成します。

diviモジュールのcssグリッドレイアウト

モジュールの作成

行の列内に、新しいテキストモジュールを追加します。 次に、モジュールのコンテンツ設定を次のように更新します。

  1. デフォルトの本文コンテンツの段落テキストの上にH2見出しを追加します
  2. 背景色：＃333333

diviモジュールのcssグリッドレイアウト

次に、次のように設計設定を更新します。

  1. テキストフォント：ポピンズ
  2. テキストの色：明るい
  3. 見出しテキストの下のH2タブを選択します
  4. 見出し2フォントスタイル：TT
  5. パディング：上10％、下10％、左10％右10％

diviモジュールのcssグリッドレイアウト

注：簡単にするために、さまざまな背景色の複数のテキストモジュールを使用して、各モジュールの違いを示します。 ただし、後で説明するように、必要なモジュールの任意の組み合わせを使用できます（宣伝文モジュール、召喚状モジュール、連絡フォームモジュールなど）。

レイヤービュー（オプション）を開き、次のテキストモジュールを次のように作成します。

  1. テキストモジュールを複製します。
  2. 複製モジュールのテキスト設定を開きます。
  3. 背景色を更新する
    • 背景色：＃4c6085

diviモジュールのcssグリッドレイアウト

このプロセスを繰り返して、次のように3番目のテキストモジュールを作成します。

  1. 前のテキストモジュールを複製します。
  2. 複製モジュールのテキスト設定を開きます。
  3. 背景色を更新する
    • 背景色：＃39a0ed

diviモジュールのcssグリッドレイアウト

このプロセスをもう一度繰り返して、次のように4番目のテキストモジュールを作成します。

  1. 前のテキストモジュールを複製します。
  2. 複製モジュールのテキスト設定を開きます。
  3. 背景色を更新する
    • 背景色：＃13c4a3

diviモジュールのcssグリッドレイアウト

次の4つのモジュールを作成するには、複数選択機能を使用して4つのモジュールすべてを選択します。 次に、モジュールをコピーして同じ列に貼り付け、合計8つのテキストモジュールを作成します。

diviモジュールのcssグリッドレイアウト

パート2：モジュールのCSSグリッドレイアウトの作成

モジュールが配置されたので、これらのモジュールのCSSグリッドを作成する準備が整いました。

行設定

この例では、モジュールグリッドを全幅レイアウトで表示できるように、1列のレイアウトを使用しています。 そのため、行の設定を更新して、行がページの全幅に及ぶようにする必要があります。 また、モジュールにマージンが追加されないように、デフォルトのガター幅を削除する必要があります。

行設定を開き、以下を更新します。

  • 側溝幅：1
  • 幅：100％
  • 最大幅：100％

diviモジュールのcssグリッドレイアウト

モジュールのグリッドレイアウトを構築するためのCSSグリッドの列への追加

これは、CSSグリッドプロパティを使用してモジュールのレイアウトを作成するチュートリアルの重要なステップです。

これを行うには、モジュールのレイアウトを決定する3行のCSSを列に追加します。

列の設定を開き、[詳細設定]タブで、次のCSSをメイン要素内に貼り付けます。 

display:grid;
grid-template-columns: 25% 25% 25% 25%;
grid-auto-rows: auto;

diviモジュールのcssグリッドレイアウト

CSSの最初の行は、CSSグリッドモジュールに従ってコンテンツ（または複数のモジュール）をレイアウトします。

表示：グリッド

CSSの2行目は、グリッドの列テンプレートを定義します。 この場合、グリッドにはそれぞれ幅25％の4つの列があります（上のスクリーンショットを参照）。

grid-template-columns：25％25％25％25％

CSSの3行目は、サイズ（または高さ）をautoに設定して、必要に応じて行を自動生成することを指定しています。 これは、各行の高さが、行内のコンテンツ（またはモジュール）の垂直方向の高さによって決定されることを意味します（上のスクリーンショットを参照）。

grid-auto-rows：auto

モバイルでグリッドレイアウトを調整する

また、必要に応じてモバイルデバイスのグリッドレイアウトを調整する必要があります。

これを行うには、列の数と各列の幅を変更するモバイルの各タブレットにCSSを追加するだけです。

この例では、タブレット上のモジュールのグリッドレイアウトを、それぞれ幅が50％の2列に変更します。

レスポンシブオプションを開き、メイン要素の下にある[タブレット]タブを選択して、次のCSSを貼り付けます。

 display:grid;
grid-template-columns: 50% 50%;
grid-auto-rows: auto;

diviモジュールのcssグリッドレイアウト

電話のディスプレイには、単一列のレイアウトが必要です。 これを作成するには、[電話]タブの[メイン要素]の下に次のCSSを貼り付けます。

 display:grid;
grid-template-columns: 100%;
grid-auto-rows: auto;

diviモジュールのcssグリッドレイアウト

パート3：グリッドアイテム（またはモジュール）に変更を加える

グリッドへの新しいモジュールの追加とその反応

各モジュールがCSSグリッド内にあるので、新しいモジュールを追加すると、他のモジュールが右にプッシュされ、必要に応じて新しい行が自動的に作成されます。

とにかくこのレイアウトにはもう1つのモジュールが必要なので、最初のテキストモジュールを複製して、他のモジュールがグリッド内でどのように調整されるかを確認します。

diviモジュールのcssグリッドレイアウト

グリッドがコンテンツの量が異なるモジュールにどのように応答するか

現在、すべてのテキストモジュールには同じ量のコンテンツがあるため、グリッドレイアウトがさまざまな量のコンテンツを持つモジュールをどのように処理するかを確認するのは困難です。 これがどのように機能するかを確認するには、各モジュール内の段落テキストの量を変更します。 モジュールは、ほとんどのコンテンツが同じ行にあるモジュールと同じ高さのままであることに注意してください。 また、行の高さも、コンテンツが最も多いモジュール（または垂直方向の高さ）によって決定されます。

diviモジュールのcssグリッドレイアウト

モジュール（またはグリッドアイテム）の位置の変更

CSSグリッドアイテムは、グリッドモジュールの組み込みの行番号付けシステムを使用して配置できます。 グリッド上の各線は数字を表します。 列の場合、行番号は1から始まり、水平方向に続きます。 各行番号は、各列の最初と最後にあります。 したがって、4列の構造の場合、行番号は最初の列の左側の1で始まり、4番目の列の右側の5で終わります。 また、3つの行があるため、行の行番号は最初の行の上部で1から始まり、3番目の行の下部で4まで続きます。

diviモジュールのcssグリッドレイアウト

CSSグリッドでモジュール（またはグリッドアイテム）の位置を変更するには、特定のモジュールをグリッド内のどこに配置するかを定義するように設定できます。 これにより、グリッド内のモジュールのデフォルトの配置が上書きされます。

この例では、最初のテキストモジュールを別の位置に移動します。 これを行うには、2行のCSSをモジュールに追加する必要があります。

最初のテキストモジュールの設定を開き、次のカスタムCSSをメイン要素に貼り付けます。 

grid-column: 2/4;
grid-row: 2/3;

diviモジュールのcssグリッドレイアウト

CSSの最初の行は、モジュールに列行2で開始し、列行4で終了するように指示することにより、モジュール（またはグリッドアイテム）の水平方向の位置を定義します。

グリッド列：2/4

CSSの2行目は、モジュールに行2で開始し、行3で終了するように指示することにより、モジュール（またはグリッドアイテム）の垂直方向の位置を定義します。

グリッド行：2/3

タブレットや電話のディスプレイの場合、モジュールを元の場所に戻します。 これは、メインヘッダーをページの上部に保持するのに役立ちます。

これを行うには、メイン要素のレスポンシブオプションの下にあるタブレットタブを選択し、次のCSSを貼り付けます。 

grid-column: auto;
grid-row: auto;

diviモジュールのcssグリッドレイアウト

これで、モジュールの位置がグリッドアイテムの元の（自動）フローに戻ります。

この方法を使用して、さらにいくつかのモジュール（またはグリッドアイテム）を配置してみましょう。

3番目のテキストモジュール（現在は一番上の行の2番目の列）をグリッド内の新しい設定位置に配置します。 この新しい位置は、列1行目で始まり、列2行目で終わり、行2行目で始まり、行4行目で終わります。

diviモジュールのcssグリッドレイアウト

これを行うには、3番目のテキストモジュールの設定を開き、次のカスタムCSSをメイン要素に貼り付けます。 

grid-column: 1/2;
grid-row: 2/4;

diviモジュールのcssグリッドレイアウト

これで、タブレット用に次のCSSを追加することで、位置をモバイルに戻すことができます。 

grid-column: auto;
grid-row: auto;

diviモジュールのcssグリッドレイアウト

最後のカスタムモジュールグリッド配置では、7番目のテキストモジュール（現在は2行目の最後の列）をグリッド内の新しい設定位置に配置します。 この新しい位置は、列4行目で始まり、列5行目で終わり、行2行目で始まり、行4行目で終わります。

diviモジュールのcssグリッドレイアウト

これを行うには、7番目のテキストモジュールの設定を開き、次のカスタムCSSをメイン要素に貼り付けます。 

grid-column: 4/5;
grid-row: 2/4;

diviモジュールのcssグリッドレイアウト

次に、前のモジュールで行ったように、タブレット表示用に次のCSSを貼り付けます。 

grid-column: auto;
grid-row: auto;

diviモジュールのcssグリッドレイアウト

モジュール（またはグリッドアイテム）のコンテンツを中央に揃える

ここで停止することはできますが、モジュールのコンテンツを垂直方向に整列（または中央揃え）するための便利な方法を見逃してしまいます。 モジュール（またはグリッドアイテム）のコンテンツを垂直方向の中央に配置すると、すべてがより対称的で見た目に美しいため、グリッドレイアウトの便利な機能になります。

これを行うには、flex CSSプロパティを使用してコンテンツを中央に揃えて位置合わせするCSSのスニペットを追加します。 このスニペットを各モジュールに追加する必要があります。 これを行うには、multiselectを使用して、メイン要素にカスタムCSSがまだないすべてのモジュール（またはグリッドアイテム）を選択できます（これらのモジュールをカスタム位置でオーバーライドしたくない）。 次に、選択したモジュールの1つの設定を開いて、要素の設定を開きます。 [詳細設定]タブで、次のCSSをメイン要素に貼り付けます。 

display:flex;
flex-direction:column;
align-items:center;
justify-content:center;

diviモジュールのcssグリッドレイアウト

これで、他の3つのモジュール（モジュール＃1、＃3、および＃7）に個別に戻り、モジュールにグリッド上のカスタム位置を与えるために使用されたCSSに加えて、同じCSSスニペットを追加できます。 デスクトップとタブレットの両方の既存のCSSの下にCSSスニペットを必ず追加してください。

最初のテキストモジュールにCSSを追加する

diviモジュールのcssグリッドレイアウト

diviモジュールのcssグリッドレイアウト

3番目のテキストモジュールにCSSを追加する

diviモジュールのcssグリッドレイアウト

7番目のテキストモジュールにCSSを追加する

diviモジュールのcssグリッドレイアウト

最終結果

これが、テキストモジュールのカスタムCSSグリッドレイアウトの最終結果です。

diviモジュールのcssグリッドレイアウト

モジュール（またはグリッドアイテム）がさまざまなブラウザー幅でスムーズに調整され、レスポンシブデザインが優れていることに注目してください。

さまざまなモジュールと設計を使用した例

CSSグリッドを使用して、テキストモジュールのみを使用してモジュールレイアウトを作成する可能性を完全に理解することは困難です。 そこで、Fitness Gym Layout Packのさまざまなモジュールとデザイン要素を使用して、このチュートリアルと同じ手順を適用して作成したデザインを紹介しようと思いました。

ここにあります…

diviモジュールのcssグリッドレイアウト

この投稿の冒頭で紹介されている無料ダウンロードとともに、このレイアウトをテキストモジュールレイアウトと一緒に含めました。

お気軽にどうぞ！

最終的な考え

このチュートリアルでは、DiviモジュールのCSSグリッドレイアウトを作成する方法を示しました。 このプロセスはいくつかのカスタムCSSに依存していますが、強力な結果が得られることを考えると、驚くほどそれほど多くはありません。 よりユニークなDiviレイアウトが必要な場合は、すべてのモジュールのレイアウトを列レベルで制御できると便利です。 CSSグリッドの詳細については、この完全なガイドを確認して、より多くの可能性を検討する必要があります。

コメントでお返事をお待ちしております。

乾杯！