列のアウトラインを使用してDiviデザイングリッドを強調する

Diviの組み込み要素構造は、従来の方法で使用して、さまざまなセクション、行、列、およびモジュールを定義およびスタイル設定できます。 ただし、ページのデザイン構造を強化するためにクリエイティブに使用することもできます。 このチュートリアルでは、列のアウトラインを使用してDiviデザイングリッドを強調する方法を示します。 絶対位置の行を専用にして、美しい背景の列のアウトラインを作成し、それをセクション内の他の行とマージします。 JSONファイルも無料でダウンロードできます！

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

プレビュー

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

デスクトップ

モバイル

カラムアウトラインレイアウトを無料でダウンロード

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

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

無料でダウンロード

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

ダウンロード

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

再作成を始めましょう！

新しいセクションを追加

オーバーフロー

作業中のページに新しいセクションを追加することから始めます。 セクション設定を開き、オーバーフローを非表示に設定します。 これにより、セクションコンテナ、特にチュートリアルの後半で追加する列のアウトラインを超えるものがないことが保証されます。

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

行＃1を追加

カラム構造

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

サイジング

モジュールをまだ追加せずに、行設定を開き、次のようにサイズ設定を変更します。

• 幅：100％
• 最大幅：100％
• 行の配置：右

間隔

次に、いくつかのカスタムサイズ設定を使用して、デスクトップのページの右側に行をプッシュします。

• トップマージン：200px
• 左パディング：47％（デスクトップ）、6％（タブレット）、10％（電話）
• 右パディング：6％（タブレット）、10％（電話）

国境

上と下の境界線を追加して、一般的な行の設定を完了します。

• 上下の境界線の幅：4px
• 上と下の境界線の色：#bdffed

列1の設定

間隔

一般的な行の設定が完了したら、最初の列の設定を開き、いくつかのカスタム間隔値を追加します。

• トップパディング：12％
• ボトムパディング：12％
• 左パディング：3％
• 右パディング：3％

列2の設定

間隔

次に2番目の列の設定を開き、次の間隔設定を使用します。

• トップパディング：12％
• ボトムパディング：12％
• 左パディング：5％（デスクトップ）、20％（タブレット）、15％（電話）
• 右パディング：5％（デスクトップ）、20％（タブレット）、15％（電話）

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

H2コンテンツを追加する

列1にH2コンテンツを含むテキストモジュールから始めて、モジュールを追加します。

H2テキスト設定

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

• 見出し2フォント：ソースコードプロ
• 見出し2フォントの太さ：太字
• 見出し2テキストの色：rgba（35,38,211,0.46）
• 見出し2テキストサイズ：4vw（デスクトップ）、60px（タブレット）、50px（電話）
• 見出し2文字の間隔：5px

• 見出し2テキストシャドウ水平方向の長さ：0.05em
• 見出し2テキストシャドウ垂直長：0.07em
• 見出し2テキストの影の色：#bdffed

垂直運動

垂直方向のモーションも追加します。

• 垂直モーションを有効にする：はい
• 開始オフセット：2
• ミッドオフセット：0
• 終了オフセット：-2
• モーションエフェクトトリガー：要素の中央

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

コンテンツを追加する

前のテキストモジュールのすぐ下に別のテキストモジュールを追加し、選択した説明コンテンツを挿入します。

テキスト設定

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

• テキストフォント：ソースコードプロ
• テキストの色：rgba（35,38,211,0.76）
• テキストサイズ：15px
• テキスト行の高さ：2em

垂直運動

このモジュールにも垂直方向のモーションを使用します。

• 垂直モーションを有効にする：はい
• 開始オフセット：2
• ミッドオフセット：0
• 終了オフセット：-2
• モーションエフェクトトリガー：要素の中央

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

コピーを追加

列1に必要な最後のモジュールは、ボタンモジュールです。 選択したコピーをいくつか追加します。

ボタンの設定

モジュールの[デザイン]タブに移動し、次のようにボタンのスタイルを設定します。

• ボタンにカスタムスタイルを使用する：はい
• ボタンのテキストの色：＃2326d3
• ボタンの境界線半径：0px

• ボタンフォント：ソースコードプロ
• ボタンアイコンを表示：はい
• ボタンアイコンの配置：左
• ボタンのホバー時にアイコンのみを表示：いいえ

間隔

次に、いくつかのカスタムパディング値を追加します。

• トップパディング：20px
• ボトムパディング：20px
• 左パディング：50px
• 右パディング：50px

垂直運動

そして、垂直方向の動きを追加して、モジュールの設定を完了します。

• 垂直モーションを有効にする：はい
• 開始オフセット：2
• ミッドオフセット：0
• 終了オフセット：-2
• モーションエフェクトトリガー：要素の中央

列2に画像モジュールを追加します

1：1の比率の画像をアップロードする

列2では、画像モジュールが必要な唯一のモジュールです。 1：1の比率で画像をアップロードします。

サイジング

モジュールのデザインタブに移動し、画像に全幅を強制します。

• 全幅を強制：はい

国境

次に丸い角をいくつか追加して、画像を円に変えます。

• すべてのコーナー：50vw

ボックスシャドウ

次に、ボックスシャドウを追加します。

• ボックスシャドウの水平位置：30px
• ボックスシャドウの垂直位置：30px
• 影の色：rgba（38,255,197,0.3）

垂直運動

そして、垂直方向の動きを追加して、モジュールの設定を完了します。

• 垂直モーションを有効にする：はい
• 開始オフセット：-2
• ミッドオフセット：0
• 終了オフセット：2
• モーションエフェクトトリガー：要素の中央

行全体を2回クローンします

最初の行を完了したら、それを2回複製できます。

すべてのコンテンツと画像を変更する

重複するすべてのコンテンツと画像を必ず変更してください。

最後の行に下マージンを追加

最後の行の設定を開き、間隔の設定に移動して、下の余白を追加します。

• 下マージン：200px

新しい行（セクションの上部）を列のアウトライン専用にします

カラム構造

一般的な行が配置されたので、列のアウトラインを追加します。 これを行うには、次の列構造を使用して、セクションの上部に新しい行を追加します。

サイジング

行設定を開き、[デザイン]タブに移動して、次のようにサイズ設定を変更します。

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

間隔

デフォルトの上下のパディングもすべて削除します。

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

ポジション

次に、[詳細設定]タブに移動し、行全体を再配置します。 位置を絶対に設定することで、ページ内の行が占めるコンテナスペースを削除します。

• 位置：絶対
• 場所：トップセンター

すべての列のメイン要素のCSS幅

一般的な行の設定が完了したら、列のスタイル設定を開始します。 まず、行のメイン要素内の1行のCSSコードを使用して、各列にカスタム幅を追加します。 これにより、小さい画面サイズで列構造を維持できます。

width: 20% !important;

列1の設定

間隔

次に、列1の設定を開き、さまざまな画面サイズでパディング値を変更します。

• トップパディング：150vh（デスクトップ）、250vh（タブレットと電話）
• 下部のパディング：150vh（デスクトップ）、250vh（タブレットと電話）

国境

左の境界線も追加します。

• 左ボーダー幅：5px
• 左の境界線の色：#bdffed
• 左ボーダースタイル：破線

列2の設定

背景色

次に、列2の設定を開き、背景色を追加します。

• 背景色：＃b5fff1

国境

右の境界線も使用します。

• 右ボーダー幅：4px
• 右の境界線の色：#bdffed
• 右ボーダースタイル：ソリッド

列3の設定

国境

3番目の列では、次の設定で右の境界線を使用します。

• 右ボーダー幅：4px
• 右の境界線の色：rgba（35,38,211,0.12）
• 右ボーダースタイル：破線

列4の設定

国境

次に、列4の設定を開き、それに応じて境界線の設定を変更します。

• 右ボーダー幅：4px
• 右の境界線の色：#bdffed
• 右ボーダースタイル：ソリッド

列5の設定

国境

列5にも右の境界線を追加して、列の設定を完了します。

• 右ボーダー幅：4px
• 右の境界線の色：rgba（35,38,211,0.12）
• 右ボーダースタイル：破線

Dividerモジュールを列1と2に追加します

可視性

この投稿の冒頭のモバイルプレビューでは、デスクトップとは少し異なる結果に気付くことができました。 これらの特定の列にDividerModuleを追加することによって、列1と2の列のアウトラインのみを表示できるようにします。 可視性設定で両方の仕切りを非表示にして、完了です。

• 仕切りを表示：いいえ

プレビュー

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

デスクトップ

モバイル

最終的な考え

この投稿では、Diviの組み込み列を使用して創造性を発揮する方法を紹介しました。 具体的には、列のアウトラインを使用してDiviデザイングリッドを強調する方法を示しました。 このアプローチは、追加の画像編集ソフトウェアを必要とせずに、独自のデザインを作成するのに役立ちます。 JSONファイルも無料でダウンロードできました！ ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。

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