グリッドレイアウト用に設計された背景でDiviブログページをアップグレードする

ブログのグリッドレイアウトを作成することは、投稿を整理するための優れた方法です。 Diviは、ブログモジュールを使用してこれを非常に簡単にします。 ほんの数秒で、機能しているブロググリッドレイアウトをページにデプロイできます。 また、多くのデザイン設定を利用して、ブロググリッドの外観をさまざまな方法でカスタマイズすることもできます。 しかし、今日、私は物事を別のレベルに引き上げています。

このチュートリアルでは、複数の背景レイヤーを作成して、美しく対称的なデザインで3列のブロググリッドをフレーム化する方法を紹介します。 うまくいけば、これらのデザイン手法を使用して、印象に残ることが保証されたブログページを作成できます。

始めましょう。

私たちのYoutubeチャンネルを購読する

グリッドレイアウト設計のスニークピーク

これがデザインのスニークピークです。

入門

このチュートリアルに必要なのはDiviだけです。 Diviテーマをインストールしてアクティブにしたら、新しいページを作成して、ページにタイトルを付けます。 次に、VisualBuilderを展開します。 「既成のレイアウトを選択」を選択し、セラピストのブログページレイアウトをページにアップロードして公開します。

コンテンツと注目の画像を含むブログ投稿が少なくとも6つあることを確認してください。 そうしないと、ブログの投稿はページに表示されません。

これで、編集を開始する準備が整いました。

セクションに最初の背景レイヤーを追加します

カスタムデザインは、ブログモジュールを保持するレイアウトの2番目のセクションに追加されます。 最初の背景レイヤーを作成するために、セクション設定を次のようにスタイル設定します。

背景色：＃5873dd
カスタムパディング（デスクトップ）：4vw上、4vw下、7vw左
カスタムパディング（タブレット）：0vw左

カスタムの7vw左パディングは、基本的にセクション（行）のコンテンツをオフセットして、独特の外観にします。 あなたがあなたのデザインのためにすべてを素晴らしくそして中心に置きたいならば、あなたはそれを省くことができます。

2番目と3番目の背景レイヤーを行に追加します

2番目と3番目の背景レイヤーは、行全体に背景色を追加し、次に行内の列に背景グラデーションを追加することによって作成されます。

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

背景色：rgba（255,255,255,0.3）
列1の背景左の色：rgba（255,255,255,0.0）
列1の背景右の色：rgba（255,255,255,0.3）
カラムグラジエント方向：90度
列の開始位置：列の開始位置：33.3％
列の終了位置：0％

青いセクションの背景が透けて見えるように、一貫した程度の白いオーバーレイカラーを作成するために、不透明度が30％の白い色を使用していることに注意してください。 各色が重なると、ユーザーには青いセクションの背景の30％明るいバージョンが表示されます。 このように、レイアウトの配色を変更したい場合は、セクションの背景色を変更するだけで済みます。

列のグラデーションの開始位置を33.3％に設定すると、ブロググリッドの最初の列と2番目の列の間でグラデーションが正しく分割されます。 ただし、特に行に100％のカスタム幅を指定する必要があるため、これは最初は正しく見えません。

カスタム幅：100％
側溝幅：4
カスタムパディング：上4％、下4％

カスタムパディングは、レイヤーを垂直方向に公開して、デザイン全体に追加します。

設定を保存する。

ブログモジュールに4番目の背景レイヤーを追加する

これはすべてが所定の位置に収まるところです。 4番目の最後のレイヤーは、ブログモジュールに追加された背景グラデーションになります。 次に、正確な間隔を追加すると、ブログモジュールは背景レイヤーと完全に整列します。 また、ブログカードにいくつかのスタイルの調整を追加して、最後の仕上げを追加します。

ブログモジュールの設定に移動し、以下を更新します。

グリッドタイルの背景色：rgba（255,255,255,0.7）

背景のグラデーションを追加するには、行の設定に移動して列1の背景のグラデーションをコピーしてから、ブログの設定に戻り、右クリックオプションを使用して貼り付けます。

次に、以下を更新します。

開始位置：66.6％

カスタムマージン：上4％、下4％
カスタムパディング：上4％、下4％、左4％、右4％

ご覧のとおり、デザインに等間隔を与えるために、全体で4％の長さの値が使用されています。 そして、この4％の値には、目に見える以上のものがあります。 覚えているかと思いますが、カスタムのガター幅を4に設定しました。Diviでは、グリッドレイアウトのブログモジュールを4ガター幅の行に追加すると、ブログのグリッド列が水平方向に8％分離されます。マージンの。 したがって、モジュールに左右のパディングの4％を追加すると、必要な正確な間隔が作成されます。

この時点で、背景デザインは完了です。 私たちがこれまでに持っているものをチェックしてください。

今、私たちがする必要があるのは、ブログモジュールにいくつかの最後の仕上げを追加することです。

最後の仕上げ

ブログモジュール設定の[デザイン]タブで、以下を更新します。

本文の色：rgba（0,0,0,0.8）
メタテキス​​トの色：rgba（0,0,0,0.5）
ページ付けフォントスタイル：下線
ページ付けの下線の色：rgba（166,221,217,0.39）
ページ付けテキストの色：#ffffff
ページ付けテキストサイズ：3vw（デスクトップ）、40px（タブレット）、30px（スマートフォン）

デザインにもう少し質感を与えたい場合は、セクションに仕切りの背景を追加できます。

仕切りトップ：スクリーンショットを参照
仕切りの色：rgba（88,115,221,0.5）
仕切りの高さ：32vw
ディバイダー水平リピート：0.3X

Divider Bottom：スクリーンショットを参照してください
仕切りの色：rgba（88,115,221,0.5）
仕切りの高さ：43vw
ディバイダー水平リピート：0.3X

最終結果を確認してください…

レスポンシブデザイン

グリッドの列を構成するレイヤーは、すべてのデスクトップブラウザーサイズで完全にスケーリングします。

背景レイヤーはタブレットの2列とスマートフォンの1列に調整されませんが、結果は依然として非常に対称的であり、うまく機能する微妙な壊れたグリッドデザインを提供します。

モバイルでの表示は次のとおりです…

最終的な考え

この階層化された背景手法は、実際には1つの列しかない3つの列の背景があるという印象を与える方法です（ブログモジュールは1つの列にあるため）。 確かにこれはブログモジュールレベルのカスタムCSSで行うことができますが、DiviBuilderで使用するクリエイティブなソリューションを提供する方が役立つと思いました。 また、デザインのバリエーションは、他のコンテンツの背景としても使用できます。

このチュートリアルで使用されているスタイリングの背後にある理由を説明しようとしましたが、質問がある場合は、私はすべての耳です。 そして、ブログのグリッドレイアウトにスパイスを効かせたいと思っている人のために、この投稿が少なくともそれを行うためのいくつかのデザインのヒントを提供することを願っています。

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

乾杯！