Diviを使用してゴージャスなCTAセクションでスティッキーボタンを強調する方法
公開: 2020-09-18Diviスティッキーオプション機能がリリースされたとき、私たちのブログのリリース投稿には、この新機能の多様性を示すライブデモが付属していました。 スティッキーオプションをよりよく理解し、それらをデザインで使い始めるのに役立つように、このチュートリアルでは、ライブデモデザインの1つを再作成する方法を示します。 私たちが再現しているデザインは、粘着性のあるボタンを強調することに重点を置いています。 これはテキストベースのCTAセクションであり、行動を促すフレーズを美しい方法で強調することができます。 JSONファイルも無料でダウンロードできます！
それを手に入れましょう。
プレビュー
チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。
デスクトップ
モバイル
CTAセクションレイアウトを無料でダウンロード
無料のCTAセクションのレイアウトを利用するには、まず下のボタンを使用してダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
1.要素構造を構築する
新しいセクションを追加
背景色
作業中のページに新しいセクションを追加することから始めます。 これは新しいページでも既存のページでもかまいませんが、すでにコンテンツが含まれているページに追加することをお勧めします。これにより、効果が実際に発揮されるのを実際に確認するのに十分なスクロールスペースがあります。 セクション設定を開き、選択した背景色を適用します。
- 背景色：＃00965a
サイジング
セクションの[デザイン]タブに移動し、最大の高さを適用します。 この最大の高さは、セクションの高さが制限されていることを確認するのに役立ちます。
- 最大高さ：100vh
オーバーフロー
後でチュートリアルにいくつかのスクロール効果を適用するので、セクションコンテナを超えるものがないことを確認するために、セクションのオーバーフローを非表示にする必要もあります。
- 水平オーバーフロー：非表示
- 垂直オーバーフロー：非表示
新しい行を追加
カラム構造
セクションの設定が完了したら、次の列構造を使用して新しい行を追加します。
サイジング
モジュールをまだ追加せずに、行設定を開き、いくつかのカスタムサイズ設定を適用します。 これらのサイズ設定により、行コンテナが行の幅全体を占めるようになり、デザインにフルスクリーン効果が与えられます。
- 幅：100％
- 最大幅：なし
列2の設定
間隔
次に列2の設定を開き、さまざまな画面サイズにカスタムパディング値を適用します。
- ボトムパディング：60px
- 左パディング：
- タブレットと電話：5％
- 右パディング：
- デスクトップ：10vw
- タブレットと電話：5％
列1にテキストモジュールを追加
コンテンツを追加する
1列目のテキストモジュールから始めて、モジュールを追加します。選択したコンテンツをいくつか追加します。 この投稿のプレビューとまったく同じデザインを作成するには、チュートリアルの後半の列2に配置するCTAを強化するのに役立ついくつかの関連する単語を挿入します。 また、各単語をそれぞれの行の中に配置するようにしてください。
テキスト設定
モジュールの[デザイン]タブに移動し、テキスト設定を変更します。 テキストサイズの単位としてビューポートの幅を使用していることに気付くでしょう。 ビューポート幅の単位を使用すると、すべての画面サイズでテキストの応答性を維持するのに役立ちます。
- テキストフォント：Work Sans
- テキストフォントの太さ：太字
- テキストの色：＃000000
- テキストサイズ：10vw
- テキスト行の高さ：0.2em
列2にテキストモジュールを追加します
コンテンツを追加する
2番目の列に進みます。 そこで、選択した行動のコピーを含むテキストモジュールを追加します。
テキスト設定
モジュールの[デザイン]タブに移動し、それに応じてテキスト設定を変更します。
- テキストフォント：Work Sans
- テキストの色：#ffffff
- テキストサイズ：56px
- テキスト行の高さ：1.2em
サイジング
テキストモジュールにも最大幅を割り当てます。
- 最大幅：400px
ボタンモジュールを列2に追加
コピーを追加
デザインに必要な次の最後のモジュールは、2列目のボタンモジュールです。選択したコピーをいくつか追加します。
ボタンの設定
モジュールの[デザイン]タブに移動し、それに応じてボタンのスタイルを設定します。
- ボタンにカスタムスタイルを使用する：はい
- ボタンのテキストサイズ：16px
- ボタンのテキストの色：＃000000
- ボタンの背景色：
- デフォルト：#ffffff
- ホバー：rgba（255,255,255,0.7）
- ボタンの境界線の幅：5px
- ボタンの境界線の色：rgba（0,0,0,0）
- ボタンの境界線半径：5px
- ボタンフォント：Work Sans
- ボタンアイコンを表示：いいえ
2.スクロール＆スティッキーエフェクトを適用します
列1のテキストモジュールに垂直モーションを追加します
デザインの基礎ができたので、スクロール効果とスティッキー効果を適用します。 列1のテキストモジュールを開き、応答性の高い垂直方向の動きを適用します。
- 垂直モーションを有効にする：はい
- 開始オフセット：
- デスクトップ：10
- タブレットと電話：0
- ミッドオフセット：0
- 終了オフセット：
- デスクトップ：-10
- タブレットと電話：0
- モーションエフェクトトリガー：要素の上部
列2にスティッキー効果を追加
次に、列2の設定を開き、デスクトップにスティッキー効果を適用します。 小さい画面サイズの列とモジュールは隣り合うのではなく、互いに下に配置されるため、小さい画面サイズではスティッキー設定を「固定しない」に戻します。
- スティッキーポジション：
- デスクトップ：トップに固執
- タブレットと電話：固執しないでください
- スティッキートップオフセット：80px
- スティッキーボトムリミット：セクション
- 周囲の粘着要素からのオフセット：はい
- トランジションのデフォルトスタイルとスティッキースタイル：はい
列2のボタンにスティッキースタイリングを追加
柱2が粘着性になっているので、柱自体と柱内のモジュールに粘着性のあるスタイルを適用できるようになります。 ただし、ここで行う唯一の厄介な変更は、ボタンに焦点を合わせています。 モジュールを開き、ボタン設定に移動して、テキストとボタンの色を反転させます。 それでおしまい！ レイアウトを保存してビジュアルビルダーを終了すると、美しいデザインをWebサイトでライブで見ることができます。
- ボタンのテキストの色：#ffffff
- ボタンの背景色：＃000000
プレビュー
すべての手順を完了したので、さまざまな画面サイズでの結果を最終的に見てみましょう。
デスクトップ
モバイル
最終的な考え
この投稿では、スティッキーオプション機能の更新投稿内でデモとして使用されたデザインの1つを再作成する方法を示しました。 このデザインは、スティッキー状態が有効になったらスタイルを変更することにより、スティッキーボタンを強調表示することに重点を置いています。 JSONファイルも無料でダウンロードできました！ ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。
Diviの詳細を知り、Diviの景品をさらに入手したい場合は、メールマガジンとYouTubeチャンネルに登録して、この無料コンテンツを最初に知って利益を得ることができるようにしてください。