Diviのテキストモジュールを使用してDiviページデザインにブロック要素を作成する

テキストモジュールは、Diviで作成するページデザインの重要な部分です。これは、私たち全員が同意できることだと確信しています。 通常、これらはテキストを簡単な方法で表示するために使用されます。 ただし、テキストモジュールを使用して、見事なデザイン要素を作成することもできます。 以前のブログ投稿では、テキストを使用してWebデザインを向上させる方法をすでに示しました。

このチュートリアルでは、ページをデザインしてテキストモジュールを使用するときに選択できるオプションを引き続き追加します。 ご存知かもしれませんが、同じテキストモジュール内で組み合わせることができるいくつかの異なるテキストタイプがあります。 さらに、1つのモジュールに複数の見出し、段落、リンクなどを含めることができます。 この投稿では、これらすべてのテキストタイプを活用して、ページデザインに見事なブロック要素を作成します。

それを手に入れよう！

プレビュー

チュートリアルに入る前に、さまざまな画面サイズでの最終結果を見てみましょう。

始めましょう！

新しい通常のセクションを追加する

背景色

現在作業しているページに新しい通常のセクションを追加することから始めます。 次に、セクション設定を開き、背景色を変更します。

• 背景色：＃000000

間隔

次にセクションの間隔設定に移動し、いくつかのカスタムパディング値を追加します。

• トップパディング：280px（デスクトップ）、150px（タブレットと電話）
• 下部のパディング：280px（デスクトップ）、150px（タブレットと電話）

新しい行を追加

カラム構造

セクション設定の変更が完了したら、次の列構造を使用して新しい行を追加します。

サイジング

モジュールを追加せずに、行設定を開き、サイズ設定で行が画面の幅全体を占めるようにします。

• この行を全幅にする：はい
• カスタムガター幅を使用：はい
• 側溝幅：1

間隔

最後に、[間隔]設定にカスタムパディングを追加します。

• 列1の左パディング：100px（デスクトップとタブレット）、50px（電話）
• 列2カスタムパディング：50px
• 列3カスタムパディング：50px

タイトルテキストモジュールを列1に追加

コンテンツボックス

さまざまなモジュールの追加を開始する時が来ました！ 最初の列に必要な最初のモジュールはテキストモジュールです。 コンテンツボックスにH2コンテンツを追加します。

H2テキスト設定

次に、H2テキスト設定に移動し、いくつかの変更を加えます。

• 見出し2フォント：ソースコードプロ
• 見出し2フォントスタイル：大文字
• 見出し2のテキストの色：#ffffff
• 見出し2テキストサイズ：100px
• 見出し2文字の間隔：24px

間隔

負の上部マージンを使用して、上部のスペースを減らします。

• トップマージン：-50px

説明テキストモジュールを列1に追加

テキスト設定

最初の列に必要な2番目のモジュールは、説明テキストモジュールです。 コンテンツを追加したら、テキスト設定に移動して、いくつかの変更を加えます。

• テキストフォント：ソースコードプロ
• テキストの色：#ffffff
• テキストの向き：正当化

サイジング

テキストモジュールの幅も狭くします。

• 幅：68％

間隔

最後になりましたが、[間隔]設定で、このテキストモジュールと前のテキストモジュールの間にスペースを作成します。

• 上マージン：200px（デスクトップ）、100px（タブレットと電話）
• 下マージン：100px（タブレットと電話）

ブロックテキストモジュールを列2に追加

コンテンツボックス

2番目の列に移動する時が来ました！ ここでは、テキストモジュールを使用してブロック要素を作成します。 この作業を行う上で重要なのは、コンテンツボックスを正しく構成することです。 以下の印刷画面では、H3タイトル、H4タイトル、段落、およびリンクを使用していることがわかります。 H4のタイトルと段落の間に、追加のスペースも残っていることを確認しています。

背景色

テキストモジュールに黒の背景色を追加します。

• 背景色：＃000000

テキスト設定

各テキストタイプを個別に変更します。 段落設定を変更することから始めます。

• テキストフォント：ソースコードプロ
• テキストの向き：左
• テキストの色：明るい

リンクテキスト設定

次に、リンク設定にいくつかの追加の変更を加えます。

• リンクフォントスタイル：大文字と下線
• リンクの下線の色：#ffffff
• リンクテキストの色：＃edf000
• リンクテキストサイズ：16px
• リンク文字の間隔：3px

見出し3のテキスト設定

コンテンツボックスのH3タイトルには、次の設定が必要です。

• 見出し3フォントスタイル：大文字
• 見出し3テキストサイズ：33px

見出し4テキスト設定

H4テキスト設定を開いて続行し、そこでもいくつかの変更を加えます。

• 見出し4のテキストの色：＃4f4f4f
• 見出し4テキストサイズ：19px
• 見出し4文字の間隔：-1px

サイジング

必要な形状を正確に作成するために、次にテキストモジュールの幅を狭くします。

• 幅：88％（デスクトップ）、60％（タブレット）、90％（電話）

間隔

間隔の設定も変更する必要があります。

• 左マージン：200px（タブレット）
• トップパディング：50px
• ボトムパディング：50px
• 左パディング：50px
• 右パディング：50px

国境

次に、テキストモジュールに微妙な境界線を追加します。

• ボーダー幅：2px
• ボーダーカラー：＃424242

ボックスシャドウ

最後に、カラフルなボックスシャドウを追加します。

• ボックスシャドウの水平位置：19px
• ボックスシャドウの垂直位置：16px
• ボックスシャドウスプレッド強度：-4px
• 影の色：＃f2ff00

ブロックテキストモジュールのクローンを2回作成し、列3に配置します

時間を節約するために、2回作成したブロックテキストモジュールのクローンを作成し、両方の複製を行の3番目の列に配置します。

赤いテキストモジュールの変更

リンクテキストの色を変更する

3番目の列の最初のテキストモジュールを開き、リンクの色を変更します。

• リンクテキストの色：＃e02b20

間隔を変更する

次に、[間隔]設定に移動し、上部マージンを追加します。

• 上マージン：-150px（デスクトップ）、-20px（タブレット）、50px（電話）

ボックスの影の色を変更する

ボックスシャドウの色を、リンクテキストに使用されているのと同じ色に変更します。

• 影の色：＃e02b20

ブルーテキストモジュールの変更

リンクテキストの色を変更する

3番目の列の2番目のテキストモジュールのリンクの色も変更します。

• リンクテキストの色：＃0ff3ff

サイズを変更する

次に、サイズ設定を変更します。

• サイズ：67％（デスクトップ）、60％（タブレット）、90％（電話）

間隔を変更する

また、このモジュールと他の2つのテキストモジュールの間にオーバーラップを作成するには、カスタムマージン値を試してみてください。

• 上マージン：-20px（デスクトップ）、-30px（タブレット）、50px（電話）
• 左マージン：-160px（デスクトップ）、200px（タブレット）、0px（電話）

ボックスの影の色を変更する

最後に、ボックスの影の色をリンクテキストに使用されているのと同じ青色に変更すると、完了です。

• 影の色：＃0ff3ff

プレビュー

すべての手順を完了したので、さまざまな画面サイズでの結果を最後に見てみましょう。

最終的な考え

テキストモジュールをDiviの組み込みオプションと組み合わせて使用​​すると、いくつのユニークなデザインを実現できるかに驚かれることでしょう。 追加のCSSコードは必要ありません。 この投稿では、さまざまなテキストタイプを使用して、Diviページデザインに見事なブロック要素を作成する方法を紹介しました。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！