Diviを使用してモジュールを列コンテナに固定する方法
公開: 2019-10-08ページに複数のアクションの呼び出しを表示する場合、さまざまな要素を統合するインタラクティブなスクロール効果を作成すると役立ちます。 これにアプローチする1つの方法は、モジュールが列コンテナー内を移動しているときに、モジュールを固定要素に変換することです。 今日のチュートリアルでは、このテクニックを処理する美しいデザインを作成する方法を紹介します。また、JSONファイルを無料でダウンロードすることもできます。
それを手に入れましょう。
プレビュー
チュートリアルに入る前に、さまざまな画面サイズでの結果を最終的に見てみましょう。
デスクトップ
タブレットとモバイル
スティッキーカラムコンテナデザインを無料でダウンロード
無料のスティッキーカラムコンテナのデザインを手に入れるには、まず下のボタンを使用してダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
私たちのYoutubeチャンネルを購読する
再作成を始めましょう！
新しいセクションを追加
作業中のページに新しい通常のセクションを追加することから始めます。
間隔
セクション設定を開き、さまざまな画面サイズで上部と下部のパディングを変更します。
- トップパディング：7vw（デスクトップ）、10vw（タブレット）、15vw（電話）
- 下部のパディング：20vw（デスクトップ）、7vw（タブレット）、10vw（電話）
新しい行を追加
カラム構造
次の列構造を使用して、新しい行を追加して続行します。
サイジング
モジュールをまだ追加せずに、行設定を開き、行がセクションの幅全体を占めるようにします。 [列の高さを均等化]オプションを有効にすることも非常に重要です。 そうすることで、列に空のスペースを作成し、ページを下にスクロールしながら固定モジュールを自由に移動できるようにします。
- カスタムガター幅を使用：はい
- 側溝幅：1
- 列の高さを等しくする：はい
- 幅：100％
- 最大幅：100％
列2トップパディング
次に列2の設定を開き、デスクトップに上部のパディングを追加します。
- トップパディング：20vw（デスクトップ）、0vw（タブレットと電話）
列3のトップパディング
3番目の列にもカスタムのトップパディング値を追加します。
- トップパディング：40vw（デスクトップ）、0vw（タブレットと電話）
列4トップパディング
また、列4にも上部のパディング値を追加して、行の設定を完了します。
- トップパディング：60vw（デスクトップ）、0vw（タブレットと電話）
列1にCTAを追加する
コンテンツを追加する
モジュールの追加を開始する時が来ました！ 列1に必要な最初のモジュールはCTAモジュールです。 お好みのコンテンツを挿入してください。
リンク
ボタンへのリンクも追加します。 これを行うと、ボタンがデザインに表示されます。
- ボタンリンクURL：＃
背景色
次に、モジュールの背景色を変更します。
- 背景色：#ffffff
テキスト設定
[デザイン]タブに移動し、一般的なテキスト設定を変更します。
- テキストの配置：中央
- テキストの色：暗い
タイトルテキスト設定
タイトルテキストの設定も変更します。
- タイトル見出しレベル：H3
- タイトルフォント：スペクトル
- タイトルテキストの色：＃000000
- タイトルテキストサイズ：2vw（デスクトップ）、4vw（タブレット）、6vw（電話）
本文の設定
本文の設定とともに。
- ボディフォント：Fira Sans
- ボディフォントの太さ：軽い
- 本文の色：＃000000
- 本文のサイズ：1vw（デスクトップ）、2vw（タブレット）、3vw（電話）
- ボディラインの高さ：1.8em
ボタンの設定
CTAモジュールのボタンのスタイルも忘れないでください。
- ボタンにカスタムスタイルを使用する：はい
- ボタンのテキストサイズ：1vw（デスクトップ）、2vw（タブレット）、3vw（電話）
- ボタンのテキストの色：#ffffff
- ボタンの背景色：＃444eff
- ボタンの境界線の幅：0px
- ボタンの境界半径：50vw
- ボタンフォント：Fira Sans
- トップパディング：1vw（デスクトップ）、2vw（タブレット）、3vw（電話）
- 下部のパディング：1vw（デスクトップ）、2vw（タブレット）、3vw（電話）
- 左パディング：3vw（デスクトップ）、7vw（タブレット）、13vw（電話）
- 右パディング：3vw（デスクトップ）、7vw（タブレット）、13vw（電話）
間隔
次に、間隔の設定に移動し、カスタムの上部と下部のパディングを追加します。
- トップパディング：8vw
- ボトムパディング：8vw
国境
モジュールにもいくつかの丸い角を追加します。
- 丸みを帯びたコーナー：1vw（すべてのコーナー）
ボックスシャドウ
微妙なボックスシャドウを追加して、モジュールのデザインを完成させます。
- ボックスシャドウの水平位置：10px
- ボックスシャドウブラー強度：50px
- 影の色：rgba（0,0,0,0.08）
CSSクラス
ここで、スクロールスティッキー効果を機能させるには、このチュートリアルの最後に数行のCSSコードを追加する必要があります。 その準備として、CSSクラスをCTAモジュールに追加します。
- CSSクラス：sticky-cta
列1に画像モジュールを追加
画像をアップロード
次の最後のモジュールで、列1に必要な画像モジュールです。 お好みのPNG画像をアップロードしてください。
配置
次に画像の配置を変更します。
- 画像の配置：中央
サイジング
モジュールにも全幅を強制するようにしてください。
- 全幅を強制：はい
間隔
間隔設定に移動し、さまざまな画面サイズにカスタム間隔値を追加して、モジュールの設定を完了します。
- トップマージン：-5vw（タブレットと電話）
- 下マージン：-12vw（デスクトップ）、5vw（タブレットと電話）
- 左パディング：3vw（デスクトップ）、10vw（タブレット）、25vw（電話）
- 右パディング：3vw（デスクトップ）、10vw（タブレット）、25vw（電話）
両方のモジュールのクローンを3回作成し、残りの列に配置します
列1で両方のモジュールを完了したら、両方を3回複製して、行の残りの列に複製を配置できます。
画像を変更する
重複する各イメージモジュールのイメージを必ず変更してください。
CTAコンテンツとボタンの背景色を変更する
ボタンの背景色とともにCTAコンテンツも変更します。
- CTAモジュール＃2：＃89ffb4
- CTAモジュール＃3：＃ff89f1
- CTAモジュール＃4：＃ffd389
列1、2、3の画像モジュールにCSSクラスを追加します
ここで、スティッキー効果が画像でも機能することを確認するために、列1、2、および3の画像モジュールにCSSクラスを追加する必要があります。
- CSSクラス：sticky-image
行＃2を追加
カラム構造
あとはCSSコードを追加するだけです。 これを行うには、新しい行を追加します。
CSSコードでコードモジュールを追加する
行にコードモジュールを追加し、下にCSSコードを挿入すれば完了です！
<style>
@media only screen and (min-width: 980px) {
.sticky-cta {
position: sticky;
position: -webkit-sticky;
top: 8vw !important;
}
.sticky-image {
position: sticky;
position: -webkit-sticky;
top: 28vw !important;
}
}</style>
プレビュー
すべての手順を完了したので、さまざまな画面サイズでの結果を最終的に見てみましょう。
デスクトップ
タブレットとモバイル
最終的な考え
この投稿では、モジュールを列コンテナーに固定しておく方法を示しました。 この手法を使用すると、ページ上のさまざまなアクションの呼び出しを強調できる、見事なスクロール効果が得られる可能性があります。 JSONファイルも無料でダウンロードできました！ ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。
Diviの詳細を知り、Diviの景品をさらに入手したい場合は、メールマガジンとYouTubeチャンネルに登録して、この無料コンテンツを最初に知って利益を得ることができるようにしてください。