スティッキーサイドバーCTAをDiviのブログ投稿テンプレートに追加する方法

公開: 2019-11-27

スティッキーサイドバーCTAは、圧倒したり気を散らしたりすることなく、訪問者の注意を引くのに非常に効果的です。 秘訣は、ユーザーがページを下にスクロールしても、投稿コンテンツの側面に「固定」または固定されたままになる1つまたは2つの要素をサイドバーに含めることです。 これは、必要に応じてページの側面に重要なCTAを表示できるという利点を備えた、最新の全幅（サイドバーなし）レイアウトの感触を提供するため、従来のサイドバーレイアウトのさわやかな代替手段です。

このチュートリアルでは、Divi Theme Builderを使用して、スティッキーサイドバーCTAをブログ投稿テンプレートに追加する方法を紹介します。 このレイアウトの適用は広範囲に及んでいます。 ほぼすべてのページまたは投稿テンプレートで機能します。 さらに、CTAに限定する必要はありません。 好きなDiviモジュールを追加することを選択できます。

始めましょう！

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

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

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

無料でダウンロード

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

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

レイアウトをページにインポートするには、zipファイルを抽出し、テーマビルダーの移植性オプションを使用してjsonファイルの1つをDiviテーマビルダーに追加するだけです。

チュートリアルに行きましょう。

始めるために必要なもの

開始するには、Diviテーマをインストールしてアクティブ化する必要があります。 最新バージョンのDiviを使用していることを確認してください。

また、意図した結果を表示するために、テスト目的でDiviBuilderで作成された投稿が少なくとも1つ必要になります。

その後、あなたは行く準備ができています。

スニークピーク

これは、Diviのブログ投稿テンプレートに追加されたスティッキーサイドバーCTAの概要です。

スティッキーサイドバーCTA

Diviのブログ投稿テンプレートにスティッキーサイドバーCTAを追加する方法

テーマビルダーテンプレートの追加

最初のステップには、作成済みのテンプレートをサイトにインポートすることが含まれます。 Divi Theme Builder Pack＃1の投稿テンプレートを使用します。

開始するには、Divi> ThemeBuilderに移動します。 ページの右上にある移植性アイコンをクリックします。 ポータビリティモーダルで、[インポート]タブを選択し、フォルダーからdivi-theme-builder-pack-1-post-template.jsonファイルを選択します。 現在サイトにテンプレートがインストールされている場合は、現在のテンプレートを上書きする可能性のあるオプションのチェックを外してください。 次に、インポートボタンをクリックします。

スティッキーサイドバー

ブログ投稿テンプレートの作成

テンプレートがインポートされると、新しいスティッキーサイドバーCTAをテンプレートレイアウトに追加する準備が整います。 これを行うには、カスタムボディ領域の編集アイコンをクリックします。

スティッキーサイドバーCTA

サイドバーCTAを保持するためのデュアルサイドバーレイアウトの追加

テンプレートレイアウトエディターで、投稿コンテンツモジュールを含む行を見つけ、列レイアウトを1/5 3/5 1/5（1/5 3/5 1/5）列構造に変更します。 これにより、投稿コンテンツの中央の列を維持しながら、スティッキーサイドバーCTAの両側に2つのセクションを提供できます。

スティッキーサイドバー

列の構造を変更したら、投稿コンテンツモジュールを中央の列にドラッグします。

行設定の更新

行設定を開き、次のデザインオプションを更新します。

  • カスタムガター幅を使用：はい
  • 側溝幅：2
  • 幅：100％（デスクトップ）、90％（タブレット）
  • 最大幅：1500px

スティッキーサイドバー

これにより、デュアルサイドバーのセットアップに必要なスペースが得られます。

列1の設定を更新する

次に、列1の設定を開き、列にカスタムCSSクラスを指定します。

  • CSSクラス：sticky-cta

スティッキーサイドバーCTA

左側の列にサイドバーCTAを追加する

これで、最初の召喚の準備が整いました。 左端の列に召喚状モジュールを追加します。

スティッキーサイドバー

サイドバーCTAのスタイリング

次のように設定を更新します。

コンテンツ
  • ボタン：「ここをクリック」
  • 本文：「あなたのコンテンツはここにあります。 このテキストをインラインで、またはモジュールのコンテンツ設定で編集または削除してください。」
  • ボタンリンクURL：＃

スティッキーサイドバー

本文のデザイン
  • ボディフォント：Montserrat
  • ボディフォントの太さ：セミボールド
  • 本文の配置：右
  • 本文の色：＃444444
  • 本文のサイズ：22px（デスクトップ）、18px（タブレット）
  • ボディラインの高さ：1.3em

スティッキーサイドバーCTA

ボタン
  • ボタンのテキストサイズ：14px
  • ボタンのテキストの色：#ffffff
  • ボタンの背景色：＃6148df
  • ボタンの境界線の幅：0px
  • ボタンの境界線半径：80px
  • ボタンのフォントの太さ：太字
  • ボタンのフォントスタイル：TT
  • ボタンのパディング：上12px、下12px、左22px、右22px

スティッキーサイドバー

幅、配置、パディング、および境界線
  • 幅：100％
  • 最大幅：320px
  • モジュールの配置：右
  • パディング：左10px、右10px
  • 上枠幅：10px
  • 上枠の色：#eeeeee
  • 下の境界線の幅：10px
  • 下の境界線の色：#eeeeee

スティッキーサイドバーCTA

サイドバーCTAを右側の列に追加する

右側の列のCTAを作成するには、作成したCTAをコピーして、右端の列に貼り付けます。 次に、複製の設定を次のように更新します。

  • 本文の配置：左
  • モジュールの配置：左

右CTA

列3の設定を更新する

右側の列のこのCTAでは、ページのさらに下のポイントでサイドバーCTAの開始位置を確立するために、列に上部マージンを追加します。

まず、列3の設定を開き、列1に追加したものと同じCSSクラスを追加します。

  • CSSクラス：sticky-cta

次に、次のカスタムCSSをメイン要素に追加します。

デスクトップ

margin-top: 50%

タブレット

margin-top: 0%

divi投稿テンプレート

これにより、行幅の50％に等しい、右側の列のスティッキーCTAの異なる開始点が得られます。 自分のブログ投稿の必要に応じて、この値を自由に調整してください。

マージン

コードモジュールを使用してカスタムCSSをテンプレートに追加する

サイドバーCTAの「スティッキー」な位置を取得するには、カスタムCSSを追加する必要があります。 これを行うには、投稿コンテンツモジュールの下（またはページ上の任意の場所）に新しいコードモジュールを作成します。

divi投稿テンプレート

次に、次のCSSをコードボックスに貼り付けます。 

<style> 
@media only screen and (min-width: 980px) {
  #page-container { 
    overflow-y:visible !important; } 
  .sticky-cta {
    position: sticky !important;
    position: -webkit-sticky !important;
    top: calc(50vh - 130px) !important;
  }
  }
</style>

スティッキーサイドバー

このコードの上部オフセットは、スクロール中にCTAをページの垂直方向の中央に配置する計算です。 50vhは基本的にブラウザウィンドウの半分の高さであり、130pxはCTAの約半分の高さです。 高さが高い/低いCTAがある場合は、130pxを上下に調整する必要があります。

設定を保存する

完了したら、テンプレートレイアウトを保存します。

divi投稿テンプレート

次に、テーマビルダーの設定を保存します

スティッキーサイドバー

最終結果

最終結果を表示するには、テンプレートを使用するブログ投稿にアクセスしてください。

スティッキーサイドバーCTA

そして、これがスティッキーサイドバーCTAがスクロールに貼り付く方法です。 これが長い投稿コンテンツに対してどのように最適に機能するかを確認できます。

スティッキーサイドバーCTA

そしてここにそれはモバイルディスプレイにあります。

diviブログ投稿テンプレート

最終的な考え

これらの粘着性のあるサイドバーCTAは、従来のサイドバーのさわやかな代替品です。 邪魔にならず、ポストに雑然とした感触を与えないため、ミニマリストデザインに適しています。 さらに、CTAをページのさらに下に配置して、徐々に表示され、スクロールに固定されるようにして、訪問者にとってもう少し目立つようにすることができます。 そして忘れないでください。 CTAを任意のDiviモジュールまたはモジュールの組み合わせに置き換えて、必要なものをほぼすべて作成できます。 片側に1つのCTAのみを保持するように選択することもできます。 たくさんの用途があるようです。

これにより、今後、投稿テンプレートにCTAを表示する方法が改善されることを願っています。

より多くのインスピレーションについては、粘着性の要素に関する同様の投稿をチェックしてください。

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

乾杯！