Diviでページテンプレートのアニメーションプロモーションバーを作成する方法

公開: 2019-11-23

Diviでページテンプレートのアニメーションプロモーションバーを作成することは、プラグインに依存することなく、スタイリッシュに製品や取引を宣伝するための優れた方法です。 Diviの強力なデザイン機能を使用すると、Diviのテーマビルダーでテンプレートを編集するときに、プロモーションバーを視覚的に作成できます。テンプレートの準備が整うと、そのテンプレートに割り当てられているすべてのページにプロモーションバーがポップアップ表示されます。簡単！

飛び込んで始めましょう！

スニークピーク

これは、このチュートリアルで作成するプロモーションバーの概要です。

また、プロモーションバーを固定（またはスティッキー）にする方法も示します。

プロモーションバーページテンプレートを無料でダウンロード

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

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

無料でダウンロード

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

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

レイアウトをページにインポートするには、zipファイルを抽出し、テーマビルダーの移植性オプションを使用してjsonファイルの1つをDiviテーマビルダーに追加するだけです。

チュートリアルに行きましょう。

私たちのYoutubeチャンネルを購読する

始めるために必要なもの

開始するには、Diviテーマをインストールしてアクティブ化する必要があります。最新バージョンのDiviを使用していることを確認してください。

また、結果を表示するためにプロモーションバーテンプレートをそのページに割り当てるために、テスト目的でDiviBuilderで作成された少なくとも1つのページが必要になります。

その後、あなたは行く準備ができています。

ページテンプレートの上部にアニメーションプロモーションバーを作成する

新しいテンプレートの作成

WordPressダッシュボードから、Divi> ThemeBuilderに移動します。次に、[新しいテンプレートの追加]ボックスをクリックして、新しいテンプレートを作成します。

プロモーションバーを表示するページにテンプレートを割り当てます。

新しいテンプレートで、[カスタムボディの追加]領域をクリックし、[カスタムボディの作成]を選択します。

注：プロモーションバーをテンプレートの本文領域（ヘッダーではなく）に追加して、Diviのデフォルトヘッダーおよび将来追加する可能性のあるカスタムヘッダーで機能できるようにします。

次に、「最初からビルド」オプションを選択します。

テンプレートへのプロモーションバーの追加

テンプレートレイアウトエディター内で、DiviBuilderを使用してプロモーションバーの作成を開始できます。

通常のセクションに1列の行を追加することから始めます。

行設定

モジュールを追加する前に、次のように行設定を更新します。

背景のグラデーションの左の色：＃4a42ec
背景のグラデーションの正しい色：＃521d91
グラデーション方向：90度
カスタムガター幅を使用：はい
側溝幅：1
幅：100％
最大幅：100％
パディング：0px上、0px下

これにより、作成するプロモーションバーの背景色と幅が決まります。

列の設定

行の設定を終了する前に、をクリックして列の設定を開きます。次に、次のカスタムCSSを列のメイン要素に追加します。

display: flex;
align-items: center;
justify-content: center;

このCSSは、flexプロパティを使用して、列内のコンテンツ（またはモジュール）を水平方向に（並べて）スタックするように配置します。また、モジュールを縦方向と横方向の両方で列内の中央に配置します。このようにする理由は、モバイルで互いに積み重なる複数の列行構造を使用する必要がないようにするためです。この設定では、コンテンツはすべてのブラウザ幅で水平方向に配置されたままになります。

これで、プロモーションバーにコンテンツを追加する準備が整いました。

宣伝文モジュールの追加

このサンプルプロモーションのコンテンツには、小さなアイコンが付いた宣伝文モジュールと、右側にボタンが付いたテキストのブログが含まれます（Elegantthemes.comのプロモーションバーによく似ています）。

行内の灰色の円とアイコンをクリックして、宣伝文モジュールを追加します。

宣伝文の内容については、次のように入力します。

タイトル：[プロモーションテキストを入力してください]
アイコンを使用：はい
アイコン：ギフトアイコン（スクリーンショットを参照）

宣伝文のデザイン設定を次のように更新します。

アイコンの色：＃ff4a9e
画像/アイコンの配置：左
アイコンのフォントサイズを使用：はい
アイコンフォントサイズ：16px
タイトルテキストサイズ：16px（デスクトップ）、14px（電話）
タイトルラインヒューイット：1.3em
最大幅：230px（電話のみ）
パディング：10pxトップ
アニメーションスタイル：スライド
アニメーションの方向性：右
アニメーションの遅延：250ms

ボタンモジュールの追加

次に、宣伝文モジュールの下にボタンモジュールを追加します。 flexプロパティがあるため、モジュールは宣伝文の下ではなく右側に表示されます。

ボタンのデザイン設定を次のように更新します。

ボタンにカスタムスタイルを使用する：はい
ボタンのテキストサイズ：15px（デスクトップ）、13px（電話）
ボタンのテキストの色：#ffffff
ボタンの境界線の幅：0px
ボタンの境界線半径：20px
ボタンのフォントの太さ：半太字

マージン（デスクトップ）：残り20px
マージン（電話）：残り10px
パディング（デスクトップ）：0px上、0px下
パディング（電話）：上2px、下2px、左8px、右8px
アニメーションスタイル：バウンス
アニメーションの遅延：1000ms

セクション設定

プロモーションバーのデザインを完了するには、プロモーションバーを含むセクションを次のように更新します。

パディング：0px上、0px下
アニメーションスタイル：バウンス
アニメーションの方向：下
アニメーション時間：500ms
アニメーションの遅延：250ms
アニメーションの開始不透明度：100％
Zインデックス：999

全幅投稿コンテンツモジュールの追加

この時点で、プロモーションバーを使用する準備が整いました。ただし、これはテンプレートであるため、このテンプレートを使用してページのコンテンツを表示するには、投稿コンテンツモジュールを確認して追加する必要があります。

Divi Builderを使用して作成された（または作成される予定の）ページの場合、コンテンツ領域を最大化するために、全幅の投稿コンテンツモジュールを使用することをお勧めします。

（注：デフォルトのエディターを使用するページの場合、通常のセクション内で通常の投稿コンテンツモジュールを使用して、デフォルトで同様の最大幅1080pxを使用することをお勧めします。）

全幅セクションを追加

プロモーションバーを含むセクションの下に、全幅セクションを追加します。

全幅投稿コンテンツモジュールを追加

次に、全幅投稿コンテンツモジュールを選択します。

それはそれについてです。エディターを終了する前に、レイアウトを確認して保存してください。

次に、テーマビルダーの変更も保存します。

最終結果

前

これが、プロモーションバーでテンプレートを割り当てる前のページです。

後

そして、これはプロモーションバー付きの新しいテンプレートと同じページです。

こちらはモバイルです。

これがページ読み込み時のプロモーションバーのアニメーションです。

プロモバーをスティッキーにする

プロモーションバーをデフォルトのDiviヘッダーの下に固定するために、プロモーションバーを含むセクションに簡単なCSSスニペットを追加できます。

セクション設定を開き、次のCSSをデスクトップのメイン要素に追加します。

position: fixed;
width: 100%;

次に、次のCSSをタブレットのメイン要素に追加します。

position: relative;

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

リンクを忘れないでください

プロモーションバーを作成したら、プロモーションオファーまたはページにリンクURLを追加する必要があります。ボタン設定のコンテンツタブでボタンリンクURLを追加できます。

変換された場合でも、行設定リンクオプションの下で、行全体にリンクURLを追加することもできます。

最終的な考え

このチュートリアルでは、Divi Theme Builderを使用してプロモーションバーを（最初から）設計する方法を示しました。プロモーションバーには、訪問者に本当に目立つように、複数のアニメーションとデザインが用意されています。ページを下にスクロールするときにプロモーションバーを固定して、さらに見やすくすることもできます。また、プロモーションバーがサイト全体のどこに表示されるかを制御できるため、このアプリケーションは非常に実用的です。

うまくいけば、これはあなたがあなた自身のいくつかのプロモーションバーを作成するようにあなたを刺激するでしょう。

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

乾杯！