ホバー時に複数のオプションを表示する「はじめに」CTAを作成する

多くの企業は、ホームページに「はじめに」のCTAを掲載します。 これは通常、ページ上での主要な行動の呼びかけです。これは、ユーザーをある種の意図されたプロセスに導くためです。 別のページにリンクする単純な「今すぐ開始」ボタンの場合もあります。 または、「はじめに」の手順や、会社が意図するプロセスを開始するためにユーザーが実行できるさまざまなオプションを含むページのセクションである可能性があります。

このチュートリアルでは、ホバー時に複数の「はじめに」オプションを表示する「はじめに」CTAを作成する方法を紹介します。 Diviを使用して、大きなボタンとして表示されるセクションを設計します。 次に、ボタンにカーソルを合わせると、垂直スライダーが次のスライドを表示するようにオプションが表示されます。

デザインはエレガントで、機能性は多くの点で役立つ可能性があります。

始めましょう。

スニークピーク

これは、このチュートリアルで作成する「GetStarted」CTAの概要です。

「GetStarted」CTADiviレイアウトを無料でダウンロード

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

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

無料でダウンロード

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

ダウンロード

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

レイアウトをページにインポートするには、zipファイルを抽出し、jsonファイルをDiviBuilderにドラッグするだけです。

チュートリアルに行きましょう。

始めるために必要なもの

開始するには、次のものが必要です。

1. Diviテーマがインストールされ、アクティブになっています
2. フロントエンドでゼロから構築するために作成された新しいページ（ビジュアルビルダー）
3. モックコンテンツに使用する画像

その後、Diviでデザインを開始するための空白のキャンバスが作成されます。

Diviでの「GetStartedHere」CTAデザインの実装

この設計の背後にある基本的な考え方は、セクションにカーソルを合わせたときにセクションのコンテンツを上に移動することです。 これを行うには、セクションの高さが固定され、オーバーフローが非表示になっていることを確認する必要があります。 これにより、ホバー状態の前にCTAオプションが非表示になります。 次に、マージンを使用してモジュールを配置し、上部のパディングを使用して、ホバー時にコンテンツをビューに移動できます。

セクションから始めましょう。

セクションの作成

開始するには、1列の行を持つ通常のセクションを作成します。 次に、モジュールを追加する前に、セクション設定を更新しましょう。

セクション設定を開き、以下を更新します。

背景色：＃2b87da
幅：90％
最大幅：1100px
セクションの配置：中央
マージン：6vw上部、6vw下部（呼吸するための少しのスペースを与えるため）
パディング（デスクトップ）：上300px、下0px
パディング（タブレット）：上0px、下15％

次に、いくつかの丸い角を追加します。 これにより、セクションに最大の高さを指定するたびに、ボタンのようなデザインが作成されます。

丸みを帯びた角：140px（デスクトップ）、20px（ホバー）、10px（タブレット）

次に、ボックスシャドウを付けます（スクリーンショットを参照）。

この時点では、最終的なデザインに必要なすべての設定を追加するわけではありません。 戻って、固定の高さとホバー効果を与える必要があります。 しかし、とりあえずコンテンツを追加しましょう。

コンテンツの最初の行を作成する

作成した1列の行の設定を開き、以下を更新します。

幅：100％
パディング：上0px、下0px、左5％、右5％

1列の行の中に、テキストモジュールを追加します。

次に、次のh2見出しを本文のコンテンツに追加します。

<h2>Get Started Here...</h2>

次のように設計設定を更新します。

見出し2フォント：Nunito
見出し2フォントの太さ：太字
見出し2のテキストの色：#ffffff
見出し2テキストサイズ：78px（デスクトップとタブレット）、46px（電話）
最大幅：500px
高さ：300px（デスクトップ）、自動（タブレットと電話）
マージン：-300pxトップ（デスクトップ）、0pxトップ（タブレットと電話）
パディング：7％トップ

300pxの高さと-300pxの上部マージンにより、テキストモジュールがセクションの300pxの上部パディングを埋めるようになります。 後でホバーで上部のセクションのパディングを削除すると、テキストモジュールはセクションの上に上にスクロールします。

コンテンツの2行目を作成する

コンテンツの2行目は、CTAオプションを追加する場所です。 先に進み、3列のレイアウトで新しい行を追加します。

次に、次のように行設定を更新します。

幅：100％
最大幅：100％
パディング：0px上、0px下

次に、列1に宣伝文モジュールを追加します。

次に、宣伝文の設定を次のように更新します。

デフォルトの本文テキストを取り出し、タイトルを残します。

次に、画像アイコン（90 X 90）を追加します。 または、必要に応じて通常のDiviアイコンを使用できます。

背景を追加し、タイトルテキストのデザインを更新します。

背景色：#ffffff
タイトルフォント：Nunito
タイトルフォントの太さ：超太字
タイトルフォントスタイル：TT
タイトルテキストの配置：中央
タイトルテキストの色：＃2b87da
タイトルテキストサイズ：14px

宣伝文を円形にする前に、まず宣伝文に同じ高さと幅を与える必要があります。 次に、間隔を使用して、宣伝文と宣伝文の内容を中央に揃えます。

コンテンツの幅：200px（デスクトップ）、250px（タブレット）
幅：250px（デスクトップ）、300px（タブレット）
モジュールの配置：中央
高さ：250px（デスクトップ）、300px（タブレット）
マージン：上25px、下0px
パディング：50pxトップ（デスクトップ）、75pxトップ（タブレットと電話）

円のデザインを完成させるには、宣伝文句に丸い角とボックスシャドウを付けます。

丸みを帯びた角：50％
ボックスシャドウ：スクリーンショットを参照

それは私たちの最初の宣伝文句の世話をします。 次の2つを作成します。 宣伝文をコピーして、2列目と3列目に貼り付けます。次に、それぞれの画像アイコンを更新します。 次のようになります。

セクションへの最後の仕上げ

「はじめに」のCTA設計を完了するには、セクションをもう少し更新する必要があります。 次のセクション設定を更新します。

高さ：300px（デスクトップ）、自動（タブレットと電話）
水平オーバーフロー：非表示
垂直オーバーフロー：非表示

これにより、セクションは行1および行2のコンテンツと同じ高さに保たれます。オーバーフローを非表示にすると、ホバー時に表示されるまで、行2のコンテンツが非表示になります。

行2のコンテンツを表示するには、ホバー時にセクションの上部のパディングを削除する必要があります。

パディング（ホバー）：0px上

これまでの結果を確認してください。 コンテンツが上にスクロールして、3つのCTAオプションを示す行2のコンテンツが表示されます。

セクションをボタンのように見せるために、変換オプションを使用してセクションを縮小し、ホバーすると通常のサイズに戻すことができます。 セクションの次の変換オプションを更新します。

変換スケール（デスクトップ）：70％
変換スケール（ホバー）：100％
変換スケール（タブレット）：100％

次に、背景画像グラフィック（500 X 500）を追加して、セクションの適切なサイズにします。

背景画像：画像を挿入
背景画像サイズ：実際のサイズ
背景画像の位置：中央右（デスクトップ）、右上（タブレット）、左上（電話）

リンクURLを宣伝文に追加し、ホバーでスケーリングする

私たちの宣伝文は実際には円のボタンとして機能しているので、各宣伝文にモジュールリンクURLを追加する必要があります。 もちろん、ニーズに合わせて独自に追加する必要があります。

宣伝文はビジュアルビルダーで非表示になっているため、ワイヤーフレームビューモードを切り替えて、各宣伝文の設定をモジュールリンクURLで更新します。

次に、ワイヤーフレームビューモードを維持し、複数選択を使用して3つの宣伝文をすべて選択します。 そして、宣伝文の1つの設定を開いて、3つすべての要素設定を更新します。 次に、変換オプションを次のように更新します。

変換スケール（ホバー）：105％

それでおしまい！

最終結果

「GetStarted」CTAの最終的なデザインを確認しましょう。

そして、これがタブレットと電話のデザインです。

最終的な考え

「GetStarted」CTAは、今日のWebでは一般的です。 うまくいけば、このチュートリアルはあなたがそれを次のレベルに持っていくのを助けるでしょう。 そして、この機能を使用する他のいくつかの方法を考えることを恐れないでください。 考えてみてください。 セクションに好きなコンテンツを追加できます！

以下のコメントであなたの考えを自由に共有してください。

あなたからの便りを楽しみにしています。

乾杯！