Diviを使用してさまざまな厄介なステップを通じて人々を導く方法

あなたのウェブサイトを通して手を差し伸べるように訪問者を説得しようとするとき、彼らに正しいインセンティブを与えることが重要です。 インセンティブについて考えるとき、明確で魅力的な行動の呼びかけがすぐに思い浮かびます。 ただし、CTAは通常、取得プロセスの最後の部分です。 あなたはおそらくあなたの会社の価値を示すことによってそこにあなたの道を築くでしょう。 そのための最良の方法の1つは、アプローチと独自の価値提案を共有することです。 アプローチを設計するためのスムーズな方法を探しているなら、このチュートリアルを気に入るはずです。 今日は、人々がスクロールして読んでいる間に変化するさまざまなスティッキーステップを含める方法を紹介します。 JSONファイルも無料でダウンロードできます！

それを手に入れよう！

プレビュー

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

デスクトップ

モバイル

スティッキーステップレイアウトを無料でダウンロード

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

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

無料でダウンロード

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

ダウンロード

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

1.セクションデザインを作成する

通常のセクションを追加

グラデーションの背景

作業中のページに新しいセクションを追加することから始めます。 そのセクションの設定を開き、グラデーションの背景を適用します。

• 色1：#ffffff
• 色2：＃e5e5e5
• グラデーションタイプ：線形
• グラデーション方向：150度

背景画像

次に背景画像をアップロードします。 このチュートリアル全体で使用しているものは、この投稿の冒頭にあるダウンロードフォルダーにあります。 背景画像は無料で制限なくご利用いただけます。

• 背景画像サイズ：フィット
• 背景画像の位置：左上

間隔

「0px」を追加して、セクションのデフォルトの下部パディングを削除します。

• ボトムパディング：0px

新しい行を追加

カラム構造

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

背景色

モジュールをまだ追加せずに、行の設定を開き、背景色を変更します。

• 背景色：rgba（130,100,239,0.09）

サイジング

行の[デザイン]タブに移動し、それに応じてサイズ設定を変更します。

• 列の高さを等しくする：はい
• 行の配置：中央

間隔

いくつかのカスタム間隔値も適用します。

• トップマージン：5％
• トップパディング：0px
• ボトムパディング：0px
• 左パディング：5％
• 右パディング：5％

国境

次に、境界線の設定に移動し、いくつかの丸い角を使用します。

• すべてのコーナー：10px

オーバーフロー

行オーバーフローも表示に変更します。 これにより、行コンテナを超えるすべてのものが非表示にならないようになります。

• 水平方向のオーバーフロー：目に見える
• 垂直オーバーフロー：目に見える

列1の設定

間隔

次に、列1の設定を開き、カスタムの上部と下部のパディングを追加します。

• トップパディング：5％
• ボトムパディング：5％

列2の設定

グラデーションの背景

次に、2列目にグラデーションの背景を追加します。

• 色1：＃7b47ff
• カラー2：＃6929aa
• グラデーションタイプ：線形
• グラデーション方向：158度

間隔

その列にもカスタムパディングを追加します。

• トップパディング：5％
• ボトムパディング：5％
• 左パディング：5％
• 右パディング：5％

国境

いくつかの丸い角と一緒に。

• すべてのコーナー：10px

変換スケール

また、次の変換スケール値を適用して、変換設定の列のサイズを大きくします。

• 両方：107％

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

H3コンテンツを追加する

1列目のテキストモジュールから始めて、モジュールを追加します。選択したH3コンテンツを入力します。

H3テキスト設定

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

• 見出し3フォント：ポピンズ
• 見出し3テキストの色：＃6929aa
• 見出し2テキストサイズ：35px
• 見出し3文字の間隔：-1px

Dividerモジュールを列1に追加します

可視性

次に、ディバイダーモジュールを列1に配置します。「ディバイダーを表示」オプションが有効になっていることを確認します。

• 仕切りを表示：はい

ライン

モジュールのデザインタブに移動し、線の色を変更します。

• 線の色：＃f5ca4e

サイジング

サイズ設定も変更します。

• 仕切りの重量：6px
• 幅：20％
• 高さ：6px

国境

境界設定にいくつかの丸い角を含めて、モジュール設定を完了します。

• すべてのコーナー：20px

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

コンテンツを追加する

列2で必要なモジュールは、説明コンテンツを含むテキストモジュールだけです。

テキスト設定

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

• テキストフォント：プレイフェアディスプレイ
• テキストサイズ：16px
• テキスト行の高さ：2.1em

間隔

いくつかのカスタムパディング値を追加して、モジュール設定を完了します。

• トップパディング：5％
• ボトムパディング：5％
• 左パディング：5％
• 右パディング：5％

行全体を必要な回数だけ複製します

最初の行を完了したら、最初のステップについて共有する情報の量に応じて、必要な回数だけクローンを作成できます。

すべてのコピーを変更

重複する行のすべてのコピーを変更してください。

2.セクションの下部にステップ行バーを追加します

新しい行を追加

カラム構造

すべての説明行が配置されたので、スティッキーステップ行バーを追加できます。 次の列構造を使用して、新しい行を追加します。

グラデーションの背景

行設定を開き、グラデーションの背景を使用します。

• 色1：＃ffdf51
• 色2：＃e5ac49
• グラデーションタイプ：線形
• グラデーション方向：150度

サイジング

行の[デザイン]タブに移動し、次のようにサイズ設定を変更します。

• カスタムガター幅を使用：はい
• 側溝幅：1
• 列の高さを等しくする：はい
• 行の配置：中央

間隔

次に、いくつかのカスタム間隔値を適用します。

• トップマージン：5％
• トップパディング：0px
• ボトムパディング：0px

国境

次に、境界線の設定に移動し、いくつかの丸い角を追加します。

• すべてのコーナー：10px

ボックスシャドウ

次のボックスシャドウも適用します。

• ボックスシャドウブラー強度：50px
• 影の色：rgba（0,0,0,0.13）

オーバーフロー

次に、[詳細設定]タブに移動し、オーバーフローを表示に設定します。

• 水平方向のオーバーフロー：目に見える
• 垂直オーバーフロー：可視

列2の間隔

次に、列2の設定を開き、カスタムの上部と下部のパディングを使用します。

• トップパディング：1％
• ボトムパディング：1％

列3の間隔

列3にもカスタムの上部と下部のパディングを追加しています。

• トップパディング：2％
• ボトムパディング：2％

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

コンテンツを追加する

スティッキーステップ行バーにモジュールを追加します。 列1にテキストモジュールを追加し、コンテンツボックスに手順を記載します。

グラデーションの背景

次に、グラデーションの背景を適用します。

• 色1：＃7b47ff
• カラー2：＃6929aa
• グラデーションタイプ：線形
• グラデーション方向：158度

テキスト設定

モジュールの[デザイン]タブに移動し、それに応じてテキストのスタイルを設定します。

• テキストフォント：ポピンズ
• テキストフォントの太さ：太字
• テキストの色：#ffffff
• テキストサイズ：27px

サイジング

サイズ設定にもいくつか変更を加えます。

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

間隔

次に、間隔設定にカスタムの上部と下部のパディングを追加します。

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

国境

次に、境界設定にいくつかの丸い角を追加します。

• すべてのコーナー：10px

ボックスシャドウ

微妙なボックスシャドウも使用しています。

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

変換翻訳

そして、Diviの変換変換設定を使用してモジュールをわずかに再配置することにより、モジュール設定を完了します。

• 右：-20px

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

H2コンテンツを追加する

2列目には、現在のステップを説明するH2コンテンツを含むテキストモジュールを追加します。

H2テキスト設定

モジュールの[デザイン]タブに移動し、H2テキスト設定を次のようにスタイル設定します。

• 見出し2フォント：ポピンズ
• 見出し2フォントの太さ：中
• 見出し2テキストの配置：
  • デスクトップ：左
  • タブレットと電話：センター
• 見出し2のテキストの色：＃6d40ed
• 見出し2文字の間隔：-1px

間隔

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

• トップパディング：5％
• ボトムパディング：5％

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

コンテンツを追加する

次の最後の列に進みます。 説明の内容を含むテキストモジュールを追加します。

テキスト設定

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

• テキストフォント：プレイフェアディスプレイ
• テキストフォントの太さ：太字
• テキストの色：rgba（109,64,237,0.46）
• テキストサイズ：20px
• テキストの配置：
  • デスクトップ：左
  • タブレットと電話：センター

3.スティッキーエフェクトをステップロウバーに適用します

スティッキー行の設定

粘着性のあるステップロウバーのデザインが完成したので、今度はそれを底に貼り付けます。 行設定を開き、[詳細設定]タブに移動して、次のスティッキー位置設定を適用します。

• スティッキーポジション：ボトムに固執
• スティッキーボトムオフセット：1px
• スティッキーの上限：セクション
• 周囲の粘着要素からのオフセット：はい
• トランジションのデフォルトスタイルとスティッキースタイル：はい

スティッキー行フィルター

デフォルトの状態では、行バーを表示したくありません。 ただし、ベタベタになったら表示したい。 これを実現するには、フィルター設定で不透明度フィルターを変更します。

• デフォルト：0％
• 粘着性：100％

4.次のステップのためにセクション全体を再利用する

必要な回数だけセクションをクローンする

ステップ1専用の最初のセクションが作成されたので、ステップ数に基づいてセクション全体を再利用できます。

重複するセクションのすべてのコピーを変更する

重複するセクションのすべてのコピーを必ず変更してください。 それでおしまい！

プレビュー

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

デスクトップ

モバイル

最終的な考え

この投稿では、ウェブサイトのアプローチデザインをクリエイティブにする方法を紹介しました。 具体的には、Diviのスティッキーオプションを使用して、訪問者がアプローチのさまざまな部分をナビゲートするのに役立つさまざまなスティッキーステップバーを作成する方法を示しました。 JSONファイルも無料でダウンロードできました！ ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。

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