クライアントのロゴをDiviでホバー/クリックしたお客様の声に置き換える方法
公開: 2020-01-20クライアントのロゴと一致する紹介文にインタラクションを追加する方法をお探しですか？ Diviのレスポンシブコンテンツ機能により、モジュールのデフォルト状態とホバー時にさまざまなコンテンツを表示することがこれまでになく簡単になりました。 今日のDiviチュートリアルでは、ホバー（デスクトップ）とクリック（タブレットと電話）でクライアントのロゴを紹介文に置き換える方法を示します。 宣伝文句モジュールを使用して、そこにたどり着きます。 レイアウトのJSONファイルも無料でダウンロードできます！
それを手に入れましょう。
プレビュー
チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。
デスクトップ
モバイル
クライアントロゴレイアウトを無料でダウンロード
無料のクライアントロゴレイアウトを手に入れるには、まず下のボタンを使用してダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
再作成を始めましょう！
新しいセクションを追加
背景色
新規または既存のページに新しいセクションを追加することから始めます。 セクション設定を開き、背景色を変更します。
- 背景色：＃000000
間隔
カスタムの上部と下部のパディングも追加します。
- トップパディング：200px
- ボトムパディング：200px
国境
白い枠線を追加してセクション設定を完了します。
- ボーダー幅：1vw
- ボーダーカラー：#ffffff
行＃1を追加
カラム構造
次の列構造を使用して、セクションに新しい行を追加して続行します。
サイジング
モジュールをまだ追加せずに、行の設定を開き、行の最大幅を増やします。
- 最大幅：1500px
列にテキストモジュールを追加
レスポンシブH2コンテンツを追加する
この行で必要な最初のモジュールは、レスポンシブH2コンテンツを含むテキストモジュールです。
- デスクトップ：クライアントのロゴにカーソルを合わせると、クライアントの発言内容が表示されます。
- タブレットと電話：クライアントのロゴをクリックして、彼らが何を言っているかを確認してください！
H2テキスト設定
モジュールの[デザイン]タブに移動し、H2テキスト設定を次のように変更します。
- 見出し2フォント：Work Sans
- 見出し2テキストの配置：中央
- 見出し2のテキストの色：#ffffff
- 見出し2テキストサイズ：40px（デスクトップ）、30px（タブレット）、25px（電話）
Dividerモジュールを列に追加
可視性
この行で必要な次の最後のモジュールは、Dividerモジュールです。 [仕切りを表示]オプションが有効になっていることを確認してください。
- 仕切りを表示：はい
ライン
次に、モジュールの線の色を変更します。
- 線の色：#ffffff
サイジング
モジュールのサイズ設定も変更します。
- 仕切りの重量：4px
- 幅：10％
- モジュールの配置：中央
間隔
上マージンを追加して、モジュールの設定を完了します。
- トップマージン：100px
行＃2を追加
カラム構造
前の行のすぐ下に別の行を追加し、次の列構造を使用します。
サイジング
行設定を開き、さまざまな画面サイズでサイズ設定を変更します。 列の高さも同じにするようにしてください。これは次のステップに役立ちます。 列の内容を中央に配置します。
- 列の高さを等しくする：はい
- 幅：100％（デスクトップ）、80％（タブレットと電話）
- 最大幅：1500px
- 最小の高さ：500px（デスクトップ）、自動（タブレットと電話）
主な要素
行の列コンテンツを中央に配置するには、1）[列の高さを均等化]オプションを有効にする必要があり（前の手順）、2）次のCSSコード行を行のメイン要素に追加します。
align-items: center;
宣伝文モジュールを列に追加
デフォルトのコンテンツを空のままにする
ここで、ホバー時にクライアントのロゴを置き換えるために、宣伝文句モジュールを使用します。 列1の最初のものから始めます。デフォルトのタイトルと本文のコンテンツは空のままにしておきますが、両方でホバーオプションを引き続き有効にします。
ホバーにコンテンツを追加
両方のホバーフィールドに、選択した内容をいくつか挿入します。
デフォルトの画像
画像とアイコンの設定で選択した会社のロゴをアップロードして続行します。
ホバーで画像を削除
ホバー状態のクライアントロゴを完全に削除することで、ホバー時にクライアントのロゴを置き換えます。
背景色にカーソルを合わせる
この投稿のプレビューでわかるように、ホバー時にモジュールの背景色も変更します。 デフォルトの背景色を使用せず、ホバー時に次のカラーコードを追加します。
- 背景色：＃191919
画像/アイコンの設定
モジュールの[デザイン]タブに移動し、次の画像/アイコンの配置が適用されることを確認します。
- 画像/アイコンの配置：中央
テキスト設定
黒のセクションの背景色を使用しているため、一般的なテキスト設定でモジュールのテキストの色を変更します。
- テキストの色：明るい
タイトルテキスト設定
次に、それに応じてタイトルテキストの設定を変更します。
- タイトル見出しレベル：H3
- タイトルフォント：Work Sans
- タイトルテキストサイズ：24px
- タイトルラインの高さ：1.4em
本文の設定
本文のテキスト設定にもいくつか変更を加えます。
- ボディフォント：Open Sans
- 本文の色：＃8c8c8c
- ボディラインの高さ：2.5em
デフォルトの間隔
次に、間隔設定に移動し、モジュールのデフォルト状態にカスタムパディングがないことを確認します。
- トップパディング：0px
- ボトムパディング：0px
- 左パディング：0px
- 右パディング：0px
ホバー間隔
ただし、ホバーすると、次の値を使用して、紹介文用の空白を作成します。
- トップパディング：20px
- ボトムパディング：50px
- 左パディング：50px
- 右パディング：50px
遷移
デフォルトの遷移期間を削除して、モジュールの設定を完了します。 これにより、ロゴにカーソルを合わせたりクリックしたりすると、すぐに紹介文が表示されます。
- 移行時間：0ms
宣伝文句モジュールを2回クローンし、残りの列に複製を配置します
列1の最初の宣伝文句モジュールを完了したら、モジュールを2回複製して、行の残りの列に複製を配置できます。
行全体のクローンを作成する
表示するクライアントロゴの数に応じて、この行を必要な回数だけ複製できるようになりました。
重複する各宣伝文モジュールのホバーコンテンツを変更する
重複する各宣伝文モジュールのクライアントロゴを必ず変更してください。
重複する各宣伝文モジュールのロゴを変更する
重複する各モジュールのホバーコンテンツも変更すれば完了です。
プレビュー
すべての手順を完了したので、さまざまな画面サイズでの結果を最終的に見てみましょう。
デスクトップ
モバイル
最終的な考え
この投稿では、Diviのレスポンシブオプション機能を使用して、ホバー/クリック時にクライアントのロゴを紹介文に置き換える方法を紹介しました。 これは、ページのスペースを節約し、さまざまな画面サイズでインタラクティブなデザインを作成するための優れた方法です。 チュートリアルを表示するだけでなく、この投稿の冒頭でJSONファイルを無料で共有しました！ ご不明な点がございましたら、下のコメント欄にコメントを残してください。
Diviの詳細を知り、Diviの景品をさらに入手したい場合は、メールマガジンとYouTubeチャンネルに登録して、この無料コンテンツを最初に知って利益を得ることができるようにしてください。