Diviで固定モバイルフッターバーを作成する方法
公開: 2019-02-13モバイルエクスペリエンスに合わせてすべてをカスタマイズすることがいかに重要かを私たちは知っています。 モバイルエクスペリエンスを別のレベルに引き上げるのに役立つように、このステップバイステップの投稿では、Diviを使用して固定モバイルフッターバーを作成する方法を紹介します。
このチュートリアルは、進行中のDiviデザインイニシアチブの一部であり、毎週、デザインツールボックスに何か特別なものを入れようとしています。 今回は、Health Clinic Layout Packを使用して、固定モバイルフッターバーをレイアウトパックのスタイルに一致させます。 ただし、このアプローチは、作業中のあらゆる種類のデザインに使用でき、独自の固定モバイルフッターバーの代替案を作成できます。
それを手に入れよう！
プレビュー
チュートリアルに入る前に、ステップバイステップで再作成する3つの例を簡単に見てみましょう。 これらの例は、モバイル（および必要に応じてタブレット）にのみ表示されます。
例1を再作成する
ページの下部に新しいセクションを追加
最初の固定モバイルフッターバーの再作成を始めましょう！ Health Clinic LayoutPackに含まれている3つのレイアウトのページを作成することをお勧めします。 例ごとに1つ。 最初のフッターバーを追加するページを開きます。 ページの最後までスクロールして、最後のセクションの直後に新しいセクションを追加します。
間隔
行設定を開き、間隔設定のすべてのカスタム上部および下部パディングを削除します。
- トップパディング：0px
- ボトムパディング：0px
可視性
このセクションはデスクトップにも非表示になっています。 モバイルフッターバーをモバイルでのみ表示する場合は、先に進んでタブレットのセクションも非表示にします。
新しい行を追加
カラム構造
次の列構造を使用して、セクションに新しい行を追加して続行します。
サイジング
モジュールをまだ追加せずに、行設定を開き、サイズ設定を変更します。
- この行を全幅にする：はい
- カスタムガター幅を使用：はい
- 側溝幅：1
- 列の高さを等しくする：はい
間隔
次に、行のデフォルトの上下のパディングをすべて削除します。
- トップパディング：0px
- ボトムパディング：0px
カスタムCSS
最後に、いくつかのカスタムCSS行を行に追加します。 これらの線は、行を固定フッターバーに変えるのに役立ちます。
display: flex; position:fixed; bottom: 0px; z-index: 99;
列1にテキストモジュールを追加
コンテンツを追加する
モジュールの追加を開始する時が来ました！ 最初に必要なモジュールは、列1のテキストモジュールです。選択したコンテンツをいくつか追加します。
背景色
モジュールの背景設定に移動し、背景色を変更します。
- 背景色：＃5e89fb
テキスト設定
テキスト設定も変更します。
- テキストフォント：Work Sans
- テキストフォントの太さ：軽い
- テキストの色：#ffffff
- テキストサイズ：16px
- テキスト文字の間隔：-1px
間隔
次に、いくつかのカスタムパディング値を追加します。
- トップパディング：16px
- ボトムパディング：16px
- 左パディング：15px
- 右パディング：15px
国境
そして、いくつかの丸い角も。
- 左上：10px
- 右上：10px
ボックスシャドウ
微妙なボックスシャドウを追加して、モジュールの設定を完了します。
- ボックスシャドウブラー強度：80px
列2に宣伝文モジュールを追加する
コンテンツを追加する
2番目の列に宣伝文モジュールを追加し、選択したタイトルを追加します。
アイコンを選択
宣伝文句モジュールのアイコンを選択して続行します。
背景色
モジュールにも背景色を追加します。
- 背景色：＃62de9d
アイコン設定
デザインタブに移動し、アイコンの設定を変更します。
- アイコンの色：#ffffff
- アイコンの配置：左
- アイコンのフォントサイズを使用：はい
- アイコンフォントサイズ：19px
タイトルテキスト設定
タイトルテキストの設定を変更して続行します。
- タイトルフォント：Work Sans
- タイトルテキストの色：#ffffff
- タイトルテキストサイズ：16px
- タイトル文字の間隔：-1px
間隔
モジュールにもカスタムパディングを追加します。
- トップパディング：20px
- ボトムパディング：10px
- 左パディング：30px
- 右パディング：30px
国境
そして、左上隅と右上隅に「10px」を追加します。
- 左上：10px
- 右上：10px
ボックスシャドウ
最後になりましたが、モジュールに微妙なボックスシャドウを追加します。
- ボックスシャドウブラー強度：80px
例2を再作成する
ページの下部に新しいセクションを追加
2番目の例に移ります！ もう一度、選択したページを開き、ページの最後までスクロールして、新しいセクションを追加します。
間隔
セクション設定を開き、デフォルトの上部と下部のパディングを削除します。
- トップパディング：0px
- ボトムパディング：0px
可視性
デスクトップ（および必要に応じてタブレット）のセクションを非表示にします。
新しい行を追加
カラム構造
次の列構造を使用して、セクションに新しい行を追加して続行します。
サイジング
モジュールを追加せずに、行設定を開き、サイズ設定を変更します。
- この行を全幅にする：はい
- カスタムガター幅を使用：はい
- 側溝幅：1
間隔
行のデフォルトの上部と下部のパディングも削除します。
- トップパディング：0px
- ボトムパディング：0px
カスタムCSS
次の行にいくつかのカスタムcss行を追加します。 これらのCSSコード行は、固定モバイルフッターバーの作成に役立ちます。
display: flex; position:fixed; bottom: 0px; z-index: 99;
列1に宣伝文モジュールを追加する
コンテンツを追加する
最初の列に宣伝文モジュールを追加して続行します。 選択したタイトルを追加します。
アイコンを選択
次に、アイコンを選択します。
背景色
次に、モジュールに背景色を追加します。
- 背景色：＃62de9d
アイコン設定
デザインタブに移動し、モジュールのアイコン設定を変更します。
- アイコンの色：#ffffff
- アイコンの配置：上
- アイコンのフォントサイズを使用：はい
- アイコンフォントサイズ：25px
タイトルテキスト設定
タイトルテキストの設定も変更します。
- タイトルフォント：Work Sans
- タイトルテキストの配置：中央
- タイトルテキストの色：#ffffff
- タイトル文字の間隔：-1px
間隔
そして、モジュールに呼吸するためのスペースを与えるために、上部と下部のパディングを追加します。
- トップパディング：30px
- ボトムパディング：30px
国境
また、モジュールの左上の境界線に「15px」を追加しています。
- 左上：15px
ボックスシャドウ
そして、微妙なボックスシャドウでモジュールを完成させます。
- ボックスシャドウブラー強度：80px
宣伝文句モジュールを2回クローンし、残りの列に複製を配置します
最初の宣伝文句モジュールの変更が完了したら、先に進んでモジュールのクローンを2回作成し、残りの2つの列に複製を配置できます。
複製＃1の背景色を変更する
最初の複製の背景色を変更します。
- 背景色：＃3d3d3d
複製＃1の間隔設定を変更する
間隔の設定と一緒に。
- 上マージン：-20px
- トップパディング：50px
- ボトムパディング：30px
重複＃1の境界を変更する
そして、丸みを帯びた角も。
複製＃2の背景色を変更する
3番目の列の2番目の複製の背景色も変更します。
- 背景色：＃000000
重複＃2の境界を変更する
丸みを帯びた角と一緒に。
- 右上：15px
例3を再作成する
ページの下部に新しいセクションを追加
次の最後の例に移りましょう！ ページの1つを開き、ページを下にスクロールして、新しいセクションを追加します。
トップディバイダー
セクション設定を開き、上部仕切りを追加します。
- 仕切りの色：＃62de9d
- 仕切りの高さ：110px
間隔
セクションのデフォルトの上部と下部のパディングもすべて削除します。
- トップパディング：0px
- ボトムパディング：0px
ボックスシャドウ
次のセクションに微妙なボックスシャドウを追加します。
- ボックスシャドウブラー強度：80px
カスタムCSS
また、[詳細設定]タブにいくつかのカスタムCSS行を含めます。 これは、セクションを固定のモバイルフッターバーに変えるのに役立ちます。
position:fixed; bottom:0px; width: 100%; z-index: 99;
可視性
最後に、デスクトップ（および必要に応じてタブレット）のセクションを無効にします。
新しい行を追加
カラム構造
次の列構造を使用して、セクションに新しい行を追加して続行します。
サイジング
モジュールをまだ追加せずに、行設定を開き、サイズ設定を変更します。
- この行を全幅にする：はい
- カスタムガター幅を使用：はい
- 側溝幅：1
間隔
次に、カスタムの上部と下部のパディングを追加します。
- トップパディング：30px
- ボトムパディング：20px
カスタムCSS
3つの列すべてが同じ高さに保たれるようにするために、CSSコードの行を行の[詳細設定]タブにも追加します。
display: flex;
列1に宣伝文モジュールを追加する
コンテンツを追加する
これで、モジュールの追加を開始できます。 最初の列に宣伝文モジュールを追加し、タイトルを付けます。
アイコンを選択
次にアイコンを選択します。
アイコン設定
デザインタブに移動し、アイコンの設定を変更します。
- アイコンの色：#ffffff
- アイコンの配置：上
- アイコンのフォントサイズを使用：はい
- アイコンフォントサイズ：25px
タイトルテキスト設定
タイトルテキストの設定も変更します。
- タイトルフォント：Work Sans
- タイトルテキストの向き：中央
- タイトル文字の間隔：-1px
宣伝文句モジュールを2回＆配置するクローン
列1の宣伝文句モジュールの変更が完了したら、先に進んでモジュールのクローンを2回作成できます。 残りの2つの列に複製を配置します。
重複＃1のアイコンの色を変更する
2列目にある複製のアイコンの色を変更することを忘れないでください。
- アイコンの色：＃000000
プレビュー
さまざまな手順をすべて実行したので、上記で処理した3つの例すべての結果を最後に見てみましょう。
最終的な考え
この投稿では、チュートリアルに従って段階的に再現できる3つの異なる固定モバイルフッターバーのデザインを扱いました。 モバイルフッターバーは、ページ上でのスクロール体験を通じて訪問者をフォローします。 このチュートリアルは、進行中のDiviデザインイニシアチブの一部であり、毎週、デザインツールボックスに何か特別なものを入れようとしています。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！