Diviのデザイン要素に片面ボックスシャドウを追加する方法

Diviのさまざまなデザイン要素に片側のボックスシャドウを追加することは、コンテンツの邪魔をせずにクリエイティブな繁栄を追加するための微妙な方法です。 このチュートリアルでは、片側のボックスシャドウをDiviのTherapyFAQページレイアウトに追加する方法を紹介します。 ボーナスのヒントとして、宣伝文のアイコンを垂直方向に中央揃えのグラフィックとして組み合わせる方法も紹介します。 これらのDivi設計手法を学習することにより、必要なモジュールまたは列に片側ボックスシャドウを追加できます。

始めましょう。

スニークピーク

これは、片側のボックスシャドウを使用して作成するFAQレイアウトデザインの概要です。

入門

開始するには、新しいページを作成する必要があります。 WordPressダッシュボードから、[ページ]> [新規追加]に移動します。 次に、ページにタイトルを付けて、ビジュアルビルダーをデプロイします。 「既成のレイアウトを選択」オプションを選択します。 [ライブラリからロード]ポップアップから、Therapist LayoutPackを見つけて選択します。 次に、セラピストのFAQページレイアウトを選択し、「このレイアウトを使用」をクリックします。

これで、設計を開始する準備が整いました。

パート1：レイアウトの整理

この既成のレイアウトでは、複数のトグルモジュール内の模擬質問を含む2番目のセクションに注目します。 手始めに、行の列レイアウトを3列（1/3 1/3 1/3）に変更しましょう。

次に、Diviの複数選択機能を使用して、列2のすべてのモジュールを列3に移動します。 これを行うには、コマンド（またはコントロール）を押したまま、すべてが選択されるまで列2の各モジュールをクリックします。 次に、それらを列3にドラッグします。

次に、行にもう少しスペースを与える必要があります。 行設定を開き、以下を更新します。

幅：80％
側溝幅：2
列の高さを等しくする：はい

パート2：トグルモジュールの設計

このセクションのすべてのトグルモジュールのデザインを一度にカスタマイズするには、複数選択機能を使用して各トグルモジュールを選択します。 すべてを選択したら、いずれかのトグルモジュールの設定を開きます。

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

トグルテキストの色を開く：#ffffff
トグルの背景色を開く：rgba（0,0,0,0）
閉じたトグルテキストの色：#ffffff
閉じたトグルの背景色：rgba（0,0,0,0）

本文の色：#ffffff

カスタムパディング：3vw上、3vw下、2vw左、2vw右

これで、ボックスシャドウオプションを次のように更新することで、トグルモジュールの左側にボックスシャドウを追加できます。

ボックスシャドウの水平位置：-30px
ボックスシャドウの垂直位置：0px
ボックスシャドウブラー強度：40px
ボックスシャドウスプレッド強度：-35px
影の色：rgba（0,0,0,0.4）

ボックスの影を正しく配置する秘訣は、水平位置を-30pxに設定して、影を左に移動することです。 その後、モジュールの上下ににじみ出さずにボックスの影が左側に表示されるようにするには、ぼかしの強さと広がりの強さの適切なバランスを見つける必要があります。

設定を保存する。

これで、すべてのトグルモジュールが新しいデザインで更新されました。

ただし、右側の列のトグルモジュールのボックスシャドウを左側ではなく右側に配置する必要があります。 これを変更するには、複数選択を使用して右側の列のすべてのトグルモジュールを選択し、要素設定を開きます。 次に、水平位置を-30pxから30pxに次のように変更します。

ボックスシャドウの水平位置：30px

次に、設定を保存します。

これにより、独自の片側ボックスシャドウを備えたトグルモジュールが処理されます。 次に、同様の片側ボックスシャドウを列に追加する必要があります。

パート3：片面ボックスシャドウを列に追加する

片側のボックスシャドウを列に追加するには、行設定の[詳細設定]タブにCSSのスニペットをいくつか追加する必要があります。

行設定を開き、[詳細設定]タブをクリックします。 列1のメイン要素内に、次のCSSを追加します。

ボックスシャドウ：30px 0px 70px -45px rgba（0,0,0,0.4）

CSSに慣れていない場合は、Diviビルダーで使用可能なボックスシャドウモジュール設定とコードの類似性を認識できるはずです。 上記のコードでは…

30pxは水平位置の値です
0pxは垂直位置の値です
70pxはぼかし強度の値です
-45pxは広がりの強さの値です
rgba（0,0,0,0.4）は影の色です

コラムボックスの影にトグルモジュールよりも大きなぼかし強度を与えて、わずかに深い深さを作成しました。

左側のボックスの影を列3に追加するには、次のCSSを列3のメイン要素に追加する必要があります。

box-shadow: -30px 0px 70px -45px rgba(0,0,0,0.4)

この場合も、このCSSと列1に使用されるCSSの唯一の違いは、負の水平位置です。

パート4：列2への宣伝文のアイコンの追加

片側のボックスシャドウが完成したので、空の中央の列ができました。ここで、いくつかの宣伝文句モジュールアイコンを組み合わせて、シンプルなグラフィックデザインを作成できます。 これを行うには、最初に宣伝文モジュールを追加し、タイトルとコンテンツを削除します。 次に、クリックしてアイコンを使用し、次のチャットアイコンを選択します。

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

アイコンの色：rgba（203,241,252,0.37）
アイコンフォントサイズ：20vw
カスタムマージン：0px下

次に、宣伝文モジュールを複製して、その下に追加のモジュールを作成します。

次に、疑問符アイコンで上部の宣伝文を更新し、次のデザイン設定を更新します。

アイコンフォントサイズ：9vw
幅：40％
モジュールの配置：右
カスタムマージン：-2vw

最後に、設計した疑問符の宣伝文モジュールをコピーして、大きなチャットアイコンの宣伝文句モジュールの下に貼り付けます。 次に、その宣伝文モジュールのデザイン設定を次のように更新します。

パート5：列2のモジュールを垂直方向に中央揃え

デザインを完成させるには、列2の宣伝文アイコンを垂直方向に中央に配置して、レイアウトの中央に配置されたデザイン要素のままにする必要があります。 これを達成するために、Diviのフレックスの使用を活用します。 行の列の高さを等しくすることを選択したため、CSSの単純なスニペットを使用して、すべてのモジュールを列2内の中央に配置できます。Diviでコンテンツを垂直方向に整列する方法については、いつでも詳しく知ることができます。 ただし、今のところ、行設定を開いて[詳細設定]タブをクリックします。 次に、列2のメイン要素内に次のcssを入力します。

margin: auto

これで、すべての宣伝文句モジュールが列2の垂直方向の中央に配置されます。

見やすくするために、1列目と2列目の上部にある各テキストモジュールの中央にテキストを配置します。次に、次のようにセクションに背景のグラデーションを追加します。

背景グラデーションの左の色：＃616ce1
背景のグラデーションの正しい色：＃3846e0

それでおしまい。 これで設計が完了しました。

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

また、トグルを開いたり閉じたりすると、ボックスの影がどのように拡大および縮小するかに注目してください。

最終的な考え

モジュールと列に片側のボックスシャドウを追加すると、創造的な方法でコンテンツに深みを与えることができます。 秘訣は、Diviのボックスシャドウデザイン設定を効果的に調整する方法を知ることです。 このFAQページのレイアウトは、このデザインを組み込むことができる多くの例の1つにすぎません。 しかし、全体的なプロセスは非常に単純であり、将来のプロジェクトのために設計ツールボックスに保持できる優れた手法になるはずです。

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

乾杯！