モジュールを拡張してDiviで一意の列レイアウトを作成する方法
公開: 2018-10-04Divi Builderでデザインするすべての新しいページは、さまざまな列レイアウトを使用して構造化されています。 Diviには、1列から6列までの各行の組み込み列レイアウトが含まれています。 ただし、さらにユニークなレイアウトにするには、これらの列を調整する必要があると感じる場合があります。 今日は、まさにそれを行うための創造的な方法を紹介します。
このチュートリアルでは、負のマージンを使用してモジュールを拡張し、複数の列を占有できるようにする簡単な設計手法を紹介します。 この手法により、不可能と思われる独自のカスタムレイアウトを設計できます。
始めましょう。
スニークピーク
何を構築するのかをよりよく理解するために、この手法を使用した設計の前後のバージョンを次に示します。
前
これは、モジュールを他の列に拡張するためにカスタムマージンを使用しないレイアウト設計です。
後
これは、「01」、「03」、「05」の番号が付いた2つの画像モジュールと3つのテキストモジュールを拡張した後のレイアウトです。
変更は微妙ですが、モジュールが隣接する列を占めるように拡張されていることがわかります。 そして、これを達成するために必要なのは、-100％の単純なマージン設定だけです。
そして、タブレットでの結果はさらにエキサイティングです。
概念を理解する
デフォルトでは、各Diviモジュールの幅は100％です。つまり、列に配置する各モジュールは、それが配置されている列の幅全体に広がります。 ガター幅は、Diviが各列間のスペースの量を決定するために使用するものです。 したがって、このチュートリアルでは、そのスペースを取り除くために、ガター幅を1に設定することが重要です。
これは、各モジュールが、ガター幅を1に設定して、行の列の全幅にまたがる方法を示しています。
これで、モジュールに負のマージン（左または右）を追加すると、そのモジュールを簡単に拡張して複数の列を占有できます。 これにより、考慮していなかった可能性のあるページのカスタム列レイアウトを作成できます。
この図では、列5のモジュールに-100％の左マージンを追加すると、モジュールが左に拡張され、列5と列4の両方を占めることがわかります。
また、6列のレイアウトを使用することの利点の1つは、デザインがタブレット上でうまく保存されることです。
また、列の順序が左から右であるため、コンテンツが列の後ろに隠れないように、モジュールは通常、左に拡張する必要があります。 これは、背景色が設定されている場合に特に当てはまります。 したがって、モジュールの内容が列の後ろに隠れているという問題が発生した場合は、モジュールを間違った方向に拡張している可能性があります。
なぜ6列のレイアウトを使用するのですか？
この設計手法に6列のレイアウトを使用する主な理由は3つあります。 最初の理由は、操作する列が増えることです。 2つ目の理由は、タブレットでは6列のレイアウトが3列のレイアウトに変換されるため、デザイン要素が非常によく保持されるためです。 3番目の理由は、列がモバイルで順序を維持するため、列の背景色が同じままになることです。 これは、グリッドレイアウトに役立ちます。
このデザインは、1/2 1/6 1/61/6列レイアウトと1/61/6 1/6 1/2列レイアウトでも機能します。どちらも、タブレットでも3列を保持するためです。
設計の実装
この設計手法がどのように機能するかを紹介するために、製品を紹介するための単純なグリッドレイアウトを構築するプロセスについて説明します。 次に、モジュールを他の列に拡張してカスタムレイアウトデザインを作成する方法を示します。
セクションと行の設定
開始するには、新しいページを作成し、ビジュアルビルダーを展開します。 次に、「最初からビルド」を選択します。 次に、先に進み、最初のセクションに1/2 1/6 1/61/6列レイアウトを追加します。
次に、次のように行設定を更新します。
背景色：＃222831
側溝幅：1
列の高さを等しくする：はい
カスタムマージン：0px上、0px下
カスタムパディング：0px上、0px下
設定を保存する。
このデザインの3つの行はすべて、これらの行設定を共有するためです。 行を複製して、2番目の行を作成します。 次に、2番目の行を6列のレイアウトに変更します。
3番目の行を作成するには、2番目の行を複製するだけです。
行1へのモジュールの追加
一番上の最初の行の最初の列に、次の設定でテキストモジュールを追加します。
テキストの色：明るい
テキストテキストサイズ：16px
カスタムパディング：2vw上、2vw下、2vw左、2vw右
最初の行の2番目の列に、次の設定で宣伝文句モジュールを追加します。
タイトル：[タイトルを入力]
内容：[削除]
アイコン：[アイコンを選択]
アイコンの色：#eeeeee
アイコンフォントサイズ：50px
テキストの色：明るい
テキストの向き：中央
カスタムパディング：3vw上、2vw下
設定を保存する
3番目の列に画像を追加します。
最後の列では、画像モジュールを拡張してその列を埋めることができるように、空のままにしておきます。 ただし、モバイルでスタックするときに列がアクティブになるように、完全に空のままにしたくはありません。 したがって、最も簡単な方法は、仕切りモジュールを追加し、仕切りを表示しないことを選択することです。 次に、スマートフォンの仕切りを非表示にします。
次のように仕切りの設定を更新します。
仕切りを表示：いいえ
無効にする：電話
行2および3へのモジュールの追加
次に、行2に移動します。最初の列で、作成した宣伝文モジュールをコピーして、最初の行の2番目の列に貼り付けます。 次に、アイコンとタイトルテキストを黒色に変更します。
次に、次のようにテキストモジュールを2番目の列に追加します。
コンテンツ：
<h2>Product</h2> 01
テキストテキストの色：#ffffff
テキストテキストサイズ：50px
テキスト行の高さ：1em
テキストの向き：右
見出し2テキストの配置：左
見出し2のテキストの色：#ffffff
見出し2行の高さ：3em
カスタムパディング：2vw上、2vw下、2vw左、2vw右
次に、作成したテキストモジュールをコピーして、列4と列6に貼り付けます。
同じテキストモジュールを行3の列3、列5、および列6に貼り付けることもできます。その後、インラインエディターを使用して各テキストモジュールの番号を変更し、これらのモジュールがどのように積み重なっているかを確認できます。後でモバイル。
行3の列2に、別の画像を追加します。
その後、行1で作成した仕切りをコピーして貼り付け、セクション全体の空の列すべてに仕切りを入力します。
この時点でのレイアウトは次のようになります（空の四角は仕切りモジュールを表します）。
モジュールを他の列に拡張するための負のマージンの追加
この時点で、負のマージンを使用してモジュールの拡張を開始できます。 このプロセスは非常に簡単です。
最初の行の画像の画像モジュール設定を開きます。 画像を右に拡張したいので、-100％の右マージンを追加します。
次に、行2、列3のテキストモジュールに-100％の左マージンを追加します。
次に、モジュールスタイルをコピーして、行2、列6のテキストモジュールと、行3、列5のテキストモジュールに貼り付けます。
残っているのは、行3、列2の画像を拡張することだけです。画像モジュールを-100％左のカスタムマージンで更新します。
列に背景色を追加する
デザインの最後のフェーズは、列に背景色を追加することです。 最初の（一番上の）行に次を追加します。
列1の背景色：＃393e46
2行目には、次を追加します。
列1の背景色：#eeeeee
列4の背景色：＃7971ea
列5の背景色：＃393e46
列6の背景色：＃393e46
そして最後の行に、以下を追加します。
列3の背景色：＃7971ea
列6の背景色：＃7971ea
デスクトップデザインは以上です。 それでは、モバイルで問題がないことを確認しましょう。
スマートフォンディスプレイのレイアウトを調整する
現在、現在のレイアウトはデスクトップとタブレットで見栄えがしますが、追加したマイナスのマージンはスマートフォンで調整する必要があります。
通常、スマートフォンのマイナスマージンを修正したい場合は、スマートフォンデバイスのモジュール設定で左マージンを0％に設定します。 ただし、画面サイズを479pxから767pxの幅に調整する必要があります。 このため、スマートフォンのマイナスマージンを修正する最善の方法は、カスタムCSSのスニペットを使用することです。
ページ設定に移動し、[詳細設定]タブで次のカスタムCSSを追加します。
/** Fixes negative margins on smartphone**/
@media only screen and (max-width: 479px){
.et_pb_module {
margin-left: 0%!important;
margin-right: 0%!important;
}
}
このCSSスニペットは、画面サイズが479ピクセル以下の場合は常に、すべてのモジュールの左右のマージンを0％に設定します。 これで問題がうまく修正されます！
それでは、最終的なデザインを確認しましょう。
最終的な考え
負のマージンを使用してモジュールを拡張すると、Diviのデフォルトの列レイアウトを変更するためにCSSの束に頼ることなく、デスクトップとタブレットで独自のレイアウトデザインを取得するための便利な方法になります。 そして、このデザイン手法で私のお気に入りの1つは、タブレットでのレイアウトの美しさです。 うまくいけば、それはあなたの次のプロジェクトに役立つでしょう。 どちらかといえば、Diviをより深く理解するのに常に役立ちます。
コメントでお返事をお待ちしております。
乾杯！