Diviの背景として低Zインデックスモジュールの境界線を使用する

あなたがあなたのウェブサイトのためにユニークなデザインを作成しようとしているとき、箱の外で考えることはあなたがそこに着くのを助けることができます。 過去のチュートリアルでは、組み込みオプションにデザイン要素を使用することがよくありました。 作成するデザインのリアルタイムビューを維持するのに役立つだけでなく、さまざまな画面サイズで希望どおりに表示するのにも役立ちます。 今日のDiviチュートリアルでは、モジュールの低zインデックス境界線を使用して、さまざまな目的に使用できる見事なデザインを作成する方法を紹介します。 JSONファイルも無料でダウンロードできます！

それを手に入れましょう。

プレビュー

チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。

デスクトップ

モバイル

低Zインデックスモジュールの境界線レイアウトを無料でダウンロード

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

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

無料でダウンロード

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

ダウンロード

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

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

再作成を始めましょう！

新しいセクションを追加

間隔

作業中のページに新しいセクションを追加することから始めます。 セクション設定を開き、デフォルトの上部と下部のパディングを削除します。

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

オーバーフロー

[詳細設定]タブに移動して、オーバーフローを変更します。

• 水平オーバーフロー：非表示
• 垂直オーバーフロー：非表示

新しい行を追加

カラム構造

次の列構造を使用して、新しい行を追加して続行します。

背景色

モジュールをまだ追加せずに、行の設定を開き、背景色を変更します。

• 背景色：＃f3f3e6

サイジング

[デザイン]タブに移動し、それに応じてサイズ設定を変更します。

• カスタムガター幅を使用：はい
• 側溝幅：1
• 列の高さを等しくする：はい
• 幅：100％
• 最大幅：100％

間隔

次に、行のデフォルトの上下のパディングを削除します。

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

列1の設定

行の設定が完了したら、最初の列の設定を開いて変更を加えることができます。

グラデーションの背景

次の設定を使用して、グラデーションの背景を追加します。

• 色1：rgba（0,0,0,0）
• 色2：＃2e2d3c
• グラデーション方向：90度
• 開始位置：54％
• 終了位置：54％

ボックスシャドウ

ボックスシャドウも追加します。

• ボックスシャドウブラー強度：80px
• 影の色：rgba（0,0,0,0.3）

テキストモジュール＃1を列1に追加します

コンテンツボックスを空のままにします

モジュールの追加を開始する時が来ました！ 最初の列にテキストモジュールを挿入し、コンテンツボックスを空のままにします。 このモジュールは、組み込み設定にのみ使用します。 その位置（最初の列の最初のモジュール）のため、モジュールのzインデックスは低く、後続のすべての下に表示されます。

サイジング

デザインタブに移動し、さまざまな画面サイズで幅を変更します。

• 幅：24vw（デスクトップ）、50vw（タブレットと電話）

間隔

次に間隔設定に移動し、次のように値を変更します。

• トップマージン：15vw
• 左マージン：12vw（デスクトップ）、30vw（タブレットと電話）
• トップパディング：32vw（デスクトップ）、67vw（タブレット）、60vw（電話）

国境

境界線を追加して、モジュールの設計を完了します。

• 境界線の幅：2vw（デスクトップ）、4vw（タブレット）、5vw（電話）
• ボーダーカラー：＃00ffb2

テキストモジュール＃2を列1に追加します

コンテンツを追加する

列1に別のテキストモジュールを追加し、選択したコンテンツを入力します。

背景色

背景色を列の2番目のグラデーション色と一致させます。

• 背景色：＃2e2d3c

テキスト設定

[デザイン]タブに移動し、それに応じてテキスト設定を変更します。

• テキストフォント：Montserrat
• テキストフォントの太さ：太字
• テキストフォントスタイル：大文字
• テキストの配置：中央
• テキストの色：＃f3f3e6
• テキストサイズ：4vw
• テキスト文字の間隔：-0.2vw

サイジング

幅も変更してください。

• 幅：27vw

間隔

次に、間隔の設定に移動し、さまざまな画面サイズの値を試してみてください。

• トップマージン：-23.2vw（デスクトップ）、-46vw（タブレットと電話）
• 左マージン：21.5vw（デスクトップ）、64.5vw（タブレット）、64vw（電話）
• トップパディング：4vw
• ボトムパディング：4vw
• 左パディング：2vw
• 右パディング：2vw

変換回転

変換設定でモジュールを回転させて、モジュールの設定を完了します。

• 左：270度

画像モジュールを列に追加

画像をアップロード

列1で必要な次の最後のモジュールは、画像モジュールです。 選択した半透明の画像をアップロードします。

サイジング

[デザイン]タブに移動し、[全幅を強制]オプションを有効にします。 これにより、さまざまな画面サイズで画像の応答性を高めることができます。

• 全幅を強制：はい

間隔

次に間隔設定を開き、次のように値を変更します。

• 画像の下にスペースを表示：いいえ
• トップマージン：-6vw
• 左マージン：3vw
• 右パディング：22vw（デスクトップ）、47vw（タブレットと電話）

フィルタ

また、フィルター設定で画像の彩度を下げています。

• 飽和度：43％

テキストモジュール＃2を列2に追加します

コンテンツを追加する

次のコラムへ！ お好みのコンテンツを入力してください。

テキスト設定

[デザイン]タブに移動し、次のようにテキスト設定を変更します。

• テキストフォント：Montserrat
• テキストの配置：正当化
• テキストの色：＃2e2d3c
• テキストサイズ：0.9vw（デスクトップ）、2.2vw（タブレット）、2.5vw（電話）
• テキスト行の高さ：2.5em

間隔

次に、いくつかのカスタム間隔値を追加します。

• トップマージン：10vw（デスクトップ）、15vw（タブレットと電話）
• 左パディング：8vw
• 右パディング：8vw

クローンテキストモジュール

テキストモジュールが完成したら、一度クローンを作成します。

上マージンを削除する

複製の上マージンを削除します。

列2の両方のテキストモジュールの間に新しいテキストモジュールを配置します

コンテンツを追加する

列の既存の両方のテキストモジュールの間に別のテキストモジュールを追加し、選択したコンテンツを入力します。

テキスト設定

次のようにテキスト設定を変更します。

• テキストフォント：Montserrat
• テキストフォントの太さ：半太字
• テキストの色：＃2e2d3c
• テキストサイズ：2vw（デスクトップ）、5vw（タブレットと電話）
• テキスト行の高さ：1.4em

間隔

パディング値も変更します。

• トップパディング：4vw（デスクトップ）、8vw（タブレット）、10vw（電話）
• 下部のパディング：4vw（デスクトップ）、8vw（タブレット）、10vw（電話）
• 左パディング：4vw
• 右パディング：4vw

ボタンモジュールを列2に追加

コピーを追加

次の最後のボタンモジュールに進みます。 選択したコピーを挿入します。

ボタンの設定

デザインタブに移動し、ボタンの設定を変更します。

• ボタンにカスタムスタイルを使用する：はい
• ボタンのテキストサイズ：0.9vw（デスクトップ）、2.5vw（タブレット）、3vw（電話）
• ボタンのテキストの色：＃f3f3e6
• ボタンの背景色：＃2e2d3c
• ボタンの境界線の幅：0px
• ボタンの境界線半径：0px
• ボタンフォント：Montserrat

間隔

いくつかのカスタム間隔値を追加してボタンモジュールのデザインを完成させれば、完了です。

• トップマージン：2vw（デスクトップ）、8vw（タブレットと電話）
• 下マージン：10vw（デスクトップ）、15vw（タブレットと電話）
• 左マージン：8vw
• トップパディング：1.5vw（デスクトップ）、2.5vw（タブレット）、3vw（電話）
• ボトムパディング：1.5vw（デスクトップ）、2.5vw（タブレット）、3vw（電話）
• 左パディング：4vw（デスクトップ）、8vw（タブレット）、10vw（電話）
• 右パディング：4vw（デスクトップ）、8vw（タブレット）、10vw（電話）

プレビュー

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

デスクトップ

モバイル

最終的な考え

この投稿では、空のモジュールの低zインデックス境界設定をクリエイティブに使用して、すばらしい結果を作成する方法を紹介しました。 また、デザインに回転コピーをいくつか含めました。 このチュートリアルでは、Diviの組み込みオプションの用途の広さと、各要素の設定を微調整してさまざまな画面サイズに一致させる方法を示します。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！

Diviの詳細を知り、Diviの景品をさらに入手したい場合は、メールマガジンとYouTubeチャンネルに登録して、この無料コンテンツを最初に知って利益を得ることができるようにしてください。