Diviのコンテンツのデザインアクセントとして宣伝文句のスタイルを設定する方法

デザインのアクセントとして宣伝文句アイコンを使用すると、ページレイアウトに、これまで考えたことのないユニークなデザインを与えることができます。 宣伝文モジュールのアイコンをテキストモジュールと重なるように配置することに加えて、テキストモジュールの背景と境界線を使用してアイコンのスタイルを設定できます。 これにより、アイコンに完全にユニークなデザインを与えながら、コンテンツを構成する素敵なデザインアクセントが作成されます。

このチュートリアルでは、Diviのコンテンツのデザインアクセントとして宣伝文句のスタイルを設定する方法を紹介します。

飛び込みましょう！

スニークピーク

このチュートリアルで作成するデザインの例をいくつか示します。

このチュートリアルのレイアウト例をダウンロードする

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

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

無料でダウンロード

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

ダウンロード

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

ゼロから設計を構築するための開始

開始するには、新しいページを作成し、ページにタイトルを付けます。 次に、Diviビルダーをフロントエンドにデプロイします。 1列の行を持つ通常のセクションを追加します。 最初のモジュールを追加する前に、次のように行設定を更新してください。

カスタムガター幅を使用：はい
カスタムガター幅：1

これにより、モジュール間のカスタムマージンがなくなります。

テキストモジュールの作成

次に、行内にテキストモジュールを追加します。

次のフィラーテキストでテキストモジュールを更新します。

<h2>Our Services</h2>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. </p>

テキストモジュールのスタイリング

次に、残りのテキストモジュール設定を次のように更新します。

背景色：#ffffff

• 見出し2フォント：Nunito
• 見出し2フォントの太さ：太字
• 見出し2フォントスタイル：TT
• 見出し2のテキストの色：＃f24a5b
• 見出し2テキストサイズ：42px（デスクトップ）、32px（タブレット）、22px（電話）
• 見出し2文字間隔[acing：16px
• 見出し2行の高さ：1.3em

• 幅：500px（デスクトップ）、490px（タブレット）
• モジュールの配置：中央
• カスタムパディング（デスクトップ）：上40px、下40px、左50px、右50px
• カスタムパディング（電話）：左20px、右20px
• ボーダー幅：10px
• ボーダーカラー：#ffffff

テキストモジュールを宣伝文のアイコンと重ね合わせるので、テキストモジュールがアイコンの上にz空間順に配置されていることを確認する必要があります。 これを行うには、最初に次のCSSスニペットをテキストモジュールのメイン要素のCSSボックスに追加する必要があります。

position: relative;

次に、z-index値を1に設定します。

これで、このテキストモジュールは、設計にとって重要な他の重複するモジュールの上に配置されます。

宣伝文アイコンの作成

これで、最初の宣伝文句アイコンを作成する準備が整いました。 これを行うには、最初に宣伝文モジュールを追加し、それをテキストモジュールの上部にドラッグする必要があります。 次に、モックコンテンツ（タイトルテキストと本文テキスト）を削除し、クリックして宣伝文の画像の代わりにアイコンを使用します。

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

• アイコンの色：＃2ea3f2
• アイコンのフォントサイズを使用：はい
• アイコンフォントサイズ：100px
• カスタムマージン：0pxボトム（これにより、モジュール間のデフォルトのボトムマージンが削除されます。行ガター幅1を使用している場合は必要ありません）

次に、モジュールでテキストを使用していないため（アイコンのみ）、宣伝文のアイコンの下にあるデフォルトの下マージンを取り除くことができます。 これを行うには、次のカスタムCSSを[宣伝文画像CSS]ボックスに追加します。

宣伝文の画像CSS：

margin-bottom: 0px

宣伝文のアイコンを複製する

宣伝文の配置を開始する前に、宣伝文モジュールを複製し、複製をテキストモジュールの下にドラッグしましょう。 これで、テキストモジュールの上下に宣伝文句アイコンが表示されます。

変換変換を使用した宣伝文のアイコンの配置

宣伝文のアイコンを配置するには、Diviの変換オプションを使用して、ページ上の任意の場所にアイコン付きの宣伝文モジュールを配置できるようにします。

宣伝文のアイコン＃1の配置

上部の宣伝文アイコンを配置するには、宣伝文モジュールの設定を開き、以下を更新します。

• 変換変換X軸（デスクトップ）：-242px
• 変換変換Y軸（デスクトップ）：50px
• 変換変換X軸（電話）：-170px

宣伝文のアイコン＃2の配置

この宣伝文のアイコンを配置する前に、少し大きくしましょう。 これを行うには、宣伝文モジュールの設定を開き、アイコンのフォントサイズを150pxに変更します。

次に、次の変換オプションを更新して、宣伝文のアイコンを配置します。

• 変換変換X軸（デスクトップ）：242px
• 変換変換Y軸（デスクトップ）：-100px
• 変換変換X軸（電話）：190px

2列の行の作成

次の列を作成するには、既存の行を複製し、行の列レイアウトを2列レイアウト（1/2 1/2）に変更します。

次に、Diviの複数選択機能を使用して、左側の列の3つのモジュールすべてを選択し、それらをコピーして2番目の列に貼り付けます。

次に、1列目の下部の宣伝文アイコンを削除します。

列2の宣伝文のアイコンを揃える

列2の宣伝文句アイコンについては、上のアイコンを左に、下のアイコンを右にシフトする必要があります。 これは、Transform TranslateX軸の値を変更するだけで実行できます。

列2の一番上の宣伝文モジュールの宣伝文モジュール設定を開き、以下を更新します。

• 変換変換X軸（デスクトップ）：242px
• 変換変換X軸（電話）：170px

基本的には、これらの値を負から正に変更して、x軸に沿って反対方向にシフトするだけです。

次に、列2の下部の宣伝文モジュールの変換変換値を次のように更新します。

• 変換変換X軸（デスクトップ）：-242px
• 変換変換X軸（電話）：-190px

2行目のテキストモジュールスタイルを更新する

コンテンツの2行目は、注目のサービスのサブセットとして機能します。 したがって、タイトルのフォントサイズをヘッダーとは異なり、ヘッダーよりも小さくする必要があります。 2つのテキストモジュールを同時に更新するには、multiselectを使用して両方のテキストモジュールを選択します。 次に、以下を更新します。

h2の見出しの内容を「サービス」に変更します。

• 見出し2テキストサイズ：28px（デスクトップ）、22px（タブレット）、18px（電話）

設定を保存する。

次に、列2のテキストモジュールの設定モーダルを開き、以下を更新します。

• テキストの向き：右

レイアウトの間隔の調整

現在、コンテンツの2つの行の間に白（または負）のスペースが少し多すぎる可能性があります。 そのスペースの一部を取り除くために、次のように、一番上の行の一番下の宣伝文モジュールに負のボトムマージンを追加できます。

• カスタムマージン：-100px下

最終結果

それでは、最終結果を見てみましょう。

他のアイコンを試す

レイアウトのさまざまなアイコンを試すには、検索と置換機能を使用できます。 アイコンを含む宣伝文の1つの宣伝文の設定を開きます。 次に、設定モーダルのアイコンを右クリックして、[検索と置換]を選択します。

[検索と置換]ポップアップで、以下を更新します。

• 内：このセクション
• 置換：[新しいアイコンを選択]

その後、置換ボタンをクリックします。

これにより、セクション内のすべての宣伝文が新しい宣伝文に変更されます。

さまざまなアイコンを使用したレイアウトの例を次に示します。

最終的な考え

コンテンツにデザインアクセントとして宣伝文句アイコンを追加することは、2つのモジュールを組み合わせて完全にユニークなデザインを作成する方法の例です。 この場合、テキストモジュールの背景と境界線は、周囲のアイコンの部分的なオーバーレイとして機能します。 その結果はユニークであり、より多くのデザインバリエーションを探求するための扉を開きます。 さまざまなアイコンや色の組み合わせを自由に調べて、自分のニーズに合ったものを作成してください。

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

乾杯！