Diviを使用してホバーで3ステップの宣伝文句を作成する方法
公開: 2019-07-15そこにある多くの会社のウェブサイトは、ある時点で彼らのアプローチのプレビューを共有しています。 アプローチセクションを作成するときは、従来の方法で処理することも、インタラクションを追加することもできます。 2番目のオプションを実現する方法を探しているなら、この投稿を気に入るはずです。
このチュートリアルでは、Diviの新しいサイズ設定オプションを使用して3段階の宣伝文句を作成する方法を示します。 タイトルを表示することから始め、ステップにつながる3つの矢印を表示し、アニメーション化された宣伝文を表示して効果を完成させます。 JSONファイルも無料でダウンロードできます！
それを手に入れましょう。
プレビュー
チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。
デスクトップ
モバイル
3ステップの宣伝文句の公開レイアウトを無料でダウンロード
3段階の宣伝文句の表示レイアウトに手を置くには、まず下のボタンを使用してダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
再作成を始めましょう！
私たちのYoutubeチャンネルを購読する
新しいセクションを追加
デフォルトのグラデーションの背景
最初に行う必要があるのは、作業中のページに新しいセクションを追加することです。 セクション設定を開き、次のグラデーションの背景を追加します。
- 色1：＃ffa3ad
- 色2：＃ffcea3
- グラデーション方向：122度
ホバーグラデーションの背景
ホバー時にグラデーションの背景を変更します。
- 色1：＃000000
- 色2：#ffffff
- グラデーションタイプ：ラジアル
- 半径方向：上
- 開始位置：36％
- 終了位置：26％
間隔
[デザイン]タブに移動し、次にカスタムの上部と下部のパディングを追加します。
- トップパディング：1vw
- ボトムパディング：1vw
オーバーフロー
この投稿の後半で、セクションの高さを試してみます。 セクションコンテナを超えるものがないことを確認するために、可視性設定でオーバーフローを非表示にします。
- 水平オーバーフロー：非表示
- 垂直オーバーフロー：非表示
行＃1を追加
カラム構造
セクションの設定が完了したら、次の列構造を使用してセクションに最初の行を追加することで続行できます。
行にテキストモジュールを追加
H2コンテンツを追加する
行の列に新しいテキストモジュールを追加し、選択したH2コンテンツを入力します。
H2テキスト設定
[デザイン]タブに移動し、それに応じてH2テキスト設定を変更します。
- 見出し2フォント：Montserrat
- 見出し2フォントの太さ：半太字
- 見出し2テキストの配置：中央
- 見出し2のテキストの色：#ffffff
- 見出し2テキストサイズ：2vw（デスクトップ）、5vw（タブレット）、6vw（電話）
- 見出し2文字の間隔：-2px
行＃2を追加
カラム構造
次の列構造を使用して2番目の行を追加して続行します。
間隔
モジュールをまだ追加せずに、行設定を開き、さまざまな画面サイズにカスタムの上部と下部のパディングを追加します。
- トップパディング：2vw（デスクトップ）、4vw（タブレット）、5vw（電話）
- 下部のパディング：2vw（デスクトップ）、4vw（タブレット）、5vw（電話）
画面
小さい画面サイズですべての列が隣り合って表示されるようにするために、CSSコードの1行を行のメイン要素に追加します。
display: flex;
列1に矢印テキストモジュールを追加
シンボルを追加
この行を使用して、アニメーション化された矢印を追加します。 行の最初の列に新しいテキストモジュールを追加し、コンテンツボックスに「↓」記号を追加します。
テキスト設定
デザインタブに移動し、テキスト設定を変更します。
- テキストの配置：右
- テキストの色：＃ffa3ad
- テキストサイズ：4vw（デスクトップ）、6vw（タブレット）、8vw（電話）
間隔
次に、いくつかのカスタムマージン値を間隔設定に追加します。
- トップマージン：-3vw
- 下マージン：8vw
変換回転
変換設定でモジュールを回転させます。
- 左：45度
アニメーション
そして、次の設定を使用してカスタムアニメーションを追加します。
- アニメーションスタイル：スライド
- アニメーションの方向性：中央
- アニメーションの遅延：1000ms
矢印テキストモジュールを列2に追加
シンボルを追加
2番目の列に新しい行を追加して続行し、コンテンツボックスに「↓」記号を追加します。
テキスト設定
[デザイン]タブに移動し、それに応じてテキスト設定を変更します。
- テキストの配置：中央
- テキストの色：＃ffa3ad
- テキストサイズ：4vw（デスクトップ）、6vw（タブレット）、8vw（電話）
間隔
次に、カスタムの上部マージンを追加します。
- トップマージン：1vw
アニメーション
そして、次のアニメーション設定を適用します。
- アニメーションスタイル：スライド
- アニメーションの方向性：中央
列3に矢印テキストモジュールを追加
シンボルを追加
列3の最後の矢印テキストモジュールに移動します。コンテンツボックスに「↓」矢印を追加します。
テキスト設定
[デザイン]タブに移動し、それに応じてテキスト設定を変更します。
- テキストの配置：左
- テキストの色：＃ffa3ad
- テキストサイズ：4vw（デスクトップ）、6vw（タブレット）、8vw（電話）
間隔
次に、負の上部マージンを追加します。
- トップマージン：-3vw
変換回転
変換設定でモジュールを回転させます。
- 左：315度
アニメーション
そして、次のアニメーションを追加して、モジュールの設定を完了します。
- アニメーションスタイル：スライド
- アニメーションの方向性：中央
- アニメーションの遅延：1000ms
行＃3を追加
カラム構造
2番目の行が完了したら、次の列構造を使用して新しい行を追加することで続行できます。
サイジング
モジュールをまだ追加せずに、行設定を開き、サイズ設定で幅と最大幅の値を変更します。
- 幅：100％
- 最大幅：100％
間隔
次に、さまざまな画面サイズにカスタムパディング値を追加します。
- トップパディング：2vw（デスクトップ）、8vw（タブレット）、6vw（電話）
- 下部のパディング：2vw（デスクトップ）、8vw（タブレット）、6vw（電話）
- 左パディング：10vw（デスクトップ）、0vw（タブレットと電話）
- 右パディング：10vw（デスクトップ）、0vw（タブレットと電話）
画面
行のメイン要素にCSSコードを1行追加して、小さい画面サイズですべての列が隣り合って表示されるようにします。
display: flex;
オーバーフロー
このチュートリアルの最後の部分では、行の高さを変更します。 そのための準備として、可視性設定でオーバーフローを非表示にして、行コンテナを超えるものがないことを確認する必要があります。
- 水平オーバーフロー：非表示
- 垂直オーバーフロー：非表示
数値テキストモジュールを列1に追加
コンテンツを追加する
モジュールの追加を開始する時が来ました！ 最初の列に新しいテキストモジュールを追加し、番号を入力します。
グラデーションの背景
次の設定を使用して、モジュールにグラデーションの背景を追加します。
- 色1：＃ffa3ad
- 色2：＃ffcea3
- グラデーション方向：122度
テキスト設定
[デザイン]タブに移動し、それに応じてテキスト設定を変更します。
- テキストフォント：Montserrat
- テキストフォントの太さ：超太字
- テキストの配置：中央
- テキストの色：#ffffff
- テキストサイズ：2vw（デスクトップ）、4vw（タブレット）、8vw（電話）
- テキスト行の高さ：1em
間隔
さまざまな画面サイズに上下のパディングも追加します。
- トップパディング：1vw（デスクトップ）、2vw（タブレット）、3vw（電話）
- 下部のパディング：1vw（デスクトップ）、2vw（タブレット）、3vw（電話）
国境
そして、境界線設定の各コーナーに「20px」を追加して、モジュールの設定を完了します。
クローン番号テキストモジュールを2回作成し、残りの列に重複を配置します
列1のテキストモジュールのクローンを2回作成し、行の残りの2つの列に複製を配置します。
番号の変更
重複するそれぞれの番号を必ず変更してください。
列1に宣伝文モジュールを追加する
コンテンツを追加する
最初の列に必要な2番目のモジュールは宣伝文句です。 お好みのコンテンツを入力してください。
アイコンを選択
アイコンを選択して続行します。
背景色
そして、背景色を白に変更します。
- 背景色：#ffffff
アイコン設定
[デザイン]タブに移動し、それに応じてアイコン設定を変更します。
- アイコンの色：＃ffcea3
- アイコンの配置：上
- アイコンのフォントサイズを使用：はい
- アイコンのフォントサイズ：4vw（デスクトップ）、5vw（タブレット）、6vw（電話）
タイトルテキスト設定
タイトルテキストの設定も変更します。
- タイトルフォント：Montserrat
- タイトルフォントの太さ：太字
- タイトルテキストの配置：中央
- タイトルテキストの色：＃000000
- タイトルテキストサイズ：1vw（デスクトップ）、2vw（タブレット）、4vw（電話）
本文の設定
本文の設定とともに。
- 本文の配置：中央
- 本文のサイズ：0.6vw（デスクトップ）、1.3vw（タブレット）、2vw（電話）
- ボディラインの高さ：2.5em
間隔
また、さまざまな画面サイズに次のカスタムパディング値を追加することで、モジュールに目的の形状を与えています。
- トップパディング：3vw（デスクトップ）、5vw（タブレット）、7vw（電話）
- 下部のパディング：3vw（デスクトップ）、5vw（タブレット）、7vw（電話）
- 左パディング：1vw
- 右パディング：1vw
国境
次に、境界線設定の各コーナーに「20px」を追加します。
ボックスシャドウ
そして、微妙なボックスシャドウを追加して、少し奥行きを作ります。
- 影の色：rgba（0,0,0,0.07）
アニメーション
最後になりましたが、モジュールにアニメーションを追加します。
- アニメーションスタイル：スライド
- アニメーションの方向性：中央
- アニメーションの遅延：1000ms
宣伝文句モジュールを2回クローンし、残りの列に複製を配置します
列1の宣伝文句モジュールを完了したら、それを3回複製して、行の残りの2つの列に複製を配置できます。
両方の複製の内容を変更する
重複するそれぞれのコンテンツを必ず変更してください。
行＃3のサイズ設定を変更する
デフォルトの高さ
ここで、ホバー効果を機能させるために、最後の行の設定を開いて、サイズ設定に移動します。 そこで、さまざまな画面サイズで高さを変更します。
- 高さ：6vw（デスクトップ）、18vw（タブレット）、24vw（電話）
ホバーの高さ
ホバーすると高さが通常に戻ります。
- 高さ：自動
セクションのサイズ設定を変更する
デフォルトの高さ
次にセクション設定を開き、それに応じて高さを変更します。
- 高さ：7vw（デスクトップ）、15vw（タブレット）、20vw（電話）
ホバーの高さ
ホバー時に高さを戻すと完了です。
- 高さ：自動
プレビュー
すべての手順を完了したので、さまざまな画面サイズでの結果を最終的に見てみましょう。
デスクトップ
モバイル
最終的な考え
この投稿では、Diviの新しいサイズ設定オプションを使用して3段階の宣伝文句を作成する方法を紹介しました。 この例の結果は応答性が高く、ページにインタラクションを追加することができます。 このチュートリアルが、独自の代替3ステップデザインを作成するきっかけになることを願っています。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！
Diviの詳細を知り、Diviの景品をさらに入手したい場合は、メールマガジンとYouTubeチャンネルに登録して、この無料コンテンツを最初に知って利益を得ることができるようにしてください。