Diviの無料の月額/年額価格切り替えデザインをダウンロードする

公開: 2019-10-28

あなたがあなたのウェブサイトで価格設定計画を紹介することに決めるとき、それにアプローチするいくつかの方法があります。最も人気のあるアプローチの1つは、月額/年額の料金切り替えを作成することです。これにより、ユーザーは、選択した請求方法に基づいて、さまざまな料金プランを簡単にナビゲートできます。今日のチュートリアルでは、Diviで価格設定の切り替えを機能させる方法を紹介します。見事な例を最初から再現し、JSONファイルを無料でダウンロードすることもできます。

それを手に入れましょう。

プレビュー

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

デスクトップ

価格設定の切り替え

モバイル

価格設定の切り替え

月額/年額のトグルデザインを無料でダウンロード

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

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

無料でダウンロード

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

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

再作成を始めましょう！

セクション＃1を追加

背景色

作業中のページに最初のセクションを追加することから始めます。セクション設定を開き、背景色を追加します。

背景色：＃ffad72

価格設定の切り替え

ボトムディバイダー

[デザイン]タブに移動し、次に下部の仕切りを挿入します。

仕切りスタイル：リストで検索
仕切りの高さ：10vw

価格設定の切り替え

間隔

カスタムの上部と下部のパディングも追加します。

トップパディング：5vw
ボトムパディング：10vw

価格設定の切り替え

CSS ID

そして、CSSIDをセクションに追加します。

CSS ID：トグルセクション

価格設定の切り替え

新しい行を追加

カラム構造

次の列構造を使用して、セクションに行を追加して続行します。

価格設定の切り替え

サイジング

モジュールをまだ追加せずに、行の設定を開き、行が画面の幅全体を占めるようにします。

カスタムガター幅を使用：はい
側溝幅：1
幅：30vw（デスクトップ）、45vw（タブレット）、50vw（電話）
最大幅：100％

価格設定の切り替え

間隔

次に、デフォルトの上部と下部のパディングを削除します。

トップパディング：0px
ボトムパディング：0px

価格設定の切り替え

国境

また、境界線の設定も変更します。

丸みを帯びたコーナー：50vw（すべてのコーナー）
ボーダー幅：1px
ボーダーカラー：＃e8e8e8

価格設定の切り替え

画面

小さい画面サイズで両方の列が隣り合って表示されるようにするために、CSSコードの1行を行のメイン要素に追加します。

display: flex;

価格設定の切り替え

列1にテキストモジュールを追加

コンテンツを追加する

モジュールの追加を開始する時が来ました！列1に必要なモジュールは、テキストモジュールだけです。お好みのコンテンツを入力してください。

価格設定の切り替え

テキスト設定

[デザイン]タブに移動し、次のようにテキスト設定を変更します。

テキストフォント：Montserrat
テキストサイズ：1vw（デスクトップ）、1.5vw（タブレット）、2vw（電話）
テキストの配置：中央
テキストの色：明るい

価格設定の切り替え

間隔

さまざまな画面サイズで上部と下部のパディング値も変更します。

トップパディング：2vw（デスクトップ）、3vw（タブレット）、4vw（電話）
下部のパディング：2vw（デスクトップ）、3vw（タブレット）、4vw（電話）

価格設定の切り替え

CSSIDとクラス

そして、CSSIDとクラスをテキストモジュールに割り当てます。

CSS ID：pricing-plan-item-1
CSSクラス：pricing-item-cursor

価格設定の切り替え

テキストモジュールのクローンを作成し、列2に複製を配置します

列1のテキストモジュールを完了したら、それを1回複製して、複製を列2に配置できます。

価格設定の切り替え

コンテンツの変更

必ず内容を変更してください。

価格設定の切り替え

CSSIDを変更する

また、別のCSSIDを使用してください。

CSS ID：pricing-plan-item-2

価格設定の切り替え

セクション＃2を追加

背景色

2番目のセクションに進みます。次の背景色を追加します。

背景色：＃6b63dd

価格設定の切り替え

間隔

次に、セクション間隔の設定に移動し、さまざまな画面サイズにカスタムパディング値を追加します。

トップパディング：7vw
ボトムパディング：15vw
左パディング：21vw（デスクトップ）、10vw（タブレットと電話）
右パディング：21vw（デスクトップ）、10vw（タブレットと電話）

価格設定の切り替え

CSS ID

セクションにもCSSIDを追加します。

CSS ID：価格-1

価格設定の切り替え

行＃1を追加

カラム構造

次の列構造を使用して、セクションに新しい行を追加して続行します。

価格設定の切り替え

サイジング

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

カスタムガター幅を使用：はい
側溝幅：1
列の高さを等しくする：はい
幅：100％
最大幅：100％

価格設定の切り替え

間隔

次に、デフォルトの上下のパディングをすべて削除します。

トップパディング：0px
ボトムパディング：0px

価格設定の切り替え

国境

次に、間隔設定に移動し、次の境界設定を適用します。

右ボーダー幅：1px
左ボーダー幅：1px
上枠幅：0px
下の境界線の幅：0px
ボーダーカラー：rgba（255,255,255,0）

価格設定の切り替え

画面

行のメイン要素にCSSコードを1行追加して、小さい画面サイズで列が隣り合って表示されるようにします。

display: flex;

価格設定の切り替え

列2の設定

間隔

一般的な行の設定が完了したら、列2の設定を開き、カスタムの上下のパディングを追加します。

トップパディング：1vw
ボトムパディング：4vw

価格設定の切り替え

国境

列2にも境界線を使用します。

右ボーダー幅：1px
右の境界線の色：#ffffff

価格設定の切り替え

列3の設定

間隔

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

トップパディング：1vw
ボトムパディング：4vw

価格設定の切り替え

列1に分周器を追加します

可視性

モジュールの追加を開始する時が来ました！最初のモジュールであり、列1で必要な唯一のモジュールはDividerモジュールです。 'ShowDivider'オプションを必ず無効にしてください。このモジュールが必要なのは、デザインの残りの部分が損なわれていないことを確認するためだけです。

仕切りを表示：いいえ

価格設定の切り替え

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

H3コンテンツを追加する

列2に移動し、選択したH3コンテンツを含むテキストモジュールを追加します。

価格設定の切り替え

H3テキスト設定

H3テキスト設定を次のように変更します。

見出し3フォント：Montserrat
見出し3テキストの配置：中央
見出し3のテキストの色：#ffffff
見出し3テキストサイズ：2vw（デスクトップ）、3vw（タブレット）、3.5vw（電話）
見出し3文字の間隔：-1px

価格設定の切り替え

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

コンテンツを追加する

前のテキストモジュールのすぐ下に別のテキストモジュールを追加し、選択したコンテンツを挿入します。

価格設定の切り替え

テキスト設定

[デザイン]タブに移動し、それに応じてテキスト設定を変更します。

テキストフォント：Montserrat
テキストフォントの太さ：超軽量
テキストの色：#ffffff
テキストサイズ：2vw（デスクトップ）、3vw（タブレット）、3.5vw（電話）
テキスト行の高さ：1em
テキストの配置：中央

価格設定の切り替え

間隔

カスタムの上部マージンも追加します。

トップマージン：0.5vw

価格設定の切り替え

両方のモジュールのクローンを作成し、複製を列3に配置します

列2のモジュールを完了したら、両方のモジュールを複製して、複製を列3に配置できます。

価格設定の切り替え

コンテンツの変更

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

価格設定の切り替え

行＃2を追加

カラム構造

セクション2の2行目に！次の列構造を選択します。

価格設定の切り替え

サイジング

モジュールをまだ追加せずに、行設定を開き、次のようにサイズ設定を変更します。

カスタムガター幅を使用：はい
側溝幅：1
列の高さを等しくする：はい
幅：100％
最大幅：100％

価格設定の切り替え

間隔

次に、デフォルトの上下のパディングを削除します。

トップパディング：0px
ボトムパディング：0px

価格設定の切り替え

国境

そして、境界線を適用します。

上枠幅：0px
右ボーダー幅：1px
下の境界線の幅：1px
左ボーダー幅：1px
ボーダーカラー：＃8882dd

価格設定の切り替え

画面

行のメイン要素にCSSコードを1行追加して、小さい画面サイズで列が隣り合って表示されるようにします。

display: flex;

価格設定の切り替え

列1の設定

間隔

列1の設定を開いて続行し、さまざまな画面サイズにカスタムパディング値を適用します。

トップパディング：3vw（デスクトップ）、5vw（タブレットと電話）
下部のパディング：3vw（デスクトップ）、5vw（タブレットと電話）

価格設定の切り替え

国境

列にも右の境界線を追加します。

右ボーダー幅：1px
右の境界線の色：＃8882dd

価格設定の切り替え

列2の設定

間隔

2番目の列に移動し、間隔の設定を変更します。

トップパディング：3vw（デスクトップ）、5vw（タブレットと電話）
下部のパディング：3vw（デスクトップ）、5vw（タブレットと電話）

価格設定の切り替え

国境

次に右の境界線を追加します。

右ボーダー幅：1px
右の境界線の色：#ffffff

価格設定の切り替え

列3の設定

間隔

次に、列3の設定を開き、さまざまな画面サイズにカスタムの上部と下部のパディング値を追加します。

トップパディング：3vw（デスクトップ）、5vw（タブレットと電話）
下部のパディング：3vw（デスクトップ）、5vw（タブレットと電話）

価格設定の切り替え

列1にテキストモジュールを追加

コンテンツを追加する

行と列の設定が完了したら、モジュールの追加を開始します。列1にテキストモジュールを追加し、選択したコンテンツを挿入します。

価格設定の切り替え

テキスト設定

[デザイン]タブに移動し、それに応じてテキスト設定を変更します。

テキストフォント：Montserrat
テキストの色：#ffffff
テキストサイズ：1vw（デスクトップ）、1.5vw（タブレット）、2vw（電話）
テキストの配置：中央

価格設定の切り替え

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

コンテンツボックスに記号を追加

2番目の列には、別のテキストモジュールが必要です。コンテンツボックスに「✓」記号を追加します。

価格設定の切り替え

テキスト設定

[デザイン]タブに移動し、次のようにテキスト設定を変更します。

テキストの色：＃ffad72
テキストサイズ：2vw（デスクトップ）、3vw（タブレット）、4vw（電話）
テキスト行の高さ：1em
テキストの配置：中央

価格設定の切り替え

テキストモジュールのクローンを作成し、列3に複製を配置します

列2のテキストモジュールを完了したら、それを複製して列3に複製を配置できます。

価格設定の切り替え

代替の記号とテキストの色

紹介している機能によっては、記号を「✗」に変更することをお勧めします。別のテキストの色も使用してください。

テキストの色：#ffffff

価格設定の切り替え

行を必要な回数だけクローンする

行全体を完成させたら、表示する機能の数に応じて、必要な回数だけ行を複製できます。

価格設定の切り替え

行＃3を追加

カラム構造

2番目のセクションに追加する最後の行には、次の列構造が含まれています。

価格設定の切り替え

サイジング

モジュールをまだ追加せずに、行設定を開き、次のようにサイズ設定を変更します。

カスタムガター幅を使用：はい
側溝幅：1
列の高さを等しくする：はい
幅：100％
最大幅：100％

価格設定の切り替え

間隔

次に、デフォルトの上下のパディングを削除します。

トップパディング：0px
ボトムパディング：0px

価格設定の切り替え

国境

境界線も追加します。

上枠幅：0px
下の境界線の幅：0px
右ボーダー幅：1px
左ボーダー幅：1px
ボーダーカラー：rgba（255,255,255,0）

価格設定の切り替え

画面

また、行のメイン要素に1行のCSSコードを追加して、小さい画面サイズで列が隣り合って表示されるようにします。

display: flex;

価格設定の切り替え

2列目と3列目の設定

間隔

列2と列3の両方に上部マージンを追加して続行します。

トップパディング：4vw

価格設定の切り替え

列2の境界線

列2にも右の境界線を追加します。

右ボーダー幅：1px
右の境界線の色：#eaeaea

価格設定の切り替え

クローンディバイダーモジュールと新しい行の列1に配置

セクションの最初の行にあるDividerModuleのクローンを作成し、新しい行の最初の列に複製を配置します。

価格設定の切り替え

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

コピーを追加

ボタンモジュールを列2に追加して続行し、選択したコピーを挿入します。

価格設定の切り替え

配置

デザインタブのボタンの配置を変更します。

ボタンの配置：中央

価格設定の切り替え

ボタンの設定

そして、ボタンの設定を次のように変更します。

ボタンにカスタムスタイルを使用する：はい
ボタンのテキストサイズ：1vw（デスクトップ）、1.5vw（タブレット）、2vw（電話）
ボタンのテキストの色：#ffffff
ボタンの背景色：＃ffad72
ボタンの境界線の幅：0px

価格設定の切り替え

ボタンの境界半径：50vw
ボタンフォント：Montserrat

価格設定の切り替え

間隔

ボタンモジュールにもいくつかのカスタムパディング値を追加します。

トップパディング：1vw（デスクトップ）、1.5vw（タブレットと電話）
ボトムパディング：1vw（デスクトップ）、1.5vw（タブレットと電話）
左パディング：4vw（デスクトップ）、6vw（タブレットと電話）
右パディング：4vw（デスクトップ）、6vw（タブレットと電話）

価格設定の切り替え

ボタンモジュールのクローンを作成し、列3に複製を配置します

列2のボタンモジュールを完了したら、それを複製して列3に複製を配置できます。

価格設定の切り替え

クローンセクション＃2

2番目のセクション全体のクローンを作成して続行します。テキストモジュールの価格値を変更して、年間請求オプションと一致するようにしてください。これは、誰かが「年次請求」をクリックすると表示されるセクションです。

価格設定の切り替え

CSSIDを変更してCSSクラスを追加する

次にセクションのCSSIDを変更し、CSSクラスも追加します。

CSS ID：価格-2
CSSクラス：hide-section-2

価格設定の切り替え

セクション＃1の先頭に新しい1列の行を追加する

あとは、CSSとjQueryコードを追加して機能を動作させるだけです。そのために、セクション1の先頭に新しい行を追加します。

価格設定の切り替え

CSSコードでコードモジュール＃1を追加する

最初のコードモジュールを追加し、CSSコードの次の行を挿入します。

<style>
.pricing-item-cursor {
cursor: pointer;
}

.hide-section-2 {
display: none;
}

.active-pricing-plan {
color: #6b63dd !important;
background-color: #fff;
}</style>

価格設定の切り替え

JQueryコードを使用してコードモジュール＃2を追加する

前のコードモジュールのすぐ下に別のコードモジュールを追加し、スクリプトタグの間にjQueryコードを挿入すれば完了です。

jQuery(function($){
  
$('#pricing-plan-item-1').addClass('active-pricing-plan');

$('[id*="pricing-plan-item"]').click(function() {

var selector = $(this).attr('id').replace('-plan-item', '');
var $pricingselect  = $('#' + selector);

  
$('[id*="pricing-"]').not('[id*="pricing-plan"]').hide();
  
$pricingselect.show()
  
$('#toggle-section').show();
  
$('[id*="pricing-plan"]').removeClass("active-pricing-plan");
$(this).addClass('active-pricing-plan');

});
});

価格設定の切り替え

プレビュー

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

デスクトップ

価格設定の切り替え

モバイル

価格設定の切り替え

最終的な考え

この投稿では、Diviを使用して月額/年額の価格切り替えデザインを作成する方法を紹介しました。これは、料金プランにインタラクションを追加するための優れた方法です。クリックテクニックを適用するだけでなく、どの機能がどのプランに含まれているかを強調できる美しいグリッド料金プランも設計しました。 JSONファイルも無料でダウンロードできました。ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！

Diviの詳細を知り、Diviの景品をさらに入手したい場合は、メールマガジンとYouTubeチャンネルに登録して、この無料コンテンツを最初に知って利益を得ることができるようにしてください。

Diviの無料の月額/年額価格切り替えデザインをダウンロードする

プレビュー

デスクトップ

モバイル

月額/年額のトグルデザインを無料でダウンロード

無料でダウンロード

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

再作成を始めましょう！

セクション＃1を追加

背景色

ボトムディバイダー

間隔

CSS ID

新しい行を追加

カラム構造

サイジング

間隔

国境

画面

列1にテキストモジュールを追加

コンテンツを追加する

テキスト設定

間隔

CSSIDとクラス

テキストモジュールのクローンを作成し、列2に複製を配置します

コンテンツの変更

CSSIDを変更する

セクション＃2を追加

背景色

間隔

CSS ID

行＃1を追加

カラム構造

サイジング

間隔

国境

画面

列2の設定

間隔

国境

列3の設定

間隔

列1に分周器を追加します

可視性

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

H3コンテンツを追加する

H3テキスト設定

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

コンテンツを追加する

テキスト設定

間隔

両方のモジュールのクローンを作成し、複製を列3に配置します

コンテンツの変更

行＃2を追加

カラム構造

サイジング

間隔

国境

画面

列1の設定

間隔

国境

列2の設定

間隔

国境

列3の設定

間隔

列1にテキストモジュールを追加

コンテンツを追加する

テキスト設定

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

コンテンツボックスに記号を追加

テキスト設定

テキストモジュールのクローンを作成し、列3に複製を配置します

代替の記号とテキストの色

行を必要な回数だけクローンする

行＃3を追加

カラム構造

サイジング

間隔

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