Divi:すべての時間の中で最高のWordPressテーマ!

もっと 901.000のダウンロードDiviは世界で最も人気のあるWordPressテーマです。 完全で使いやすく、62以上の無料テンプレートが付属しています。

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

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

始めるために必要なもの

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

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

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

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

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

新しいdiviモデルを追加します

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

ディビのホームページ

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

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

ボディモデルを追加する

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

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

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

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

diviの列に行を追加する

ライン設定

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

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

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

Elementorでウェブサイトを簡単に作成

Elementorを使用すると、 簡単かつ無料 プロフェッショナルな外観のウェブサイトやブログのデザイン。 あなたが自分でできるウェブサイトに多額のお金を払うのをやめなさい。

列パラメーター

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

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

cssコードのカスタマイズ

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

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

Blurbモジュールを追加

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

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

要約モジュールのXNUMX番目のセクションを追加します

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

  • タイトル:[プロモーションのテキストを入力]
  • アイコンを使用してください:はい
  • アイコン:ギフトアイコン(スクリーンショットを参照)
diviサマリーモジュールの構成

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

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

ボタンモジュールの追加

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

ディビボタンモジュール

あなたはインターネットであなたの製品を売りたいですか?

WooCommerceを無料でダウンロードしてください。これは、WordPressで物理的およびデジタル製品を販売し、オンラインストアを簡単に作成するための最高のeコマースプラグインです。 初心者に最適です。

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

  • ボタンにカスタムスタイルを使用:はい
  • ボタンのテキストサイズ:15px(デスクトップ)、13px(電話)
  • ボタンのテキストの色:#ffffff
  • ボタンの境界線の幅:0px
  • ボタンの境界線の半径:20px
  • フォントの太さ:半太字
diviボタンモジュールをカスタマイズする
  • マージン(デスクトップ):左側の20px
  • マージン(電話):左側の10px
  • 室内装飾品(オフィス):上部に0px、下部に0px
  • パディング(電話):上部の2px、下部の2px、左側の8px、右側の8px
  • アニメーションスタイル:バウンス
  • アニメーションの遅延:1000ms
ディビボタンモジュールの間隔をカスタマイズする

セクション設定

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

  • 室内装飾品:上部に0px、下部に0px
  • アニメーションスタイル:バウンス
  • アニメーションの方向:下
  • アニメーション時間:500ms
  • アニメーションの遅延:250ms
  • アニメーション開始不透明度:100%
  • Z-Index:999
アニメーションdiviモジュールをカスタマイズする

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

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

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

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

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

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

全幅のdiviビルダーセクションを作成します

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

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

全幅記事コンテンツdivi

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

diviレイアウトを保存

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

テーマビルダーディビ

最終結果

アバント

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

後の

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

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

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

position: fixed;width: 100%;

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

固定セクションを入力してください

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

position: relative;

cssコードをdiviセクションに追加します

次に結果を確認します。

ディビアニメーション結果

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

最終的な考え

このチュートリアルでは、Divi Theme Builderを使用してプロモーションバーを(最初から)設計する方法を示しました。 プロモーションバーには、訪問者に真に見えるようにするための複数のアニメーションとデザインが備わっています。 ページを下にスクロールしてさらに見やすくするために、プロモーションバーを修正することもできます。 また、サイトのプロモーションバーの配置を制御できるため、このアプリは非常に便利です。