Diviを使用して次のAboutページ用のインタラクティブな質問カードグリッドを作成する

毎週、次のプロジェクトに使用できる新しい無料のDiviレイアウトパックを提供します。 レイアウトパックの1つとして、Webサイトを次のレベルに引き上げるのに役立つユースケースも共有しています。

今週は、進行中のDiviデザインイニシアチブの一環として、Diviを使用した次のアバウトページ用のインタラクティブな質問カードグリッドを作成する方法を紹介します。 Internet Service Provider Layout Packのaboutページを使用しますが、作業中のどのページでもこのアプローチを使用できます。 それは訪問者に異なるユーザーエクスペリエンスを提供し、あなたが共有している情報で彼らと対話することを可能にします。 アプローチができたら、Diviの組み込みオプションを試して、選択した代替の質問カードグリッドデザインを作成できます。

それを手に入れよう！

プレビュー

チュートリアルに入る前に、最初から再作成する質問カードグリッドを簡単に見てみましょう。

デスクトップ

モバイル

作り始めましょう！

ISPレイアウトパックのAboutページを使用して新しいページを作成する

上に示したデザインを作成するには、インターネットサービスプロバイダーのレイアウトパックの概要ページを使用するので、このレイアウトを使用して新しいページを作成します。 いつものように、あなたはあなたの既成のレイアウトでそれを見つけることができます。

ヒーローセクションとフッターの間のすべてのセクションを削除する

現在のすべてのコンテンツを質問グリッドカードに置き換えます。 そのためには、まずヒーローセクションとフッターの間のすべてのセクションを削除する必要があります。

間に新しいセクションを追加

作成する質問カードグリッドには、回答したいあらゆる種類の会社の質問を含めることができます。 グリッドを使用して、よくある質問を紹介することもできます。 ヒーローセクションとページのフッターの間に新しい通常のセクションを追加して続行します。

新しい行を追加

カラム構造

セクション設定を変更せずに、次の列構造を使用して新しい行を追加します。

サイジング

列間のデフォルトのスペースをすべて削除します。 行設定を開き、サイズ設定にいくつかの変更を加えます。

• この行を全幅にする：はい
• カスタムガター幅を使用：はい
• 側溝幅：1
• 列の高さを等しくする：はい

間隔

見栄えの良いデザインにするために、列の間にいくらかのスペースが必要です。 間隔設定に移動し、いくつかのカスタムパディング値を追加します。

• トップパディング：10px
• ボトムパディング：10px
• 列1の左パディング：10px（デスクトップ）、5px（タブレットと電話）
• 列1の右パディング：5px
• 列2の左パディング：5px
• 列2の右パディング：5px
• 列3の左パディング：5px
• 列3の右パディング：10px（デスクトップ）、5px（タブレットと電話）

新しい宣伝文モジュールを列1に追加

コンテンツを追加する

ホバー効果を作成するために必要なモジュールは、宣伝文モジュールだけです。 まず作成し、後でクローンを作成して、全体の結果を作成します。 列1に宣伝文モジュールを追加します。 回答したい質問をタイトルフィールドに追加し、回答をコンテンツボックスに追加します。

アイコンを選択

次に、画像とアイコンの設定で適切なアイコンを選択します。 このアイコンは、訪問者が回答を表示するには質問カードにカーソルを合わせる必要があることを理解するのに役立ちます。

デフォルトのアイコン設定

デザインタブのアイコン設定を変更して続行します。

• アイコンの色：#aaaaaa
• アイコンの配置：上
• アイコンのフォントサイズを使用：はい
• アイコンフォントサイズ：40px

ホバーアイコンの設定

そして、ホバー時にアイコンの色を変更します。 ホバー時にアイコンが消えるように、ホバー時に完全に透明な色を使用しています。

• アイコンの色：rgba（255,255,255,0）

テキスト設定

次に、テキスト設定でテキストの向きを変更します。

• テキストの向き：中央

デフォルトのタイトルテキスト設定

タイトルテキストの設定にもいくつか変更を加えます。

• タイトルフォント：ポピンズ
• タイトルフォントの太さ：太字
• タイトルテキストの色：＃333333
• タイトルテキストサイズ：40px
• タイトル文字の間隔：-3px

タイトルテキスト設定にカーソルを合わせる

そして、ホバー時にタイトルテキストの色を変更します。 ここでも、完全に透明な色を使用して、誰かが宣伝文句モジュールをホバーしたときに質問が表示されないようにしています。

• タイトルテキストの色：rgba（255,255,255,0）

デフォルトの本文テキスト設定

本文のテキスト設定を変更して続行します。

• ボディフォント：Open Sans
• ボディフォントの太さ：軽い
• 本文の色：rgba（255,255,255,0）
• 本文サイズ：25px
• 本文の文字間隔：-2px
• ボディラインの高さ：1.6em

本文のテキスト設定にカーソルを合わせる

そして、ホバー時に本文の色を変更します。

• 本文の色：＃000000

間隔

モジュールを正方形に成形するために、いくつかのカスタムパディング値を追加します。

• トップパディング：9vw
• ボトムパディング：9vw
• 左パディング：50px
• 右パディング：50px

デフォルトの丸みを帯びたコーナー

また、角が丸いモジュール「30px」も提供しています。

丸みを帯びたコーナーにカーソルを合わせる

ホバー時にこれらの丸い角を削除します。

デフォルトの境界線

そして、下の境界線を追加します。

• 下の境界線の幅：0px
• 下の境界線の色：＃0fffeb

ホバーボーダー

表示されるように、ホバーの下の境界線の幅を変更します。

• 下の境界線の幅：10px

ボックスシャドウ

奥行きを加えるために、ボックスシャドウも使用します。

• 影の色：rgba（0,0,0,0.05）

トランジション

最後になりましたが、[詳細設定]タブの移行期間を短縮します。

• 移行時間：250ms

宣伝文句モジュールを2回クローンし、残りの列に配置します

最初の宣伝文句モジュールが完成したので、それを複製し、残りの2つの列に複製を配置することで時間を節約できます。

コンテンツの変更

複製のそれぞれの内容を必ず変更してください。

下の境界線の色を変更する

下のボーダーカラーと一緒に。

行全体を2回クローンします

行を必要な回数だけ複製することで、質問カードグリッドを作成できます。

各アイテムのコンテンツと下部の色を個別に変更します

ただし、内容と下部の色を変更して、それぞれの質問カードを一意にすることを忘れないでください。

プレビュー

すべての手順を完了したので、さまざまな画面サイズでの最終結果を最終的に見てみましょう。

デスクトップ

モバイル

最終的な考え

この投稿では、Diviのインターネットサービスプロバイダーレイアウトパックを使用してインタラクティブな質問カードグリッドを作成する方法を紹介しました。 デザインがレイアウトパックのスタイルと一致することを確認しましたが、このメソッドを使用して、aboutページをインタラクティブなページに変換することもできます。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！