Diviの紹介文モジュールをスタイリングできる5つの素晴らしい方法
公開: 2019-01-02訪問者が常にウェブサイトで探しに行く1つのことは、推薦状です。 それらは信頼性を表し、あなたのウェブサイトを訪問するときにリードまたは潜在的なクライアントが持つ意思決定プロセスに影響を与えます。 共有する強力な紹介文があることを確認するだけでなく、視覚的に魅力的なものにすることも重要な役割を果たします。 この投稿では、組み込みのオプションのみを使用して、Divi証言モジュールのスタイルを設定できる5つの素晴らしい方法を紹介します。
それを手に入れよう！
プレビュー
チュートリアルに入る前に、さまざまな画面サイズでの最終結果を見てみましょう。
デスクトップ
モバイル
例1を再作成する
私たちのYoutubeチャンネルを購読する
新しいセクションを追加
最初の例から始めましょう！ 新しいページを作成し、通常のセクションを追加します。
新しい行を追加
カラム構造
次の列構造を使用して、新しい行を追加して続行します。
サイジング
モジュールをまだ追加せずに、行設定を開き、サイズ設定にいくつかの変更を加えます。
- この行を全幅にする：はい
- カスタムガター幅を使用：はい
- 側溝幅：1
列1に画像モジュールを追加
画像をアップロード
モジュールの追加を開始する時が来ました！ 必要な最初のモジュールは、列1の画像モジュールです。先に進んで、選択した正方形の画像をアップロードします。
フィルタ
次に、フィルター設定に移動し、さまざまな効果を試してみてください。
- 飽和度：40％
- コントラスト：126％
ボタンモジュールを列1に追加
コピーを追加
列1に必要な2番目で最後のモジュールはボタンモジュールです。 選択したコピーを追加します。
ボタンの設定
次に、ボタンの設定に移動して、ボタンの外観にいくつかの変更を加えます。
- ボタンにカスタムスタイルを使用する：はい
- ボタンのテキストサイズ：14px
- 色1：＃5400ff
- 色2：＃00fff6
- グラデーション方向：100度
- ボタンの境界線の幅：0px
- フォントの太さ：超太字
- フォントスタイル：大文字
間隔
いくつかのカスタム間隔値も追加します。
- トップパディング：10px
- ボトムパディング：10px
- 左パディング：30px
- 右パディング：30px
ボックスシャドウ
そして、微妙なボックスシャドウで終了します。
- ボックスシャドウブラー強度：80px
- 影の色：rgba（0,0,0,0.3）
列2に紹介文モジュールを追加します
コンテンツを追加する
2番目の列では、必要なモジュールはお客様の声モジュールのみです。 さまざまなフィールドとコンテンツボックスにコンテンツを追加します。
背景色
次に、わずかに透明な背景色を追加します。
- 背景色：rgba（255,255,255,0.96）
見積もりアイコンの設定
引用アイコンの設定も変更します。
- 引用アイコンの色：＃0c0c0c
- 引用アイコンの背景色：rgba（245,245,245,0）
本文の設定
次に、本文の設定を変更します。
- ボディフォント：Verdana
- ボディラインの高さ：1.7em
間隔
間隔設定に異なるカスタムマージンとパディング値を追加して続行します。
- トップマージン：15vw（デスクトップとタブレット）、0vw（電話）
- 下マージン：50px（タブレットと電話）
- 左マージン：-10vw（デスクトップとタブレット）、0vw（電話）
- 右マージン：5vw
- トップパディング：70px
- ボトムパディング：70px
- 左パディング：50px
- 右パディング：50px
国境
左の境界線も追加します。
- 左ボーダー幅：7px
- 左ボーダーカラー：＃5400ff
ボックスシャドウ
最後に、微妙なボックスシャドウを追加して、紹介文モジュールを形成します。
- ボックスシャドウブラー強度：80px
- ボックスシャドウスプレッド強度：-10px
- 影の色：rgba（0,0,0,0.49）
両方のモジュールのクローンを作成し、列3と4に複製を配置します
列1と2のモジュールの変更が完了したら、モジュールのクローンを作成し、残りの2つの列に複製を配置できます。
画像を変更する
2回目の紹介文の画像を変更することを忘れないでください。
ボタンのグラデーションの背景を変更する
ボタンのグラデーションの背景も変更します。
- 色1：＃ff001d
- カラー2：＃3700ff
- グラデーション方向：100度
紹介文の境界線の色を変更する
そして、境界線の色を新しいボタンのグラデーションの背景に一致させます。
- 左ボーダーの色：＃ff001d
例2を再作成する
新しいセクションを追加
2番目の例に移ります！ ページに新しい通常のセクションを追加します。
新しい行を追加
カラム構造
セクションに変更を加えずに、次の列構造を使用して新しい行を追加します。
サイジング
行設定を開き、サイズ設定にいくつかの変更を加えて続行します。
- この行を全幅にする：はい
- カスタムガター幅を使用：はい
- 側溝幅：1
間隔
次に、いくつかのカスタムパディング値を行と列に追加します。
- 左パディング：200px（デスクトップ）、30px（タブレット）、25px（電話）
- 右パディング：200px（デスクトップ）、30px（タブレット）、25px（電話）
- 列1の左パディング：5px（デスクトップ）、0px（タブレットと電話）
- 列1の右パディング：2.5px（デスクトップ）、0px（タブレットと電話）
- 列2の左パディング：2.5px（デスクトップ）、0px（タブレットと電話）
- 列2の右パディング：2.5px（デスクトップ）、0px（タブレットと電話）
- 列3の左パディング：2.5px（デスクトップ）、0px（タブレットと電話）
- 列3の右パディング：5px（デスクトップ）、0px（タブレットと電話）
列1にビデオモジュールを追加します
ビデオリンク
列1で必要になる最初のモジュールは、ビデオモジュールです。 このビデオをあなたの推薦状のビデオにリンクしてください。
画像オーバーレイ
画像オーバーレイも追加します。
列1に紹介文モジュールを追加する
コンテンツを追加する
列1に必要な2番目で最後のモジュールはお客様の声モジュールです。 紹介文の詳細を追加することから始めます。
見積もりアイコンを無効にする
次に、要素設定で引用アイコンを無効にします。
- 見積もりアイコンを表示：いいえ
背景色
次に白い背景を追加します。
- 背景色：#ffffff
本文の設定
本文の設定も変更してください。
- 本文の色：＃000000
- 本文の文字間隔：-0.5px
- ボディラインの高さ：1.7em
間隔
そして、間隔設定にいくつかのカスタムマージンとパディング値を追加します。
- 下マージン：30px（タブレットと電話）
- トップパディング：50px
- ボトムパディング：50px
- 左パディング：80px
- 右パディング：80px
国境
また、モジュールの左下と右下の丸い角に「30px」を付けています。
ボックスシャドウ
そして最後に、ある程度の深さを作成するために、お客様の声モジュールに微妙なボックスシャドウを与えています。
- ボックスシャドウブラー強度：80px
- ボックスシャドウスプレッド強度：-10px
- 影の色：rgba（0,0,0,0.3）
モジュールを3回クローンし、残りの列に複製を配置します
列1の両方のモジュールの変更が完了したら、それらを2回複製し、残りの2つの列に複製を配置します。
ビデオリンク、コンテンツ、画像オーバーレイを変更する
新しい証言のビデオリンク、コンテンツ、画像オーバーレイを変更することを忘れないでください。
例3を再作成する
新しいセクションを追加
3番目の例に移ります！ ページに新しい通常のセクションを追加します。
新しい行を追加
カラム構造
次の列構造を使用して、新しい行を追加して続行します。
列1の背景色
次に、背景設定に移動し、最初の列に背景色を追加します。
- 列1の背景色：＃f9f9f9
列2の背景色
2番目の列には白い背景色が必要です。
- 列2の背景色：#ffffff
サイジング
次に、サイズ設定に移動し、ガター幅を削除します。
- カスタムガター幅を使用：はい
- 側溝幅：1
間隔
次に、いくつかのカスタム間隔値を追加します。
- トップパディング：0px
- ボトムパディング：0px
- 左パディング：0px
- 右パディング：0px
- 列1の上部パディング：100px
- 列1の下部パディング：100px
- 列1の左パディング：50px
- 列1の右パディング：50px
- 列2の上部パディング：100px
- 列2の下部パディング：100px
- 列2の左パディング：50px
- 列2の右パディング：50px
国境
そして、それぞれの境界線に「20px」を付けます。
ボックスシャドウ
最後になりましたが、行にボックスシャドウを付けます。
- ボックスシャドウブラー強度：80px
列1に紹介文モジュールを追加する
コンテンツを追加する
モジュールの追加を開始する時が来ました！ 1列目に必要な最初のモジュールはお客様の声モジュールです。 コンテンツを追加します。
画像をアップロード
画像設定で画像をアップロードして続行します。
見積もりアイコンを無効にする
次に、引用アイコンを無効にします。
- 見積もりアイコンを表示：いいえ
背景色を無効にする
背景色も無効にします。
- 背景色を使用する：いいえ
本文の設定
続行して[デザイン]タブに移動し、本文の設定を変更します。
- ボディフォント：Abril Fatface
- 本文の色：＃000000
- 本文サイズ：20px
列1にテキストモジュールを追加
コンテンツを追加する
列1に必要な2番目のモジュールは、テキストモジュールです。 コンテンツボックスに紹介文のコピーを追加します。
間隔
次に、[デザイン]タブに移動し、カスタムの上下の余白を追加します。
- トップマージン：50px
- 下マージン：50px
列1に画像モジュールを追加
会社のロゴをアップロードする
1列目に必要な3番目で最後のモジュールは画像モジュールです。 このモジュールを使用して、紹介文に関連する会社のロゴを追加できます。
すべてのモジュールのクローンを作成し、列2に複製を配置します
列1のすべてのモジュールの変更が完了したら、先に進んでそれらのクローンを作成できます。 完了したら、複製を2番目の列に配置します。
お客様の声の画像を変更してコピーする
画像と一緒に紹介文の内容を変更してください。
例4を再作成する
新しいセクションを追加
4番目の例に移りましょう！ ページに新しいセクションを追加します。
新しい行を追加
カラム構造
次の列構造を使用して、セクションに新しい行を追加して続行します。
列1の背景画像
行設定を開き、最初の列に背景画像を追加します。
- 列1の背景画像の繰り返し：繰り返しなし
列3の背景画像
3番目の列についても同じようにします。
- 列3背景画像の繰り返し：繰り返しなし
サイジング
次に、サイズ設定に移動して、いくつかの変更を加えます。
- この行を全幅にする：はい
- カスタムガター幅を使用：はい
- 側溝幅：1
- 列の高さを等しくする：はい
間隔
次に、デフォルトの上下のパディングを削除します。
- トップパディング：0px
- ボトムパディング：0px
列1に紹介文モジュールを追加する
コンテンツを追加する
最初の列に紹介文モジュールを追加して続行します。 行ったら、紹介文の詳細を追加します。
グラデーションの背景
モジュールにグラデーションの背景も与えます。
- 色1：＃8b32ff
- 色2：＃ff35ae
- グラデーション方向：120度
見積もりアイコンの設定
次に、アイコン設定にいくつかの変更を加えます。
- 引用アイコンの色：＃000000
- 引用アイコンの背景色：#ffffff
テキスト設定
また、テキスト設定でテキストの色を変更します。
- テキストの色：明るい
間隔
モジュールに正方形の形状を与えるために、間隔設定にカスタムパディングを追加します。
- トップパディング：100px
- ボトムパディング：100px
- 左パディング：100px
- 右パディング：100px
ボックスシャドウ
また、微妙なボックスシャドウを使用して、紹介文に深みを加えることもできます。
- ボックスシャドウブラー強度：80px
- ボックスシャドウスプレッド強度：-10px
- 影の色：＃ff35ae
デフォルトのフィルター
この紹介文の背後にある考え方は、一度ホバーすると、紹介文が消えて画像が表示されるというものです。 この効果を実現するために、フィルター設定で不透明度フィルターを使用します。 デフォルトの不透明度が「100％」であることを確認してください。
- 不透明度：100％
ホバーフィルター
そして、ホバー時にすべての不透明度を削除します。
- 不透明度：0％
紹介文モジュールを列3に複製する
列1の紹介文モジュールの変更が完了したら、それを複製し、複製を3番目の列に配置します。
グラデーションの背景を変更する
次に、複製のグラデーションの背景を変更します。
- 色1：＃32b0ff
- カラー2：＃89009e
- グラデーション方向：120度
クローン行
そして、行全体のクローンを作成します。
お客様の声のグラデーションの背景を削除し、背景色を変更します
次に行う必要があるのは、紹介文モジュールのグラデーションの背景を削除し、代わりに白い背景色を使用することです。
- 背景色：#ffffff
お客様の声のテキスト設定を変更する
グラデーションの背景を削除したら、テキスト設定でテキストの色を変更できます。
- テキストの色：暗い
例5を再作成する
新しいセクションを追加
このチュートリアルの次の最後の例に移りましょう！ ページに新しい通常のセクションを追加します。
背景色
セクションの背景色を変更します。
- 背景色：#ededed
新しい行を追加
カラム構造
次に、次の列構造を使用して新しい行を追加します。
サイジング
サイズ設定にもいくつか変更を加えます。
- この行を全幅にする：はい
- カスタムガター幅を使用：はい
- 側溝幅：2
列1にテキストモジュールを追加
コンテンツを追加する
最初の列にテキストモジュールを追加して続行します。 コンテンツボックスに紹介文のコピーを追加します。
背景色
そして、モジュールの背景色を変更します。
- 背景色：#ffffff
テキスト設定
次に、[デザイン]タブに移動し、テキスト設定でテキストの向きを変更します。
- テキストの向き：中央
間隔
いくつかのカスタムマージン値も追加します。
- 左マージン：50px（デスクトップとタブレット）、20px（電話）
- 右マージン：50px（デスクトップとタブレット）、20px（電話）
列1に紹介文モジュールを追加する
コンテンツを追加する
テキストモジュールのすぐ下に、お客様の声モジュールを追加できます。 著者名、役職、会社名のフィールドに入力します。
画像をアップロード
画像設定にも画像をアップロードします。
グラデーションの背景
そして、グラデーションの背景を追加します。
- 色1：＃5b32ff
- 色2：＃32e5f2
- グラデーション方向：100度
見積もりアイコンの設定
[デザイン]タブに移動し、見積もりアイコンの設定を変更して続行します。
- 引用アイコンの色：＃000000
- 引用アイコンの背景色：#ffffff
テキスト設定
テキスト設定でもテキストの向きを変更します。
- テキストの向き：中央
- テキストの色：明るい
本文の設定
次に、本文の設定をいじってみてください。
- ボディフォントの太さ：超太字
- ボディフォントスタイル：大文字
- 本文サイズ：15px
- 本文の文字間隔：-0.5px
- ボディラインの高さ：2.1em
間隔
このモジュールとテキストモジュールの間にオーバーラップを作成するには、負の上部マージンを追加します。
- トップマージン：-25px
ボックスシャドウ
そして、お客様の声モジュールに微妙なボックスシャドウを付けて、お客様の声のデザインを完成させます。
- ボックスシャドウブラー強度：80px
- 影の色：rgba（0,0,0,0.3）
両方のモジュールのクローンを2回作成し、残りの列に複製を配置します
列1のモジュールの変更が完了したら、モジュールを2回クローンして、残りの2つの列に複製を配置できます。
お客様の声の内容と画像を変更する
モジュールで使用されているコンテンツと画像を必ず変更してください。
お客様の声のグラデーションの背景を変更する
グラデーションの背景と一緒に。
- 色1：＃a632ff
- 色2：＃f7a131
- 色1：＃3281ff
- 色2：＃2cf483
プレビュー
すべての手順を完了したので、さまざまな画面サイズでの最終結果を最終的に見てみましょう。
デスクトップ
モバイル
最終的な考え
この投稿では、Diviの紹介文モジュールのスタイルを設定する5つの素晴らしい方法を紹介しました。 チュートリアルを段階的にガイドし、基本的に作業中のすべてのWebサイトで使用できる証言を作成しました。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。