人気の WordPress テーマであるDivi は、Web サイトのデザイナーや開発者が簡単に魅力的なレイアウトを作成できるようにする多用途のモジュールで知られています。その印象的なモジュール群の中でも、Divi Divider Module は、ユーザーが魅力的なディバイダーを作成できるユニークなツールとして際立っています。このブログ記事では、魅力的なグラデーション ディバイダーの世界を詳しく調べ、 Divi Divider Module を活用してデザインを強化する方法を探ります。グラデーション ディバイダーの仕組みを詳しく見ていき、創造性を刺激する刺激的な例を紹介します。
プレビュー
グラデーション デザインが最終的にどのようになるかのプレビューを以下に示します。
Divi の Divider モジュールを使用してグラデーションの区切り線を作成する方法
Divi の Divider モジュールを使用して区切り線を構築する方法は複数あります。デフォルトでは、モジュールは区切り線として線を表示します。ただし、この線を無効にして、モジュールの背景設定を使用して、色、グラデーション、画像などのさまざまな背景オプションを使用してカスタマイズできる区切り線を生成することができます。実際の区切り線を表示する代わりに、区切り線のコンテナーのスタイル設定に焦点を当てて、独自のスタイルの区切り線を作成します。
区切り線を非表示
手順は簡単です。まず、レイアウトに区切りモジュールを追加し、コンテンツ タブで区切りを非表示にします。
素晴らしいウェブサイトを作成します
最高の無料ページビルダーElementor を使用
今すぐ始める
区切り線の背景
次に、「コンテンツ」タブの「背景設定」メニューから、使用する背景の種類を選択します。この投稿では、「背景のグラデーション」オプションに焦点を当てます。
サイズと間隔を追加する
ほぼあらゆるサイズや形状のスタイリッシュな仕切りを作成するには、[デザイン] タブの [サイズと間隔] オプションを使用して、仕切りのコンテナーの高さと幅を調整します。目的のサイズを生成するには、幅と高さ、最大幅と最大高さ、モジュールの配置、および上部と下部のパディングを使用します。
境界線の半径を追加
図形のスタイルをさらに調整するには、境界線の半径などの境界線オプションを追加します。角を一緒にまたは個別に調整して、魅力的な図形を作成できます。特別なデザインの場合は、境界線の幅、スタイルなどを追加できます。
グラデーション区切り線
最初のグラデーション区切り線には、Divi に含まれている無料のHome Baker レイアウト パックのランディング ページを使用します。このレイアウト パックのアートワークには、茶色のグラデーションと強力な暗いアウトラインが使用されています。レイアウト パックのカラー パレットを使用して、グラデーションでこれを再現します。最初のイラストには、ヒーロー セクションにすでに存在する区切り線モジュールを使用します。これは単純ですが、視覚的なインパクトは大きいです。以下は、区切り線モジュールを追加する前のレイアウトです。
可視性
区切り線モジュールの表示オプションで、[区切り線を表示] に [いいえ] を選択します。
- 区切り線を表示: いいえ
勾配
背景まで下にスクロールして、背景グラデーション タブを選択します。このグラデーションには 5 つのグラデーション ストップを追加します。他のグラデーション パラメータにはデフォルト値が使用されます。各グラデーション ストップのパラメータは以下のとおりです。
- 最初のグラデーションストップ: 0px、#dcc087
- 2 番目のグラデーションストップ: 16 ピクセル、#e6b060
- 3 番目のグラデーションストップ: 22px、#f19d33
- 4 番目のグラデーションストップ: 31px、#f49826
- 5 番目のグラデーションストップ: 48px、#3b261e
グラデーションの単位はピクセルです。求めていた色合いが揃いました。あとはサイズを最適化するだけです。
- グラデーション単位: ピクセル
サイズ
その後、「デザイン」タブを選択します。「サイズ」の「幅」を 100% に設定します。3 つのデバイス サイズすべてで、高さを 40 ピクセルに設定する必要があります。モジュラー クロージャによって設定が保存されます。
- 幅: 100%
- 高さ: 40ピクセル
最終プレビュー
ここで、グラデーション デザインの実際の最終プレビューを示します。
最後に
これで、 Diviの Divider モジュールを使用してグラデーション ディバイダーを作成する方法についての説明は終了です。カスタム グラデーション ディバイダーを作成するには、Divider モジュールのグラデーション オプションを使用します。境界線の角、間隔、およびサイズ設定オプションを利用することで、さまざまなサイズと形状のグラデーション ディバイダーを作成できます。いくつかの基本的な選択を行うだけで、他のユーザーから目立つ独特のグラデーション ディバイダーを設計できます。
