バーを作成する プロモーション Divi のページ テンプレートのアニメーションは、プラグインに依存することなく、洗練された製品やオファーを宣伝する優れた方法です。 Divi の強力なデザイン機能を使用して、視覚的に作成できます。 プロモーション Diviテーマビルダーでテンプレートを編集するとき。 次に、モデルの準備ができたら、バー プロモーション は、このテンプレートに割り当てられたすべてのページに表示されます。 

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

始めるために必要なもの

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

また、テスト用にDivi Builderで作成された少なくとも1つのページが必要になります。これは、プロモーションバーテンプレートの影響を受けます。

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

新しいテンプレートを作成する

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

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

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

注：プロモーションバーをモデルの本体領域（ヘッダーではなく）に追加して、Diviのデフォルトヘッダーとすべてのヘッダーで機能できるようにします。後で追加できるカスタム。

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

モデルへのプロモーションバーの追加

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

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

ライン設定

モジュールを追加する前に、次のように行パラメーターを更新します。

• 左背景のグラデーション：＃4a42ec
• 右背景のグラデーション：＃521d91
• グラデーション方向：90deg
• カスタムのガター幅を使用：はい
• 側溝幅：1
• 幅：100％
• 最大幅：100％
• 室内装飾品：上部に0px、下部に0px

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

列パラメーター

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

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

この CSS は、flex プロパティを使用して、 コンテンツ （またはモジュール）を列内に水平に（並べて）積み重ねます。 また、モジュールが列内の垂直方向と水平方向の中央に配置されます。 このようにする理由は、モバイル上で互いに積み重ねられる複数の列行構造を使用する必要を避けるためです。 この構成では、 コンテンツ ブラウザのすべての幅にわたって水平方向に整列されたままになります。

追加する準備ができました コンテンツ プロモーションバーへ。

Blurbモジュールを追加

このプロモーションの例のコンテンツには、小さなアイコンのあるプレゼンテーションモジュールと、右側にボタンがあるテキストブログが含まれます（Elegantthemes.comのプロモーションバーに似ています）。

灰色の円と行内のアイコンをクリックして、プレゼンテーションモジュールを追加します。

プレゼンテーションテキストの内容については、次の情報を入力します。

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

プレゼンテーションのデザイン設定を次のように更新します。

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

ボタンモジュールの追加

次に、Blurbモジュールの下にボタンモジュールを追加します。 flexプロパティにより、モジュールはブラーの下ではなく右側に表示されます。

次のようにボタンの設計パラメーターを更新します。

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

• マージン（デスクトップ）：左側の20px
• マージン（電話）：左側の10px
• 室内装飾品（オフィス）：上部に0px、下部に0px
• パディング（電話）：上部の2px、下部の2px、左側の8px、右側の8px
• アニメーションスタイル：バウンス
• アニメーションの遅延：1000ms

セクション設定

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

• 室内装飾品：上部に0px、下部に0px
• アニメーションスタイル：バウンス
• アニメーションの方向：下
• アニメーション時間：500ms
• アニメーションの遅延：250ms
• アニメーション開始不透明度：100％
• Z-Index：999

全角コンテンツ公開モジュールの追加

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

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

（注：デフォルトのエディターを使用するページの場合、デフォルトで同様の最大幅1080pxを実現するには、通常のセクションで標準の投稿コンテンツmodを使用する必要があります。）

全幅セクションを追加する

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

全角形式でコンテンツモジュールを追加する

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

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

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

最終結果

アバント

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

後の

そして、ここに、プロモーションバーのある新しいテンプレートの同じページがあります。

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

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

position: fixed;width: 100%;

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

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

position: relative;

次に結果を確認します。

以前の変換では、[行設定]リンクオプションの下で、行全体にリンクURLを追加することもできます。

最終的な考え

このチュートリアルでは、Divi Theme Builder を使用してプロモーション バーを (ゼロから) デザインする方法を紹介しました。 プロモーション バーには複数のアニメーションとデザインが用意されており、実際に目に付くようになっています。 訪問者. さらに見やすくするために、ページを下にスクロールするときにプロモーション バーを修正することもできます。 また、プロモーション バーをサイトのどこに配置するかを制御できるため、このアプリは非常に便利です。