Diviで水平価格表を作成する方法

水平価格表は、多くの機能を備えた製品を宣伝するための優れた方法です。 そして、Diviの新しい5列のレイアウトにより、これは驚くほど簡単に行えます。 ただし、5列以上のレイアウトと同様に、モバイルでも見栄えがするようにレイアウトをレスポンシブにすることが課題になります。 このチュートリアルでは、すべてのデバイスで見栄えのする水平価格表を作成する方法を紹介します。 また、水平方向の価格表を複製し、「検索と置換」などの新しいデザイン機能を使用して、数回クリックするだけで各表の配色をすばやく変更することがいかに簡単かを紹介します。

始めましょう。

スニークピーク

入門

このチュートリアルでは、必要なのはDiviだけです。 そして、ビジュアルビルダーを使用します。 テーブルを最初から作成するため、新しいページを作成し、ビジュアルビルダーをデプロイしてから、[最初からレイアウトを作成する]オプションを選択する必要があります。

その後、開始する準備が整いました。 やってみましょう！

水平価格表の5列行の設定

手始めに、ビジュアルビルダーですでに私たちを待っているセクションに5列のレイアウトを与えましょう。

モジュールの追加を開始する前に、セクション設定を更新して、上部または下部のパディングなしでカスタム幅を設定しましょう。

幅：1200px
セクションの配置：中央
カスタムパディング：0px上、0px下

次に、行の設定に移動して、次のように行と中央の3つの列に背景色をすばやく指定します。

背景色：＃00cbc9
列2の背景色：＃00cbc9
列3の背景色：#eeeeee
列4の背景色：#eeeeee

次に、次のようにサイズを更新します。

この行を全幅にする：はい
側溝幅：1
列の高さを等しくする：はい

間隔を更新するには、行の設定に少し戻る必要がありますが、とりあえず、コンテンツの各列に宣伝文を追加してみましょう。

コンテンツのモジュールで列を埋める

製品のタイトル

最初の列で、コンテンツボックス（[テキスト]タブの下）に次のヘッダーを持つテキストモジュールを追加します。

<h2>Starter</h2>

これは、あなたが取り上げている計画や製品のタイトルの場所として機能します。 この例では、これはある種の「スターター」プランになります。

次に、次の設計設定を更新します。

見出し2フォントスタイル：TT
見出し2のテキストの色：#ffffff
見出し2テキストサイズ：38px
カスタムパディング（デスクトップ）：上90％、下90％、残り10％
カスタムパディング（タブレット）：上30％、下30％

機能カテゴリの見出しに宣伝文を追加する

2番目の列に、宣伝文モジュールを追加します。 次に、コンテンツボックスのフィラーテキストを削除し、タイトルテキストはそのままにします。 次に、画像の代わりにアイコンを使用することを選択し、選択したアイコンのいずれかでアイコンを更新します。

[デザイン]タブにジャンプして、残りの設定を次のように更新します。

アイコンの色：＃00cbc9
画像/アイコンの配置：左
タイトルテキストサイズ：16px
カスタムパディング：2vwボトム
下段の境界線の幅：4px
下の境界線の色：#cccccc

この宣伝文のデザインは2、3、4列目の機能カテゴリのタイトルとして使用されるため、宣伝文モジュールをコピーして2列目と3列目に貼り付けることができます。

今のところ、間隔があまり良くないことに気づきました。 また、モジュールレベルで間隔を追加したくなるかもしれませんが、この設計では、列レベル（行設定の下）で間隔を調整する方が簡単です。 これについては後で説明します。

機能の説明のリストにテキストモジュールを追加する

次に、2番目の列の宣伝文の下にテキストモジュールを追加します。 次に、コンテンツボックスに次のテーブルHTMLコードを追加します。

• 機能の説明はここにあります。
• 機能の説明はここにあります。
• 機能の説明はここにあります。
• 機能の説明はここにあります。

順序付けられていないリストスタイルタイプ：正方形
順序付けられていないリストアイテムのインデント：4px
カスタムパディング：上20px、下20px、左5％、右5％

宣伝文の場合と同じように、テキストモジュールをコピーして、3列目と4列目の各宣伝文モジュールの下に貼り付けます。

最後の列に価格とボタンを追加する

最後の列（列5）では、価格表モジュールを使用して、ドル記号付きの価格テキストのデザインを取得します。 価格表モジュールから本当に必要なのはこれだけなので、残りのコンテンツとデザイン要素を削除し、価格テキストとドル記号を残します。 価格表モジュールに含まれているボタンを使用することもできましたが、タブレットでレスポンシブマジックを実行するのは少し困難でした（後で意味がわかります）。 そのため、ボタンモジュールも使用します。

先に進み、価格表モジュールを5番目の列に追加します。 デフォルトで含まれている2つのテーブルのいずれかを削除するには、そのうちの1つの右側にあるゴミ箱アイコンをクリックします。

次に、完全に透明なカラーコードを追加して、背景色を取り除きます。

背景色：rgba（255,255,255,0）

次に、以下を更新します。

テーブルヘッダーの背景色：rgba（255,255,255,0）
通貨と頻度のテキストの色：#ffffff
通貨と頻度のテキストサイズ：30px
価格テキストの色：#ffffff
ボーダー幅：0px
カスタムマージン（タブレット）：-100％右
カスタムマージン（スマートフォン）：0％右
カスタムパディング：0px上、10px下、0px左、0px右

次に、個々のテーブルの表示メニューの左側にある歯車のアイコンをクリックして、個々のテーブルの設定に移動します。

次に、タイトル、サブタイトル、およびコンテンツのデフォルトのコンテンツを削除します。 これにより、通貨と価格のテキストのみが残ります。

今、私はあなたがこの時点で何を考えているかを知っています。 価格テキストの下のその境界線についてどうしますか？ さて、そのためのカスタムCSSの小さなスニペットがあります。 [詳細設定]タブに移動し、次のCSSを[価格設定トップ]入力ボックスに追加します。

価格トップ：

border: none;

これで、価格設定テキストと通貨記号のみの価格設定テーブルを成功させることができました。

ボタンについては、価格表モジュールの下にボタンモジュールを追加し、以下を更新します。

ボタンの配置：中央
テキストの色：明るい
カスタムマージン（タブレット）：-100％右
カスタムマージン（スマートフォン）：0％右

カスタムマージンは、タブレットで全幅モジュールを取得するために価格表モジュールに追加したマージンと一致します。 タブレットの5列のレイアウトでは、5番目の列が2列のレイアウトの左側に配置されるため、モジュールを右に-100％引っ張ると、モジュールは行の全幅になります。

矢印のデザインとレスポンシブ列の間隔の追加

グラデーションを重ねて矢印を追加する

最初の列に矢印のデザイン効果を作成するために、2つのグラデーションの背景を重ねます。 最初のグラデーションの背景は、列レベルで追加されます。 次のものは後でモジュールレベルで追加します。

グラデーションの背景を追加するには、行の設定に移動して、以下を追加します。

列1グラデーションの背景左の色：rgba（255,255,255,0）
列1のグラデーションの背景右の色：#eeeeee（これは列2の背景色と一致する必要があります）
勾配方向：-245度
開始位置：75％
終了位置：0％

設定を保存し、1列目のテキストモジュール設定にジャンプします。 ここで、背景グラデーションの2番目のレイヤーを追加して矢印を完成させます。 以下を更新します。

列1グラデーションの背景左の色：#eeeeee
列1グラデーションの背景右の色：rgba（255,255,255,0）
勾配方向：245度
開始位置：25％
終了位置：0％

値が互いに等しく反対であることに注意してください。 たとえば、色の順序が変更され、245度が負から正に変更され、75％が25％になりました（差）。 これにより、矢印ポイントの側面を完全に対称にすることができます。

行と列の間隔

行の設定に戻り、以下を更新して行と列の間隔を調整しましょう。

カスタムパディング：0px上、0px下、0px左、0px右
カスタム2パディング：上5％、下5％、左2％、右2％
カスタム3パディング：上5％、下5％、左2％、右2％
カスタム4パディング：上5％、下5％、左2％、右2％
カスタム5パディング：10％上、10％下

なぜ私が2ガター幅を使用してそれで済ませなかったのか不思議に思うかもしれません。 それは、すべてのデバイスで読みやすさを向上させるために、テキストを含む列内のスペースを可能な限り最大化したかったためです。 少しでもスペースを節約できます。 そのため、列間のマージンは左右のパディングパーセンテージで作成されます。

新しいテーブルと配色のためにテーブルを複製する

明らかに、ユーザーが比較できるように、複数の水平価格表が必要になります。 2番目の価格表を作成するには、作成した最初の表を含むセクション全体を複製します。

次に、行の設定を開き、背景色にカーソルを合わせて、[検​​索して置換]をクリックします。

「範囲内」で「このセクション」を選択します。
「幅の置換」の下に、色を追加します：＃f84f51
次に、チェックボックスをオンにして、セクションにあるすべての値（背景色だけでなく）を置き換えます。

次に、[置換]をクリックして、魔法が発生するのを確認します。 これは、前の色のすべてのインスタンスを新しい色に変更するためのすばやく簡単な方法です。

変更を保存するには、終了する前に行設定を保存することを忘れないでください。

これで、新しい配色の新しいテーブルができました。

このプロセスをもう一度繰り返して、次の色の別のテーブルを追加します：＃bdc958

注目のテーブルを作る

テーブルの1つを目立たせて目立たせるために、テーブルを保持するセクションにボックスシャドウを追加したり、列の背景やグラデーションに使用される灰色を素敵な白い色に変更したりできます。

これを行うには、2番目のセクション（中央のセクション）のセクション設定に移動し、以下を更新します。

ボックスシャドウ：スクリーンショットを参照
ボックスシャドウの垂直位置：0px
ボックスシャドウブラー強度：80px

灰色の背景色を置き換えるには、行の設定に移動して、列2の背景色（#eeeeee）を見つけます。 それを右クリックし、「検索して置換」をクリックします。 以下を更新します。

「範囲内」で「このセクション」を選択します。
「幅の置換」の下に、色を追加します：#ffffff
次に、チェックボックスをオンにして、セクションにあるすべての値（背景色だけでなく）を置き換えます。
次に、「置換」をクリックします。

検索と置換を使用してフォントをテストする

テーブル全体で異なるフォントを使用する場合は、「検索と置換」機能を使用して、異なるフォントを簡単にテストできます。 このプロセスをスムーズにするために、意図的にすべてのモジュールのデフォルトフォントを残しました。 テーブルのページ全体のフォントを変更するには、任意のテーブルセクションの最初の列にあるテキストモジュールの設定を開くだけです（実際には、ページのデフォルトフォントを使用する任意のモジュールにすることができます）。 次に、使用されている見出し2フォントを右クリックし、「検索して置換」を選択します。 次に、以下を更新します。

「内」の下に「このページ」を保持します。
[Replace Width]で、フォントを選択します（Roboto Condensedを使用しています）。
次に、セクションにあるすべての値を置き換えるチェックボックスをオンにします（または、すべてのh2フォントを置き換えるためにチェックボックスをオンにできませんでした）。
次に、「置換」をクリックします。

これで、ページ全体ですべてのフォントが変更されました。

それでおしまい！ これで、水平価格表が完成しました。

結果を確認してみましょう。

タブレットやスマートフォンの5列調整も美しく機能します。

最終的な考え

Diviの5列のレイアウトと、Visual Builderで利用できる強力なデザイン機能により、美しい水平方向の価格表を作成できます。 また、検索と置換を使用して色とフォントを調整すると、時間を大幅に節約でき、設計プロセスがさらに改善されます。 チュートリアルが有益で刺激的なものになることを願っています。

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

乾杯！