5つのクリエイティブなDivi宣伝文モジュールのデザイン

公開: 2018-10-22

この投稿では、Diviの最も人気のある機能の1つであるBlurbModuleについて説明します。一見シンプルに見えますが、Webサイトの要素に命を吹き込むことができる多くのカスタマイズ可能な機能があります。一般的に、宣伝文句はサービス、福利厚生、連絡先情報などに使用されますが、Diviを使用すると、可能性は無限に広がります。

楽しもう！

スニークピーク

これは、このチュートリアルで作成する5つの宣伝文モジュールスタイルの概要です。

5つのクリエイティブなDivi宣伝文モジュールのデザイン

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

入門

開始するには、新しいページを作成する必要があります。 WordPressダッシュボードから、[ページ]> [新規追加]に移動します。次に、ページにタイトルを付けて、ビジュアルビルダーをデプロイします。「最初からビルド」オプションを選択します。ビジュアルビルダーがページに読み込まれると、デザインを開始する準備が整います。

このチュートリアルは、これらの宣伝文句の各デザインを個別に簡単に作成できるように設計されているため、作成するデザインに投稿をジャンプしてください。つまり、最初のものから始める必要はありません。

1.機能リスト付きのポップアウト宣伝文

この最初の例では、行の外側に宣伝文を展開してポップアウト効果を作成することを少し楽しんでいます。次に、それぞれの横にある隣接する列を使用して、左揃えのアイコンでいくつかの宣伝文を追加し、注目のリストアイテムとして機能させることができます。

まず、4列構造の新しいセクションと行を作成します。

次に、次のように行設定を更新します。

背景色：＃2e3858
この行を全幅にする：はい
カスタムガター幅を使用：はい
側溝幅：1
列の高さを等しくする：はい
カスタムマージン：5vw上、5vw下
カスタムパディング：0px上、0px下

設定を保存する。

次に、最初の列に最初の宣伝文句モジュールを追加します。

コンテンツボックスの最後の文を取り出して、テキストの量を少し短くします。次に、画像の代わりにアイコンを使用することを選択し、アイコンを選択します（誰でも実行できます）。

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

背景色：＃df4570
アイコンの色：#ffffff
テキストの向き：中央
タイトルフォント：Encode Sans Semi Condensed
タイトルフォントスタイル：TT
タイトル文字の間隔：2px
カスタムマージン（デスクトップ）：-5vw上、-5vw下
カスタムマージン（タブレット）：0px上、0px下
カスタムパディング：5vw上、5vw下、3vw左、3vw右
ボックスシャドウ：スクリーンショットを参照
ボックスシャドウブラー強度：80px

右クリックメニューオプションまたはcmd + cおよびcmd + vショートキーを使用して、作成したモジュールをコピーし、列3に貼り付けます。次に、新しい宣伝文モジュールの設定を別の明るい（ただし補完的な）背景色で更新します。

背景色：＃24c4a3

次に、作成したポップアウトの宣伝文に隣接してリストアイテムの宣伝文を追加します。

これを行うには、列2に新しい宣伝文を追加します。次に、コンテンツボックスのモックテキストを取り出して、タイトルテキストのみが残るようにします。次に、アイコンを追加して、前と同じように画像を置き換えます。次に、次のように設計設定を更新します。

アイコンの色：＃df4570
画像/アイコンの配置：左
タイトルフォント：Encode Sans Semi Condensed
カスタムパディング：上20px、下20px、左3vw、右3vw

宣伝文を2回複製して、列に合計3つのリスト宣伝文を表示します。次に、Diviの複数選択機能を使用して、3つの宣伝文をすべて選択し、それらをコピーして列4に貼り付けます。

複数選択を使用して、列4の3つの宣伝文をすべて選択し、要素設定を一括編集して、3つすべてのアイコンの色を＃24c4a3に変更することもできます。

それでおしまい！ポップアウトの宣伝文を作成することは、宣伝文を目立たせるための楽しい方法であり、隣接するリストの宣伝文を横に置くことで、より創造的なデザインのためのいくつかの追加オプションが得られます。

これが最終結果です。

2.カスタム背景画像を使用した宣伝文句。

この宣伝文句のスタイルは、無料の本のようなコンテンツやプロモーションのオファーを特集するのに最適です。基本的な考え方は、カスタムの背景画像用のスペースを確保するために、モジュールの左側に宣伝文のコンテンツを配置することです。それを手に入れましょう。

最初に、2列の行構造を持つ通常のセクションを追加します。左側の列に、新しい宣伝文モジュールを追加します。

タイトルテキストを更新し、モックコンテンツの最後の文を取り出して、テキストの量を減らします。次に、画像を本の画像（または製品の画像）で更新します。本などのアイコンも同様に機能します。

私はTravelBlog Layout Packの画像アセットを使用しているので、それらの画像を取得してデザインを開始してください。

ヒント：プロモーションとして機能できるため、モジュール全体をクリック可能にするために、このモジュールにモジュールリンクURLを追加することもできます。

次に、モジュールに背景画像を追加します。背景画像が画像のようなヘッダーであり、画像の焦点が右側にあることを確認してください。そうすれば、画像の左側にコンテンツを追加して、背景がテキストの邪魔になるようにすることができます。

次に、背景のグラデーションを追加して、コンテンツの背後に配置され、テキストを読みやすくするために背景画像をオーバーレイする部分的なオーバーレイとして機能します。背景グラデーションを追加するには、以下を更新します。

背景グラデーションの左の色：rgba（255,255,255,0.8）
背景グラデーションの右の色：rgba（255,255,255,0）
グラデーション方向：90度
開始位置：40％
終了位置：70％
背景画像の上にグラデーションを配置：はい

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

イメージボックスの影：スクリーンショットを参照
タイトルフォント：能登セリフ
タイトルテキストサイズ：26px
ボディフォント：能登さん
本文サイズ：16px
画像幅：150px
コンテンツの幅（デスクトップ）：60％
コンテンツ幅:(スマートフォン）：80％
カスタムパディング：2vw下部、2vw左、2vw右

ここでの重要な設計手法は、画像とコンテンツの両方にカスタム幅を設定して、後でコンテンツを左側に配置できるようにすることです。

次に、宣伝文の上部にボックスシャドウを追加して、本の画像がモジュールの上に伸びているような印象を作成し、重なり合う効果を出す必要があります。これを行うには、以下を更新します。

ボックスシャドウ：スクリーンショットを参照
ボックスシャドウの水平位置：0px
ボックスシャドウの垂直位置：50px
影の色：#ffffff

最後のステップでは、宣伝文のコンテンツをモジュールの左側に配置するために必要なカスタムCSSの短いスニペットを使用します。これを行うには、[詳細設定]タブに移動し、[宣伝文]入力ボックスの下に次のカスタムCSSを追加します。

margin-left: 0;

結果をチェックしてください！

ヒント：利用可能なホバーオプションを忘れないでください。本の画像にホバーの境界線を付けて、物事を生き生きとさせてみてください！

3.背景グラデーションを使用した円の宣伝文句

このシンプルな宣伝文のスタイルは、背景のグラデーションを使用して、宣伝文のコンテンツの円の背景として機能します。これは、カスタムCSSを使用して宣伝文モジュール全体を円に変える代わりの楽しい方法です。

まず、3列の行構造を持つ新しい通常のセクションを追加します。

次に、左側の列に宣伝文モジュールを追加します。

次に、コンテンツの最後の文を取り出して、テキストの量を減らします。このデザインでは、円の内側に収まるため、テキストの量をいくらか少なくすることが重要です。

次に、背景のグラデーションを追加して、次のように円の背景を作成します。

背景グラデーションの左の色：＃fa7f28
背景グラデーションの右の色：rgba（255,255,255,0）
グラデーションタイプ：放射状
開始位置：60％
終了位置：0％
背景画像の上にグラデーションを配置：はい

次に、残りのデザイン設定を次のように更新します。

テキストの向き：中央
タイトルフォント：Oswald
タイトルフォントスタイル：TT
タイトル文字の間隔：1px
ボディフォント：ロボット
ボディフォントの太さ：軽い
本文サイズ：16px
幅（錠剤）：80％
モジュールの配置：中央
カスタムパディング（デスクトップ）：上20％、下25％、左20％、右20％
カスタムパディング（スマートフォン）：上20％、下25％、左10％、右10％

ここで重要なのは、背景の円が中央のコンテンツと揃うように、カスタムパディングを正しく調整することです。コンテンツの量によっては、これらの設定を調整する必要がある場合があります。

これで、モジュールをコピーして残りの列に貼り付けることができます。

次に、行の設定を更新して、カスタム幅が80％、ガター幅が1になるようにします。

デザインを完成させるために、次のように背景画像とグラデーションをセクションに追加できます。

背景画像を追加する
背景グラデーションの左の色：rgba（2,0,76,0.51）
背景グラデーションの右の色：rgba（2,0,76,0.84）
背景画像の上にグラデーションを配置：はい

それでおしまい！最終的なデザインをチェックしてください！

スペースを追加するために、ブラウザの幅が狭い場合に円が衝突しないように、宣伝文のアイコンのサイズを50px程度にいつでも小さくすることができます。調整を行うときは、Diviの複数選択機能を利用して、すべてのモジュールを一度に一括編集することを忘れないでください。

ボーナスのヒント：カスタムCSSを使用して宣伝文モジュール全体を円にする

モジュール全体を（背景のグラデーションを使用する代わりに）円に変えたい場合は、グラデーションを通常の背景色に置き換え、このカスタムCSSを宣伝文のモジュール設定の[詳細設定]タブに追加します。

[メイン要素]ボックス：

height: 300px;
width: 300px;
border-radius: 100%;
border: 5px solid #ffffff;
padding: 5% !important;
display: flex;

[宣伝文]ボックス：

margin: auto;

このカスタムCSSは、宣伝文句モジュール設定のパディングセットをオーバーライドするため、これらの設定の制御を取り戻したい場合は、そのスニペットを削除する必要がある場合があります。また、このcssは、flexを使用して宣伝文のコンテンツを円の中央に配置します。これは重宝します。

3つのモジュールすべてに適用すると、次のようになります。

4.境界線とボックスシャドウのあるフレーム付き宣伝文

私がいつも気に入っているDiviのデザイン機能の1つは、ボックスシャドウです。オーバーラップ効果を作成したプロモーション宣伝文のデザインでは、ボックスシャドウのクリエイティブな使用法をすでに取り上げました。ただし、壊れたグリッドデザインでコンテンツをフレーム化するための創造的な方法として、ボックスシャドウを使用することもできます。このデザインでは、境界線とボックスシャドウを独自の方法で組み合わせる方法を紹介します。

まず、3列の行構造を持つ新しい通常のセクションを追加します。次に、最初の列に宣伝文モジュールを追加します。

宣伝文に画像を追加します。次に、次のようにデザイン設定を更新して、宣伝文句の画像に境界線とボックスの影を付けます。

画像上部の境界線の幅：8px
画像の上部の境界線の色：＃2f3854
画像左ボーダー幅：8px
画像の左ボーダーの色：＃2f3854

イメージボックスの影：スクリーンショットを参照
ボックスシャドウの水平位置：-20px
ボックスシャドウの垂直位置：-30px
影の色：＃f89da9

次に、タイトルと本文のフォントと間隔を次のように更新します。

タイトルフォント：Yeseva One
ボディフォント：Montserrat
カスタムマージン：50px下
カスタムパディング：2vwボトム

最後に、宣伝文句モジュールにカスタムの境界線とボックスシャドウを指定して、次のようにフレームデザインのバランスを取ります。

右ボーダー幅：15px
右の境界線の色：＃2f3854
下の境界線の幅：15px
下の境界線の色：＃2f3854

イメージボックスの影：スクリーンショットを参照
ボックスシャドウの水平位置：20px
ボックスシャドウの垂直位置：35px
影の色：#dddddd

次に、モジュールをコピーして2列目と3列目に貼り付け、宣伝文句の画像を更新してデザインを完成させます。

これが最終結果です。

5.カーブリストとしての宣伝文のスタイリング

この次のデザインは、宣伝文を使用してリストを作成する楽しい方法です。いくつかのカスタムマージンを使用して、宣伝文リストのアイテムを湾曲させて、ページ上の要素を折り返すことができます。この例では、リストをカーブさせて、大きな宣伝文のアイコンの右側を折り返します。そして、あなたは少し創造的になることができます

まず、2列の行構造を持つ新しい通常のセクションを追加します。

宣伝文モジュールを追加する前に、次のように行設定を更新して、行にカスタム幅とガター幅を指定します。

カスタム幅：700px
側溝幅：2

次に、左側の列に宣伝文モジュールを追加して、大きな宣伝文アイコンを作成しましょう。次に、タイトルテキストとコンテンツを取り出します。次に、電球アイコンを選択します。これで、アイコンのみが表示されます。次に、アイコンの色とサイズを次のように更新します。

アイコンの色：＃96a6bd
アイコンのフォントサイズ（デスクトップ）：400px
アイコンフォントサイズ（スマートフォン）：200px

右側の列に、新しい宣伝文モジュールを追加します。これは、リストを構成する5つの宣伝文の最初のものになります。次に、モジュール設定を開き、タイトルテキストのみを残してコンテンツを取り出します。次に、宣伝文の右矢印アイコンを選択します。

次に、次のように設計設定を更新します。

背景色：＃bb7860
アイコンの色：#ffffff
画像/アイコンの配置：左
アイコンのフォントサイズを使用：はい
アイコンフォントサイズ：30px
タイトルフォント：Raleway
タイトルテキストの色：#ffffff
タイトルテキストサイズ：20px
タイトルラインの高さ：1.5em
カスタムマージン：5％ボトム
カスタムパディング：上3％、左10％、右2％

右側の列に合計5つの宣伝文が積み上げられるまで、モジュールを4回複製します。

次に、2番目の宣伝文に新しい色、右に押すためのカスタムマージン、およびクリエイティブな丸みを帯びた角を次のように指定します。

背景色：＃393e56
カスタムマージン（デスクトップ）：10％左、-10％右
カスタムマージン（タブレット）：0％左、0％右
丸みを帯びた角：右上50px、左下50px

このモジュールを終了する前に、宣伝文の設定のオプションを右クリックして、丸みを帯びた角をコピーします。

次に、宣伝文の設定を保存し、作成した最初の（上部の）モジュールを右クリックして、丸みを帯びた角を貼り付け、モジュールのスタイルを設定します。

それでは、最後の3つのモジュールを、適切な色、間隔、丸みを帯びた角のデザインで更新し続けましょう。

列の3番目の宣伝文については、以下を更新します。

背景色：＃96a6bd
カスタムマージン（デスクトップ）：左20％、右-20％
カスタムマージン（タブレット）：0％左、0％右
丸みを帯びた角：右上50px、右下50px

4番目の宣伝文については、以下を更新します。

背景色：＃393e56
カスタムマージン（デスクトップ）：10％左、-10％右
カスタムマージン（タブレット）：0％左、0％右
丸みを帯びた角：左上50px、右下50px

5番目の宣伝文については、4番目の宣伝文の丸い角をコピーして貼り付けます。

それでおしまい！最終的なデザインをチェックしてみましょう。

より多くの宣伝文句スタイルのインスピレーション

もっと楽しい宣伝文句のデザインを探求することに興味があるなら、以下のリンクをチェックしてください：

宣伝文には非対称に湾曲した背景を使用できます。
セクションディバイダーを使用して、クリエイティブなデザインで宣伝文句モジュールを組み立てることができます。
独自の背景画像の形状を作成して、幾何学的なグリッドレイアウトを作成できます。
宣伝文のアイコンを組み合わせて、片側のボックスシャドウの投稿のセクションの中央に配置されたグラフィック要素を作成する方法を学びます。
そして、さらにインスピレーションを与える宣伝文句スタイルのために、DiviBuilder内で利用可能な無料のDivi既製レイアウトを探索することを忘れないでください

これらの例が、Divi BlurbModuleで何が可能かを理解するきっかけになったと思います。ここは空が限界です。このモジュールは非常に人気があり、おそらく構築するほぼすべてのサイトで使用されるため、デザインが同じように見えないように、さまざまなアイデアのセットを用意することをお勧めします。場合によっては、色やフォントを変更するだけでまったく新しい外観になることがあるので、これらのアイデアを自由に取り入れて独自のものにしてください。

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

乾杯！