新しいDiviオプションでDividerモジュールを使用する10の楽しい方法

今日のDiviチュートリアルでは、以前のアップデートでDiviに追加された新しいオプションで何ができるかを垣間見ることができます。 より正確に; これらの新しい変更でDividerモジュールのスタイルを設定できる10の興味深い方法を共有します。 可能性は本当に無限ですが、この投稿は、次のプロジェクトに必要なインスピレーションを見つけるのに役立つかもしれません。

スニークピーク

このチュートリアルの最も優れた点の1つは、追加のCSS（またはそのことに関してはいかなる種類のコード）も使用しないという事実です。 作成するすべての例では、Dividerモジュールに含まれているオプションのみを使用します。 ステップバイステップでそれぞれを作成する方法を示す前に、構築する仕切りを簡単に見てみましょう。

新しいDiviオプションでDividerモジュールを使用する10の楽しい方法

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

再利用可能なセクションを作成する

最初に行う必要があるのは、10個の例すべてで使用するセクションを作成することです。 もちろん、他のコンテキストでも仕切りを使用できますが、最初にこのセクションを作成することで、独自のDivi Builderを試して、どちらが好きかを確認することができます。

新しいページを作成する

WordPressダッシュボードに新しいページを作成し、Divi Builderを有効にして、VisualBuilderを開くことから始めます。

3列の行でセクションを作成する

新しいページが表示されたら、標準セクションを作成し、その標準セクション内で3列の行を使用します。 セクションの背景色として「＃f4f4f4」を使用しました。

最初のテキストモジュールを追加

次に、最初のテキストモジュールを行の最初の列に追加します。 設定を開き、表示するテキストを入力して、[デザイン]タブに移動します。 [デザイン]タブで、[テキスト]サブカテゴリに次の変更を加えます。

• テキストフォント：ロブスター
• テキストフォントサイズ：35
• テキストの色：＃000000
• テキスト行の高さ：1.7em
• テキストの向き：中央

2番目のテキストモジュールを追加

最初のテキストモジュールを追加したら、そのすぐ下に別のテキストモジュールを追加できます。 表示するテキストを追加して、[デザイン]タブに移動します。 [デザイン]タブで、次の変更が適用されていることを確認します。

• テキストフォント：Roboto
• テキストフォントサイズ：14
• テキスト行の高さ：1.7em
• テキストの向き：中央

テキストモジュールのクローンを作成し、他の2つの列に配置する

これらの2つのテキストモジュールを作成したら、それらを行の他の2つの列に配置することもできます。

始める前に

Diviのディバイダーモジュールをスタイリングできる10の楽しい方法を共有します。 例のそれぞれには、互いに調和している3つの仕切りがあります。 ほとんどの設定は、3つのモジュールすべてで同じです。 まず、それぞれにカウントされる設定を示し、次に他の2つの仕切りに加える必要のある変更を示します。 したがって、最初の仕切りを終了するたびに、それを複製して他の2つの列に配置します。 それが済んだら、他の2つの仕切りに変更を加えることができます。

注：仕切りのそれぞれについて、[コンテンツ]タブ内の[仕切りを表示]オプションを有効にする必要があります。

1.ぼやけた三角形

最初のディバイダーモジュール設定

[コンテンツ]タブ

[コンテンツ]タブでは、次の背景設定を利用します。

• ファーストカラー：＃e09900
• 2番目の色：rgba（255,255,255,0）
• グラデーションタイプ：線形
• 勾配方向：176度
• 開始位置：13％
• 終了位置：31％

[デザイン]タブ

[デザイン]タブに移動し、次の設定が[サイズ設定]サブカテゴリに適用されることを確認します。

• 仕切りの重量：0
• 高さ：25px
• 幅：35％
• モジュールの配置：中央

同じタブを下にスクロールし、アニメーションサブカテゴリで次のアニメーション設定を使用します。

• アニメーションスタイル：スライド
• アニメーションの繰り返し：1回
• アニメーションの方向性：中央
• アニメーション時間：1200ms
• アニメーション強度：80％

2番目のディバイダーモジュール設定

[コンテンツ]タブ

[コンテンツ]タブで行う必要があるのは、最初のグラデーションの色を「＃0c71c3」に変更することだけです。

[デザイン]タブ

次に、アニメーションサブカテゴリに「250ms」のアニメーション遅延を追加する必要があります。

3番目のディバイダーモジュール設定

[コンテンツ]タブ

最後の仕切りの最初のグラデーションカラーを「＃8300e9」に変更します。

[デザイン]タブ

最後の仕切りのアニメーションサブカテゴリに追加する必要があるアニメーションの遅延は「500ms」です。

2.カラーシャドウ

最初のディバイダーモジュール設定

[コンテンツ]タブ

[コンテンツ]タブで次のグラデーションの背景設定を使用します。

• ファーストカラー：＃e09900
• 2番目の色：rgba（255,255,255,0）
• グラデーションタイプ：線形
• グラデーション方向：180度
• 開始位置：0％
• 終了位置：72％

[デザイン]タブ

[デザイン]タブで最初に行う必要があるのは、仕切りの色を「＃000000」に変更することです。

同じタブのStylesサブカテゴリ内で、「Solid」をDivider Styleとして使用し、「Top」をDividerPositionとして使用します。

下にスクロールし続け、次の変更をサイズ設定サブカテゴリに適用します。

• 仕切りの重量：2
• 高さ：20px
• 幅：70％
• モジュールの配置：中央

最後に、アニメーションサブカテゴリに次のオプション設定を使用します。

• アニメーションスタイル：バウンス
• アニメーションの繰り返し：1回
• アニメーションの方向性：中央
• アニメーション時間：2000ms

2番目のディバイダーモジュール設定

[コンテンツ]タブ

グラデーションの背景の最初のグラデーションの色を「＃0c71c3」に変更します。

[デザイン]タブ

アニメーションサブカテゴリ内で、アニメーション遅延オプションに「350ms」を追加します。

3番目のディバイダーモジュール設定

[コンテンツ]タブ

3番目の仕切りにも同じ変更を加えますが、代わりに「＃8300e9」の色を使用します。

[デザイン]タブ

最後に、「700ms」のアニメーション遅延を追加します。

3.グラデーションシリーズ

最初のディバイダーモジュール設定

[コンテンツ]タブ

最初の仕切りには、次のグラデーションの背景設定を使用します。

• ファーストカラー：＃0970a0
• 2番目の色：rgba（255,255,255,0）
• グラデーションタイプ：線形
• 勾配方向：119度
• 開始位置：0％
• 終了位置：86％

[デザイン]タブ

[デザイン]タブで、仕切りの色として[#FFFFFF]を選択します。

次に、Stylesサブカテゴリに次の変更を加えます。

• 仕切りスタイル：ソリッド
• 仕切りの位置：垂直方向の中央

同じタブにいる間に、次の設定がサイズ設定サブカテゴリに適用されることを確認します。

• 仕切りの重量：3
• 高さ：10px
• 幅：25％
• モジュールの配置：左

Spacingサブカテゴリ内の下部のパディングにも「15px」を追加します。

最後に、アニメーションサブカテゴリに次の設定を使用します。

• アニメーションスタイル：スライド
• アニメーションの繰り返し：1回
• アニメーションの方向：左
• アニメーション時間：2000ms
• アニメーション強度：100％

2番目のディバイダーモジュール設定

[コンテンツ]タブ

2番目の仕切りのグラデーションの背景設定は少し異なります。

• ファーストカラー：＃0970a0
• 2番目の色：rgba（255,255,255,0）
• グラデーションタイプ：ラジアル
• 半径方向：中心
• 開始位置：0％
• 終了位置：100％

[デザイン]タブ

Sizingサブカテゴリ内で、ModuleAlignmentをcenterに変更します。

最後に、アニメーションの方向も一元化します。

3番目のディバイダーモジュール設定

[コンテンツ]タブ

3番目の仕切りには、別のグラデーションの背景も含まれています。

• 最初の色：rgba（255,255,255,0）
• 2番目の色：＃0970a0
• グラデーションタイプ：線形
• 勾配方向：119度
• 開始位置：14％
• 終了位置：100％

[デザイン]タブ

2番目の仕切りに加えたのと同じ変更を加えますが、中央の代わりに右を使用します。

4.ローリングサークル

最初のディバイダーモジュール設定

[コンテンツ]タブ

次のグラデーションの背景設定を適用することから始めます。

• ファーストカラー：＃e09900
• 2番目の色：rgba（255,255,255,0）
• グラデーションタイプ：ラジアル
• 半径方向：中心
• 開始位置：20％
• 終了位置：21％

[デザイン]タブ

[デザイン]タブで最初に行う必要があるのは、仕切りに「＃000000」の色を使用することです。

次に、Dividerスタイルとして「Solid」を選択し、DividerPositionとして「VerticallyCentered」を選択します。

次に、サイジングサブカテゴリに次の変更を加えます。

• 仕切りの重量：2
• 高さ：50px
• 幅：40％
• モジュールの配置：中央

最後に、アニメーションサブカテゴリには次の設定が必要です。

• アニメーションスタイル：ロール
• アニメーションの繰り返し：1回
• アニメーションの方向性：中央
• アニメーション時間：1500ms
• アニメーションの遅延：850ms
• アニメーション強度：60％

2番目のディバイダーモジュール設定

[コンテンツ]タブ

最初のグラデーションの色を「＃0c71c3」に変更します。

[デザイン]タブ

そして、アニメーション遅延を「0ms」に変更します。

3番目のディバイダーモジュール設定

[コンテンツ]タブ

最後の仕切りについては、最初のグラデーションの背景色を「＃8300e9」に変更するだけで済みます。

5.ブラケット

最初のディバイダーモジュール設定

[コンテンツ]タブ

次のグラデーションの背景設定を使用します。

• 最初の色：＃e0d1b1
• セカンドカラー：＃e09900
• グラデーションタイプ：ラジアル
• 半径方向：中心
• 開始位置：36％
• 終了位置：100％

[デザイン]タブ

仕切りの色がセクションの背景色と同じであることを確認してください。 この場合、それは「＃f4f4f4」です。

デザインタブを下にスクロールし、「ダッシュ」をディバイダースタイルとして使用し、「トップ」をディバイダー位置として使用します。

次の設定をサイズ設定サブカテゴリに適用します。

• 仕切りの重量：100
• 高さ：18px
• 幅：60％
• モジュールの配置：中央

また、上下左右のパディングに「15px」を追加する必要があります。

最後に、次のアニメーション設定を使用します。

• アニメーションスタイル：ズーム
• アニメーションの繰り返し：1回
• アニメーションの方向性：中央
• アニメーション時間：1000ms
• アニメーション強度：80％

2番目のディバイダーモジュール設定

[コンテンツ]タブ

グラデーションの背景の色を「＃87acc1」と「＃0c71c3」に変更します。

[デザイン]タブ

次に、アニメーション期間を「1300ms」に変更し、アニメーション遅延を「250ms」に変更します。

3番目のディバイダーモジュール設定

[コンテンツ]タブ

3番目の仕切りで使用されているグラデーションカラーは「＃c9a4e8」と「＃8300e9」です。

[デザイン]タブ

アニメーション期間を「1300ms」に変更し、アニメーション遅延を「500ms」に変更します。

6.二重線

最初のディバイダーモジュール設定

[コンテンツ]タブ

次のグラデーションの背景設定を適用します。

• ファーストカラー：＃e09900
• 2番目の色：rgba（255,255,255,0）
• グラデーションタイプ：線形
• 勾配方向：179度
• 開始位置：0％
• 終了位置：45％

[デザイン]タブ

仕切りの色として「＃000000」を選択します。

Stylesサブカテゴリ内で、Divider Styleとして「Double」を使用し、DividerPositionとして「VerticallyCentered」を使用します。

次に、サイズ設定サブカテゴリに次の設定を使用します。

• 仕切りの重量：5
• 高さ：25px
• 幅：35％
• モジュールの配置：左

最後に、次のアニメーション設定を使用します。

• アニメーションスタイル：ロール
• アニメーションの繰り返し：1回
• アニメーションの方向：左
• アニメーション時間：1000ms
• アニメーション強度：50％

2番目のディバイダーモジュール設定

[コンテンツ]タブ

最初のグラデーションの色を「＃0c71c3」に変更します。

[デザイン]タブ

次に、2番目の仕切りに別のアニメーションを使用します。

• アニメーションスタイル：フェード
• アニメーションの繰り返し：1回
• アニメーション時間：1400ms

3番目のディバイダーモジュール設定

[コンテンツ]タブ

3番目の仕切りには、最初のグラデーションの背景色として「＃8300e9」を使用します。

[デザイン]タブ

[デザイン]タブで変更する必要があるのは、アニメーションの方向（この場合は「右」）だけです。

7.橋

最初のディバイダーモジュール設定

[コンテンツ]タブ

「＃8300e9」を背景に割り当てることから始めます。

[デザイン]タブ

引き続き、セクションの背景色を仕切りの色として使用します。この場合は「＃f4f4f4」です。

次に、「点線」をディバイダースタイルとして使用し、「トップ」をディバイダー位置として使用します。

サイジングサブカテゴリ内で、次の設定を使用します。

• 仕切りの重量：15
• 高さ：7px
• 幅：70％
• モジュールの配置：左

カスタムパディングも必要です。

• トップパディング：7px
• 右パディング：-7px
• 左パディング：-7px

使用するアニメーションには、次の設定があります。

• アニメーションスタイル：スライド
• アニメーションの繰り返し：1回
• アニメーションの方向：左
• アニメーション時間：800ms
• アニメーションの遅延：400ms
• アニメーション強度：30％

2番目のディバイダーモジュール設定

[コンテンツ]タブ

2番目の仕切りについては、背景を「＃0c71c3」に変更します。

[デザイン]タブ

別のアニメーションも使用します。

• アニメーションスタイル：ズーム
• アニメーションの繰り返し：1回
• アニメーションの方向性：中央
• アニメーション時間：800ms
• アニメーション強度：30％

3番目のディバイダーモジュール設定

[コンテンツ]タブ

3番目の仕切りは、背景色として「＃8300e9」を使用します。

[デザイン]タブ

3番目の仕切りのアニメーションも少し異なります。

• アニメーションスタイル：ズーム
• アニメーションの繰り返し：1回
• アニメーションの方向性：右
• アニメーション時間：800ms
• アニメーションの遅延：400ms
• アニメーション強度：30％

8.エレガンス

最初のディバイダーモジュール設定

[コンテンツ]タブ

最初のDividerに次のグラデーションの背景を追加することから始めます。

• 最初の色：＃000000
• 2番目の色：rgba（255,255,255,0）
• グラデーションタイプ：ラジアル
• 半径方向：中心
• 開始位置：20％
• 終了位置：20％

[デザイン]タブ

仕切りには「＃8300e9」の色を使用してください。

次に、「点線」を「ディバイダースタイル」として使用し、「垂直方向に中央揃え」をディバイダー位置として使用します。

「40px」の上部パディングも必要です。

そして、次の設定のアニメーション：

• アニメーションスタイル：バウンス
• アニメーションの繰り返し：1回
• アニメーションの方向：下
• アニメーション時間：1000ms

2番目のディバイダーモジュール設定

[デザイン]タブ

2番目の仕切りについては、色を「＃0c71c3」に変更します。

アニメーションにもいくつかの変更が必要になります。

• アニメーションの方向性：中央
• アニメーション時間1500ms

3番目のディバイダーモジュール設定

[デザイン]タブ

3番目の仕切りは、色として「＃8300e9」を使用します。

そして、アニメーションの方向として「上」があります。

9.繊細さ

最初のディバイダーモジュール設定

[コンテンツ]タブ

グラデーションの背景には、次の設定を選択します。

• ファーストカラー：＃8300e9
• 2番目の色：rgba（255,255,255,0）
• グラデーションタイプ：ラジアル
• 半径方向：中心
• 開始位置：0％
• 終了位置：38％

[デザイン]タブ

サイジングサブカテゴリ内で、次の設定が必要になります。

• 仕切りの重量：0
• 高さ：4px
• 幅：100％

最後に、使用するアニメーションには次の設定があります。

• アニメーションスタイル：バウンス
• アニメーションの繰り返し：1回
• アニメーションの方向性：上
• アニメーション時間1800ms

2番目のディバイダーモジュール設定

[コンテンツ]タブ

2番目の仕切りについては、最初のグラデーションの背景色を「＃0c71c3」に変更します。

3番目のディバイダーモジュール設定

[コンテンツ]タブ

3番目の仕切りにも同じ変更を加えますが、代わりに「＃8300e9」の紫色を使用します。

10.グロー

最初のディバイダーモジュール設定

[コンテンツ]タブ

最後の一連の仕切りには、次のグラデーション背景設定を使用します。

• ファーストカラー：
• 2番目の色：
• グラデーションタイプ：ラジアル
• 半径方向：中心
• 開始位置：0％
• 終了位置：38％

[デザイン]タブ

仕切りの色としてセクションの背景色も選択します。この場合は「＃f4f4f4」です。

次に、「ダッシュ」をディバイダースタイルとして使用し、「垂直方向に中央揃え」をディバイダー位置として使用します。

サイジングサブカテゴリ内で、次の設定を使用します。

• 仕切りの重量：70
• 高さ：20px
• 幅：100％

最後に、次のオプションを使用してアニメーションを使用します。

• アニメーションスタイル：フェード
• アニメーションの繰り返し：1回
• アニメーション時間：1800ms
• アニメーションの遅延：800ms

2番目のディバイダーモジュール設定

[コンテンツ]タブ

2番目の仕切りについては、2番目のグラデーションの背景色を「＃0c71c3」に変更します。

[デザイン]タブ

そして、「250ms」のアニメーション遅延を追加します。

3番目のディバイダーモジュール設定

[コンテンツ]タブ

最後の仕切りについては、2番目のグラデーションの背景色を「＃8300e9」に変更します。

[デザイン]タブ

そして、アニメーション遅延を「0ms」にして終了します。

最終的な考え

新しいDiviオプションを使用すると、各モジュールの組み込み設定を使用して、多くの新しい創造的なことが可能になります。 この投稿では、これらのオプションがDividerモジュールを介して設計を強化するのにどのように役立つかを具体的に示しました。 質問や提案がある場合; 下のコメントセクションにコメントを残してください！

大きなお知らせ、役立つヒント、Diviの景品を見逃さないように、必ずメールマガジンとYouTubeチャンネルを購読してください。

VikiVector / shutterstock.comによる注目の画像