美しいフッタースクロールを作成する方法は、Diviのセクションディバイダーの下に表示されます
公開: 2019-07-18すべてのデザイントレンドを通じて、フッターは依然として不可欠です。 人々は彼らにとても慣れてきており、それは彼らを非常にユーザーフレンドリーにしている。 彼らは訪問者があなたのウェブサイトで彼らの滞在を整理し、彼らが探している正確なページにナビゲートするのを助けます。 Diviを使用すると、1つのセクションであらゆる種類のフッターを簡単に作成できます。
さて、あなたがあなたのフッターにいくつかの追加の次元と相互作用を与えることを探しているなら、あなたはこの投稿を気に入るはずです。 フッターセクションとセクションディバイダーをクリエイティブに組み合わせて、フッタースクロールリビールを作成します。
それを手に入れよう！
プレビュー
チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。
デスクトップ
モバイル
レイアウトを無料でダウンロード
無料のレイアウトを手に入れるには、まず下のボタンを使用してダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
私たちのYoutubeチャンネルを購読する
1.新しい空白ページを作成し、選択したレイアウトをアップロードします
新しい空白ページを追加
最初に行う必要があるのは、新しい空白のページを作成することです。
SaaS Company LayoutPackのランディングページをアップロードする
Visual Builderに切り替えて、SaaS Company LayoutPackのランディングページをアップロードします。 この特定のレイアウトを使用していますが、作業中のあらゆる種類のページでテクニックを機能させることができます。
2.各セクションにZインデックスを追加し、セクションアニメーションを削除します
ヒーローセクションにZインデックスを追加
ページのヒーローセクションのzインデックスを変更して続行します。
- Zインデックス：3
Zインデックスをコピーしてページ上の他のすべてのセクションに貼り付けます
zインデックスをコピーして、ページの他のすべてのセクションに貼り付けます。 各セクションのzインデックスを増やすことは、チュートリアルを機能させるための重要なステップです。 これにより、各セクションがフッターセクションの上に表示されます。フッターセクションは後で投稿で追加します。
ヒーローセクションアニメーションを削除する
ページの下部までフッターが非表示のままになるように、すべてのセクションアニメーションも削除します。 ヒーローセクションを開き、アニメーションを削除します。
- アニメーションスタイル：なし
ページ上のすべてのセクションにアニメーションを拡張する
アニメーションスタイルをページ全体のすべてのセクションに拡張します。
3.ページの最後のセクションを変更します
背景色を変更する
ページの最後のセクションに移動して、背景色を変更します。
- 背景色：＃f2f2f2
4.ページの下部に通常のセクション＃1を追加します
セクション設定
背景色
この投稿のプレビューでわかるように、フッターはセクションの仕切りの下に表示されます。 ページの下部にある新しいセクションをこのセクションディバイダー専用にします。 セクション設定を開き、完全に透明な背景色を使用します。 これにより、フッターの位置がセクションコンテナーの下にある場合でも、フッターがセクションコンテナーを通して表示されます。
- 背景色：rgba（0,0,0,0）
トップディバイダー
セクションの[デザイン]タブに移動し、選択した上部仕切りを追加します。
- 仕切りスタイル：リストで検索
- 仕切りの高さ：250px（デスクトップ）、150px（タブレット）、100px（電話）
- ディバイダー水平リピート：2x
Zインデックス
この新しいセクションでは、zインデックスも増やす必要があります。
- Zインデックス：3
5.ページの下部に通常のセクション＃2を追加します
セクション設定
背景色
フッターセクションを作成する時が来ました！ ページの下部に別の新しい通常のセクションを追加し、選択した背景色を選択します。
- 背景色：＃202332
サイジング
[デザイン]タブに移動し、幅が「100％」であることを確認します。
- 幅：100％
間隔
また、セクションの上部のパディングを増やす必要があります。
- トップパディング：500px
Zインデックス
このセクションに割り当てるzインデックスは、ページの他のセクションのzインデックスよりも低くなっています。 これにより、ページの下部に移動するまでセクションを非表示にできます。
- Zインデックス：2
新しい行を追加
カラム構造
次の列構造を使用して、新しい行を追加して続行します。
サイジング
行設定を開き、それに応じてサイズ設定を変更します。
- カスタムガター幅を使用：はい
- 側溝幅：1
- 列の高さを等しくする：はい
列の間隔
次に列1の設定を開き、左にパディングを追加します。
- 左パディング：20px
列の右の境界線
列にも右の境界線を追加します。
- 右ボーダー幅：1px
- 右ボーダーの色：＃515151
コピー貼り付け列スタイル
スタイルを拡張するか、コピーと貼り付けオプションを使用して、すべての列に変更を適用します。
列1に画像モジュールを追加
画像をアップロード
モジュールの追加を開始する時が来ました！ 最初の列に新しい画像モジュールを追加し、ロゴをアップロードします。
サイジング
[デザイン]タブに移動し、さまざまな画面サイズで幅を変更します。
- 幅：35％（デスクトップ）、30％（タブレット）、25％（電話）
- モジュールの配置：左
間隔
下マージンも追加します。
- 画像の下にスペースを表示：はい
- 下マージン：50px
テキストモジュール＃1を列2に追加します
コンテンツを追加する
2列目へ！ 選択したコンテンツを含む最初のテキストモジュールを追加します。
テキスト設定
テキスト設定を変更します。
- テキストフォント：Nunito Sans
- テキストフォントの太さ：半太字
- テキストの色：#ffffff
- テキストサイズ：19px
間隔
また、さまざまな画面サイズにカスタムの上下の余白を追加します。
- 上マージン：15px（デスクトップとタブレット）、10px（電話）
- 下マージン：15px（デスクトップとタブレット）、10px（電話）
テキストモジュール＃2を列2に追加します
コンテンツを追加する
2番目のテキストモジュールを2番目の列に追加し、選択したコンテンツを入力します。
リンクを追加
フッターアイテムに一致するリンクを追加します。
- モジュールリンクURL：＃
テキスト設定
次にテキスト設定を変更します。
- テキストフォント：Nunito Sans
- テキストの色：#dbdbdb
- テキストサイズ：17px
間隔
また、さまざまな画面サイズにカスタムの上下のパディングを追加します。
- 上マージン：15px（デスクトップとタブレット）、10px（電話）
- 下マージン：15px（デスクトップとタブレット）、10px（電話）
テキストモジュール＃2を必要な回数だけ複製する
列2の2番目のテキストモジュールを必要な回数だけ複製します。
コンテンツの変更
必ず内容を変更してください。
リンクの変更
リンクと一緒に。
- モジュールリンクURL：＃
2列目にモジュールを複製し、残りの列に配置する
2番目の列が完成したら、両方のモジュールを必要な回数だけ複製し、行の残りの2つの列に複製を配置できます。
コンテンツの変更
各複製の内容を変更します。
リンクの変更
リンクと一緒に。
- モジュールリンクURL：＃
6.セクション＃2をページの下部に固定する
カスタムCSSを追加する
次に、スクロールリビールを作成するために、セクションのメイン要素に2行のCSSコードを追加して、フッターセクションがページの下部に固定されるようにします。
position: fixed; bottom: 0;
7.セクション＃1に下マージンを追加して、表示効果を作成します
さまざまな画面サイズにまたがって下マージンを追加する
また、ページの下部に、フッターが表示されるようにするためのスペースが必要です。 セクションディバイダーを含むセクションを開き、さまざまな画面サイズに下マージンを追加すれば完了です。
- 下マージン：400px（デスクトップ）、700px（タブレット）、800px（電話）
プレビュー
すべての手順を完了したので、さまざまな画面サイズでの結果を最終的に見てみましょう。
デスクトップ
モバイル
最終的な考え
この投稿では、セクションの仕切りの下にある美しいフッタースクロールを作成して、独自の効果を作成する方法を紹介しました。 これは、フッターをインタラクティブにし、フッターにリストされているアイテムに注意を引くための優れた方法です。 このチュートリアルが、独自のセクションディバイダーフッターを作成するきっかけになることを願っています。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。
Diviの詳細を知り、Diviの景品をさらに入手したい場合は、メールマガジンとYouTubeチャンネルに登録して、この無料コンテンツを最初に知って利益を得ることができるようにしてください。