Diviの新しい背景オプションを使用したレスポンシブバナーの作成

前回の投稿では、ボタンモジュールを列と行の背景の上に重ねることで、Diviの背景オプションインターフェイスを使用してボタンのスタイルを設定する方法を紹介しました。 今日は、Diviの背景オプションインターフェイスを使用してレスポンシブクリック可能なバナーをデザインする方法を紹介します。

ボタンの背景に行ったのと同じテクニックを使用しますが、いくつかの小さな調整を加えます。 基本的に、非常に大きなボタンを作成し、バナーのようにデザインする方法を紹介します。 ここで重要な要素は、バナーの表面領域全体がクリック可能なままであるということです。 ただし、最初から、この方法を使用して簡単なバナーを作成することしかできないことを知っておく必要があります。 ボタンモジュールのテキスト入力によって制限されるため、1つのテキスト文字列でのみバナーを作成できます。 ただし、列の背景オプションを利用することで、VisualBuilderを使用してすぐに見栄えの良いバナーを作成できます。

HTMLバナーと画像バナー

画像バナー（html要素なしで単一の画像として作成されたバナー）よりもhtmlバナー（html要素を使用して作成されたバナー）を使用することには多くの利点があります。 HTMLバナーの場合、テキストはWebブラウザーによって認識されます（ページ翻訳者およびスクリーンリーダーに不可欠）。 歪んだり判読できなくなったりする可能性のある画像とは異なり、ブラウザウィンドウのサイズに合わせて拡大縮小されるため、常に鮮明に見えます。 そして、おそらく、画像バナーよりもhtmlバナーを使用することの私のお気に入りの側面は、htmlが本当に簡単に変更できることです。 フォトエディタで編集する必要がある元のファイルをハードドライブの深さで検索する代わりに、数回のキーストロークでテキストを変更できます。 また、別のバージョンのバナーをすばやく作成して、DiviLeadsを使用して分割テストを実行できます。

ボタンをバナーに変えるこの方法は、ブログ（またはポッドキャスト）用にカスタマイズされた注目の投稿、カテゴリ、またはシリーズを作成するなど、いくつかの便利なアプリケーションへの扉を開きます。

始めましょう。

スニークピーク

正式にキックオフされる前に。 これは、この投稿で作成するバナーの概要です。

Diviを使用した設計の実装

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

例1：ロゴバナー

Visual Builderを使用して、1つの列と1つの行を持つ通常のセクションを追加します。

次に、ボタンモジュールを行に追加します。

次に、ボタンモジュールの設定を次のように更新します。

コンテンツオプション

ボタンテキスト：[バナーメッセージに使用するテキストを入力してください]
ボタンのURL：[URLを入力]

デザインオプション

ボタンの配置：中央
テキストの色：明るい
ボタンにカスタムスタイルを使用する：はい
ボタンのテキストサイズ：32px
ボタンの境界線の幅：0px
ボタンフォント：Arvo
ボタンアイコン：[アイコンを追加します。 カーソルアイコンを使用しています]
ボタンのホバーにアイコンのみを表示：いいえ

高度なオプション

列の幅を埋めるには、ボタンの幅を100％に設定する必要があります。 また、バナーコンテンツ用の十分なスペースを確保するために、ボタンの高さを拡張する必要があります。 これを行うには、[メイン要素]ボックスに次のカスタムCSSを入力します。

 Width: 100%;
padding: 20px 0 200px; 

注：ここでのカスタムパディングは、バナーテキストを表示する場所を調整するための鍵です。 ボタンの配置はすでに中央に配置されているので、テキストを垂直方向に調整するだけです。 したがって、ボタンのテキストの上部のパディングを短くし、下部のパディングを長くすると、バナーの上部に向かってテキストが調整されます。

設定を保存する

今でも物事はすべて白く見えませんが、それは問題ありません。 行と列の設定内にボタンモジュールの背景を追加します。

ボタンモジュールが配置されている行設定に移動し、以下を更新します。

コンテンツオプション

背景画像タブの下

背景画像：[画像を挿入]
背景画像の位置：[このオプションを使用して、バナーの画像を調整します。 画像の下部を表示したかったので、「下部中央」を選択しました。]

次に、少し下にスクロールして、列1の背景オプションを更新します。

[列1の背景グラデーション]タブを選択し、白いプラス記号が付いた灰色の円形ボタンをクリックします。

以下を更新します。

背景のグラデーションの色：rgba（131,0,233,0.92）、rgba（0,0,0,0.69）
カラムグラジエント方向：180度
カラム開始位置：50％
列の終了位置：0％

設定を保存する

次に、バナーにロゴを追加します。 [背景画像]タブをクリックして、以下を更新します。

列1の背景画像サイズ：実際のサイズ（私のロゴは120 x 120 pngです）

列1の背景画像の位置：中央

それでおしまい。 これで、クリック可能で応答性の高いシンプルなバナーができました。 ボタンモジュールの設定を使用して、バナーを目立たせたいホバー効果を追加できます。

別の例を見てみましょう。

例2：シンプルなテキストバナー

この次のバナーでは、デザインした最初のバナーを保持するセクション全体を複製しましょう。 これにより、セットアップ時間が節約されます。

次に、行の設定に移動して、以下を更新します。

コンテンツオプション

背景画像：[新しい画像を入力]
背景画像の位置：中央
列1の背景グラデーションの色：rgba（0,0,0,0.41）、rgba（12,113,195,0.66）
カラムグラジエント方向：270度

次に、列1の背景画像タブをクリックして、画像/ロゴを削除します。

設定を保存する

ボタンモジュール設定に移動し、以下を更新します。

コンテンツオプション

ボタンテキスト：[バナーのテキストを入力]
ボタンのURL：[バナーのURLを入力してください]

デザインオプション

ボタンのテキストサイズ：42px
ボタンの境界線の幅：19px
ボタンの境界線の色：rgba（0,0,0,0.17）
ボタンの文字間隔：8px
ボタンフォント：Montserrat、Bold（B）
ボタンアイコンの追加：いいえ
ボタンホバーの境界線の色：rgba（0,0,0,0.46）
ボタンホバーボーダー半径：0px
ボタンホバーの文字間隔：12px

ご覧のとおり、このサンプルバナーには、境界線の色を変更し、文字間隔を拡大する独自のホバー効果があります。

バナーを全幅にする方法

このバナーを全幅にするには、 [デザイン]タブの[セクション設定]を次のように更新するだけです。

カスタムパディング：0px上、0px右、0px下、0px左

設定を保存する

次に、[行の設定]に移動し、次のようにデザインオプションを更新します。

この行を全幅にする：はい
カスタムガター幅を使用：はい
側溝幅：1

これで、バナーはすべてのデバイスで画面の全幅に広がります。

スティッキーバナーの作り方

必要に応じて、このバナーを簡単に修正（スティッキー）して、ブラウザウィンドウの上部で修正できます。 パディングを減らして、ウィンドウの多くをブロックしないように、パディングを大幅に短くすることをお勧めします。

高さを下げるには、 [詳細設定]タブの[ボタンモジュール設定]に移動し、 [メイン要素]ボックスに次のCSSを追加します。

padding: 0px 0px !important;

セクション全体を固定するには、 [セクション設定]に移動し、 [メイン要素]ボックスの[詳細]タブの[オプション]を次のカスタムCSSで更新します。

position: fixed;
top: 0;
width: 100%;
z-index: 9999;

これで、セクション全体がページの上部に固定され、ページを下にスクロールしてもそこに残ります。

この種のバナーは、粘着性のあるバナーがナビゲーションバーを非表示にするため、ナビゲーションバーのないランディングページの販促アイテムに適しています。

複数の列レイアウトへのバナーの追加

複数列の行構造にバナーを作成することもできます。 これは、ページまたはブログの下部にいくつかのアイテムを掲載したい場合に便利です。

試してみましょう。

1/21/2列の行構造を持つ別の通常のセクションを追加します。

時間の都合上、先に作成したボタンモジュールをコピーまたは複製して、最初の列に貼り付けるかドラッグします。

バナーの背景デザインを取得するには、行設定の列の背景を使用します。 行設定に移動し、以下を更新します。

コンテンツオプション

[背景画像]タブの下

列1の背景：[背景画像を入力]
列1の背景画像の位置：[画像の位置を好みに合わせて調整します]
列1の背景画像のブレンド：乗算

[背景のグラデーション]タブの下

列1のグラデーションの色：rgba（255,255,255,0）、＃e02b20
列1の勾配方向：180度
列1の開始位置：70％
列1の終了位置：0％

最後のステップは、ボタンモジュールの設定を更新することです。

コンテンツオプション

ボタンテキスト：トラベルシリーズ

デザインオプション

ボタンのテキストサイズ：32px
ボタンの境界線の幅：2px
ボタンの文字間隔：0px
ボタンホバーの境界線の色：＃edf000
ボタンホバーの文字間隔：0px

高度なオプション

メイン要素ボックスのカスタムCSS：

padding: 350px 0px 50px;
width: 100%;

このカスタムcssは、テキストが背景のグラデーションのすぐ後ろの下部にくるように、Buttonモジュールのパディングを調整します。

次の列のバナーに対してこのプロセスを複製し、必要に応じてコンテンツを更新してください。

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

注：この機能を使用する場合、[列の高さを均等化]は使用しません。 柱はボタンモジュールを超えて伸びます。 バナーの高さを完全に一致させたい場合は、ボタンモジュールのパディングをいじって正しく調整する必要があります。

レスポンシブ？

はい。 ボタンはDiviの列構造内に構築されているため、ボタンはすべてのデバイスで適切に応答します。 横長のバナーは、モバイルで重なる場合がありますので、ロゴとテキストの配置には注意が必要です。

小さい画面サイズに縮小した場合のこれらの例を次に示します。

ブラウザの互換性

現在、background-blend-mode CSSプロパティはInternetExplorerまたはEdgeでサポートされておらず、Safariのブレンドオプションは限られています。 ただし、ほとんどの場合、私の経験ではフォールバックは重要ではありません。

最終的な考え

レスポンシブバナーを作成するための、この小さいながらも便利なデザイントリックを楽しんでいただけたでしょうか。 関係する制限を理解し、シンプルに保つ限り、かなりクールなバナーを作成できます。 さらに、このソリューションは簡単に実装でき、すばやくカスタマイズできます。

そして、私はこれのための他の有用なアプリケーションがあると確信しています。 コメントであなたのアイデアを聞くのを楽しみにしています。

乾杯！