Diviでヘッダー用のコンパクトな紹介文スライダーを作成する方法

公開: 2021-07-16

サイトに紹介文を追加することは、ビジネス（またはブランド）の信頼性を高め、訪問者との信頼を築くための効果的な方法です。 お客様の声スライダーは、お客様の声をすべて1か所に表示するための便利なツールです。 これを念頭に置いて、ヘッダーにコンパクトな紹介文スライダーを追加することは理にかなっています。そうすれば、これらの紹介文は、ユーザーがサイトにアクセスしたときに最初に目にするものの1つになります。

このチュートリアルでは、Webサイトのヘッダーに短い紹介文を表示するためのコンパクトな紹介文スライダーを作成する方法を紹介します。 これを行うために、Diviのスライダーモジュールを楽しくユニークな方法で変更します。

始めましょう！

スニークピーク

これは、Divi SliderModuleを使用して作成するコンパクトな紹介文スライダーです。

そして、これがグローバルヘッダーに追加された同じ紹介文スライダーです。

そして、これがモバイルでの様子です。

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

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

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

無料でダウンロード

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

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

レイアウトをDiviライブラリにインポートします

セクションレイアウトをDiviライブラリにインポートするには、Diviライブラリに移動します。

[インポート]ボタンをクリックします。

移植性ポップアップで、[インポート]タブを選択し、コンピューターからダウンロードファイルを選択します。 「divi-short-testimonial-slider-module-layout.json」という名前のJSONファイルになります。

次に、インポートボタンをクリックします。

diviコンパクトな紹介文スライダー

完了すると、セクションレイアウトがDiviBuilderで使用できるようになります。

ヘッダーテンプレートをDiviテーマビルダーにインポートします

ヘッダーにコンパクトな紹介文スライダーを追加してヘッダーテンプレートをインポートする場合は、Divi> ThemeBuilderに移動する必要があります。

次に、ページの右上にある移植性アイコンを使用して、JSONファイルをインポートします。 「divi-short-testimonial-slider-header-template.json」という名前のファイルになります。

diviコンパクトな紹介文スライダー

チュートリアルに取り掛かりましょう。

始めるために必要なもの

コーナータブの拡張

開始するには、次のことを行う必要があります。

  1. まだインストールしていない場合は、Diviテーマをインストールしてアクティブ化します。
  2. WordPressで新しいページを作成し、Divi Builderを使用してフロントエンド（ビジュアルビルダー）のページを編集します。
  3. 「最初から構築」オプションを選択します。

その後、Diviでデザインを開始するための空白のキャンバスが作成されます。

Diviでコンパクトな紹介文スライダーを作成する方法

新しい行とスライダーモジュールを追加する

まず、セクションに1列の行を追加します。

diviコンパクトな紹介文スライダー

次に、スライダーモジュールを行に追加します。

diviコンパクトな紹介文スライダー

スライドの編集

スライダーの設定で、[コンテンツ]タブの下にある2番目のデフォルトのスライドを削除し、クリックして残りのスライドの設定を編集します。

diviコンパクトな紹介文スライダー

スライドコンテンツ

スライド設定の[コンテンツ]タブで、以下を更新します。

  • タイトル：「Donecsollicitudin molstiemalesuada。 Vivamus suscipit tortoreget。」
  • ボタンテキスト：すべて読む
  • 本体：— Tatiana Gagelman

diviコンパクトな紹介文スライダー

完了したら、スライド設定を保存します。

スライダー設定の更新

スライドと非表示のコントロールを複製する

最初のスライドをコンテンツで更新した後、そのスライドを複製して1つ以上の追加のスライドを作成します。

次に、[要素]オプショングループで、以下を更新してスライダーコントロールを非表示にします。

  • コントロールの表示：いいえ

diviコンパクトな紹介文スライダー

すべてのスライドの背景を更新する

次に、すべてのスライドに使用される背景を追加します。 この背景には、背景のグラデーションと背景画像のスタイルが含まれます（作成者の背景画像を個々のスライドに追加する場合/追加する場合）。

背景を追加するには、以下を更新します。

  • 背景グラデーションの左の色：＃000000
  • 背景のグラデーションの正しい色：＃000000
  • 背景画像サイズ：フィット
  • 背景画像の位置：中央左
  • 背景画像のブレンド：明度

diviコンパクトな紹介文スライダー

ここでは背景画像を追加していないことに注意してください。 個々のスライドで使用される画像のサイズ、位置、およびブレンドモードのみを追加しています。 各スライドに同じスタイルを個別に追加するよりも、ここに追加する方が簡単です。 後で、個々のスライドに画像を追加する方法を説明します。

スライダーのデザイン設定

[デザイン]タブで、以下を更新します。

かぶせる
  • 背景オーバーレイを使用する：はい
  • 背景オーバーレイの色：rgba（0,0,0,0.7）

diviコンパクトな紹介文スライダー

タイトルテキスト
  • タイトル見出しレベル：H4
  • タイトルフォント：Josefin Sans
  • タイトルフォントの太さ：中
  • タイトルテキストの配置：左
  • タイトルテキストサイズ：16px（デスクトップとタブレット）、14px（電話）
  • タイトルラインの高さ：1.5em

diviコンパクトな紹介文スライダー

本文
  • ボディフォント：Josefin Sans
  • 本文の配置：左
  • 本文の色：#aaaaaa
  • 本文の文字間隔：0.05em

diviコンパクトな紹介文スライダー

ボタン
  • ボタンにカスタムスタイルを使用する：はい
  • ボタンのテキストサイズ：1em
  • ボタンのテキストの色：デフォルト（デスクトップ）、＃000（ホバー）
  • ボタンの背景色（デスクトップ）：rgba（255,255,255,0.19）
  • ボタンの背景色（ホバー）：＃ffffff
  • ボタンの境界線の幅：0px
  • ボタンの文字間隔：0.05em
  • ボタンフォント：Josefin Sans
  • ボタンマージン：0px上、0px下
  • ボタンのパディング：上0px、下0px、左0.6em、右0.6em

diviコンパクトな紹介文スライダー

パディングと自動アニメーション

次に、スライダーの間隔を更新してコンパクトにし、スライダーに必要な自動アニメーション速度を設定します。

  • マージン：0px上、0px下
  • パディング：上1em、下1em、左5％、右5％
  • 自動アニメーション：オン
  • 自動アニメーション速度：3500

diviコンパクトな紹介文スライダー

カスタムCSS

[詳細設定]タブで、次のカスタムCSSを追加して、各スライダー要素（タイトル、ボタン、および矢印）のスタイルを更新します。

スライドのタイトル

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

これにより、スライドタイトルが小さい画面で改行を作成しないようになります。

スライドボタン

position:absolute;
bottom: 1em;
right: 6%;

これにより、ボタンが絶対位置になり、タイトルの下とスライドの右側にうまく配置され、スライダーがさらにコンパクトになります。

スライド矢印

font-size: 30px;
margin-top: -15px;

これにより、スライダーのナビゲーション矢印が小さくなり、コンパクトなスライダーのサイズに収まります。

diviコンパクトな紹介文スライダー

ヒント：スライドの遷移をスムーズにするために、同じ背景色を列に追加します

現在、各スライドのアニメーションでは、スライドコンテンツとともに背景色がアニメーション化されています。背景にこのアニメーションが表示されないようにするために、列に同じ背景色を付けて、遷移をスムーズにすることができます。

これを行うには、スライダーの親列の設定を開き、次の背景色を追加します。

  • 背景色：＃000000

diviコンパクトな紹介文スライダー

スライドへの著者の背景画像の追加

スライドに作成者の背景画像を含める場合は、各スライドに背景画像を追加することでこれを行うことができます。

スライドに背景画像を追加すると、背景画像は、スライダー（スライドではない）設定で既に配置されているスタイルを継承します。

diviコンパクトな紹介文スライダー

結果

最終結果を確認してください。

コンパクトな紹介文スライダーをヘッダーテンプレートに追加する

モジュールをDiviライブラリに保存する

コンパクトな紹介文スライダーをグローバルヘッダーに追加する前に、まずモジュールをDiviライブラリに保存する必要があります。 これを行うには、スライダーモジュールにカーソルを合わせ、[ライブラリに保存]アイコンをクリックします。 次に、レイアウトに名前を付けて、[ライブラリに保存]ボタンをクリックします。

diviコンパクトな紹介文スライダー

コンパクトな紹介文モジュールのレイアウトをヘッダーテンプレートに追加する

カスタムヘッダーを編集する

新しい紹介文スライダーモジュールがライブラリに保存されたら、カスタムヘッダーに追加する準備が整います。

[Divi]> [Theme Builder]に移動し、クリックしてテンプレートのカスタムヘッダーを編集します。

diviコンパクトな紹介文スライダー

保存した紹介文スライダーモジュールのレイアウトをライブラリから挿入します

ヘッダーレイアウトエディターで、クリックして、表示する場所にコンパクトな紹介文スライダーモジュールを追加します。

[モジュールの挿入]モーダルで、[ライブラリから追加]タブを選択します。 以前にライブラリに保存したコンパクトな紹介文スライダーを見つけて選択します。

diviコンパクトな紹介文スライダー

ロードされたら、変更を保存します。

最終結果

そして、これがグローバルヘッダーに追加された同じ紹介文スライダーです。

そして、これは著者の背景画像のない同じ紹介文のスライダーです。

そして、これがモバイルでの様子です。

最終的な考え

コンパクトな紹介文スライダーは、ウェブサイトの最も目立つ場所でのサービスの信頼性を高めたいと考えているウェブサイトのヘッダーに新たに追加することができます。 また、これを使用して、訪問者を紹介文ページまたは販売ページの増加コンバージョンにリダイレクトすることもできます。 うまくいけば、それはあなたのために役立つでしょう。

コメントでお返事をお待ちしております。

乾杯！