Diviで宣伝文句アイコンの背景を使ってクリエイティブにする方法

宣伝文句は、Diviで見つけることができる最も用途の広い要素の一部です。 この投稿では、さらに一歩進んで、宣伝文のアイコンの背景を使ってクリエイティブになる方法を紹介します。 宣伝文モジュール、テキストモジュール、および召喚状モジュールを組み合わせて使用​​します。 これらのユニークなデザインは、サービスページや製品カテゴリページに最適です。 JSONファイルも無料でダウンロードできます！

それを手に入れましょう。

プレビュー

チュートリアルに入る前に、さまざまな画面サイズでの3つの例すべての結果を簡単に見てみましょう。

例1

デスクトップ

モバイル

例2

デスクトップ

モバイル

例3

デスクトップ

モバイル

宣伝文のアイコンの背景の例を無料でダウンロード

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

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

無料でダウンロード

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

ダウンロード

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

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

一般的な手順

新しいセクションを追加

バックグラウンド

これらのクリエイティブな宣伝文句の背景デザインを再現するには、新しいページを開くか、既存のページに新しいセクションを追加します。 行を追加する前に、セクションに背景色を追加してください。

• 背景色：＃f7f7f7

間隔

セクションにカスタムの上部と下部のパディングも追加します。

• 上下のパディング：120px

新しい行を追加

カラム構造

次の列構造を使用して、新しい行を追加して続行します。

サイジング

モジュールを追加する前に、行のサイズを調整してください。

• 幅：100％
• 最大幅：100％

間隔

次に、間隔設定でパディングを調整します。

• トップパディング：8vw
• ボトムパディング：15vw
• 左右のパディング：12vw

列1

行設定の変更が完了したら、最初の列にいくつかの変更を加えます。

バックグラウンド

まず、白い背景を追加します。

• 背景色：白#ffffff

国境

次に、境界線の半径を追加します。

• 丸みを帯びたコーナー：4つのコーナーすべてに2vw

ボックスシャドウ

最後に、ボックスシャドウを追加します。

• ボックスシャドウ：最初のオプション
• ボックス-シャドウブラーの強さ：47px

行を2回クローンする

モジュールの追加を開始する前に、最後のステップが1つ残っています。 行のクローンを2回作成します。

例1を再作成する

列1に宣伝文モジュールを追加する

デフォルトのコンテンツを消去する

行と列を設定したので、最初の行の列1にモジュールを追加し始めることができます。 まず、宣伝文モジュールを追加し、デフォルトのタイトルと本文をすべて消去します。

アイコンを選択

次に、画像の代わりにアイコンを選択します。

• アイコン：リンク

バックグラウンド

宣伝文モジュールに黒の背景色を追加します。

• 背景色：黒＃000000

アイコン設定

次に、アイコンの設定を変更します。

• アイコンの色：黄色＃edf000
• アイコンの配置：上
• アイコンのフォントサイズ：
  • デスクトップ：3vw
  • タブレット：11vw
  • 電話番号：13vw

サイジング

モジュールのサイズを調整して続行します。

• コンテンツの幅：100％
• 幅：
  • デスクトップ：11vw
  • タブレット：19vw
  • 電話番号：22vw

間隔

いくつかの間隔値も追加します。

• トップマージン：-5vw
• 下マージン：0vw
• 左マージン：-1vw
• トップパディングとボトムパディング：4vw

国境

アイコンに独自の形状を与えるには、左下のコーナーを除く各コーナーに境界線の半径を追加します。

• 丸みを帯びた角：左下隅に50vw、0vw。

ボックスシャドウ

最後に、ボックスシャドウを追加します。

• ボックスシャドウ：最初のオプション
• ボックス-シャドウブラー強度：50px

カスタムCSS

アイコンには、デフォルトで下余白が付いています。 それを取り除くために、CSSコードの1行を宣伝文句のカスタムCSSボックスに追加します。

• 宣伝文句：margin-bottom：0px;

margin-bottom: 0px;

列1にテキストモジュールを追加

H3コンテンツを追加する

アイコンの下に、選択したH3コンテンツを含むテキストモジュールを追加します。

バックグラウンド

背景設定に移動し、グラデーションの背景を追加します。

• 背景：グラデーション
• カラーワン：透明
• カラー2：イエロー＃edf000
• 勾配方向：180度
• 開始位置と終了位置：74％

タイトルテキスト

次に、H3テキストのスタイルを設定します。

• タイトルテキスト見出しレベル：H3
• H3フォント：Josefin Sans
• H3アライメント：センター
• H3フォントの色：黒#oooooo
• H3テキストサイズ：
  • デスクトップ：2.4vw
  • タブレット：3.4vw
  • 電話：4.8vw
• H3文字間隔：0em

サイジング

サイズ設定で、タブレットと電話の幅を調整します。

• 幅：
  • タブレット：50％
  • 電話番号：60％

間隔

間隔の設定に移動し、マージン値を調整して続行します。

• 左右のマージン：5vw
• トップパディング：1vw

変身

最後に、変換オプションを使用してモジュールを回転させます。

• 変換翻訳：
  • x軸：-20vw
  • y軸：13vw
• 変換回転：最初のオプション、280度

召喚状モジュールを列1に追加

デフォルトのタイトルコンテンツを削除し、ボタンとテキストコンテンツを追加します

列1で必要な次の最後のモジュールは、行動モジュールの呼び出しです。 選択したコンテンツをいくつか追加し、タイトルのコピーを削除します。

リンクを追加

ボタンに関連するリンクを追加します。

バックグラウンド

背景に色がないことを確認してください。

本文

次に、[デザイン]タブに移動し、本文の設定を変更します。

• ボディフォント：クリムゾンテキスト
• 本文の配置：左
• 本文の色：ダークグレー＃666666
• 本文のサイズ：
  • デスクトップ：1.2vw
  • タブレット：2.6vw
  • 電話：3.1vw
• ボディラインの高さ：1.8em

ボタン

ボタンのスタイルも変更します。

• ボタンのテキストサイズ：
  • デスクトップ：1vw
  • タブレット：2vw
  • 電話：3vw
• ボタンのテキストの色：非常に濃い灰色＃3f3f3f
• ボタンの境界線の色：非常に濃い灰色＃3f3f3f
• ボタンフォント：Josefin Sans
• ボタンマージン：3vw
• ボタンの上部と下部のパディング：1vw
• ボタンの左右のパディング：3vw

間隔

左右のパディングを追加して、モジュールの設定を完了します。

• 左右のパディング：7vw

列2を削除し、列1のクローンを作成します

列2の設定を調整します

ここで、行の設定に戻り、2番目の列を削除します。 その直後に、最初の列のクローンを作成します。 次の手順では、重複する列のいくつかの設定を調整します。

宣伝文モジュール

宣伝文モジュールのアイコンの色を変更することから始めます。

• アイコンの色：アクア＃00ffd4

テキストモジュール

次に、グラデーションの背景とテキストモジュールのコピーを変更します。

• 背景色：アクア＃00ffd4
• コンテンツの変更

例2を再作成する

列1に宣伝文モジュールを追加する

デフォルトのコンテンツを削除する

2番目の例に移ります！ 列1に宣伝文モジュールを追加し、すべてのデフォルトコンテンツを削除します。

アイコンを選択

次に、アイコンを選択します。

バックグラウンド

次に、黄色の背景色を追加します。

• 背景色：黄色＃edf000

アイコン

デザインタブのアイコン設定を変更して続行します。

• アイコンの色：白#ffffff
• アイコンの配置：上
• アイコンのフォントサイズ：
  • デスクトップ：3vw
  • タブレット：11vw
  • 電話番号：12vw

サイジング

色と背景のスタイルを設定したら、モジュールのサイズを調整します。

• コンテンツの幅：100％

間隔

間隔の設定も変更します。

• 下マージン：0vw
• 左右のマージン：3vw
• 上下のパディング：2vw

国境

次に、各コーナーに境界線の半径を追加します。

• 丸みを帯びたコーナー：4つのコーナーすべてに2vw

ボックスシャドウ

微妙なボックスシャドウを追加して、モジュールのデザインを完成させます。

• ボックスシャドウ：最初のオプション

列1のボックスの影と背景色を削除します

次に列1の設定を開き、背景色とボックスの影を削除します。

カスタムCSS

[詳細設定]タブにCSSコードを1行追加して、宣伝文アイコンに適用されているデフォルトの下マージンを削除します。

• 宣伝文句：margin-bottom：0px;

margin-bottom: 0px;

召喚状モジュールを列1に追加

タイトルコンテンツ、本文コンテンツ、ボタンコンテンツを追加する

宣伝文モジュールの下に、召喚状モジュールを追加し、選択したコンテンツを挿入します。

リンクを追加

次のボタンへのリンクを追加します。

バックグラウンド

白い背景を追加して続行します。

• 背景色：白#ffffff

タイトルテキスト

[デザイン]タブで、H3タイトルテキストのスタイルを設定します。

• タイトル見出しレベル：H3
• H3フォント：Josefin Sans
• H3フォントの色：非常に濃い灰色＃3f3f3f
• H3サイズ：
  • デスクトップ：2vw
  • タブレット：4vw
  • 電話：6vw
• H3ラインの高さ：2.3em

本文

次に、本文のスタイルを設定します。

• ボディフォント：クリムゾンテキスト
• 本文の配置：左
• 本文の色：ダークグレー＃666666
• 本文のサイズ：
  • デスクトップ：1.1vw
  • タブレット：2.2vw
  • 電話：3.1vw
• ボディラインの高さ：1.8em

ボタン

ボタンの設定に移動し、次のようにボタンのスタイルを設定します。

• ボタンのテキストサイズ：
  • デスクトップ：1vw
  • タブレット：2vw
  • 電話：3vw
• ボタンのテキストの色：非常に濃い灰色＃3f3f3f
• ボタンフォント：Josefin Sans
• ボタンの境界線の幅：2-x
• ボタンの境界線の色：非常に濃い灰色＃3f3f3f
• ボタンの上部と下部のマージン：3vw
• ボタンの上部と下部のパディング：1vw
• ボタンの左右のパディング：3vw

間隔

次に、間隔を調整します。

• 下マージン：-1vw
• トップパディング：6vw
• 左右のパディング：7vw

国境

次に、境界線設定の角を丸めます。

• 丸みを帯びた角：2vw

ボックスシャドウ

最後に、ボックスシャドウを追加します。

• ボックスシャドウ：最初のオプション
• ボックス-シャドウブラー強度：50px

列2を削除し、列1のクローンを作成します

列2の設定を調整します

前の例と同様に、行の設定に移動して2番目の列を削除します。 最初の列を複製し、いくつかの設定を調整します。

宣伝文モジュール

宣伝文モジュールの背景を黄色から水色に変更します。

• 背景アイコンの色：アクア＃00ffd4

召喚状モジュール

召喚状モジュールのコンテンツとリンクも変更します。

• タイトルコンテンツの変更
• リンクを変更

例3を再作成する

列1に宣伝文モジュールを追加する

デフォルトのコンテンツを削除する

次の最後の例に移りましょう！ 列1に宣伝文モジュールを追加し、デフォルトのコンテンツを消去します。

アイコンを選択

アイコンを選択します。

バックグラウンド

モジュールに明るい黄色の背景を追加します。

• 背景色：黄色＃f7f426

アイコン

アイコンを黒にして、その配置を調整します

• アイコンの色：黒＃000000
• アイコンの配置：左
• アイコンのフォントサイズ：
  • デスクトップ：3vw
  • タブレット+電話：8vw

サイジング

モジュールの幅と高さを変更して続行します。

• コンテンツの幅：100％
• 高さ：23vw

間隔

さらに、間隔の設定を調整します。

• 左マージン：3vw
• 右マージン：25vw
• トップパディング：2vw
• 左パディング：1vw

国境

境界線の半径も追加します。

• 丸みを帯びたコーナー：すべてのコーナーで2vw

ボックスシャドウ

次に、ボックスシャドウを追加します。

• ボックスシャドウ：最初のオプション

変身

最後に、カスタム変換変換値を使用してモジュールを再配置します。

• x軸：-6vw
• y軸：1vw

列1から背景色とボックスの影を削除します

列1の設定に移動し、背景色とボックスの影を削除します。

召喚状モジュールを列1に追加

タイトル、本文、ボタンのコンテンツを追加

宣伝文モジュールの下に、アクションモジュールへの呼び出しを追加します。 お好みのコンテンツを追加してください。

リンクを追加

次に、ボタンへのリンクを追加します。

バックグラウンド

召喚状モジュールのスタイルを設定するには、まず黒の背景色を追加します。

• 背景色：黒#oooooo

タイトルテキスト

次にH3テキスト設定を調整します。

• タイトル見出しレベル：H3
• H3フォント：Josefin Sans
• H3フォントの色：明るい黄色＃f7f426
• H3フォントサイズ：
  • デスクトップ：2vw
  • タブレット：4vw
  • 電話：6vw
• H3ラインの高さ：2.3em

本文

本文の設定も変更してください。

• ボディフォント：クリムゾンテキスト
• 本文の配置：左
• 本文の色：白＃000000
• 本文のサイズ：
  • デスクトップ：1.2vw
  • タブレット：2.2vw
  • 電話：3.1vw
• ボディラインの高さ：1.8em

ボタン

次に、ボタンのスタイルを次のように設定します。

• ボタンのテキストサイズ：
  • デスクトップ：1vw
  • タブレット：2vw
  • 電話：3vw
• ボタンのテキストの色：Aqua＃00ffd4
• ボタンボーダーカラー：アクア＃00ffd4
• ボタンフォント：Josefin Sans
• ボタンの上部と下部のマージン：3vw
• ボタンの上部と下部のパディング：1vw
• ボタンの左右のパディング：3vw

サイジング

サイズ設定に移動し、いくつかの変更を加えます。

• 幅：90％
• モジュールの配置：中央

間隔

間隔の設定も変更します。

• トップマージン：-9vw
• トップパディング：5vw
• 左右のパディング：7vw

国境

次に境界線の設定を開き、各コーナーに境界線の半径を追加します。

• 丸みを帯びた角：2vw

ボックスシャドウ

微妙なボックスシャドウも使用しています。

• ボックスシャドウ：最初のオプション

変換翻訳

最後に、変換変換設定を変更して、アクションモジュールの呼び出しを再配置します。

• y軸：-18vw

列2を削除し、列1のクローンを作成します

列2の設定を調整します

最初の列の準備ができたので、2番目の列を削除し、最初の列を複製します。 その後、コンテンツと色の詳細の一部を調整します。

宣伝文モジュール

宣伝文のモジュール設定で、背景を黄色から水色に変更します。

• 背景アイコンの色：アクア＃00ffd4

召喚状モジュール

召喚状モジュールの設定で、タイトルの内容、タイトルの色、およびボタンの色を変更します。 ボタンのリンクも変更することを忘れないでください。これで完了です。

• タイトルテキストの色：Aqua＃00ffd4
• コンテンツ
• ボタンの色：＃00ffd4

プレビュー

すべての手順を完了したので、さまざまな画面サイズでの結果を最終的に見てみましょう。

例1

デスクトップ

モバイル

例2

デスクトップ

モバイル

例3

デスクトップ

モバイル

結論

この投稿で見たように、宣伝文のアイコンの背景は宣伝文のデザインをはるかに面白くすることができます。 召喚状モジュールおよびテキストモジュールと組み合わせた宣伝文句モジュールを使用することにより、多くの創造的な可能性があります。 これらのスタイルのデザインは、サービスのショーケースや製品セクションに最適です。 どう思いますか？ コメントで教えてください。