Diviを使用してお客様の声に固有のホバーオーバーラップを作成する方法
公開: 2018-11-14お客様の声は、多くのWebサイトにとって大きな問題です。 彼らは専門知識を示し、訪問者は通常、会社や人がどれほど信頼できるかを知りたい場合はそれらを探しに行きます。 そのため、ウェブサイトでお客様の声を視覚的に提示する方法を考えることが重要です。
Diviを使用すると、希望どおりに証言を表示できます。 あなたにインスピレーションを与えるために、ホバーオーバーラップを使用して証言を紹介するための見事でユニークな方法を作成する方法を紹介します。
それを手に入れよう！
プレビュー
チュートリアルに入る前に、最終結果を見てみましょう。
新しいセクションを追加
始めましょう！ 新しいページを追加するか、既存のページを開いて新しい通常のセクションを追加します。
新しい行1を追加
カラム構造
次の列構造を使用して、新しい行を追加して続行します。
サイジング
モジュールをまだ追加せずに、行設定を開き、サイズ設定を変更します。
- この行を全幅にする：はい
- カスタムガター幅を使用：はい
- 側溝幅：1
間隔
いくつかのカスタム間隔値も追加します。
- トップパディング：0px
- ボトムパディング：0px
- 列2の左パディング：2vw（デスクトップ）、3vw（タブレットと電話）
- 列2の右パディング：11vw（デスクトップ）、3vw（タブレットと電話）
列1に画像モジュールを追加
画像をアップロード
さまざまなモジュールの追加を開始する時が来ました！ 最初の列の画像モジュールから始めます。 選択したポートレート画像をアップロードします。
画像の配置
画像設定を開き、画像の配置を変更します。
- 画像の配置：左
サイジング
次に、サイズ設定を変更します。
- 幅：78％（デスクトップ）、70％（タブレットと電話）
- モジュールの配置：左
ホバーオーバーラップテキストモジュールを列1に追加
コンテンツを追加する
画像モジュールのすぐ下に、テキストモジュールを追加します。 コンテンツボックスにその人の詳細を入力します。
デフォルトの背景
背景色を追加して続行します。
- 背景色：rgba（255,255,255,0）
ホバーの背景
ホバー時に別の背景色を追加します。
- 背景色：＃0f1bff
デフォルトのテキスト設定
次に、テキスト設定を変更します。
- テキストの色：#ffffff
- テキストサイズ：0px
- テキスト行の高さ：0px
テキスト設定にカーソルを合わせる
ホバーのテキスト設定を調整します。
- テキストサイズ：19px
- テキスト行の高さ：2em
デフォルトの見出しテキスト設定
見出しのテキスト設定も変更する必要があります。
- 見出し3フォントの太さ：超太字
- 見出し3フォントスタイル：大文字
- 見出し3のテキストの色：#ffffff
- 見出し3テキストサイズ：0px
- 見出し3行の高さ：0em
見出しのテキスト設定にカーソルを合わせる
ホバー時に異なる値を追加します。
- 見出し3テキストサイズ：35px
- 見出し3行の高さ：1.1em
間隔
次に、間隔の設定に移動し、いくつかの値を追加します。
- 上マージン：-100px
- 左マージン：50px
- 右マージン：50px
- トップパディング：40px
- ボトムパディング：60px
テキストの向きを変更する
テキスト設定に戻り、テキストの向きを変更します。
- テキストの向き：中央
デフォルトのボックスシャドウ
次に、デフォルトのボックスシャドウをテキストモジュールに追加します。 このボックスシャドウは、全体的なデザインの一部になります。
- ボックスシャドウの水平位置：1000px
- ボックスシャドウの垂直位置：-400px
- ボックスシャドウブラー強度：0px
- ボックスシャドウスプレッド強度：250px
- 影の色：rgba（175,175,175,0.13）
ホバーボックスシャドウ
特別なホバーオーバーラップ効果を作成するには、ホバーボックスの影も追加します。
- ボックスシャドウの水平位置：-73px
- ボックスシャドウの垂直位置：-49px
- ボックスシャドウブラー強度：0px
- ボックスシャドウスプレッド強度：10px
- 影の色：rgba（255,182,12,0.53）
トランジション
スムーズな移行を作成するには、[詳細設定]タブで移行期間を変更します。
- 移行時間：1000ms
列2に紹介文モジュールを追加します
コンテンツを追加する
2番目の列で、最初に必要なのはタイトルのテキストモジュールです。 先に進み、紹介文の要約を追加します。
見出しテキストの設定
次に、見出しのテキスト設定を変更します。
- 見出し3フォント：Goudy Bookletter 1911
- 見出し3テキストの配置：左
- 見出し3テキストサイズ：3.5vw（デスクトップ）、40px（タブレット）、30px（電話）
- 見出し3行の高さ：1.1em
間隔
いくつかのカスタム間隔値を追加して続行します。
- 上マージン：7vw（デスクトップ）、100px（タブレット）、50px（電話）
説明テキストモジュールを列2に追加
コンテンツを追加する
タイトルのテキストモジュールのすぐ下に、紹介文全体を含む別のテキストモジュールを追加します。
テキスト設定
お客様の声を追加したら、先に進んでテキスト設定を変更します。
- テキスト行の高さ：2.2em
- テキストの向き：左
間隔
カスタムの上部マージンも追加します。
- 上マージン：4vw（デスクトップ）、50px（タブレットと電話）
新しい行を追加
カラム構造
最初の行が完成したので、次の列構造を使用して2番目の行を追加しましょう。
サイジング
行設定を開き、サイズ設定を変更します。
- この行を全幅にする：はい
- カスタムガター幅を使用：はい
- 側溝幅：1
間隔
次に、いくつかのカスタム間隔値を追加します。
- トップマージン：100px
- トップパディング：0px
- ボトムパディング：0px
- 列1の左パディング：11vw（デスクトップ）、3vw（タブレットと電話）
- 列1の右パディング：2vw（デスクトップ）、3vw（タブレットと電話）
前の行のテキストモジュールのクローンを作成し、列1に配置します
前の行に戻り、列2の両方のモジュールのクローンを作成します。クローンを作成したら、複製を新しい行の最初の列に配置します。
テキストの向きを変更する
両方のモジュールのテキストの向きを変更します。
- テキストの向き：右
列2に画像モジュールを追加します
画像をアップロード
次に、画像モジュールを2番目の列に追加し、新しいポートレート画像をアップロードします。
画像の配置
モジュールの画像配置を変更します。
- 画像の配置：右
サイジング
サイズ設定を変更して続行します。
- 幅：78％（デスクトップ）、70％（タブレットと電話）
- モジュールの配置：右
間隔
いくつかのカスタム間隔値も追加します。
- 上マージン：50px（タブレットと電話）
ホバーオーバーラップテキストモジュールを列2に追加します
コンテンツを追加する
この設計を完了するために必要な最後のモジュールは、画像モジュールの下にあるテキストモジュールです。 コンテンツボックスにその人の詳細を追加します。
デフォルトの背景
次に、モジュールに背景画像を追加します。
- 背景色：rgba（255,255,255,0）
ホバーの背景
ホバー時に背景色を変更します。
- 背景色：＃690cff
デフォルトのテキスト設定
次にテキスト設定を変更します。
- テキストの色：#ffffff
- テキストサイズ：0px
- テキスト行の高さ：0px
- テキストの向き：中央
テキスト設定にカーソルを合わせる
ホバー時にいくつかの調整を行います。
- テキストサイズ：19px
- テキスト行の高さ：2em
デフォルトの見出しテキスト設定
見出しのテキスト設定も変更します。
- 見出し3フォントの太さ：超太字
- 見出し3のテキストの色：#ffffff
- 見出し3テキストサイズ：0px
- 見出し3行の高さ：0em
見出しのテキスト設定にカーソルを合わせる
ホバーにいくつかの小さな調整を加えます。
- 見出し3テキストサイズ：35px
- 見出し3行の高さ：1.1em
間隔
間隔の設定に移動して続行し、いくつかのカスタム値を追加します。
- 上マージン：-80px
- 左マージン：50px
- 右マージン：50px
- トップパディング：40px
- ボトムパディング：60px
デフォルトのボックスシャドウ
デフォルトのボックスシャドウをテキストモジュールに追加します。
- ボックスシャドウの水平位置：-1000px
- ボックスシャドウの垂直位置：-420px
- ボックスシャドウブラー強度：0px
- ボックスシャドウスプレッド強度：250px
- 影の色：rgba（175,175,175,0.13）
ホバーボックスシャドウ
そして、ホバー時にボックスの影を変更します。
- ボックスシャドウの水平位置：-73px
- ボックスシャドウの垂直位置：-49px
- ボックスシャドウブラー強度：0px
- ボックスシャドウスプレッド強度：10px
- 影の色：rgba（12,255,238,0.53）
トランジション
最後になりましたが、移行期間を変更してスムーズな移行を作成します。
- 移行時間：1000ms
プレビュー
すべての手順を完了したので、最終結果を最後に見てみましょう。
最終的な考え
この投稿が、ホバーオーバーラップを使用して見事な紹介文セクションを作成するきっかけになったと思います。 彼らは本当にあなたがコーディングや物事を理解するのに多くの時間を費やす必要なしにあなたのウェブサイトに別の次元を追加するのを助けます。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！