Diviを使用してFAQデザインに交換するスティッキーな質問を追加する方法
公開: 2019-09-25毎週、次のプロジェクトに使用できる新しい無料のDiviレイアウトパックを提供します。 レイアウトパックの1つとして、Webサイトを次のレベルに引き上げるのに役立つユースケースも共有しています。
今週は、進行中のDiviデザインイニシアチブの一環として、FAQデザインをスクロールしながら、交換するスティッキーな質問を作成する方法を紹介します。 これは、ユーザーが探している情報を見つけられるようにしながら、デザインにインタラクションを追加するための優れた方法です。 JSONファイルも無料でダウンロードできます！
それを手に入れましょう。
プレビュー
チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。
デスクトップ
モバイル
スティッキー質問FAQデザインを無料でダウンロード
無料の付箋質問FAQデザインを手に入れるには、まず下のボタンを使用してダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
1.ライブラリの連絡先ページレイアウトを使用して新しいページを作成する
新しいページを追加
新しいページを追加することから始めます。 ページタイトルを入力し、ページを公開して、DiviBuilderを有効にします。
ライブラリの連絡先ページのレイアウトをアップロードする
事前に作成されたレイアウトに移動し、ライブラリレイアウトパックで連絡先ページのレイアウトを選択します。
2.現在のFAQセクションを削除します
FAQセクションを見つけて削除する
すでにFAQデザインが含まれているページで、次のセクションを見つけて削除します。
3.新しいFAQセクションデザインを追加します
新しい通常のセクションを追加する
これで、交換する粘着性のある質問を含む新しいデザインの作成を開始できます。 これを行うには、新しい通常のセクションを挿入します。
新しい行を追加
カラム構造
次の列構造を使用して、新しい行を追加して続行します。
サイジング
モジュールをまだ追加せずに、行の設定を開き、行が画面の幅全体を占めるようにします。 このステップの非常に重要な部分は、[列の高さを均等化]オプションも有効にすることです。 これにより、列2に配置されたコンテンツに基づいて、列1にスペースが自動的に生成されます。このスペースは、ページを上下にスクロールしながらスティッキーな質問を自由に移動できるようにするために使用されます。
- カスタムガター幅を使用：はい
- 側溝幅：1
- 列の高さを等しくする：はい
- 幅：100％
- 最大幅：100％
間隔
次に、デフォルトの上下の行のパディングをすべて削除します。
- トップパディング：0px
- ボトムパディング：0px
列1
列1の設定を開いて続行します。
デフォルトの背景色
デフォルトの背景色を追加します。
- 背景色：rgba（224,216,200,0.15）
背景色にカーソルを合わせる
そして、ホバー時にこの背景色を変更します。
- 背景色：#FFFFFF
列2
次に、2番目の列の設定を開きます。
間隔
また、さまざまな画面サイズにカスタムパディング値を適用します。
- トップパディング：100px（デスクトップ）、50px（タブレットと電話）
- 下部のパディング：100px（デスクトップ）、50px（タブレットと電話）
- 左パディング：100px（デスクトップ）、50px（タブレット）、30px（電話）
- 右パディング：100px（デスクトップ）、50px（タブレット）、30px（電話）
列1にテキストモジュールを追加
H3コンテンツを追加する
モジュールの追加を開始する時が来ました！ 列1に必要な最初で唯一のモジュールは、よくある質問の1つを含むテキストモジュールです。 これにはH3を使用しています。
背景色
次に、テキストモジュールに背景色を追加します。
- 背景色：#FFFFFF
H3テキスト設定
[デザイン]タブに移動し、それに応じてH3テキスト設定を変更します。
- 見出し3フォント：Open Sans
- 見出し3フォントの太さ：太字
- 見出し3フォントスタイル：大文字
- 見出し3テキストの配置：中央
- 見出し3テキストサイズ：20px
- 見出し3文字の間隔：1px
- 見出し3行の高さ：1.5em
間隔
いくつかのカスタムパディング値も追加します。
- トップパディング：20px
- ボトムパディング：20px
- 左パディング：20px
- 右パディング：20px
CSSクラス
モジュールにCSSクラスを割り当てて、設定を完了します。 このチュートリアルの最後に、このCSSクラスを使用してモジュールをスティッキーにします。
- CSSクラス：スティッキー
列2にテキストモジュールを追加します
コンテンツを追加する
2番目の列に進みます。 そこで、選択したコンテンツを含むテキストモジュールを追加します。
テキスト設定
[デザイン]タブに移動し、それに応じてテキスト設定を変更します。
- テキストフォント：Open Sans
- テキスト行の高さ：2em（デスクトップとタブレット）、1.6em（電話）
間隔
また、モジュールの間隔設定にも下マージンがあります。
- 下マージン：50px
列2のテキストモジュールのクローンを作成してコンテンツを変更する
列2のテキストモジュール全体のクローンを作成し、内容を変更します。
下マージンを削除します
下マージンも削除します。
行全体を必要な回数だけ複製する
最初の行とそのすべてのモジュールを完了すると、行全体を必要な回数だけ複製できます。 ページに表示したいよくある質問の数によって異なります。
質問と回答を変更する
もちろん、すべてのコピーを変更する必要があります。
列1のデフォルトの背景色を変更する
重複する各行の列1のデフォルトの背景色も変更します。 Library Layout Packと一致させる場合は、次のカラーコードを使用します。
- 色1：＃f2ece1
- 色2：rgba（0,0,0,0.2）
- 色3：rgba（0,0,0,0.64）
- 色4：＃000000
新しい行を追加
カラム構造
このチュートリアルの最後の部分では、スティッキーエフェクトを機能させることに焦点を当てています。 そのためには、数行のCSSコードが必要です。 セクションの下部に新しい行を追加します。
コードモジュールを列に追加
スティッキー質問CSSコードを挿入します
各質問のテキストモジュールでスティッキー効果が機能するようにするCSSコードの次の行を含むコードモジュールを追加します。
<style>
.sticky {
position: sticky;
position: -webkit-sticky;
top: 200px !important;
}
</style>
プレビュー
すべての手順を完了したので、さまざまな画面サイズでの結果を最終的に見てみましょう。
デスクトップ
モバイル
最終的な考え
この投稿では、DiviのLibrary Layout Packを使用して、次のFAQデザインのために交換するスティッキーな質問を作成する方法を示しました。 Library Layout Packのルックアンドフィールを使用しましたが、このデザインを好きなようにスタイル設定して、次のDiviプロジェクトに使用できます。 このチュートリアルは、Diviデザインイニシアチブの一部であり、毎週、デザインツールボックスに何か特別なものを入れようとしています。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！
Diviの詳細を知り、Diviの景品をさらに入手したい場合は、メールマガジンとYouTubeチャンネルに登録して、この無料コンテンツを最初に知って利益を得ることができるようにしてください。