Diviのトグルモジュールをクリエイティブに使用して価格プランを紹介する方法

公開: 2019-02-02

あなたのウェブサイトで価格設定プランを紹介することになると、あなたは多くの順番を取り、絶対に魅力的で魅力的な価格設定ページまたはセクションを作成することができます。 Diviを使用してWebサイトを構築する場合、ほとんどの場合、価格表モジュールを使用します。このモジュールを使用すると、価格表をすばやく追加して、必要に応じてスタイルを設定できます。ただし、ページのこの特定のセクションにインタラクションを追加したい場合は、トグルモジュールを使用してクリック時に料金プランを表示することもできます。これは、状態を開いたままにして他の2つを閉じることにより、特定の料金プランを強調するための優れた方法です。

このチュートリアルでは、Diviのトグルモジュールを使用してゴージャスなトグル価格表のデザインを作成する方法を段階的に説明します。アプローチを取得すると、構築するあらゆる種類のWebサイトに対して、クリックするだけであらゆる種類のトグル価格プランを作成できるようになります。

それを手に入れよう！

プレビュー

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

料金プラン

作り始めましょう！

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

新しいセクションを追加

間隔

DiviのVisualBuilderを使用して、新しいページを作成するか、既存のページを開きます。ページに新しいセクションを追加し、セクション設定を開き、カスタムの上部と下部のパディングを追加して、セクションの上部と下部にスペースを作成します。

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

料金プラン

行＃1を追加

カラム構造

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

料金プラン

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

コンテンツを追加する

行を変更する必要はないので、すぐにテキストモジュールを追加してください。モジュールのコンテンツボックスに、選択したH2コンテンツを入力します。

料金プラン

見出しテキストの設定

[デザイン]タブに移動して、見出しのテキスト設定を変更して続行します。

見出し2フォント：Didact Gothic
見出し2フォントの太さ：通常
見出し2テキストの配置：中央
見出し2のテキストの色：＃000000
見出し2テキストサイズ：40px
見出し2文字の間隔：-1px

料金プラン

仕切りモジュールを追加

可視性

前の手順で追加および変更したテキストモジュールのすぐ下にディバイダーモジュールを追加します。 DividerModuleの[ShowDivider]オプションが有効になっていることを確認してください。

仕切りを表示：はい

料金プラン

色

次に、[デザイン]タブに移動し、仕切りの色を変更します。

色：＃000000

料金プラン

サイジング

サイズ設定でもモジュールの幅を変更します。

幅：39％
モジュールの配置：中央

料金プラン

間隔

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

下マージン：50px

料金プラン

行＃2を追加

カラム構造

最初の行とそのモジュールの変更が完了しました。次の列構造を使用して新しい行を追加します。

料金プラン

列1のグラジエントバックグラウンド

モジュールをまだ追加せずに、行設定を開き、列1にグラデーションの背景を追加します。

色1：＃00fff2
色2：rgba（255,255,255,0）
列1グラデーションタイプ：ラジアル
列1の半径方向：右下
列1の開始位置：30％
列1の終了位置：30％

料金プラン

列2グラジエントバックグラウンド

2番目の列についても同じようにします。

色1：＃fce96f
色2：rgba（255,255,255,0）
列2グラデーションタイプ：ラジアル
列2の半径方向：右上
列2の開始位置：40％
列2の終了位置：40％

料金プラン

列3グラジエントバックグラウンド

同様に、次の設定を使用して、3番目の列にグラデーションの背景を追加します。

色1：＃a659ff
色2：rgba（255,255,255,0）
列3グラデーションタイプ：ラジアル
列3半径方向：下
列3の開始位置：30％
列2の終了位置：30％

料金プラン

サイジング

グラデーションの背景の追加が完了したら、[デザイン]タブに移動し、サイズ設定を変更します。

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

料金プラン

トグルモジュールを列1に追加

コンテンツを追加する

さまざまな料金プランの作成を開始しましょう。新しいトグルモジュールを最初の列に追加し、タイトルを入力します。コンテンツボックスのさまざまな要素のスタイルを設定するために、いくつかの追加のHTMLタグを使用しました。次の行をコピーして、コンテンツボックスの[テキスト]タブに追加します。

<p>&nbsp;</p>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>
<p>&nbsp;</p>
<p><span><span style="font-size: 50px; font-weight: bold;">$30</span>/mo</span></p>
<p>&nbsp;</p>
<p><a href="#" style="font-weight: bold; color: #ffffff; background-color: #000000; padding: 15px 40px 15px 40px;">Buy now</a></p>
<p>&nbsp;</p>

料金プラン

州

トグルモジュールの状態を開くか閉じるかを選択できます。チュートリアルの残りの部分で行ったすべての変更を確認できるようにするには、さまざまな設計設定をすべて変更するまで、状態を「開いた」ままにしておくことをお勧めします。

料金プラン

背景色

トグルモジュールの背景設定に移動し、白い背景色を追加して続行します。

背景色：#ffffff

料金プラン

アイコン設定

次に、[デザイン]タブでアイコンの色を変更します。

アイコンの色：＃000000

料金プラン

設定の切り替え

また、トグル設定で[開くトグルの背景色]を変更します。

トグル背景色を開く：rgba（255,255,255,0）

料金プラン

タイトルテキスト設定

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

タイトルフォント：Didact Gothic
タイトルフォントの太さ：太字
タイトルテキストの色：＃000000
タイトルテキストサイズ：3.5vw（デスクトップ）、60px（タブレット）、40px（電話）

料金プラン

本文の設定

本文の設定も変更してください。

ボディフォント：Didact Gothic
本文の配置：左
本文の色：＃000000
本文サイズ：18px
ボディラインの高さ：1.5em

料金プラン

クローントグルモジュールを2回使用し、残りの2列に配置します

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

料金プラン

コピーの変更

複製のすべてのコピーを変更することを確認してください。これで完了です。

料金プラン

プレビュー

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

料金プラン

最終的な考え

このチュートリアルでは、DiviのToggleModuleを使用してWebサイトで価格プランを紹介するための創造的なアプローチを示しました。これは、訪問者と対話し、デザインスタイルを向上させるための優れた方法です。 1つを開いたままにし、他の2つのオプションを閉じたままにすることで、セクション内の特定の料金プランを簡単に強調表示できます。このアプローチは、構築しているあらゆる種類のWebサイトに使用できます。ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！