Diviで行の境界線を水平方向に重ねる方法

相互作用するページデザインを作成することは、必ずしも簡単な作業ではありません。 ユーザーエクスペリエンス、デザイン原則、デザイントレンドに焦点を当てるだけでなく、会社のブランドに一致し、訪問者を一目で魅了するものを作成する必要もあります。

私たちのブログを検索すると、DiviとDiviの多彩な組み込みオプションを使用してWebデザインにアプローチするための創造的な方法がたくさん見つかります。 今日、私たちはそのリストに別の創造的なアプローチを追加しています。 行の境界線をクリエイティブに重ねて、見事なデザインを作成する方法を紹介します。 すべての画面サイズで同じタイプのデザインを使用していることを確認しています。

それを手に入れよう！

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

プレビュー

例を最初から作成しますが、それに飛び込む前に、さまざまな画面サイズでの最終結果を見てみましょう。

無料のMightypeフォントをダウンロード

最初に行う必要があるのは、AFスタジオが無料のMightype手書きフォントをダウンロードすることです。 次のリンクにアクセスして、電子メールによる無料ダウンロードを有効にします。

新しいセクションを追加

間隔

前の手順で説明したフリーフォントをダウンロードしたら、先に進んで新しいページを作成できます。 その後、Visual Builderを有効にし、新しいページの最初のセクションを開いて、カスタムパディングを追加します。

• トップパディング：250px
• ボトムパディング：250px

新しい行を追加

カラム構造

合計2行必要です。 最初のものから始めて、完了したら後でクローンを作成します。 次の列構造を使用して、セクションに新しい行を追加します。

列1のグラジエントバックグラウンド

モジュールをまだ追加せずに、行設定を開き、次の列1のグラデーションの背景を追加します。

• 色1：#ffffff
• 色2：rgba（0,255,233,0.25）
• カラムグラジエントタイプ：ラジアル
• 列の半径方向：左
• カラム開始位置：59％
• カラムの終了位置：59％
• 背景画像の上の列配置グラデーション：はい

列1の背景パターン

次のパターンをコンピューターに保存し、列1の背景画像としてアップロードして続行します。

パターンをアップロードしたら、次の背景画像設定を利用します。

• 列の背景画像サイズ：実際のサイズ
• 列の背景画像の繰り返し：スペース

行の配置

右の行の配置も有効にします。

サイジング

この行には、いくつかのカスタムサイズ設定も使用しています。

• カスタム幅を使用：はい
• カスタム幅：950px

間隔

次に追加する必要のある間隔の値は次のとおりです。

• 下マージン：100px
• 右マージン：-30px（タブレットと電話）
• トップパディング：0px
• ボトムパディング：0px

国境

最後になりましたが、行の上部、左側、下部に境界線を追加します。

• ボーダー幅：14px
• ボーダーカラー：＃000000
• 左ボーダースタイル：ダブル

タイトルテキストモジュールを追加

H2コピーを追加

これで、モジュールの追加を開始できます。 タイトルのテキストモジュールを追加し、コピーがH2であることを確認します。

背景色

テキストモジュールに白い背景色を追加して、行の左側の境界線を中断します。

Mightypeフォントをアップロードする

次にコンピュータでMightypeフォントを見つけ、フォントリストのアップロードボタンをクリックしてフォントライブラリにアップロードします。

Mightypeフォントファイルを選択し、フォントに名前を付けて、フォントライブラリにアップロードします。

H2テキスト設定

新しいフォントを追加したら、先に進んでH2テキスト設定に他の変更を加えます。

• 見出し2フォント：Mightype
• 見出しのテキストの色：＃000000
• 見出し2テキストサイズ：150px（デスクトップ）、100px（タブレット）、60px（電話）

間隔

行の境界線をオーバーラップさせるモジュールごとに、負のマージンを追加する必要があります。 この負のマージンは、問題のモジュールにのみ影響し、配置された行には影響しません。追加する必要のある負のマージンは、コピーで使用されている文字数によって異なります。

• トップマージン：200px
• 下マージン：100px
• 左マージン：-35％
• トップパディング：50px
• ボトムパディング：50px

ブレンドモード

また、テキストモジュールの背景色が行の境界線にのみ影響し、列1の背景には影響しないようにするには、[フィルター]設定で[乗算]ブレンドモードを有効にします。

説明テキストモジュールを追加

背景色

タイトルのテキストモジュールのすぐ下に、白い背景色の説明テキストモジュールを追加します。

テキスト設定

テキスト設定に移動し、いくつかの変更を加えます。

• テキストサイズ：22px（デスクトップ）、18px（タブレット）、15px（電話）
• テキスト行の高さ：1.8em
• テキストの向き：中央

サイジング

次に、このテキストモジュールのサイズを「96％」に減らします。

間隔

間隔も追加します。

• 下マージン：200px
• 左マージン：-50％
• トップパディング：20px
• ボトムパディング：20px

ブレンドモード

また、ここでも「乗算」ブレンドモードを使用します。

クローン行

最初の行の変更が完了しました。 同じ結果をページの反対側に作成しましょう。 時間を節約するために、すでに持っている行のクローンを作成し、途中でいくつかの変更を加えます。

行設定の変更

列1のグラジエントバックグラウンド

最初に変更する必要があるのは、列1のグラデーションの背景です。

• 色2：rgba（255,187,0,0.33）
• 列の半径方向：右

行の配置

行を反対側に表示する必要があるため、左側の行の配置を選択します。

間隔

間隔設定も調整しています。

• 左マージン：-25％（タブレットと電話）

国境

行に適用されている左側の境界線を削除し、代わりに右側に適用します。

• 右ボーダー幅：14px
• 右の境界線の色：＃000000
• 右ボーダースタイル：ダブル

タイトルテキストモジュール設定の変更

間隔

次に、タイトルテキストモジュールの間隔設定を変更します。

• 左マージン：52％（デスクトップとタブレット）、58％（電話）
• 右マージン：-52％（デスクトップとタブレット）、58％（電話）

説明テキスト設定の変更

間隔

最後になりましたが、説明テキストモジュールには他の間隔値も必要です。

• 左マージン：50％
• 右マージン：-50％

プレビュー

さまざまな手順をすべて実行したので、さまざまな画面サイズでの最終結果を最終的に見てみましょう。

最終的な考え

Diviの組み込みオプションを使用して行の境界線を重ねることで、Webサイトにあなたが探していたかもしれないカスタマイズとパーソナライズをもたらすことができます。 この投稿では、その方法を正確に説明しました。 美しい例を一から再現しました。 この例はすべての画面サイズで見栄えがよく、Diviの組み込みオプションのみを使用しています。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！