クリエイティブリストデザインのためのDiviのテキストモジュールの力を解き放つ

公開: 2018-08-16

ユニークなリストデザインを作成することは、ウェブデザインの重要な側面です。読者は、適切に設計されたリストの構造と美学を高く評価しています。これにより、情報をはるかに迅速に処理できるようになります。

Diviのテキストモジュールを使用すると、通常のリストを美しい芸術作品に変換するために必要なすべてが揃っています。 Diviのテキストモジュール設定を使用すると、リストを含むコンテンツ内のさまざまなhtml要素をターゲットにしてスタイルを設定できます。また、いくつかの設計手法を使用すると、これらのオプションの機能を利用して、驚くべき方法でリストをカスタマイズできます。

このチュートリアルでは、Diviで独自のリストデザインを作成する方法を紹介します。

始めましょう。

スニークピーク

これは、このチュートリアルで作成する4つのリストデザインの概要です。

ディビリストデザイン

テキストモジュール設定に触発された

あなたが私のようなら、DiviBuilderの奥深くに潜んでいる「隠された」オプションのいくつかを見落とす傾向があるかもしれません。いくつかの宝物が埋め込まれているモジュールの1つに、テキストモジュールがあります。テキストモジュールの設定には、さまざまなhtml要素のスタイルオプションを保持する複数のタブがあります。これは非常に便利でクリエイティブなデザインツールになります。これらのタブには、本文、リンク、順序なしリスト、順序付きリスト、およびブロック引用符のオプションが含まれています。

ディビリストデザイン

そして、これらのタブの下には、デザインで利用することを考えていなかったかもしれないいくつかの隠された宝石があります。たとえば、順序付けされていないリストのリストスタイルオプションを変更できることをご存知ですか？ローマ数字や先行ゼロの付いた小数など、いくつかの固有のオプション（正確には18）が利用可能です。

ディビリストデザイン

これらは取るに足らないように思えるかもしれませんが、デザインオプションを利用すると、いくつかの本当にクリエイティブなデザインを作成できます。

見出しスタイルオプションの下の各タブで、さまざまな見出しレベル（またはタグ）のスタイルをターゲットにすることもできます。

ディビリストデザイン

コンテンツ内の複数のhtml要素をターゲットにするこの機能は、いくつかの素晴らしい可能性を開きます。うまくいけば、彼らもあなたに刺激を与えるでしょう。

詳細については、これらのすばらしいテキストオプションのいくつかを説明する機能の更新を確認してください。

HTMLリストの作成

HTMLリストは、「順序付け」（数字、ローマ数字など）または「順序付けなし」（正方形のアイコン、円のアイコンなど）のいずれかです。順序付けされていないリストの場合、リスト項目は「ul」タグでラップされます（「ul」は「順序付けられていないリスト」を表します）。順序付きリストの場合、リスト項目は「ol」タグで囲まれます（「ol」は「順序付きリスト」を表します）。各リストアイテムは「li」タグ（「リストアイテム」の場合は「li」）でラップされます。

順序付きリストの基本構造は次のとおりです。

<ol>
     <li>List Item</li>
     <li>List Item</li>
     <li>List Item</li>
</ol>

デフォルトでは、次のようになります。

リストアイテム
リストアイテム
リストアイテム

実際には、Diviテキストモジュール内のwysiwygエディターを使用してHTMLリストを作成できます。ビジュアルタブで編集していることを確認し、リストアイテムを入力して、各アイテムの後に改行があることを確認します（Enterキーを押します）。次に、コンテンツを強調表示して、エディターの上部にあるリストアイコンの1つをクリックします。

ディビリストデザイン

次に、[テキスト]タブに移動して、HTMLがどのように表示されるかを確認します。

ディビリストデザイン

これは単純なリストでは問題なく機能しますが、ネストされたリスト（リスト内のリスト）を作成する場合は、wysiwygで作成しようとする頭痛の種を避けるために、HTMLを使用して（テキストタブを使用して）作成することをお勧めします。エディター（ビジュアルタブ）。

ネストされたリストの基本構造は次のとおりです。ネストされたリストには順序付きリストがあり、各リスト項目にはネストされた順序なしリストがあります。

<ol>
  <ol>
  <li>Ordered List Item
    <ul>
      <li>Unordered List Item</li>
    </ul>
  </li>
  <li>Ordered List Item
    <ul>
      <li>Unordered List Item</li>
    </ul>
  </li>
  <li>Ordered List Item
    <ul>
      <li>Unordered List Item</li>
    </ul>
  </li>
</ol>

デフォルトでは、このネストされたhtmlリストは次のようになります。

注文リストアイテム
- 順不同リストアイテム
注文リストアイテム
- 順不同リストアイテム
注文リストアイテム
- 順不同リストアイテム

リストに他のhtmlタグを追加することもできます。たとえば、順序付きリストアイテムをh5タグでラップできます。結果は次のようになります。

<ol>
  <li><h5>Ordered List Item</h5>
    <ul>
      <li>Unordered List Item</li>
    </ul>
  </li>
  <li><h5>Ordered List Item</h5>
    <ul>
      <li>Unordered List Item</li>
    </ul>
  </li>
  <li><h5>Ordered List Item</h5>
    <ul>
      <li>Unordered List Item</li>
    </ul>
  </li>
</ol>

心配しないでください。これは、このチュートリアルで取得するのと同じくらい複雑です。ただし、この構造には3つの異なるタグ（ol、ul、h5）があり、テキストモジュールのDiviの強力なデザイン設定を使用して互いに独立してスタイルを設定できることを理解する必要があります。

この構造は少し後で必要になりますが、とりあえず、ページを立ち上げて実行し、ビジュアルビルダーでデザインを開始しましょう。

リストのセクションと行の作成

新しいページを作成し、VisualBuilderを展開します。次に、最初からページを作成するオプションを選択します。次に、2列の行を持つ通常のセクションを作成します。

テキストモジュールでのHTMLリストの作成

行の最初の列に、新しいテキストモジュールを追加します。テキスト設定のコンテンツボックスに、次のHTMLリストを入力します。

<ol>
 	<li>
<h5>Design</h5>
<ul>
 	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.</li>
</ul>
</li>
 	<li>
<h5>Develop</h5>
<ul>
 	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.</li>
</ul>
</li>
 	<li>
<h5>Deliver</h5>
<ul>
 	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.</li>
</ul>
</li>
</ol>

この構造は、以前から見覚えがあるはずです。 h5ヘッダーテキストは順序付きリストアイテムになり、「loremipsum」ダミーテキストはネストされた順序なしリストアイテムになります。

デフォルトでは、次のようになります。

ディビリストデザイン

今のところあまり印象的ではありません、私は知っています。しかし、このコンテンツが整ったら、Diviを使用してリストをデザインする楽しい部分を始めることができます。

重要な注意：各デザインは最初のデザインの修正バージョンであるため、このチュートリアルの最初のデザインから始めて、それらを整理しておくことをお勧めします。

リストデザイン＃1

ディビリストデザイン

手始めに、次のようにテキストモジュールにグラデーションの背景を付けましょう。

グラデーションの背景左の色：rgba（0,0,0,0.04）
グラデーションの背景右の色：rgba（255,255,255,0）
グラデーション方向：90度
開始位置：25％
終了位置：0％

ディビリストデザイン

順序付きリストアイテムのスタイリング

次に、[デザイン]タブに移動し、[テキスト]トグルの下にある[順序付きリスト]タブを選択します。

ディビリストデザイン

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

注文リストフォント：Abril Fatface
順序付きリストフォントの太さ：太字
注文リストテキストの色：＃559cad
注文リストのテキストサイズ：45px
注文リスト行の高さ：1.6em
順序付きリストスタイルタイプ：decimal-leading-zero
順序付きリストスタイルの位置：外側
注文リストアイテムのインデント：2vw

ディビリストデザイン

h5とネストされた順序なしリストは、親の順序付きリストのスタイルを継承することに気付くでしょう。心配しないでください。他のアイテムのスタイルを上書きすることができます。

順序付けられていないリストアイテムのスタイリング

次に、[順序付きリスト]タブをクリックして、次の設定を変更します。

順序付けられていないリストフォント：Montserrat
順序付けられていないリストのフォントの太さ：軽い
順序付けられていないリストテキストの色：
順序付けられていないリストのテキストサイズ：18px
順序なしリストスタイルタイプ：なし
順序付けられていないリストアイテムのインデント：0.01px

ディビリストデザイン

H5ヘッダーのスタイリング

スタイルを設定する必要がある最後のアイテムはH5ヘッダーです。これを行うには、[見出しテキスト]の下のオプションに移動し、[H5]タブをクリックします。次に、以下を更新します。

見出し5フォント：Montserrat
見出し5フォントの太さ：軽い
見出し5フォントスタイル：大文字（TT）
見出し5のテキストの色：＃4f6d7a
見出し5テキストサイズ：5vw（デスクトップ）、70px（タブレット）、40px（スマートフォン）

ディビリストデザイン

テキストモジュールのデザインを完成させるには、次のカスタムパディングを追加します。

カスタムパディング（デスクトップ）：3vw上、3vw下
カスタムパディング（タブレット）：2vw左
カスタムパディング（スマートフォン）：左50px

ディビリストデザイン

設定を保存する。

次に、テキストモジュールをコピーして、行の2番目の列に貼り付けます。複製されたテキストモジュールでリスト番号を調整して、前のリストから継続する必要があることに気付くかもしれません。 2番目のテキストモジュールリストは、1ではなく4で始まる必要があります。これを行うには、htmlリストに小さな変更を1つ追加する必要があります。テキストモジュール設定のコンテンツボックスに移動し、開始の「ol」タグを次のように置き換えます。

<ol start="4">

ディビリストデザイン

それでは、最終結果を確認しましょう。

ディビリストデザイン

リストデザイン＃2

ディビリストデザイン

この2番目のリストデザインの例では、最初に作成したセクションを複製して、有利なスタートを切ることができます。また、背景のグラデーションを使用したリストデザインのクールな背景を紹介します。

カスタム背景グラデーションデザインの作成

複製されたセクションで、次のグラデーションの背景でセクション設定を更新します。

グラデーションの背景左の色：#ffffff
グラデーションの背景右の色：rgba（155,29,32,0.08）
グラデーション方向：45度
開始位置：50％
終了位置：0％

ディビリストデザイン

設定を保存する。

次に、次の背景グラデーションで行設定を更新します。

グラデーションの背景左の色：rgba（155,29,32,0.08）
グラデーションの背景右の色：rgba（255,255,255,0）
グラデーション方向：45度
開始位置：25％
終了位置：0％

列2グラデーションの背景左の色：rgba（255,255,255,0）
列2グラデーションの背景右の色：#ffffff
列2の勾配方向：45度
列2の開始位置：65％
列2の終了位置：0％

ディビリストデザイン

これらの背景グラデーションデザインの鍵は、すべてが45度の同じグラデーション方向を持っていることです。次に、開始位置を使用して、デザインの間隔を均等にすることができます。

リストデザイン＃2のスタイル設定

この時点で、リストのデザインを独自の方法で微調整することができます。この2番目の例では、わずかな変更を加えるだけでデザインを簡単に変換できることを示します。最初の列のテキストモジュールに移動し、次のように設定を更新します。

まず、背景のグラデーションを削除します。
順序付けられていないリストのフォントの太さ：中
順序付けられていないリストのテキストの色：rgba（0,0,0,0.5）
注文リストのフォントの太さ：通常
注文リストのテキストの色：＃9b1d20
見出し5フォントの太さ：薄い
見出し5テキストの色：rgba（0,0,0,0.8）
見出し5テキストサイズ：5vw（デスクトップ）

次に、モジュールスタイルを右側の列のテキストモジュールにコピーします。

ディビリストデザイン

これが2番目の例の最終的な設計です。

ディビリストデザイン

リストデザイン＃3

ディビリストデザイン

3番目の例では、中央に配置された1列のリストデザインの例を示すとよいと思いました。このデザインを作成するには、2番目のサンプルセクションを複製します。新しい複製セクションで、行構造を1列に変更してから、2番目のテキストモジュールを削除します。

ディビリストデザイン

次に、セクション設定を新しいグラデーションの背景色で更新します。

グラデーションの背景左の色：＃559CAD
グラデーションの背景の正しい色：＃4f6d7a

行の設定を新しい左グラデーションの背景色で更新します。

グラデーションの背景左の色：＃4f6d7a

次に、テキストモジュールに新しい背景グラデーションを追加します。

グラデーションの背景左の色：rgba（255,255,255,0）
グラデーションの背景右の色：＃559cad
グラデーション方向：45度
開始位置：75％
終了位置：0％

これにより、1列のリストのリストデザイン＃2で対称的な背景デザインの暗いバージョンが作成されます。このデザインの鍵は、セクション、行、およびモジュールに1つ追加することにより、背景のグラデーションをレイヤー化することです。

ディビリストデザイン

リストデザイン＃3のスタイル設定

この3番目の例では、中央揃えのリストがどのように見えるかを示したいと思います。また、順序付きリストアイテムには、より従来の10進数/数値スタイルを使用します。

テキストモジュールの設定に移動し、以下を更新します。

順序付きリストフォント：Poppins
注文リストフォントの太さ：重い
順序付きリストのテキストの配置：中央
注文リストのテキストサイズ：4vw（デスクトップ）、50px（タブレット）
順序付きリストのテキストの色：＃f4f1bb
順序付きリストスタイルタイプ：10進数
順序付きリストスタイルの位置：内側
注文リストアイテムのインデント：0vw

（注：スタイルの位置を内側に変更すると、このデザインに便利なヘッダーテキストの上に番号がスタックします。）

順序付けられていないリストのフォントの太さ：軽い
順序付けられていないリストのテキストの色：#ffffff

見出し5フォント：Lato
見出し5フォントの太さ：薄い
見出し5文字の間隔：6vw（デスクトップ）、70px（タブレット）、40px（スマートフォン）
見出し5のテキストの色：#ffffff
見出し5テキストサイズ：6vw

カスタムパディング（デスクトップ）：左15％、右15％
カスタムパディング（タブレット）：左5％、右5％

このデザインでは、スマートフォンのカスタム50px左パディングも削除する必要があります。

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

ディビリストデザイン

リストデザイン＃4

ディビリストデザイン

この4番目の例では、より最小の「リスト」デザインを使用します（そこで何をしたかを参照してください）。順序付きリストには、ラトフォントで大きな大文字のローマ数字を使用します。また、各モジュールにボックスシャドウを追加して、リストを構成します。

リストデザイン＃4のスタイル設定

このリストデザインをすぐに開始するには、最初のセクションをリストデザイン＃1と複製します。次に、新しいセクションの最初のテキストモジュール設定を次のように更新します。

背景のグラデーションを削除します。

注文リストフォント：Lato
注文リストフォントの太さ：軽い
順序付きリストのテキストの色：＃000000
注文リストのテキストサイズ：6vw
順序付きリストスタイルタイプ：upper-roman
注文リストアイテムのインデント：0vw

見出し5フォント：Lato
見出し5フォントの太さ：太字
見出しフォントスタイル：下線
見出し5下線の色：rgba（0,0,0,0.14）
見出し5アンダースコアスタイル：double
見出し5テキストの色：＃000000
見出し5テキストサイズ：40px

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

以前のデザインから引き継がれたタブレットとスマートフォンのカスタム左パディングを削除します。

ボックスシャドウの水平位置：6px
ボックスシャドウの垂直位置：6px
ボックスシャドウスプレッド強度：0px
ボックスシャドウブラー強度：0px
影の色：＃000000
ボックスシャドウの位置：内側のシャドウ

モジュールスタイルを2番目の列にコピーします。次に、ボックスの影の位置を外側の影に更新します。

これが最終結果です。

ディビリストデザイン

それでおしまい！

最終的な考え

上記の例でHTMLリストを作成して微調整した後、Diviエキスパートのようにテキストモジュール設定の力を活用する方法をよりよく理解する必要があります。コンテンツの退屈なリストデザインに甘んじる必要はもうありません。これらのテクニックが、次のプロジェクトのための素晴らしいリストデザインを作成するきっかけになることを願っています。

いくつかの例をご覧になりたいので、コメントでお気軽に共有してください。

乾杯！