クールなFAQページを備えた10のDiviサイト

公開: 2018-08-13

よくある質問（FAQ）のページは、潜在的なクライアントに一般的な質問に対する必要な回答を提供するのに最適です。これは、彼らがあなたの専門知識を理解するのを助け、彼らに何を期待するかを知らせます。 DiviでFAQページを作成する方法はたくさんあります。この記事では、次のDivi Webサイトに刺激を与えるのに役立つ、クールなFAQページを備えた10のDiviサイトを見ていきます。

FAQページには通常、画像、トグル、アコーディオン、タブなどの要素が含まれています。これは、必要になるまで大量の情報を簡単に非表示にできるためです。また、通常、行動の呼びかけも含まれます。この投稿では、私が好きなセクションの画像を表示し、それについて私が好きだったことについて説明します。ウェブサイトは順不同です。あなたがあなた自身のユニークなプロジェクトページをレベルアップするのを助けるためにいくつかのリンクのために最後までぶらぶらしてください。

1.エディソリューション

このサイトでは、FAQを2列のレイアウトに配置し、一方にFAQを、もう一方に製品画像を配置しています。トグルは、サイトのブランドに一致するスタイルでタイトルとボタンを表示します。トグルは見出しの下に配置されているため、わかりやすくなっています。質問の下には、大きなテキストとクリック可能な電話番号が記載された全幅のセクションがあり、読者に詳細について電話をかけるように勧めています。

ウェブサイトを見る

2.オールガールシェーブクラブ

このサイトでは、FAQを1列のレイアウトのアコーディオン内に配置しています。全幅ヘッダーはページを紹介します。アコーディオンには、サイトの色に合わせたスタイリングが含まれています。アコーディオンを開くと、タイトルの緑がかった背景が白に変わり、テキストが白から黒に変わります。これに続いて、ヘッダーと同様の画像を使用する全幅CTAがあります。

ウェブサイトを見る

3.キラキラメイド

このサイトでは、全幅の画像と2色の特大のタイトルがオーバーレイされたページを紹介しています。 FAQは、トピック名と上部の境界線を示す2列のレイアウト内に配置され、一方の質問ともう一方の質問を分割するのに役立ちます。質問は、上部の境界線とスタイル付きボタンを含むトグル内に配置されます。これらはすべて、セクションの背景と調和しています。

ウェブサイトを見る

4.だらしない紳士

このサイトのFAQページには、電話番号とソーシャルアイコンの後にページのタイトルが続く検索ボックスが表示されます。 FAQは、垂直方向に配置されたタブを使用して、FAQのトピックを表示します。選択したタブは白でテキストが黒で、他のタブは黒でテキストが白です。また、アイコンが含まれているため、トピックが一目でわかります。タブ内には、開くまで質問を表示するトグルがあります。タブの下には、詳細について連絡できるリンクがあります。

ウェブサイトを見る

5. LaRox

このサイトでは、重要なページへのリンクとともに、片面にタイトル、もう片面に説明が記載されたページを紹介しています。これに続いて、4つの宣伝文を含む全幅のセクションがあります。各宣伝文には、ブランドカラーの異なる色合い、大きなアイコン、およびタイトルが含まれています。それらをクリックすると、そのトピックの情報が開きます。 FAQをクリックすると、横から傾くアコーディオンと所定の位置にスライドする画像が表示されます。

ウェブサイトを見る

6. Xcellence Reality

このサイトでは、フルスクリーンの画像の背景とオーバーレイのタイトル情報を含むFAQページを紹介しています。これに続くのは、連絡先ページへのリンクを含むテキストのセクションと、アコーディオン内のFAQを含む2列のセクションです。アコーディオンは、黒いテキスト、下の境界線、および左側の矢印でスタイル設定されています。アコーディオンを開くと、矢印が削除され、タイトルが青に変わります。 FAQの下には、背景と同じ青と白のテキストを使用する全幅CTAがあります。

ウェブサイトを見る

7.フィル・サイモン

このサイトでは、右端の茶色のグラデーションに変わる黒い背景の上に配置されたタイトルと説明のテキストを含む全幅セクションのページを紹介しています。この下には、トピックのタイトルを一方の側に配置し、もう一方の側に説明と一連のトグルを配置する2つの列があるセクションがあります。これに続いて、グラフィック付きの全幅セクションと引用付きの全幅セクションがあります。これらのセクションは両方ともスリムで、仕切りとして機能します。他のFAQセクションはこれに続きます-それぞれがグラフィックでスリムなセクションで区切られています。

ウェブサイトを見る

8.魂を掻き立てるブランディング

これは、ページのタイトルとして片側に手書きフォントを使用した全幅の画像を示しています。 FAQは、単一列のレイアウトでアコーディオン内に提供されます。中央に配置されたタイトルと、背景に一致するボタンが表示されます。アコーディオンを開くと、テキストが中央揃えで表示され、タイトルとテキストの間に多くのスペースが含まれます。これに続いて、背景画像の上に同じフォントを使用した全幅の連絡先CTAと、ページにリンクするスタイル付き画像があります。アコーディオンはシンプルですが、サイトのデザインとうまく調和するレベルのエレガンスを生み出します。

ウェブサイトを見る

9. Emlekek Konyve

これは、サイトのブランドに一致するエレガントなフォントと柔らかい色を使用しています。ページタイトルは引用として表示され、その後に他の有用なページへのリンクを含む簡単な説明が続きます。 FAQはトグル内に表示され、タイトルに同じエレガントなフォントが含まれています。これに続くのは、黄褐色の背景と、トグルのボタンと引用符に一致する背景を持つ非常に幅の広いボタンを備えたCTAです。

ウェブサイトを見る

10.ペリーヤンマジック

このFAQページは、このWebサイトのデザインと完全に一致する多くの漫画的な色を使用しています。ヘッダーには、ページのタイトルと簡単な説明が含まれています。 FAQは、その一連の質問が何であるかを視覚的に表現するために、片側に画像が表示された単一の列内に配置されます。 FAQ自体はトグル内で提供され、スタイル付きのタイトルで区切られたトピックに分割されています。各トピックは異なるセクションに配置され、各セクションには異なる背景色とトグルカラーがあります。セクションもスタイル付きセパレーターを使用します。これに続いて、赤と青のグラデーションオーバーレイを備えた視差のCTAがあります。

ウェブサイトを見る

終わりの考え

これは、次のDiviデザインにインスピレーションを与えるのに役立つクールなFAQページを備えた10のDiviWebサイトを示しています。

ETブログには、アコーディオン、トグル、タブなどのFAQページとモジュールをカバーするいくつかのデザインとハウツーの記事があります。これらのチュートリアルへのリンクと、無料のDivi LayoutPackのFAQページを含めました。

無料のDiviFAQレイアウトパックは退屈なFAQページデザインへの答えです
Diviが長いWebページを介して訪問者をガイドするのにどのように役立つか
スタイリングする可能性のある3つの見落とされがちなDiviモジュール要素（およびその方法）
セラピストFAQページ
会計士FAQページ
コピーライターFAQページ
暗号通貨に関するFAQページ
医院FAQページ

我々はあなたから聞きたい。 かっこいいFAQページがあるこれらのウェブサイトのどれがあなたのお気に入りですか？ コメントで教えてください。