ヒント、情報、警告などのためにDiviでスタイル付きコンテンツボックスを作成する方法（無料ダウンロード）

ヒント、警告、その他の重要な情報などのスタイル付きコンテンツボックスは、Webサイトやブログにとって便利な資産です。 これらは、ユーザーが高く評価する一貫したデザインで重要なコンテンツを紹介するための効果的で便利な方法です。 たとえば、チュートリアルで重要なヒントを強調したり、潜在的な問題についてユーザーに警告したりするためのコンテンツボックスのデザインが必要になる場合があります。

このチュートリアルでは、Diviで3つのコンテンツボックスデザインを作成する方法を紹介します。 これらのコンテンツボックスのデザインは、新しいアイコン、配色、コンテンツで簡単に調整して、ニーズに合わせることができます。 ボックスのデザイン方法を説明したら、Diviのグローバルプリセットを使用して、数回クリックするだけで新しいデザイン済みコンテンツボックスを簡単に展開できるようにする方法を説明します。 プラグインは必要ありません！

始めましょう！

スニークピーク

今日は、これら3つのメインコンテンツボックスのデザインをDiviで作成します。

これらの3つのメインコンテンツボックスデザインを使用すると、アイコン、色、テキストなどの簡単なカスタマイズを行って、あらゆる機会に無限のコンテンツボックスデザインを作成できます。

以下の無料ダウンロードに含まれている36の例を次に示します。

レイアウトを無料でダウンロード

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

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

無料でダウンロード

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

ダウンロード

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

セクションレイアウトをDiviライブラリにインポートするには、Diviライブラリに移動します。

[インポート]ボタンをクリックします。

移植性ポップアップで、[インポート]タブを選択し、コンピューターからダウンロードファイルを選択します。

次に、インポートボタンをクリックします。

完了すると、セクションレイアウトがDiviBuilderで使用できるようになります。

チュートリアルに取り掛かりましょう。

始めるために必要なもの

開始するには、次のことを行う必要があります。

1. まだインストールしていない場合は、Diviテーマをインストールしてアクティブ化します。
2. WordPressで新しいページを作成し、Divi Builderを使用してフロントエンド（ビジュアルビルダー）のページを編集します。
3. 「最初から構築」オプションを選択します。

その後、Diviでデザインを開始するための空白のキャンバスが作成されます。

Diviでコンテンツボックスデザインを作成する

コンテンツボックスの設計を開始する前に、DiviBuilderのデフォルトセクションに新しい1列の行を追加しましょう。

コンテンツボックスのデザイン＃1

最初のコンテンツボックスを作成するには、列に宣伝文モジュールを追加します。

[コンテンツ]タブで、以下を更新します。

• アイコンを使用：はい
• アイコン：スクリーンショットを参照
• 背景色：#ffffff
• 背景グラデーションの左の色：＃00529b
• 背景のグラデーションの正しい色：＃bde5f8
• グラデーション方向：90度
• 開始位置：3em
• 終了位置：0％

[デザイン]タブで、アイコンのスタイルを次のように更新します。

• アイコンの色：#ffffff
• 画像/アイコンの配置：左
• アイコンのフォントサイズを使用：はい
• アイコンフォントサイズ：2em

次に、テキストスタイルを次のように更新します。

• タイトルテキストの色：＃00529b
• タイトルテキストサイズ：1.5em
• タイトルラインの高さ：2em
• 本文の色：＃bde5f8
• 本文サイズ：1em
• ボディラインの高さ：2em

テキストスタイルを配置したら、次のようにサイズとパディングを更新します。

• コンテンツの幅：100％
• 最大幅：700px
• モジュールの配置：中央
• パディング：上2em、下2em、左5em、右2em

次に、次のように宣伝文に微妙なボックスシャドウを追加します。

• ボックスシャドウ：スクリーンショットを参照
• ボックスシャドウの垂直位置：0px
• ボックスシャドウブラー強度：88px
• ボックスシャドウスプレッド強度：-10px
• 影の色：rgba（0,0,0,0.17）

[詳細設定]タブで、宣伝文のアイコンにカスタムスタイルを設定して、前に使用した左側の背景のグラデーションの色と一致する背景色と境界線の色を持つ円の形にします。 また、アイコンを絶対位置に配置して、ドキュメント内の実際のスペースを占有することなく、必要な場所にアイコンを正確に配置できるようにします。

カスタムスタイルを追加するには、次のCSSコードを[宣伝文画像のCSS]ボックスに貼り付けます。

position:absolute;
margin-bottom: 0px;
border: 0.5em solid #00529b !important;
border-radius:50%;
background: #00529b;
transform: translateX(-3.75em);

注：コンテンツボックス（または宣伝文モジュール）の配色を変更する場合は、アイコンの境界線と背景の宣伝文画像CSSで使用されている色も更新する必要があります。

最終結果を確認してみましょう。

コンテンツボックスのデザイン＃2

2番目のコンテンツボックスデザインを作成するには、前の宣伝文モジュールを複製してデザインをジャンプスタートし、いくつかの変更を加えます。

このデザインでは、CSSグリッドプロパティを使用して、宣伝文の左側のアイコンを垂直方向の中央に配置します。

[デザイン]タブで、Blurb ImageCSSを次のように置き換えます。

margin-bottom: 0px;

次に、次のCSSを[宣伝文のコンテンツCSS]ボックスに追加します。

display: grid;
align-items: center;
justify-content: center;
grid-template-columns: 5em auto;
grid-gap: 2em;

グリッドの左側の列（アイコンを保持している列）の幅は5emに設定され、タイトルと本文を含む右側の列はautoに設定されます。 左のグラデーションカラーの幅を、アイコンを保持している5em幅のグリッド列に一致させる必要があります。 これを行うには、以下を更新します。

• 開始位置：5em

[デザイン]タブで、アイコンの配置とサイズを更新します。

• 画像/アイコンの配置：中央
• アイコンフォントサイズ：3em

左のパディングは必要ないので、取り出します。

これで、すべてがうまく整列するはずです。 最終結果を確認してください。

コンテンツボックスのデザイン＃3

3番目のコンテンツボックスデザインを作成するには、完成した2番目の宣伝文モジュール（コンテンツボックス）を複製します。

2番目の宣伝文が複製されたら、複製された宣伝文の設定を開きます。

[デザイン]タブで、アイコンの色を変更します。

• アイコンの色：rgba（255,255,255,0.3）

次に、before疑似要素にカスタムCSSを追加して、アイコンの上に垂直ラベルテキストを追加します（これにより、基本的に、blurbモジュール要素の前に追加のデザインやコンテンツを添付できます）。

ラベルを追加するには、次のCSSを[CSSの前]ボックスに貼り付けます。

content: 'key tip';
bottom:50%;
font-size: 1em;
line-height: 1em;
letter-spacing: 0.4em;
position:absolute;
transform: rotatez(-90deg) translateX(-50%) translateY(3em) !important;
transform-origin: bottom left;
color: #fff;
font-family: inherit;
font-weight: bold;
text-transform: uppercase;
z-index:1;

また、回転した垂直テキストに一致するようにアイコンを回転します。 これを行うには、次のCSSをBlurb ImageCSSボックスに追加します。

margin-bottom: 0px;
transform: rotateZ(-90deg);

これが最終結果です。

デザインの更新

本文のテキストサイズを変更して、コンテンツボックス要素のサイズを更新します

各コンテンツボックスは、主にemの長さの単位を使用して作成されます（ emは要素のルートボディのフォントサイズを基準にしています）。 このため、Diviの組み込みのデザイン設定で本文のテキストサイズを調整すると、コンテンツボックスのサイズがシームレスに拡大縮小されます。

カスタムCSSカラーを更新する

コンテンツボックスのデザイン＃1では、カスタムCSSを使用してアイコンにカスタムの背景と境界線の色を追加しました。 独自のデザインの配色に一致するように、borderプロパティとbackgroundプロパティに使用される色を必ず更新してください。

ラベルテキストの更新

コンテンツボックスのデザイン＃3では、 before疑似要素にカスタムCSSのラベルを追加しました。 テキストを更新するには、[CSSの前]ボックスのcontentプロパティの値を変更するだけです。

コンテンツボックスをDiviで再利用可能にする

モジュールをDiviライブラリに保存します

モジュールをDiviで再利用できるようにする主な方法は2つあります。 最初の方法は、モジュール（または任意の要素）をDiviライブラリに保存することです。

要素がライブラリに保存されると、ページに新しい要素を追加するときに、Diviライブラリでその要素を見つけることができます。

グローバルプリセットを使用する

モジュールをDiviで再利用可能にする2番目の主な方法は、そのモジュールのグローバルプリセットを作成することです。 モジュールのデザインをグローバルプリセットとして保存すると、そのグローバルプリセットを同じモジュールの他のインスタンスに簡単に追加できます。

この場合、各コンテンツボックス（または宣伝文句）の設定を開いて、それぞれに新しいグローバルプリセットを作成できます。 これを行うには、宣伝文モジュールの設定を開き、上部にあるプリセットオプションをクリックします。 次に、モジュール設定をカスタムスタイルからの新しいプリセットに変換します。

新しいプリセットに任意の名前を付けて保存します。

作成する宣伝文モジュールプリセットごとに、これらの手順を繰り返します。

今後さらにコンテンツボックスを作成するには、新しい宣伝文モジュールを追加して、使用するアイコンを選択するだけです。 次に、上部のプリセットドロップダウンをクリックし、選択したプリセットを選択して、アップロードされたプリセットのいずれかをアクティブにします。

最終結果

これが、私たちが作成した3つの主要なコンテンツボックスのデザインの最終的な外観です。

上記の無料ダウンロードに含まれているいくつかの簡単なカスタマイズで作成できる36のデザインがあります。

最終的な考え

私たちが作成したスタイル付きコンテンツボックスは、あらゆるWebサイトやブログの便利なデザインアセットになります。 Diviの強力なデザインオプションを利用して、コンテンツボックスを微調整して任意のデザインに合わせることができます。 さらに、それらを保存してDiviライブラリにアップロードしたり、グローバルプリセットを作成したりできるため、数回クリックするだけで、いつでもこれらのコンテンツボックスを展開できます。 うまくいけば、これらが役立つでしょう。

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

乾杯！