ユニークな壊れたグリッド設計のためにDivi列とモジュールをずらす方法
公開: 2019-07-10現代のウェブデザインはまだグリッドを壊すことについてです。 これは、グリッドレイアウトの通常の構造を壊す位置に要素とデザインアクセントをずらすことによって行われます。 あなたは私たちが私たちの素晴らしいDiviレイアウト全体にこれらの壊れたグリッドデザインの多くを適用しているのを見ることができます。 通常、これには、モジュールを列または行の外に移動して、コンテナの外に拡張したり、ページ上の他の要素とオーバーラップしたりするようなものが含まれます。 しかし、実際の列を移動することを考えていなかったかもしれません。
このチュートリアルでは、Diviの列とモジュールをずらして独自の壊れたグリッドデザインを作成する方法を紹介します。 Diviの新しい列オプションを使用すると、列とそれに含まれるモジュールを簡単に移動できます。 これにより、モジュールと列の両方を独自のスタイルで設計して、クリエイティブな壊れたグリッド設計を実現できます。
始めましょう！
スニークピーク
これは、このチュートリアルで作成する設計例の概要です。
StaggerDiviの列とモジュールのレイアウトを無料でダウンロード
このチュートリアルのデザインを手に入れるには、まず下のボタンを使用してデザインをダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
レイアウトをページにインポートするには、zipファイルを抽出し、jsonファイルをDiviBuilderにドラッグするだけです。
チュートリアルに行きましょう。
基本的な考え方の説明
ユニークな壊れたグリッドデザインのためにDiviの列とモジュールをずらす方法の背後にある基本的な考え方は、Diviの変換変換プロパティを使用して列とそれに含まれるモジュールを配置することです。
要素をずらすと、列とモジュールのすべてのデザイン機能を使用して、独自の壊れたグリッドデザインを作成するデザインアクセントを追加できます。
したがって、たとえば、列にボックスシャドウを使用し、モジュールにまったく異なる背景とボックスシャドウを使用して、一意の背景（色、画像など）を追加できます。
基本的な考え方がわかったので、最初からデザインを作成しましょう。
始めるために必要なもの
開始するには、次のものが必要です。
- Diviテーマがインストールされ、アクティブになっています
- フロントエンドでゼロから構築するために作成された新しいページ（ビジュアルビルダー）
- モックコンテンツに使用されるいくつかの画像
その後、Diviでデザインを開始するための空白のキャンバスが作成されます。
Diviで独自の壊れたグリッドデザインを作成するための列とモジュールのずらし
まず、2列の行を持つ新しい通常のセクションを作成します。
次に、列1にアクションモジュールの呼び出しを追加します。
タイトルテキストを「DiviModule」または選択した別の短いタイトルに変更します。
次に、モジュールを暗い背景色で更新してから、タイトルテキストを次のように変更します。
背景色：＃333333
テキストの配置：左
タイトルフォント：苦い
タイトルテキストサイズ：50px
タイトル文字の間隔：2px
次に、次のように召喚モジュールボタンを更新します。
ボタンのテキストサイズ：16px
ボタンのテキストの色：＃333333
ボタンの背景色：
ボタンの境界線の色：#ffffff
ボタンの境界線半径：25px
ボタンの文字間隔：2px
ボタンフォント：Raleway
ボタンのフォントの太さ：太字
ボタンのフォントスタイル：TT
次に、モジュールをコピーして、複製を列2に貼り付け、各列に同じアクションモジュールの呼び出しがあるようにします。
行間隔を更新する
次に、行に上下の余白を追加して、デザイン用のスペースを作りましょう。
マージン：上20％、下20％
列の背景画像を追加する
まだ表示されていませんが、各列に背景画像を追加します。 変換変換を使用してモジュールを列コンテナの外に移動すると、これらが表示されます。
先に進み、列1の設定を開いて、背景画像を追加します。
次に、列2の設定を開き、背景画像を追加します。
各列にボックスシャドウを追加します
列1の設定を開き、次のボックスシャドウを追加します。
ボックスシャドウ：スクリーンショットを参照
ボックスシャドウの水平位置：0px
ボックスシャドウの垂直位置：0px
ボックスシャドウスプレッド強度：100px
影の色：rgba（151,178,193,0.21）
次に、同じボックスシャドウスタイルを列2に追加します。処理を高速化するには、右クリックオプションを使用して、列1のボックスシャドウスタイルをコピーし、列2のボックスシャドウスタイルに貼り付けます。
ボックスの影が重なることに気付くでしょう。 半透明のボックスシャドウカラーを使用すると、クールなオーバーラップ効果を作成するのに役立ちます。 これは、デザインでボックスシャドウを使用することの素晴らしい点です。 境界線とは異なり、境界線のように見える大きな影を追加できますが、レイアウトの実際の間隔には影響しません。
変換変換を使用してDivi列をずらす
この時点で、壊れたグリッドの設計を完了するために、列とモジュールをずらして開始する準備が整いました。 まず、列をページの外縁に移動する必要があります。 その後、モジュールを中央に向かって移動できます。
よろめき列1
列1の設定を開き、次の変換変換プロパティを追加します。
変換変換X軸：25％
変換変換Y軸：-25％（デスクトップ）、-5％（タブレット）
よろめき列2
列2には、次の変換変換プロパティを追加します。
変換変換X軸：-25％
変換変換Y軸：25％（デスクトップ）、5％（タブレット）
変換変換を使用してモジュールをずらす
これで、モジュールを列コンテナの外に移動して、モジュールをずらす準備ができました。 これにより、列の背景画像が公開され、重複するデザイン要素を追加するために、モジュールに別のボックスシャドウを追加できるようになります。
よろめきモジュール1
列1の召喚モジュールの設定を開き、以下を更新します。
変換変換X軸：-60％
変換変換Y軸：50％（デスクトップ）、10％（タブレット）
モジュール1にボックスシャドウを追加します
次に、次のボックスシャドウを列1のアクションモジュールの呼び出しに追加します。
ボックスシャドウ：スクリーンショットを参照
ボックスシャドウの水平位置：0px
ボックスシャドウの垂直位置：0px
ボックスシャドウスプレッド強度：100px
影の色：rgba（151,178,193,0.21）
よろめきモジュール2
列2のモジュールを移動するには、以下を更新します。
変換変換X軸：60％
変換変換Y軸：-50％（デスクトップ）、-10％（タブレット）
モジュール2にボックスシャドウを追加します
次に、列2のアクション呼び出しモジュールにボックスシャドウを追加できます。このボックスシャドウはモジュール1と重複し、コンテンツの読み取りを困難にしたくないため、ほぼ完全に透明にする必要があります。
ボックスシャドウ：スクリーンショットを参照
ボックスシャドウの水平位置：0px
ボックスシャドウの垂直位置：0px
ボックスシャドウスプレッド強度：100px
影の色：rgba（151,178,193,0.09）
行ボックスシャドウフレームを追加します
デザインを完成させるために、背景にあるフレームデザイン要素として機能するボックスシャドウを行に追加しましょう。
ボックスシャドウ：スクリーンショットを参照
ボックスシャドウの垂直位置：0px
影の色：＃97b2c1
最終設計
それでは、最終的なデザインを確認しましょう。
デスクトップ
タブレット
電話
さまざまなデザインを試す
このデザインの優れている点は、新しいデザインのモジュールの数、色、間隔を簡単に変更できることです。 また、Diviの列とモジュールをさまざまな位置にずらして配置することもできます。
モジュールに間隔を追加して、モジュールと同じサイズの列の背景画像を作成します
列のサイズはコンテンツのサイズによって決まるため、モジュールにスペースを追加すると、列のサイズも大きくなります。 また、列は背景画像でずらされているため、これは、バランスの取れたデザインのために、その背景画像を常にモジュールのサイズに合わせて拡大縮小する簡単な方法です。
たとえば、列1のアクション呼び出しモジュールの設定を開き、次のようにパディングを更新します。
パディング：上20％、下15％
また、列1の背景画像がモジュールのサイズに合わせてどのように拡大縮小されるかに注目してください。
モジュールの追加
モジュールにパディングを追加すると列の背景のサイズが大きくなるのと同じように、列にモジュールを追加すると列の背景のサイズも大きくなります。
たとえば、列2のモジュールを複製し、列の2つのモジュールに必要なスペースに対応するために背景画像がどのように拡大するかに注目してください。
次に、列2の一番上のモジュールを少し右に移動して、優れた代替設計を行うことができます。
結果は次のとおりです。
色を変える
レイアウトを独自の配色に一致させたい場合は、ボックスの影の色を更新するのが最適な方法です。
これは、列1、モジュール1、およびモジュール2の半透明のボックスシャドウを更新した場合の例です。
最終的な考え
このチュートリアルが、Diviの列とモジュールをずらして独自の壊れたグリッドデザインを作成する方法について少しインスピレーションを与えてくれることを願っています。 この手法は非常に単純で、主にいくつかの変換変換プロパティを使用して列とモジュールをずらし、いくつかのボックスシャドウを使用して独自の壊れたデザインを作成します。 より多くの色のオプションを探索し、より多くのモジュールを導入して、デザインがどこに行くのかを確認してください。
コメントでお返事をお待ちしております。
乾杯！