Diviを使用してホバーアニメーションのコーナーボタンの矢印をデザインに追加する方法

デザインしたページ内でCTAを提示する方法は、訪問者の行動に大きな影響を与える可能性があります。 真ん中にコピーがあるボタン形式を使用することで、最も頻繁に使用される方法でそれを実行できますが、それを使用して創造性を発揮することもできます。 今日のチュートリアルでは、Diviデザインに召喚状を含めるための創造的な方法を紹介します。 正確には、ホバーアニメーションのコーナーボタンの矢印を含めます。 矢印にカーソルを合わせると、スタイルに沿って矢印の方向が変わります。 このデザインのJSONファイルも無料でダウンロードできます！

それを手に入れましょう。

プレビュー

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

デスクトップ

モバイル

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

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

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

無料でダウンロード

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

ダウンロード

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

再作成を始めましょう！

新しい専門セクションを追加

作業中のページに新しい専門セクションを追加します。 次の列構造を選択します。

グラデーションの背景

セクション設定を開き、次のグラデーションの背景を適用します。

• 色1：＃fff8f5
• 色2：＃f9f3ef
• グラデーションタイプ：ラジアル
• 半径方向：左下
• 開始位置：40％
• 終了位置：40％

サイジング

セクションの[デザイン]タブに移動し、次のようにサイズ設定を変更します。

• 列の高さを等しくする：はい
• カスタムガター幅を使用：はい
• 側溝幅：1
• 内幅：90％
• 内側の最大幅：1580px

間隔

次に、間隔の設定に移動し、列1に右のパディングを追加します。

• 列1の右パディング：6％

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

H2コンテンツを追加する

1列目のテキストモジュールから始めて、モジュールを追加します。選択したH2コンテンツをいくつか追加します。

H2テキスト設定

モジュールのH2テキスト設定を次のようにスタイル設定します。

• 見出し2フォント：Kumbh Sans
• 見出し2フォントの太さ：太字
• 見出し2のテキストの色：＃08665c
• 見出し2テキストサイズ：
  • デスクトップ：75px
  • タブレット：60px
  • 電話番号：45px

間隔

次に、上下の余白を追加します。

• トップマージン：50px
• 下マージン：50px

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

説明コンテンツを追加

前のテキストモジュールの下に、選択した説明コンテンツを含む別のテキストモジュールを追加します。

テキスト設定

モジュールのテキスト設定を次のように変更します。

• テキストフォント：Kumbh Sans
• テキストの色：＃08665c
• テキストサイズ：16px
• テキスト行の高さ：1.8em

間隔

小さい画面サイズでも下マージンを追加します。

• 下マージン：
  • デスクトップ：/
  • タブレットと電話：50px

行＃1を列2に追加します

カラム構造

セクションの2番目の列に移動します。 そこで、次の列構造を使用して最初の行を追加します

サイジング

モジュールをまだ追加せずに、行設定を開き、次のようにサイズ設定を変更します。

• カスタムガター幅を使用：はい
• 側溝幅：2

間隔

次に、デフォルトの上下のパディングをすべて削除します。

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

列1の設定

背景色

次に、列1の設定を開き、選択した背景色を適用します。

• 背景色：#cccccc

間隔

列の間隔設定に移動し、次のレスポンシブ値を使用します。

• トップパディング：
  • デスクトップ：100px
  • タブレットと電話：70px
• 左パディング：
  • デスクトップとタブレット：8％
  • 電話番号：10％
• 右パディング：
  • デスクトップとタブレット：8％
  • 電話番号：10％

国境

境界線の設定にもいくつかの丸い角を追加します。

• すべてのコーナー：10px

可視性

[詳細設定]タブにオーバーフローを表示するように設定して、列の設定を完了します。

• 水平方向のオーバーフロー：目に見える
• 垂直オーバーフロー：目に見える

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

コンテンツを追加する

1列目の最初のテキストモジュールから始めて、モジュールを追加します。選択したコンテンツをいくつか追加します。

テキスト設定

モジュールのテキスト設定を変更します。

• テキストフォント：Kumbh Sans
• テキストフォントの太さ：軽い
• テキストの色：＃08665c
• テキストサイズ：30px
• テキスト行の高さ：1em

間隔

下マージンも適用します。

• 下マージン：15px

Dividerモジュールを列1に追加します

可視性

次に、ディバイダーモジュールを追加します。 「ディバイダーを表示」オプションが有効になっていることを確認します。

• 仕切りを表示：はい

ライン

モジュールのデザインタブに移動し、線の色を変更します。

• 線の色：＃fff8f5

サイジング

サイズ設定も変更します。

• 仕切りの重量：2px
• 高さ：2px

間隔

下マージンも追加します。

• 下マージン：50px

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

H3コンテンツを追加する

列1に別のテキストモジュールを追加します。選択したH3コンテンツを使用します。

H3テキスト設定

モジュールの[デザイン]タブに移動し、H3テキスト設定を次のように変更します。

• 見出し3フォント：Kumbh Sans
• 見出し3フォントの太さ：太字
• 見出し3のテキストの色：＃08665c
• 見出し3テキストサイズ：
  • デスクトップ：48px
  • タブレット：38px
  • 電話番号：32px

間隔

下マージンも使用します。

• 下マージン：15px

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

コンテンツを追加する

最後のテキストモジュールを列1に追加し、選択した説明コンテンツをいくつか追加します。

テキスト設定

それに応じてテキスト設定を変更します。

• テキストフォント：Kumbh Sans
• テキストの色：＃08665c
• テキストサイズ：16px
• テキスト行の高さ：1.8em

間隔

下マージンも含めます。

• 下マージン：
  • デスクトップ：200px
  • タブレットと電話：150px

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

コンテンツボックスを空のままにします

この列で必要な最後のモジュールである宣伝文句について説明します。 コンテンツボックスは空のままにします。

デフォルトのアイコン

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

ホバーアイコン

ホバーのアイコンを変更します。

リンクを追加

このモジュールのリンクも使用してください。

背景色にカーソルを合わせる

次に、ホバーの背景色を追加します。

• ホバーの背景色：＃08665c

デフォルトのアイコン設定

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

• アイコンの色：#ffffff
• 画像/アイコンの配置：上
• 画像/アイコンの配置：右
• アイコンのフォントサイズを使用：はい
• アイコンフォントサイズ：80px

ホバーアイコンの設定

ホバー時にアイコンのフォントサイズを変更します。

• ホバーアイコンのフォントサイズ：40px

サイジング

次に、サイズ設定に幅を追加します。

• 幅：80px

ホバー間隔

ホバー時に上下のパディングを変更します。

• ホバートップパディング：25px
• 右ホバーパディング：10px

国境

境界線の設定にもいくつかの丸い角を含めます。

• すべてのコーナー：5px

ホバースケール

次に、ホバーでスケール変換オプションを使用します。

• 両方にホバー：130％

主な要素と宣伝文の画像CSS

次に、[詳細設定]タブに移動し、メイン要素に次のCSSコード行を使用します。

cursor: pointer;

宣伝文の画像のCSSボックスに次の行を使用します。

margin-bottom: 0px;

ポジション

位置設定でモジュールを再配置して、モジュール設定を完了します。

• 位置：絶対
• 場所：右下

列1を再利用する

列2を削除します

最初の列を完了したら、それを2番目の列に再利用できます。 これを行うには、最初に2番目の列を削除します。

クローン列1

次に、最初のクローンを作成します。

列2の背景色を変更する

もちろん、背景色から始めて、重複する列にいくつかの変更を加える必要があります。

• 列2の背景色：＃f0c7b1

変換変換を列2に追加

小さい画面サイズでも変換変換値を追加しています。

• 右：
  • デスクトップ：/
  • タブレットと電話：50px

重複するコンテンツを変更する

重複するコンテンツはすべて変更してください。

宣伝文モジュールリンクの変更

宣伝文モジュール内のリンクを変更して、重複する列を完成させます。

行を再利用する

最初の行とその列が完成したら、行全体のクローンを作成できます。

列2を削除します

行設定内の2番目の列を削除します。

列の背景色を変更する

次に、残りの列の背景色を変更します。

• 列の背景色：＃dfe7f2

行にトップマージンを追加

一般的な行設定に戻り、レスポンシブトップマージンを追加します。

• トップマージン：
  • デスクトップ：50px
  • タブレットと電話：100px

重複するコンテンツを変更する

次に、列内の重複するすべてのコンテンツを変更します。

宣伝文モジュールリンクの変更

宣伝文モジュール内のリンクを変更して、チュートリアルを完了します。 それでおしまい！

プレビュー

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

デスクトップ

モバイル

最終的な考え

この投稿では、CTAを使ってクリエイティブになる方法を紹介しました。 具体的には、ホバーアニメーションのコーナーボタン矢印を追加する方法を示しました。 このアプローチは、複数のCTAを含むセクションを設計するときに、すっきりとしたルックアンドフィールを維持するのに役立ちます。 それはまた、相互作用のレベルを追加します。 JSONファイルを無料でダウンロードすることができました。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！

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