ユニークなトグルとアコーディオンのコンテンツデザインにDiviのテキストとリストスタイルのオプションを使用する方法

Diviのテキストとリストスタイルのオプションは、ほとんどのDiviモジュールで利用できる一般的な機能です。 これにより、以前はテキストモジュール内でのみ可能であった、クリエイティブコンテンツをデザインし、モジュール（トグルモジュールやアコーディオンモジュールなど）内でデザインを一覧表示する新しい機会が開かれます。 秘訣は、組み込みのデザイン設定を使用してそれらのアイテムをターゲットにできるように、適切なhtmlでコンテンツをセットアップすることです。

このチュートリアルでは、Diviのテキストとリストスタイルのオプションを使用して、独自のトグルとアコーディオンのコンテンツデザインを作成する方法を紹介します。 これは、CSSクラスやインラインcssを使用せずに、さまざまなテキストデザインを組み込む場合に便利です。

始めましょう。

スニークピーク

これは、Diviのテキストとリストスタイルのオプションを使用して作成するデザインの概要です。

トグルとアコーディオンレイアウトのリストスタイルデザインを無料でダウンロード

このチュートリアルのデザインを手に入れるには、まず下のボタンを使用してデザインをダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。

ファイルをダウンロードする

無料でダウンロード

Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。

ダウンロード

正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。

レイアウトをページにインポートするには、zipファイルを抽出し、jsonファイルをDiviBuilderにドラッグするだけです。

チュートリアルに行きましょう。

始めるために必要なもの

開始するには、次のものが必要です。

1. Diviテーマがインストールされ、アクティブになっています
2. フロントエンドでゼロから構築するために作成された新しいページ（ビジュアルビルダー）
3. モックコンテンツに使用する画像

その後、Diviでデザインを開始するための空白のキャンバスが作成されます。

パート1：トグルモジュールでのリストスタイルの使用

チュートリアルのこの最初の部分では、リストスタイルオプションを使用して設計されたコンテンツを持つ3つのトグルを作成します。 これは、コンテンツのカスタム宣伝文のように、リストアイテムを個別のトグルに分割するのに役立ちます。

まず、3列の行を持つ通常のセクションを作成します。 次に、次のように行設定を更新します。

側溝幅：2
幅：100％
最大幅：90vw

トグルモジュールを追加する

次に、列1にトグルモジュールを追加します。これは、3つの列のそれぞれに追加される3つのトグルモジュールの最初のものになります。

ToggleHTMLコンテンツを追加します

HTMLコンテンツは、この設計の鍵です。 Diviトグル設定内のさまざまなリストスタイルを利用するには、コンテンツボックスにHTMLリストを追加する必要があります。

先に進み、次のHTMLをに貼り付けます
ボディコンテンツボックス。

<ol start="1">
    <li>
        <ul style="margin-top: -1.5em;">
            <li>Lorem ipsum dolor sit amet</li>
        </ul>
    </li>
</ol>
<p>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.</p>

これで、このHTMLコードは、olタグを使用して順序付きリストを作成します。 順序付きリストには、ネストされた順序なしリスト（ul）であるリストアイテム（li）が1つだけあり、いくつかのモックコンテンツを持つリストアイテム（li）が1つあります。 順序付きリストの下には、テキストの基本的な段落があります。

この設定では、リストスタイルを含むDiviの組み込みテキストスタイルを使用して、これらのタグ（ol、ul、p）のそれぞれをさまざまなスタイルのターゲットにすることができます。

最初のolタグの中にstart =” 1”があることに注意してください。 これは、各リスト項目とともに順序付きリストの番号をリストすることから開始する番号をリストに指示します。 技術的には、最初の番号はデフォルトで自動的に1から始まるため、これは必要ありません。 ただし、追加する次のトグルで必要になります。

また、順序付けされていないリストタグには、負のマージンを使用してulコンテンツを少し上げるためのインラインスタイルがあります。 これは、デザイン内の順序付きリストの番号を順序なしリストのテキストとオーバーラップさせる方法です。

コンテンツのスタイリング

これで、組み込みの設定とリストスタイルを使用して、いくつかの色とフォントスタイルの追加を開始できます。 トグルデザイン設定を次のように更新します。

アイコンの色：＃ff3d97
アイコンフォントサイズ：26px
トグルの背景色を開く：#ffffff
閉じたトグルの背景色：#ffffff
オープンタイトルのテキストの色：＃333333
タイトルテキストの色：＃333333

タイトルフォント：Oswald
タイトルテキストサイズ：18px
タイトルラインの高さ：3em

順序付けられていないリストフォント：Oswald
順序付けられていないリストのフォントの太さ：軽い
順序付けられていないリストのテキストの色：＃333333
順序付けられていないリストのテキストサイズ：36px
順序なしリストスタイルタイプ：なし

注文リストフォント：Kameron
順序付きリストフォントの太さ：太字
順序付きリストのテキストの色：rgba（255,61,151,0.34）
注文リストのテキストサイズ：100px
注文リスト行の高さ：1.1em

最初のトグルモジュールを複製して、他のトグルを作成します

列2と3のトグルを作成するために、設計を終えたばかりのトグルモジュールを複製します。 次に、それらを各列にドラッグして、各列に同じトグルモジュールを持たせることができます。

順序付きリストの開始番号を更新します

列2の重複トグルの場合、順序付きリストを「1」ではなく「2」の番号で開始する必要があります。 これを変更するには、トグルモジュールの設定を開き、olタグの開始番号を「2」に変更します。

また、列3のトグルを、順序付きリストの開始番号「3」で更新する必要があります。

最終設計

それでは、最終的なデザインを確認しましょう。

パート2：アコーディオンモジュールでのリストスタイルの使用

チュートリアルのこの第2部では、リストスタイルのコンテンツデザインをトグルモジュールからアコーディオンモジュールにすばやく簡単に移動する方法を紹介します。 以前のトグルで使用したのと同じテキストとリストスタイルをアコーディオンモジュール（またはほとんどすべてのモジュール）で使用できるため、プロセスは簡単です。 これを行うには、最初に1列の行を持つ新しいセクションを作成します。 次に、アコーディオンモジュールを行に追加します。

次に、[コンテンツ]タブの下にある2つのデフォルトのアコーディオンの1つを複製して、合計3つのアコーディオンを作成します。 次に、前に作成した3つのトグルのそれぞれの中で、まったく同じトグルhtmlコンテンツを使用して、個々のアコーディオンのコンテンツを更新します。

トグルスタイルをアコーディオンに拡張する

作成したトグルからアコーディオンモジュールにスタイリングを引き継ぐ簡単な方法の1つは、スタイルの拡張機能を使用することです。 これを行うには、トグルモジュールの1つを開き、アイコンスタイルカテゴリを右クリックして、右クリックメニューから[アイコンスタイルの拡張]を選択します。 次に、このアイコンのスタイルを「このページ」全体の「すべてのアコーディオン」に拡張することを選択します。

次に、アコーディオンモジュールに拡張する必要があるカスタムスタイリングを持つ各デザインカテゴリに対して同じことを行います。 これには、「トグル」、「タイトルテキスト」、「本文テキスト」のスタイリングが含まれます。

次に、アコーディオンデザインの最終結果を確認します。

パート3：リストスタイルを使用してトグルモジュールで複数の列コンテンツを作成する

チュートリアルのこの第3部では、リストスタイルのデザイン用にコンテンツの複数の列を作成する方法を紹介します。

まず、1列の行を持つ新しいセクションを作成します。 次に、前に作成したトグルモジュールの1つをコピーして行に貼り付けます。

次に、トグルモジュールの本文のコンテンツを次のように新しいHTMLで更新します。

<ol style="column-count: 2">
<li>
        <ul>
	        <li>Lorem ipsum dolor sit amet</li>
<a href="#">Learn More</a>
        </ul>
</li>
<li>
        <ul>
	        <li>Lorem ipsum dolor sit amet</li>
<a href="#">Learn More</a>
        </ul>
</li>
<li>
        <ul>
	        <li>Lorem ipsum dolor sit amet</li>
<a href="#">Learn More</a>
        </ul>
</li>
<li>
        <ul>
	        <li>Lorem ipsum dolor sit amet</li>
<a href="#">Learn More</a>
        </ul>
</li>
</ol>

最初のolタグに追加された「column-count：2」インラインスタイル属性に注意してください。 これにより、順序付きリストのコンテンツを1つではなく2つの列に構造化できます。 必要に応じて、これを任意の数に変更して、列を増やすことができます。

また、タイトル、リンク、リストのスタイルにDiviの組み込みのデザイン設定を使用する機能があることに注目してください。

リンクテキストのスタイリング

タイトルとリストのスタイルは以前のデザインからすでに配置されているため、必要なのはリンクテキストのデザインを追加することだけです。

トグル設定を開き、以下を更新します。

リンクフォントの太さ：半太字
リンクフォントスタイル：下線
リンクテキストの色：＃ff3d97
リンクテキストサイズ：15px

また、このデザインとテキストが重なっていないため、次のように、順序付きリストのスタイル番号を明るい色にします。

順序付きリストのテキストの色：＃ff3d97

トグルに背景を追加する

デザインを完成させるために、トグルにカスタム背景を追加できます。 これを行うには、次のトグル設定を更新します。

背景画像：[お好みの画像をアップロード]
背景グラデーションの左の色：rgba（255,255,255,0.92）
背景グラデーションの右の色：rgba（255,255,255,0.8）
グラデーション方向：90度
開始位置：50％
終了位置：0％
背景画像の上にグラデーションを配置：はい

2列のトグルにレスポンシブ要素を追加する

トグルコンテンツが2列になっているので、レスポンシブスタイルでデザインを更新して、モバイルで適切に拡大縮小できるようにします。

まず、次のように行設定を更新します。

幅：100％
最大幅：89vw（デスクトップ）、90vw（タブレットと電話）

トグル設定を開き、以下を更新します。

アイコンのフォントサイズ：5vw

タイトルテキストサイズ：4vw

順序付けられていないリストのテキストサイズ：26px（デスクトップ）、18px（タブレット）、14px（電話）
順序付けられていないリストアイテムのインデント：1px

注文リストのテキストサイズ：8vw

マルチカラムトグルコンテンツの最終設計

これがタブレットと電話のディスプレイのデザインです。

そして、これは同じデザインで、背景が暗く、テキストの色が白です。

最終的な考え

ほとんどの場合、トグルとアコーディオンには、創造的なデザインを実際に必要としない基本的なボディコンテンツが含まれます。 しかし、トグルとアコーディオンのコンテンツにスパイスを効かせたいときが来たら、Diviの組み込みのテキストとリストスタイルのオプションを利用できます。 HTMLを配置したら、外部のカスタムCSSやクラスを使用せずに、これらのhtmlタグをさまざまなデザインのターゲットにすることができます。 これらの同じリストスタイルオプションがすべてのモジュールで使用できるため、これは、Diviビルダーを使用して任意のモジュール内でクリエイティブリストスタイルを表示するための優れた方法でもあります。

新しいデザインを楽しんでください。

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

乾杯！