Diviを使用した見事なデザインでセクションディバイダーの下にコピーをエレガントに隠す

Diviの組み込みオプションを使用すると、1つの特定のデザイン設定を複数の目的に使用でき、創造性を刺激するのに役立ちます。 今日は、独自の方法でセクション仕切りを使用して、Webサイトのコピーをエレガントに非表示にします。 これは、カスタムコードを必要とせずに、ページにインタラクションを追加するための優れた方法です。 美しい例を最初から再作成し、例のJSONファイルを無料でダウンロードすることもできます。

それを手に入れよう！

プレビュー

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

デスクトップ

モバイル

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

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

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

無料でダウンロード

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

ダウンロード

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

再作成を始めましょう！

セクション＃1を追加

最初に行う必要があるのは、作業中のページに新しい通常のセクションを追加することです。

新しい行を追加

カラム構造

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

列にテキストモジュールを追加

H2コンテンツを追加する

この行で必要な最初のモジュールは、H2コンテンツを含むテキストモジュールです。

H2テキスト設定

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

• 見出し2フォント：プレイフェアディスプレイ
• 見出し2フォントの太さ：通常
• 見出し2テキストの配置：中央
• 見出し2テキストサイズ：70px（デスクトップ）、40px（タブレット）、30px（電話）

Dividerモジュールを列に追加

可視性

この行で必要な2番目で最後のモジュールはDividerモジュールです。 [仕切りを表示]オプションが有効になっていることを確認してください。

• 仕切りを表示：はい

ライン

デザインタブの線の色も変更します。

• 線の色：＃000000

サイジング

サイズ設定に移動し、次の設定を適用します。

• 仕切りの重量：5px
• 幅：27％
• モジュールの配置：中央

セクション＃2を追加

背景色

2番目の通常のセクションをページに追加し、セクション設定を開いて背景色を変更します。

• 背景色：＃f7f7f7

オーバーフロー

[詳細設定]タブでも、セクションのオーバーフローを非表示にしてください。 これにより、セクションコンテナを超えるものがないことが確認されます。

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

トランジション

この投稿の後半で、ホバートランジションを作成します。 これがスムーズに実行されるように、[詳細設定]タブで遷移期間を長くします。

• 移行時間：800ms

新しい行を追加

カラム構造

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

サイジング

モジュールをまだ追加せずに、行設定を開き、次の設定を適用して、行がセクションコンテナの幅全体を占めるようにします。

• カスタムガター幅を使用：はい
• 側溝幅：1
• 幅：100％
• 最大幅：100％

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

H3コンテンツを追加する

テキストモジュールから始めて、モジュールの追加を開始します。 お好みのH3コンテンツを入力してください。

H3テキスト設定

デザインタブに移動し、H3テキスト設定を変更します。

• 見出し3フォント：プレイフェアディスプレイ
• 見出し3テキストの配置：中央
• 見出し3テキストの色：＃000000
• 見出し3テキストサイズ：3vw（デスクトップ）、6vw（タブレット）、7vw（電話）

Dividerモジュールを列に追加

可視性

この行で必要な2番目のモジュールはDividerモジュールです。 [仕切りを表示]オプションが有効になっていることを確認してください。

• 仕切りを表示：はい

ライン

仕切りの色も変更します。

• 線の色：＃000000

間隔

また、カスタムの上下の余白を追加してスペースを作成します。

• トップマージン：2vw
• 下マージン：2vw

列にテキストモジュールを追加

コンテンツを追加する

次に必要なモジュールは、別のテキストモジュールです。 選択した段落コンテンツを追加します。

テキスト設定

デザインタブに移動し、テキスト設定を変更します。

• テキストフォント：Open Sans
• テキストの配置：中央
• テキストの色：＃777777
• テキストサイズ：0.8vw（デスクトップ）、1.7vw（タブレット）、2.2vw（電話）
• テキスト行の高さ：1.8em

間隔

次に、いくつかのカスタムマージン値を追加します。

• 左マージン：3vw（デスクトップ）、7vw（タブレット）、10vw（電話）
• 右マージン：3vw（デスクトップ）、7vw（タブレットと電話）

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

コピーを追加

この行で必要な次の最後のモジュールはボタンモジュールです。 お好みのコピーを入力してください。

配置

デザインタブでボタンの配置を変更します。

• ボタンの配置：中央

ボタンの設定

ボタン設定のスタイルを設定して続行します。

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

間隔

また、いくつかのカスタム間隔値も追加します。

• トップマージン：2vw
• トップパディング：1vw
• ボトムパディング：1vw
• 左パディング：3vw（デスクトップ）、6vw（タブレット）、8vw（電話）
• 右パディング：3vw（デスクトップ）、6vw（タブレット）、8vw（電話）

追加のセクション設定

デフォルトのトップディバイダー

セクションへのすべてのモジュールの追加が完了したら、いくつかの追加のセクション設定を実行します。 セクション設定を開き、[デザイン]タブに移動して、次の上部仕切りを追加します。

• 仕切りスタイル：リストで検索
• 仕切りの色：＃e8e8e8
• 仕切りの高さ：7000px
• 仕切りフリップ：垂直
• 仕切りの配置：セクションの内容の上に

ホバートップディバイダー

ホバー時に仕切りの高さを変更します。

• 仕切りの高さ：0px

ボトムディバイダー

下部の仕切りも追加します。

• 仕切りスタイル：リストで検索
• 仕切りの色：＃5c26ff
• 仕切りの高さ：600px
• 仕切りの配置：セクションの内容の上に

ホバーボトムディバイダー

そして、ホバー時に仕切りの高さを取り除きます。

• 仕切りの高さ：0px

間隔

この投稿のプレビューでわかるように、このセクションを円で囲んでいます。 そのためには、まず、さまざまな画面サイズにカスタムマージンとパディング値を追加する必要があります。

• 左マージン：10vw（デスクトップ）、11vw（タブレット）、0vw（電話）
• 右マージン：47vw（デスクトップ）、11vw（タブレット）、0vw（電話）
• トップパディング：8vw（デスクトップ）、15vw（タブレット）、16vw（電話）
• 下部のパディング：8vw（デスクトップ）、15vw（タブレット）、16vw（電話）

国境

続けて、各コーナーに「50vw」を追加して、セクションを円に変換します。 また、次の設定を使用して境界線を追加しています。

• ボーダー幅：1px
• ボーダーカラー：rgba（255,255,255,0）

ホバーボーダー

ホバー時に境界線の色を変更します。

• ボーダーカラー：＃000000

セクションを2回クローンする

すべてのセクション設定が完了したら、先に進んでセクションのクローンを2回作成できます。

重複＃1を変更する

トップディバイダーの色を変更する

最初のセクションから始めて、両方のセクションの重複を変更します。 セクション設定を開き、上部の仕切りの色を変更します。

• 仕切りの色：＃5c26ff

ボトムディバイダーの色を変更する

下の仕切りの色も変更します。

• 仕切りの色：＃ff3a5e

間隔を変更する

次に、間隔の設定に移動し、次の値が適用されることを確認します。

• トップマージン：-20vw（デスクトップ）、0vw（タブレットと電話）
• 左マージン：47vw（デスクトップ）、11vw（タブレット）、0vw（電話）
• 右マージン：10vw（デスクトップ）、11vw（タブレット）、0vw（電話）

重複＃2を変更する

トップディバイダーの色を変更する

2番目の複製の設定を開き、上部の仕切りの色を変更します。

• 仕切りの色：＃ff3a5e

ボトムディバイダーの色を変更する

下の仕切りの色も変更します。

• 仕切りの色：＃e8e8e8

間隔を変更する

また、ここでも間隔の値を変更します。

• トップマージン：-20vw（デスクトップ）、0vw（タブレットと電話）
• 下マージン：7vw
• 左マージン：10vw（デスクトップ）、11vw（タブレット）、0vw（電話）
• 右マージン：47vw（デスクトップ）、11vw（タブレット）、0vw（電話）

プレビュー

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

デスクトップ

モバイル

最終的な考え

この投稿では、セクションの仕切りの下にコピーをエレガントに非表示にする方法を示しました。 これは、Diviの直感的な組み込みオプションのいくつかを以前とは異なる方法で使用するための優れた方法です。 このチュートリアルが、この手法を使用して独自の代替デザインを作成するきっかけになることを願っています。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！

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