Divi用の無料の多目的セールスバナーデザインをダウンロードする

多目的の販売バナーを持つことは、プロモーションが大流行している一年の重要な時期に間違いなく役に立ちます（そしてあなたの時間を節約します）。 そのため、Divi向けのこの多目的販売バナーを無料でダウンロードできます。 この販売バナーは、テキストと背景画像を少し調整するだけで、ニーズに合わせて簡単にカスタマイズできます。 Diviでの販売バナーのデザインは非常に簡単なので、ウェブ上で少しざらざらしていることが多い画像バナーに甘んじる必要はありません。 そこで、無料ダウンロードに加えて、Diviで販売バナーを最初からデザインする方法を紹介します。

始めましょう！

含まれているもの

ダウンロードに含まれているセールスバナーのデザインをご覧ください。

セールスバナーデザインを無料でダウンロード

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

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

無料でダウンロード

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

ダウンロード

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

レイアウトをDiviライブラリにロードする

ファイルをダウンロードしたら、解凍します。 「sales-banner-design.json」という名前のファイルが含まれていることがわかります。 これは、Diviライブラリにロードするものです。 次に、ワードプレスダッシュボードに移動し、Divi> DiviLibraryに移動します。 次に、ページの上部にあるインポートボタンをクリックします。 移植性ポップアップウィンドウから、[インポート]タブを選択し、sales-banner-design.jsonファイルを選択します。 次に、[DiviBuilderレイアウトのインポート]ボタンをクリックします。

レイアウトをページにインポートするには、新しいページを作成してビジュアルビルダーをデプロイするだけです。 次に、「既成のレイアウトを選択」を選択します。 [ライブラリからロード]ポップアップから、[保存したレイアウト]タブを選択し、リストから[セールスバナーデザイン]レイアウトをクリックします。 それでおしまい！

Diviでゼロからセールスバナーを作成する方法

セクションの背景を追加する

開始するには、新しいページを作成します。 ページにタイトルを付けたら、ビジュアルビルダーを展開し、[最初から作成]オプションを選択します。 次に、1列の行を持つ新しいセクションを追加します。

行にモジュールを追加する前に、セクションに背景のグラデーションカラーを指定します（この時点では色は関係ありません。販売に使用するすべての白いデザイン要素を表示するには、背景色が必要です。バナー。）

セールスバナーの行のカスタマイズ

モジュールを行に追加する前に、まず行に700pxのカスタム幅を指定し、上または下の間隔を取り除いて、下に追加する他の行の上に行が適切に配置されるようにします。 行設定に移動し、以下を更新します。

カスタム幅：700px
側溝幅：1
カスタムマージン：0px上、0px、下
カスタムパディング：0px上、0px下

次に、行を2回複製して、合計3つの同一の行を作成します。 これらは、販売バナーの作成に使用されます。

隣接するテキストを含む上部境界線フレームの追加

販売バナーを作成するために、左側にテキストが表示された上部の境界線から始めます。 これを行うには、仕切りモジュールとテキストモジュールを使用します。 まず、新しいテキストモジュールを作成し、コンテンツボックスにコンテンツのいくつかの単語を追加します。

内容：「オンラインのみ」

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

テキストフォントの太さ：太字
テキストフォントスタイル：TT
テキストテキストの色：rgba（255,255,255,0.9）
テキストテキストサイズ：15px
テキスト文字の間隔：2px
テキスト行の高さ：1em
幅：22％（デスクトップ）、25％（タブレット）、40％（スマートフォン）
モジュールの配置：左
カスタムマージン：上0px、下-15px
カスタムパディング：0px上、0px下

このカスタムマージンは、仕切りがまだ追加されていないため少し時期尚早ですが、間もなく追加される仕切りに完全に隣接するようにテキストを揃える必要があります。

次に、同じ行のテキストモジュールの下に仕切りモジュールを追加します。 次に、次のように仕切りの設定を更新します。

色：rgba（255,255,255,0.9）
仕切りの位置：下
仕切りの重量：15px
高さ：15px
幅：78％（デスクトップ）、75％（タブレット）、60％（スマートフォン）
モジュールの配置：右
カスタムマージン：0px上、0px下
カスタムパディング：0px上、0px下

もちろん、独自のニーズに合わせてデザインをカスタマイズする場合は、テキストモジュールの幅に応じて境界線の幅を調整する必要があります。

次に、次に設計する行の右側の境界に仕切りを接続するために、もう1つの仕切りモジュールを追加する必要があります。

これを行うには、分周器モジュールを複製し、以下を更新します。

幅：15px
カスタムマージン：-1px下

隣接するテキストで下の境界線フレームを追加する

下の境界線フレームを作成するには、上の行の上の境界線フレームで作成したものと同じ要素を使用できます。 今回だけ、15px幅の仕切りモジュールから始めます。 先に進み、15pxの仕切りモジュールをコピーして、3番目（下）の行に貼り付けます。 次に、モジュールの配置を右ではなく左に更新します。

次に、長い方の仕切りモジュールを上の行からコピーして、下の行の15pxの仕切りの下に貼り付けます。 次に、以下を調整します。

幅：75％（デスクトップ）、70％（タブレット）、50％（スマートフォン）
モジュールの配置：左

最後に、上の行のテキストモジュールをコピーして、下の行の2つの仕切りモジュールの下に貼り付けます。 次に、以下を更新します。

内容：「11月1日開始」
幅：25％（デスクトップ）、30％（タブレット）、50％（スマートフォン）
モジュールの配置：右
カスタムマージン：上-15px、下0px
カスタムパディング：残り15px

中央の行にテキストモジュールを追加する

これで、メインの販売バナーテキストを保持する中央の行にテキストモジュールを追加する準備が整いました。 3つのテキストモジュールを積み重ねます。 先に進み、最初のテキストモジュールを中央の行に追加します。

次に、以下を更新します。

内容：「すべて20％オフ」
背景色：rgba（255,255,255,0.9）

テキストフォントの太さ：半太字
テキストフォントスタイル：TT
テキストテキストの色：＃000000
テキストテキストサイズ：34px（デスクトップ）、20px（スマートフォン）
テキスト文字の間隔：2px
テキスト行の高さ：1em
テキストの向き：中央
カスタムパディング：上2vw、下2vw、左5vw、右5vw

テキストをセクションの背景とブレンドできるようにする画面ブレンドモード効果を最大化するには、テキストに白い背景の上に黒い色を付けることが不可欠です。 少し後で、画面ブレンドモードを行に追加します。

次に、テキストモジュールを複製して、次のテキストモジュールの設計を開始します。 次に、次のhtmlでコンテンツを更新します。

<h2 style="border: 7px solid #000000;">Fall Sale</h2>

インラインスタイルは、見出しテキストの周りに黒い境界線を追加するだけです。 繰り返しになりますが、黒色は画面ブレンドモードで機能し、セクションの背景をテキストで表示します。

次に、以下を更新します。

見出し2フォントの太さ：太字
見出し2フォントスタイル：TT
見出し2のテキストの色：＃000000
見出し2テキストサイズ：100px（デスクトップ）、80px（タブレット）、60px（スマートフォン）
見出し2文字の間隔：2px
カスタムマージン：0pxトップ
カスタムパディング：0px上、0px下

最後のテキストモジュールについては、この中央の行の最初のテキストモジュールを複製し、2番目のテキストモジュールの下に貼り付けます。

次に、以下を更新します。

内容：「今すぐ購入」
テキストフォントスタイル：TT、U（下線付き）
カスタムマージン：0pxトップ
カスタムパディング：1vw上部、2vw下部

真ん中の列のスタイリング

このデザインの最終段階は、中央の行に境界線を追加し、画面ブレンドモード効果を追加することです。 これを行うには、中央の行の設定を開き、以下を更新します。

カスタムパディング：左15ピクセル、右15ピクセル
右ボーダー幅：15px
右の境界線の色：rgba（255,255,255,0.9）
左ボーダー幅：15px
左の境界線の色：rgba（255,255,255,0.9）
ブレンドモード：画面

画面ブレンドモードでは、テキストをブレンドして背景画像をブレンドし、テキスト全体に表示してクールな効果を得ることができます。

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

セールスバナーへのリンクの追加

これは販売バナーであるため、バナーのクリック可能なスペースを最大化して、コンバージョンを増やす必要があります。 これを行うには、中央の行全体にリンクを追加します。 中央の行の設定を開き、行のリンクURLを入力するだけで、目的のページにリダイレクトされます。

ユニークなデザインに異なるセクションの背景を追加する

この新しいセールスバナーデザインを使用すると、背景画像を簡単に更新して、ユニークなデザインを作成できます。

ここにいくつかの例があります。

最終的な考え

このセールスバナーのデザインが、年間を通じて必要とされるすべてのWebプロモーションに役立つことを願っています。 このデザインは、新しいテキストやセクションの背景画像で簡単に更新してまったく新しい外観にすることができる多目的販売バナーとして機能するように構築されています。 ビデオの背景を追加することもできます！

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

乾杯！