Diviの変換オプションを使用してホバーで拡張セクションコンテンツを作成する

今日は、Diviの新しい変換オプションに付属する変換スケール設計オプションに焦点を当てます。 さらに、ホバー時にセクションをエレガントな方法で拡張できる見事なデザインを再現します。

このデザインは、作成するあらゆる種類のWebサイトに使用できます。 構造化された最小限の方法で関連コンテンツを共有するのに役立ちます。 このチュートリアルの最後に、ページレイアウト全体を無料でダウンロードできるようになります。

それを手に入れよう！

プレビュー

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

デスクトップ

モバイル

再作成を始めましょう！

セクション＃1を追加

間隔

新しいページを作成することから始めます。 最初の通常のセクションをページに追加し、セクション設定を開いて、間隔設定のデフォルトの上下のパディングをすべて削除します。

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

新しい行を追加

カラム構造

次の列構造を使用して最初の行を追加します。

サイジング

モジュールをまだ追加せずに、行の設定を開き、行が画面の幅全体を占めるようにします。

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

間隔

デフォルトの上下のパディングもすべて削除します。 これは、行とセクションが占めるスペースを制限するために行っています。

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

仕切りモジュールを追加

可視性

この行に必要なモジュールは、Dividerモジュールだけです。 このチュートリアルの最後に、仕切りを垂直の仕切りに変換して、今後のすべてのセクションを接続します。 Divider Moduleを追加したら、[ShowDivider]オプションが有効になっていることを確認します。

• 仕切りを表示：はい

色

次に、[デザイン]タブに移動し、仕切りの色を黒に変更します。

• 色：＃000000

サイジング

サイズ値も変更します。

• 仕切りの重量：1px
• 高さ：0px

間隔

そして、いくつかの負の左右のマージンを追加して、仕切りの長さを増やします。

• 左マージン：-135vw（デスクトップ）、-300vw（タブレット）、-340vw（電話）
• 右マージン：-135vw（デスクトップ）、-300vw（タブレット）、-340vw（電話）

セクション＃2を追加

背景色

次のレギュラーセクションへ！ 新しいセクションを追加したら、セクション設定を開き、完全に白い背景色を追加します。

• 背景色：#ffffff

間隔

次に、間隔の設定に移動し、カスタムの上部と下部のパディングを追加します。

• トップパディング：5vw
• ボトムパディング：5vw

デフォルトの境界線

セクションにも境界線を追加します。

• ボーダー幅：1px
• ボーダーカラー：＃000000

ホバーボーダー

そして、ホバーで境界線の幅を削除します。

• ボーダー幅：0px

デフォルトのボックスシャドウ

また、ホバー時にボックスシャドウを追加しています。 そのためには、最初にデフォルトのものを追加する必要があります。 ボックスの影がデフォルトで表示されないようにするために、完全に透明な影の色を使用しています。

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

ホバーボックスシャドウ

次のカラーコードを使用して、ホバー時にシャドウの色を変更します。

• 影の色：rgba（0,0,0,0.13）

行＃1を追加

カラム構造

次の列構造を使用して、セクションに最初の行を追加して続行します。

サイジング

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

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

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

H2コンテンツを追加する

モジュールの追加を開始する時が来ました！ 最初に必要なモジュールは、H2コンテンツを含むテキストモジュールです。

H2テキスト設定

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

• 見出し2フォント：Abril Fatface
• 見出し2テキストの配置：中央
• 見出し2のテキストの色：＃000000
• 見出し2テキストサイズ：7vw

間隔

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

• 下マージン：5vw
• 左マージン：5vw
• 右マージン：5vw

仕切りモジュールを追加

可視性

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

• 仕切りを表示：はい

色

次に、[デザイン]タブに移動し、仕切りの色を黒に変更します。

• 色：＃000000

行＃2を追加

カラム構造

2列目へ！ 次の列構造を使用します。

サイジング

ここでも、デザインタブのサイズ設定を変更して、行が画面の幅全体を占めるようにしています。

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

間隔

また、間隔設定にカスタムの左右のパディングを追加することで、行のサイズをわずかに縮小しています。

• 左パディング：10vw
• 右パディング：10vw

画面

小さい画面サイズで3つの列すべてが隣り合って表示されるようにするために、CSSコードの1行を行のメイン要素に追加します。

display: flex;

列1に宣伝文モジュールを追加する

コンテンツを追加する

行の最初の列に宣伝文モジュールを追加して続行します。 お好みのコンテンツを入力してください。

アイコンを選択

次にアイコンを選択します。

アイコン設定

次に、[デザイン]タブに移動し、アイコンの色を変更します。

• アイコンの色：＃000000

タイトルテキスト設定

タイトルテキストの設定に移動し、好みに応じて設定を変更します。

• タイトルフォント：Abril Fatface
• タイトルテキストの配置：中央
• タイトルテキストの色：＃000000
• タイトルテキストサイズ：1.5vw（デスクトップ）、2.5vw（タブレット）、3.5vw（電話）
• タイトルラインの高さ：2em

本文の設定

本文の設定についても同じようにします。

• ボディフォント：Open Sans
• 本文の配置：中央
• 本文の色：＃666666
• 本文のサイズ：0.8vw（デスクトップ）、1.5vw（タブレット）、2vw（電話）
• ボディラインの高さ：2em

間隔

大事なことを言い忘れましたが、Blurbモジュールにカスタムの左右の余白を追加します。

• 左マージン：2vw
• 右マージン：2vw

宣伝文句モジュールを2回クローンし、残りの列に配置します

宣伝文のカスタマイズが完了したら、先に進んで2回クローンを作成できます。 行の残りの2つの列に重複を配置します。

行＃3を追加

カラム構造

次の最後の行に進みます。 次の列構造を選択してください。

サイジング

モジュールをまだ追加せずに、行の設定を開き、サイズ設定を変更して、行がセクションの幅全体を占めるようにします。

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

ボタンモジュールの追加

コンテンツを追加する

ここで必要なモジュールはボタンモジュールだけです。 選択したコピーをいくつか追加します。

配置

次に、[デザイン]タブに移動し、ボタンの配置を変更します。

• ボタンの配置：中央

ボタンの設定

次にボタンの設定を変更します。

• ボタンにカスタムスタイルを使用する：はい
• ボタンのテキストサイズ：1.5vw（デスクトップ）、2.5vw（タブレットと電話）
• ボタンのテキストの色：＃000000
• ボタンの境界線の幅：1px
• ボタンの境界線の色：＃000000
• ボタンの境界線半径：1px
• ボタンフォント：Sansを開く
• フォントの太さ：超太字

間隔

そして、いくつかのカスタムマージンとパディング値を使用してボタンの形状を作成します。

• トップマージン：5vw
• トップパディング：2vw
• ボトムパディング：2vw
• 左パディング：10vw
• 右パディング：10vw

セクション＃2に変換設定を追加します

セクション＃2にデフォルトの変換スケールを追加

ページに追加した2つのセクションの作成と変更が完了したので、変換オプションの適用を開始できます。 セクション2を開き、カスタム変換スケール値をいくつか追加します。

• 下：60％（デスクトップ）、90％（タブレットと電話）
• 右：60％（デスクトップ）、90％（タブレットと電話）

変換スケールをセクション＃2にホバーします

ホバー時にこれらの値を変更します。 小さい画面サイズの場合と同じ値を使用していることに注意してください。 これを行うと、ホバー効果がより大きな画面サイズでのみ発生するようになります。

• 下：90％
• 右：90％

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

次に、2番目のセクションのクローンを2回（または必要な回数まで）複製します。

セクション＃1のディバイダーモジュールに変換回転を追加

そして、最初のセクションに追加した仕切りを、変換回転値をいじって変換します。

• 左：90度

拡張セクションレイアウトを無料でダウンロード

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

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

無料でダウンロード

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

ダウンロード

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

プレビュー

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

デスクトップ

モバイル

最終的な考え

このチュートリアルでは、Diviの新しい変換オプションに付属する変換スケールオプションに焦点を当てました。 さらに、ホバー効果を理解し、ページにアクセスしたときの全体的なユーザーエクスペリエンスを向上させる、見事なデザインを再現しました。 チュートリアルの最後に、レイアウト全体を無料でダウンロードすることもできました。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！