Diviでセクションディバイダーを使用して見事なテキストデザインを作成する方法

特に大量のCSSを使用したくない場合や、Photoshopでデザインした画像にseoに適したテキストを補足したくない場合は、Webサイトに独自のテキストデザインを作成するのは難しい場合があります。 Divi（および「すぐに使える」考え方）を使用すると、外部のCSSやカスタム画像を使用せずに、独自のテキストデザインを作成できます。 秘訣は、Diviのセクション仕切りを使用してテキストをオーバーレイし、さまざまな方法で区切りやテクスチャを追加することです。 このチュートリアルでは、Diviのセクション仕切りの力を調べて、ページヘッダーを次のレベルに引き上げる独自のテキストデザインを作成します。

始めましょう。

スニークピーク

この手法を使用して可能なテキストデザインのほんの数例を次に示します。

入門

このデザインでは、ビジュアルビルダーを使用して新しいページを作成する必要があります。 WordPressダッシュボードから、[ページ]> [新規追加]に移動します。 次に、ページにタイトルを付けて、ビジュアルビルダーをデプロイします。 「最初からビルド」オプションを選択します。 これで、開始する準備が整いました。

デザイン＃1：グラデーションハイライトのある壊れたテキスト

この最初のテキストデザインでは、セクション仕切りを使用してテキストを分割し、グラデーションの背景を使用して独自の形状の強調表示要素を追加します。 1列のレイアウトで新しいセクションを追加します。 この時点でモジュールを追加する必要はありません。 まず、セクションのカスタマイズから始めます。

セクション設定

セクション設定を開き、以下を更新します。

背景グラデーションの左の色：rgba（124,218,36,0.66）
背景グラデーションの右の色：rgba（0,106,193,0.61）

幅：80％
セクションの配置：中央

トップディバイダースタイル：スクリーンショットを参照
トップディバイダーカラー：#ffffff
トップディバイダーの高さ：1.8vw
トップディバイダー水平リピート：3x
トップディバイダーの配置：セクションコンテンツの上

ボトムディバイダースタイル：スクリーンショットを参照
ボトムディバイダーカラー：#ffffff
ボトムディバイダーの高さ：1.8vw
ボトムディバイダー水平リピート：3x
ボトムディバイダーの配置：セクションコンテンツの上

カスタムマージン：5vw上、5vw下
カスタムパディング：0px上、0px下

テキストのデザインはセクションの仕切りを使用して行われるため、仕切りが最小限の仕切りの高さでテキストと重なるように、パディングなしでセクションをコンパクトに保つ​​ことが重要です。 仕切りの高さをvwの長さの単位で設定すると、仕切りのスタイルが適切にスケーリングされ、すべての画面サイズで一貫したデザインが得られます。 セクションにカスタムマージンを与えることはオプションですが、テキストモジュールで負のマージンを使用してセクションの上下に拡張するため、間隔にも役立ちます（これは後でより意味があります）。

行設定

行の場合、必要なのは幅とパディングを調整することだけです。 次の行設定を更新します。

カスタム幅：100％
カスタムパディング：0px上、0px下

テキストが行の列に追加されるため、仕切りがテキストの上部と下部をハグするように、パディングを削除する必要があります。

テキストモジュールの設定

これで、最終的にテキストモジュールを1列の行に追加できます。 行内に、「ourwork」というコンテンツを含むテキストモジュールを追加します。 次に、次のように設計設定を更新します。

テキストフォント：Oswald
テキストフォントスタイル：TT
テキストテキストの色：＃0c71c3
テキストテキストサイズ：10vw
テキスト行の高さ：1em
テキストの向き：中央
カスタムマージン：-5vw上、-4vw下
カスタムパディング：2vw上、2vw下

ここで重要なのは、カスタムの負のマージンを使用して、セクションの上下にテキストを拡張することです。 これにより、セクションの仕切りをテキストの内側に重ねて、壊れたデザイン効果を作成できます。 また、背景のグラデーションが透けて見えるので、デザインも素敵です。 その結果は、おそらく私のお気に入りのテキストデザインのひとつであり、クリエイティブなバリエーションのトンへの扉を開きます。

これが最終的なデザインです。

テキストデザイン＃2：縦線テクスチャのテキスト

2番目のテキストデザインでは、先に進み、1列の行を持つ新しいセクションを作成します。 次に、テキストモジュールを列に追加します。 最初にセクションをカスタマイズするのではなく、テキストモジュールから始めるのが最善だと思いました。そうすれば、設計プロセスをよりよく理解できます。

テキスト設定

1列の行に、「私たちの仕事」という内容のテキストモジュールを追加します。 次に、次のように設計設定を更新します。

テキストフォント：ポピンズ
テキストフォントの太さ：超太字
テキストフォントサイズ：8vw
テキスト行の高さ：1em
テキストの向き：中央
カスタムマージン：0px上、0px下

行設定

行の設定は最初のデザイン例と同じになるため、行のスタイルをコピーしてこの行に貼り付けることができます。 または、次のように行設定を更新します。

カスタム幅：100％
カスタムパディング：0px上、0px下

セクション設定

次のようにセクション設定を更新します。

幅：70％

トップディバイダースタイル：スクリーンショットを参照
トップディバイダーカラー：#ffffff
トップディバイダーの高さ：8vw
トップディバイダー水平リピート：150x
トップディバイダーの配置：セクションコンテンツの上

ボトムディバイダースタイル：スクリーンショットを参照
ボトムディバイダーカラー：#ffffff
ボトムディバイダーの高さ：8vw
ボトムディバイダー水平リピート：150x
ボトムディバイダーフリップ：垂直
ボトムディバイダーの配置：セクションコンテンツの上

カスタムパディング：0px上、0px下

この設計の鍵は、Divider Horizo​​ntalRepeatオプションです。 仕切りの水平方向の繰り返しをテキストの高さに等しい高さで150xに設定すると、セクションの上部と下部から伸びる一連の重なり合う垂直線が作成されます。 「線」が上に伸びるように、BottomDividerを垂直方向に反転するように設定することを忘れないでください。

これが最終的なデザインです。

デザイン＃3：上部と下部に部分的なテクスチャのあるテキスト

この次の設計のプロセスをスピードアップするには、先に進んで、上記の2番目の設計例で作成したセクションを複製します。

セクション設定の更新

背景色：＃e02b20

トップディバイダースタイル：スクリーンショットを参照
トップディバイダーカラー：＃e02b20
トップディバイダーの高さ：3vw
トップディバイダー水平リピート：30x

ボトムディバイダースタイル：スクリーンショットを参照
ボトムディバイダーカラー：＃e02b20
ボトムディバイダーの高さ：3vw
ボトムディバイダー水平リピート：30x

ここで重要なのは、仕切りの色がセクションの背景色と一致していることを確認して、仕切りがテキストと重なっている場所でのみ表示されるようにすることです。

テキスト設定を更新する

あとは、テキストのテキストの色を更新するだけです。

テキストテキストの色：#ffffff

これが最終的なデザインです。

デザイン＃3に代わる楽しいデザイン

このデザインを離れる前に、このセクションの下部の仕切りを簡単に草に変えて、テキストがフィールドに座っているように見せることができる方法を共有したいと思いました。 これを行うには、次のように設定を更新します。

背景グラデーション左色：＃68a4d8（空）
背景グラデーション右色：＃1c7503（草）
開始位置：82％
終了位置：0％
カスタムパディング：5vwトップ
トップディバイダースタイル：雲（または泡？）
ボトムディバイダーカラー：＃1c7503

次に、テキストの色を＃000835に更新します

結果は次のとおりです。

モバイルはどうですか？

これらのデザイン全体でvwの長さの単位が使用されているため、テキストと仕切りのスタイルは、タブレットやスマートフォンで追加のサイズを割り当てる必要なしに、すべてのブラウザーで適切にスケーリングされます。 ただし、スマートフォンでテキストの縮小が少なすぎるという問題が発生した場合は、テキストサイズvw長さの単位値を増やす必要がある場合があります。

最終的な考え

ユニークなテキストデザインのセクションディバイダーを試して楽しんでいただけたでしょうか。 Diviで利用できるすべての異なるフォント、色、および仕切りスタイルを使用すると、次のプロジェクトのために独自の見栄えの良いテキストデザインを作成するのに問題はないと確信しています。

セクションディバイダーをクリエイティブな方法で使用する方法の詳細については、これらの背景テクスチャ、ナビゲーションメニューフレーム、および下部フッターバーの背景を確認してください。

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

乾杯！