Diviを使用してカスタムの紹介文タブを作成する方法（無料ダウンロード！）

公開: 2020-11-04

多くの企業にとって、お客様の声は新しいクライアントを獲得するための重要な議論の1つです。 それはあなたのウェブサイト上の証言に少し特別な注意を払うことは決して無駄にならないことを意味します。 Divi内では、たとえばDiviの紹介文モジュールを使用して、紹介文を共有するさまざまな方法があります。 しかし、よりインタラクティブなアプローチを探しているなら、このチュートリアルを気に入るはずです。 Divi内にカスタムの紹介文タブを作成する方法を紹介します。 誰かが左側の宣伝文句モジュールにカーソルを合わせると、対応する紹介文が右側に表示されます。 このデザインのトランジション効果もシームレスであるため、Webサイトに特別なカスタマイズ感を与えることができます。 JSONファイルも無料でダウンロードできます！

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

プレビュー

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

デスクトップ

お客様の声のタブ

モバイル

お客様の声のタブ

カスタムの紹介文タブのレイアウトを無料でダウンロード

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

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

無料でダウンロード

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

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

再作成を始めましょう！

新しいセクションを追加

背景色

作業中のページに新しいセクションを追加することから始めます。 セクション設定を開き、背景色を追加します。

  • 背景色：#ffefdb

お客様の声のタブ

間隔

セクションの[デザイン]タブに移動し、カスタムの余白とパディングの値を追加します。

  • トップマージン：5％
  • 下マージン：5％
  • 左マージン：5％
  • 右マージン：5％
  • 左パディング：5％
  • 右パディング：5％

お客様の声のタブ

国境

いくつかの丸い角も含めます。

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

お客様の声のタブ

行＃1を追加

カラム構造

次の列構造を使用して、セクションに最初の行を追加して続行します。

お客様の声のタブ

間隔

モジュールをまだ追加せずに、行設定を開き、下マージンを追加します。

  • 下マージン：3％

お客様の声のタブ

列にテキストモジュールを追加

H2コンテンツを追加する

モジュールを追加するときは、H2コンテンツを含むテキストモジュールから始めます。

お客様の声のタブ

H2テキスト設定

モジュールの[デザイン]タブに移動し、それに応じてH2テキスト設定を変更します。

  • 見出し2フォント：Montserrat
  • 見出し2フォントの太さ：半太字
  • 見出し2テキストサイズ：31px
  • 見出し2文字の間隔：-1px

お客様の声のタブ

Dividerモジュールを列に追加

可視性

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

  • 仕切りを表示：はい

お客様の声のタブ

ライン

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

  • 線の色：#ffffff

お客様の声のタブ

サイジング

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

  • 仕切りの重量：10px
  • 幅：14％
  • 高さ：10px

お客様の声のタブ

国境

そして、境界線の設定にいくつかの丸い角を追加して、モジュール設定を完了します。

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

お客様の声のタブ

行＃2を追加

カラム構造

次の行に進みます。 次の列構造を使用します。

お客様の声のタブ

サイジング

モジュールをまだ追加せずに、行設定を開き、サイズ設定で列の高さを等しくします。

  • 列の高さを等しくする：はい

お客様の声のタブ

列2の設定

背景色

次に、列2の設定を開き、背景色を適用します。

  • 背景色：＃fffbf9

お客様の声のタブ

お客様の声のタブ

間隔

列の[デザイン]タブに移動し、小さい画面サイズに上下のパディングを適用します。

  • トップパディング：
    • デスクトップ：なし
    • タブレットと電話：300px
  • ボトムパディング
    • デスクトップ：なし
    • タブレットと電話：300px

お客様の声のタブ

国境

いくつかの丸い角も含めます。

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

お客様の声のタブ

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

コンテンツを追加する

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

お客様の声のタブ

1：1の比率の画像をアップロードする

次に、1：1の比率で画像をアップロードします。

お客様の声のタブ

背景色

次に、次の背景色を適用します。

  • 背景色：＃d5d6ea

お客様の声のタブ

画像設定

画像設定も変更してください。

  • 画像/アイコンの配置：左
  • 画像の丸みを帯びた角：100px

お客様の声のタブ

タイトルテキスト設定

次に、それに応じてタイトルテキストの設定を変更します。

  • タイトルフォント：Montserrat
  • タイトルフォントの太さ：半太字
  • タイトル文字の間隔：-1px

お客様の声のタブ

本文の設定

本文の設定も変更します。

  • ボディフォント：ラト
  • 本文サイズ：13px

お客様の声のタブ

間隔

次に、次のパディング値を適用して、モジュールのコンテンツの周囲にスペースを追加します。

  • トップパディング：5％
  • ボトムパディング：5％
  • 左パディング：5％
  • 右パディング：5％

お客様の声のタブ

国境

いくつかの丸い角も追加します。

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

お客様の声のタブ

アニメーション

デフォルトでは、宣伝文句モジュールの画像に適用されるアニメーション効果があります。 アニメーション設定でこのアニメーションを削除します。

  • 画像/アイコンアニメーション：アニメーションなし

お客様の声のタブ

CSS ID

お客様の声のタブデザインを作成するには、このチュートリアルの最後にコードを追加する必要があります。 その準備として、CSSIDをBlurbModuleの[詳細設定]タブに追加します。

  • CSS ID：お客様の声-person-1

お客様の声のタブ

画像とタイトルのCSSをぼかす

[詳細設定]タブでも2行のCSSコードを使用しています。 1つは宣伝文の画像用で、もう1つは宣伝文のタイトル用です。 

width: 25% !important;
margin-top: 25px;

お客様の声のタブ

宣伝文句モジュールを3回クローンする

最初の宣伝文句モジュールを完了したら、それを3回複製できます。

お客様の声のタブ

コンテンツと画像を変更する

重複する各宣伝文モジュールのコンテンツと画像を必ず変更してください。

お客様の声のタブ

背景色を変更する

背景色と一緒に。

  • 重複1：＃fffed6
  • 複製2：＃d7ecd9
  • 複製3：＃f5d5cb

お客様の声のタブ

CSSIDを変更する

そしてもちろん、CSSID。 連続番号を使用します。

  • 重複1：お客様の声-person-2
  • 重複2：お客様の声-person-3
  • 重複3：お客様の声-人-4

お客様の声のタブ

引用テキストモジュールを列2に追加

コンテンツボックスに見積もりを追加

2番目の列に進みます。 そこで必要な最初のモジュールは、引用符付きのテキストモジュールです。

お客様の声のタブ

テキスト設定

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

  • テキストフォント：プレイフェアディスプレイ
  • テキストの色：#ffefdb
  • テキストサイズ：200px
  • テキスト行の高さ：1em

お客様の声のタブ

ポジション

モジュールも再配置します。

  • 位置：絶対
  • 場所：左上
  • 水平オフセット：5％

お客様の声のタブ

列2に紹介文モジュールを追加します

お客様の声のコンテンツを追加する

次のテキストモジュールに進みます。 これは私たちの最初の証言に捧げられます。 コンテンツボックスに配置する紹介文は、列1の最初の宣伝文句と一致する必要があります。

お客様の声のタブ

テキスト設定

それに応じてモジュールのテキスト設定を変更します。

  • テキストフォント：Lato
  • テキストの色：＃000000
  • テキストサイズ：20px
  • テキスト行の高さ：2.1em
  • テキストの配置：中央

お客様の声のタブ

サイジング

幅も「100％」に設定してください。

  • 幅：100％

お客様の声のタブ

間隔

次に、間隔設定にカスタムマージンとパディング値を追加します。

  • トップマージン：30％
  • 左パディング：10％
  • 右パディング：10％

お客様の声のタブ

CSS ID

そして、CSSIDを[詳細設定]タブに追加します。 このCSSIDの末尾の番号は、対応する宣伝文モジュールのCSSIDの末尾の番号と一致する必要があります。

  • CSS ID：お客様の声-コピー-1

お客様の声のタブ

テキストモジュールを3回複製する

最初の紹介文テキストモジュールを完了したら、3回クローンを作成できます。

お客様の声のタブ

お客様の声の内容を変更する

重複するモジュールの紹介文の内容を必ず変更してください。

お客様の声のタブ

CSSIDを変更する

CSSIDとともに。 必ず連続した注文に従ってください。

  • 複製1：お客様の声-コピー-2
  • 複製2：お客様の声-コピー-3
  • 複製3：紹介文-コピー-4

お客様の声のタブ

最初の紹介文テキストモジュールにCSSクラスを追加する

そして、最初に有効にしたい紹介文にCSSクラスを追加する必要があります。 この場合、それが最初のものです。

  • CSSクラス：show-testimonial

お客様の声のタブ

除算器モジュールの下にコードモジュールを追加します（行＃1）

すべての要素が整ったので、魔法を起こしてみましょう。 セクションの最初の行のディバイダーモジュールのすぐ下に新しいコードモジュールを追加します。

お客様の声のタブ

CSSコードを追加する

下の印刷画面に表示されているように、スタイルタグの間に次のCSSコード行を挿入します。 

.show-testimonial {
visibility: visible !important;
opacity: 1 !important;
top: 0 !important;
}

.testimonial-active {
transform: translateX(-10%);
}

[id*="testimonial-person"]{
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;

cursor: context-menu;
}

[id*="testimonial-copy"] {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;

position: absolute!important;
top: -100px;
bottom: auto;
left: 0;
right: auto;

visibility: hidden;
opacity: 0;
}

お客様の声のタブ

JQueryコードを追加する

次に、下の印刷画面に表示されているように、スクリプトタグの間に次のJQueryコード行を配置します。これで完了です。 

jQuery(function($){
$(document).ready(function(){

$('#testimonial-person-1').addClass('testimonial-active');

$('[id*="testimonial-person"]').hover(function() {

var $selector = $(this).attr('id').replace('person', 'copy');
var $testimonial = $('#' + $selector);

$('[id*="testimonial-copy"]').removeClass('show-testimonial');
$testimonial.addClass('show-testimonial');

$('[id*="testimonial-person"]').removeClass('testimonial-active');
$(this).addClass('testimonial-active');

});

});
});

お客様の声のタブ

プレビュー

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

デスクトップ

お客様の声のタブ

モバイル

お客様の声のタブ

最終的な考え

この投稿では、構築するあらゆる種類のWebサイトのインタラクティブな紹介文のデザインを作成する方法を紹介しました。 具体的には、左側の宣伝文句モジュールの1つを誰かがホバーするとトリガーされるカスタムの紹介文タブを作成する方法を示しました。 JSONファイルを無料でダウンロードすることもできました！ ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。

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