Diviで美しい価格表をスタイリングする方法

価格表は、多くの場合、ページのメインCTAです。 そのため、適切にスタイルを設定することが重要です。 Diviを使用すると、多くの順番を取り、想像どおりに価格表を作成できます。 あなたに思考の糧を与えるために、私たちはあなたが取り組んでいるあらゆる種類のウェブサイトに使用できる素晴らしい価格表を作成しました。 Diviの組み込みオプションのみを使用して、AからZまでの結果を作成する方法を説明します。

それを手に入れよう！

プレビュー

チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。

デスクトップ

モバイル

無料で画像をダウンロード

このチュートリアルで使用されている画像を手に入れるには、まず下のボタンを使用して画像をダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。

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

無料でダウンロード

Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。

ダウンロード

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

Diviで美しい価格表をスタイリングする方法

私たちのYoutubeチャンネルを購読する

作り始めましょう！

新しいセクションを追加

グラデーションの背景

新しいページを作成し、次のグラデーションの背景を使用して通常のセクションを追加します。

• 色1：#ffffff
• 色2：＃353272
• 開始位置：50％
• 終了位置：50％

間隔

次に、セクションの間隔設定に移動し、カスタムマージンとパディング値を変更します。

• 下マージン：50px（デスクトップ）、20px（タブレットと電話）
• 左マージン：50px（デスクトップ）、20px（タブレットと電話）
• 右マージン：50px（デスクトップ）、20px（タブレットと電話）
• トップパディング：0px
• ボトムパディング：0px

新しい行を追加

カラム構造

セクション設定の変更が完了したら、次の列構造を使用して先に進み、新しい行を追加できます。

サイジング

モジュールをまだ追加せずに、行設定を開き、デザインタブでサイズ設定を変更します。

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

間隔

次に、間隔設定に移動し、いくつかのカスタムパディング値を追加します。

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

テキストモジュール＃1を列1に追加します

コンテンツを追加する

モジュールの追加を開始する時が来ました！ さまざまなモジュールを使用して、作成する価格表をカスタマイズしています。 必要な最初のモジュールはテキストモジュールです。 コンテンツボックスに最初のメンバーシップタイプの名前を追加します。

背景色

コンテンツを追加したら、背景設定に移動して、白い背景色を追加します。

• 背景色：#ffffff

背景画像

背景画像タブに切り替えて、この投稿の冒頭で共有したダウンロードフォルダーにある「 divi-beautiful-pricing-table-background-pattern-1.png 」ファイルをアップロードします。

• 背景画像サイズ：カバー
• 背景画像の位置：上部中央
• 背景画像の繰り返し：繰り返しなし

テキスト設定

次にテキスト設定を変更します。

• テキストフォントの太さ：超太字
• テキストの色：#ffffff
• テキストサイズ：80px
• テキスト文字の間隔：-3px
• テキスト行の高さ：1em

間隔

そして、いくつかのカスタムマージンとパディング値を追加します。

• トップマージン：5vw（デスクトップ）、0vw（タブレットと電話）
• トップパディング：20px
• ボトムパディング：200px

国境

左上隅と右上隅に「20px」を追加して続行します。

ボックスシャドウ

最後に、テキストモジュールに微妙なボックスシャドウを付けます。

• ボックスシャドウの垂直位置：-20px
• ボックスシャドウブラー強度：80px
• ボックスシャドウスプレッド強度：-10px
• 影の色：rgba（0,0,0,0.15）

ボタンモジュールを列1に追加

コピーを追加

列1に必要な2番目のモジュールはボタンモジュールです。 選択したコピーを追加します。

ボタンの配置

次に、配置設定に移動し、配置を中央に変更します。

• ボタンの配置：中央

ボタンの設定

ボタン設定のボタンの外観にいくつかの変更を加えて続行します。

• ボタンにカスタムスタイルを使用する：はい
• ボタンのテキストの色：#ffffff
• カラー1：＃6932ff
• 色2：＃30acf4
• グラデーション方向：100度

• ボタンの境界線の幅：0px
• ボタンの文字間隔：-2px
• フォントの太さ：超太字

間隔

次に、ボタンにパディングを追加して見栄えを良くし、負の上部マージンを適用して、列の前のモジュールとのオーバーラップを作成します。

• 上マージン：-54px
• トップパディング：10px
• ボトムパディング：10px
• 左パディング：30px
• 右パディング：30px

ボックスシャドウ

最後になりましたが、微妙なボックスシャドウを追加します。

• ボックスシャドウブラー強度：80px
• ボックスシャドウスプレッド強度：-14px
• 影の色：rgba（0,0,0,0.3）

テキストモジュール＃2を列1に追加します

コンテンツを追加する

次に必要なモジュールは、メンバーシップタイプの価格の別のテキストモジュールです。

背景色

価格を追加したら、背景設定に移動し、白い背景色を適用します。

• 背景色：#ffffff

テキスト設定

次にテキスト設定を変更します。

• テキストフォントの太さ：超太字
• テキストの色：rgba（0,0,0,0.05）
• テキストサイズ：120px
• テキスト行の高さ：1em

間隔

そして、間隔設定でいくつかのカスタムパディング値を適用します。

• トップパディング：100px
• ボトムパディング：100px
• 左パディング：80px

国境

次に、境界線の設定に移動し、左下隅と右下隅に「30px」を追加します。

ボックスシャドウ

最後になりましたが、モジュールにボックスシャドウを付けます。

• ボックスシャドウの水平位置：0px
• ボックスシャドウの垂直位置：2px
• ボックスシャドウブラー強度：80px
• ボックスシャドウスプレッド強度：0px
• 影の色：rgba（0,0,0,0.21）

テキストモジュール＃3を列1に追加します

コンテンツを追加する

列1に必要な次の最後のモジュールは、別のテキストモジュールです。 メンバーシップタイプの価格をコンテンツボックスに追加します。

テキスト設定

次にテキスト設定を変更します。

• テキストフォントの太さ：超太字
• テキストの色：＃000000
• テキストサイズ：50px
• テキスト行の高さ：1em

間隔

また、カスタムの間隔値を試して、このモジュールと前のモジュールの間にオーバーラップを作成します。

• 上マージン：-180px
• 下マージン：180px（タブレットと電話）
• 左パディング：100px

列1のすべてのモジュールのクローンを作成し、残りの列に複製を2回配置します

列1のモジュールの変更が完了したら、先に進んで各モジュールのクローンを2回作成し、残りの2つの列に複製を配置できます。

列のモジュールの内容を変更する

Webサイトで共有している他の2つのメンバーシップの種類に応じて、複製の内容を変更します。

列2の価格表を変更します

テキストモジュール＃1の背景画像を変更する

また、中間価格表も強調しています。 列2の最初のテキストモジュールを開き、背景画像をダウンロードフォルダーにある「 divi-beautiful-pricing-table-background-pattern-2.png 」ファイルに変更します。

テキストモジュール＃1の上部マージンを削除します

このメンバーシップタイプを強調するために、間隔設定の最初のテキストモジュールの上部マージンを削除します。

ボタンのグラデーションの背景を変更する

また、ボタンモジュールに別のグラデーションの背景を使用して、新しい背景画像を一致させます。

• 色1：＃fb32ff
• 色2：＃ff304f
• グラデーション方向：100度

プレビュー

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

デスクトップ

モバイル

最終的な考え

この投稿では、次のDiviプロジェクトの美しい価格表のスタイルを設定する方法を紹介しました。 チュートリアルを段階的にガイドし、Diviの組み込みオプションのみを使用して驚くべき結果を達成しました！ ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。