Divi 5のアイコンリストモジュールについて知る必要があるすべて

最新のDivi 5アップデートの1つは、すべてのサイトが使用できるカルーセルとロッティアニメーションを導入しました：新しいアイコンリストモジュール。プレーンブレットポイントの代わりに、明確さと視覚的な魅力を追加する意味のあるアイコンを備えたスタイルのリストを作成できます。

製品ページの機能、プロセスのステップ、価格設定テーブルでのサービス、またはランディングページの利点を考えてください。アイコンリストモジュールにより、これらすべてが設計を容易にし、訪問者にとってより魅力的です。

この投稿では、機能から実際のユースケースまで、アイコンリストモジュールについて知る必要があるすべてのことをカバーして、リストをアップグレードしてDiviサイトを改善できます。

アイコンリストモジュールは何ですか？

Divi 5のアイコンリストモジュールは、サイトの設計を改善する魅力的で構造化されたリストを作成するように設計されています。各リスト項目を一意のアイコンとペアリングできるようにすることで、このモジュールはプレーンテキストをプロフェッショナルで魅力的なコンテンツに変換します。

Divi 5の前に、DIVIで様式化されたリストを作成する必要があります。アイコンリストモジュールはこのギャップを埋め、ユーザーフレンドリーで高度にカスタマイズ可能な専用ソリューションを提供します。

重要な機能

アイコンリストモジュールには、Divi 5に最適な追加機能を備えています。主要な機能は次のとおりです。

簡単なリスト作成

Diviの広範なアイコンライブラリからアイテムを追加し、アイコンを割り当てるか、カスタムアイコンのアップロードを行うことにより、リストをすばやく作成します。モジュールの直感的なインターフェイスを使用すると、数分で洗練されたリストを作成し、手動の書式設定と比較して時間を節約できます。

広範なカスタマイズオプション

何百もの内蔵アイコンから選択し、サイズ、色、配置を調整して、サイトのデザインに合わせたまとまりのある外観を作成します。

Diviの強力な設計設定を活用して、フォント、テキストの色、間隔、アライメント、および背景をカスタマイズします。また、ホバーエフェクトやアニメーションを追加して、リストをよりインタラクティブにすることもできます。

アイコンリストモジュールの使用方法

Divi 5のアイコンリストモジュールを開始するのは簡単です。新しいページを作成するか、既存のページを開きます。クリックして新しいモジュールを追加し、アイコンリストを選択します。

モジュールを追加すると、[コンテンツ]タブに3つのアイコンリスト項目が表示されます。最初に編集するために最初のものをクリックすることから始めましょう。

[コンテンツ]タブに、テキストフィールドにタイトルを入力します。

次に、アイコンドロップダウンタブを展開します。ここでは、Diviライブラリの何百ものアイコンから選択できます。アイコンやスクロールを検索して、使用したいものを見つけることができます。

アイコンリストモジュールを使用すると、個々のリスト項目にリンクを追加でき、他のページ、添付ファイルなどに簡単にリンクできます。

[デザイン]タブは、アイコンリスト項目をスタイリングできる場合です。アイコンドロップダウンメニューで、アイコンの色とサイズを割り当てます。

[背景]タブで、アイコンを背景色に割り当て、境界線またはボックスシャドウを追加し、間隔を調整できます。

他のオプションには、テキストのアライメントを制御するか、テキストシャドウを追加するテキストが含まれます。ただし、テキストをスタイリングするには、ボディテキストドロップダウンメニューを選択してください。フォント、重量、スタイル、テキストアライメント、色、サイズなどを割り当てることができます。

他のすべてのDIVIモジュールと同様に、サイジング、間隔、境界線、ボックスシャドウを制御し、フィルター、遷移、またはアニメーションを追加できます。

最初のアイコンリスト項目をスタイリングしたら、簡単にコピーしてアイコンを変更し、テキストを更新できます。

アイコンリストアイテム間にスペースを追加します

前のセクションでは、アイコンリスト項目を追加する方法を示しました。このセクションでは、Divi 5のFlexboxレイアウトシステムを使用してレイアウトプロパティを調整する方法を確認します。ご覧のとおり、各アイコンリスト項目の間に小さなスペースを使用できます。

メインアイコンリストモジュール設定で、[デザイン]タブをクリックします。レイアウトドロップダウンメニューを見つけて展開して設定を表示します。

デフォルトでは、Flexはレイアウトスタイルの下で選択されます。これにより、Divi 5のFlexbox設定を使用して、間隔、レイアウトの方向、およびアライメントを制御できます。各アイコンリスト項目に間隔を追加するには、垂直ギャップを調整するだけです。これにより、各アイテムの間に呼吸室が追加され、リストがより視覚的に魅力的になります。

すべてのアイコンリスト項目のユニバーサル設計設定

スタイリングアイコンリストアイテムに個別に加えて、メインモジュールの設計設定を使用して、すべてのアイコンリストアイテムにスタイルを一度に追加できます。たとえば、すべてのアイコンを同じ色、テキスト、またはバックグラウンドスタイルにしたい場合は、モジュールレベルで実行できます。

divi 5のアイコンリストモジュールは、個別に、または全体としてリストをスタイリングしたい場合でも、よりユーザーフレンドリーな方法で情報を紹介する素晴らしい方法を提供します。

アイコンリストモジュールを使用した実用的な例

アイコンリストモジュールは汎用性が高く、ウェブサイトのさまざまな領域を強化できます。デザインを刺激するためのいくつかの実用的な例を以下に示します。

旅行ブログ

アイコンリストモジュールは、旅行ブログに魅力的なコンテンツを作成するのに最適な方法を提供します。それを使用して、ブログ、旅行の旅程、梱包のヒント、または宛先のハイライトのカテゴリを強調表示できます。さらに、ホバーエフェクトを組み合わせて、各リスト項目の異なるアイコンを使用して、明確でスタイリッシュな方法で情報を提示できます。

ビジネスサイトの機能

アイコンリストモジュールを使用して、ビジネスのサービスを紹介します。関連するアイコンを割り当て、ブランドに合わせて色をカスタマイズします。簡単にナビゲーションを得るために、サービスページへのリンクを追加することもできます。

段階的なプロセスガイド

「サインアップする方法」など、プロセスの手順の概要を説明するリストを作成します。チェックマークを使用して、各ステップをユーザーに視覚的にガイドし、複雑な情報をより消化しやすくします。

eコマースストアページ

eコマースサイトの場合、アイコンリストモジュールを使用してストアの機能を強調します。 Divi 5のWOOモジュールとペアになって、まとまりのある製品カテゴリページを作成します。

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

無料でダウンロードしてください

Divi Newsletterに参加してください。究極のDiviランディングページレイアウトパックのコピーに加えて、他の驚くべき無料のDiviリソース、ヒント、トリックを大量にメールで送信します。フォローすると、すぐにDiviマスターになります。既にサブスクライブされている場合は、以下のメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。

ダウンロード

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

Divi 5のアイコンリストモジュールを使用します

Divi 5のアイコンリストモジュールは、ほとんど努力してスタイリッシュで機能的なリストを作成するのに最適な方法を提供します。使いやすさ、堅牢なカスタマイズオプション、およびDivi 5の新機能とのシームレスな統合により、Diviユーザーにとって必須の統合になります。サービスを強調したり、プロセスをユーザーにガイドしたり、製品機能を紹介したりするかどうかにかかわらず、このモジュールは、視聴者を引き付ける専門的な結果を提供するのに役立ちます。

試してみる準備はできましたか？最新のDivi 5 Public Alphaを今すぐダウンロードして、アイコンリストモジュールを自分で調べてください。新しい機能を展開する際に、Divi 5の更新をさらにご期待ください。