ディビのボトムフッターバーにクリエイティブな背景デザインを追加する方法

ディビの下部フッターバーは、小さいながらも重要なWebサイトです。 また、特定のページレイアウトでは、その下部のバーにクリエイティブな最終仕上げを追加する必要がある場合があります。

このチュートリアルでは、Diviの下部フッターバーにカスタムの背景デザインを追加する方法を紹介します。 下部のフッターバーのデフォルトの背景色を取り除き、セクションにカスタムマージンを追加することで、セクションのデザイン設定を利用して、クールな背景デザインを作成できます。

始めましょう。

スニークピーク

これは、このチュートリアルで作成できるいくつかのサンプルデザインの概要です。

テーマカスタマイザーで下部フッターバーをカスタマイズする

下部のフッターバーの後ろにカスタムの背景を追加する前に、使用されているデフォルトの背景色を取り除く必要があります。

テーマカスタマイザに移動し、[フッター]> [ボトムバー]に移動します。 次に、背景色を完全に透明になるように変更します。

下部のバーの後ろにフッターの背景色が残っているため、プレビューの変更にあまり気付かない場合があります。 フッターの背景色は[フッター]> [レイアウト]で変更できますが、フォールバックとしてその背景色をアクティブのままにしておくことをお勧めします。 カスタム背景は、ページごとにセクションを使用して下部のバーに追加されます。 したがって、この背景を設定すると、カスタム背景が配置されていないページの下部バーコンテンツに背景が確実に表示されます。

背景のデザインを暗くする場合は、下部のバーのテキストの色とソーシャルアイコンの色を白に変更することもできます。 これにより、コンテンツがより読みやすくなります。

ボトムバーのセクション背景デザインの作成

フッターの下部バーの背景が透明になったので、セクションの背景をデザインしてバーの後ろに配置する準備が整いました。

まだ作成していない場合は、新しいページを作成し、「最初から作成」を選択します。 次に、セクション行に1列のレイアウトを挿入します。

背景デザインのセクションと行のみが必要になるため、行にモジュールを追加する必要はありません。

次に、行の設定に移動し、次のように間隔を追加します。

カスタムマージン：0px上、0px下
カスタムパディング（デスクトップ）：80px上、80px下
カスタムパディング（タブレット）：100px上、100px下

この間隔は、背景デザインに追加するセクション仕切りに必要なスペースを維持しながら、セクションにある程度の高さを与えるために必要です。

次に、セクション設定に移動し、次のように間隔を更新します。

カスタムマージン（デスクトップ）：-55px下部
カスタムマージン（タブレット）：-94px下部
カスタムパディング：0px上、0px下

-55pxの下マージンは、下部バーをセクション領域に引き込み、セクションに追加するデザインが下部バーの後ろに配置されるようにします。 デフォルトでは、下部のバーはデスクトップで54ピクセル、タブレットで約94ピクセルの高さであるため、タブレットにはより大きな負のマージンが必要です。

上部と下部のパディングを取り除くと、後で追加するセクションディバイダーに必要なスペースが最大になります。

下の仕切りを追加する

次に、セクションに下部仕切りを追加して、フッターコンテンツを次のようにフレーム化します。

ボトムディバイダースタイル：スクリーンショットを参照
仕切りの色：＃121212
仕切りの高さ：120px（デスクトップ）、150px（タブレット）、150px（スマートフォン）
ディバイダー水平リピート：0.9x（デスクトップ）、0.5x（タブレット）、0.5x（スマートフォン）
仕切りフリップ：垂直

現在、仕切りの配置がセクションコンテンツの下に設定されていても、下部のバーのコンテンツ（テキストとソーシャルアイコン）は仕切りの後ろに隠れています。 これは、下部のフッターが技術的にセクションコンテンツの一部ではないためです。 これを修正するには、セクションにカスタムz-indexを追加して、下部フッターの後ろに配置する必要があります。

[詳細設定]タブで、次のカスタムCSSスニペットをメイン要素に追加します。

z-index: 0;

これで、フッターバーのコンテンツがセクションの上に配置され、フッターバーを囲む素敵な背景デザインができました。

そしてそれはモバイルでもうまく調整されます。

この基本構造が整っているので、上に構築するための素晴らしいセクションデザインがあります。 そのことを念頭に置いて、このセクションをライブラリに保存して、この構造を現在の設計を探索するための開始点として使用できるようにしてください。

これで、新しいデザインを探索する準備が整いました。 下部の仕切りをさまざまなスタイルや色に変更して、無数の背景フレームデザインを作成できます。選択した仕切りのスタイルに応じて、仕切りの高さと水平方向の繰り返し値を追加で調整する必要がある場合があります。

ここにいくつかの例があります。

カスタム背景グラデーションでトップディバイダーを使用する

ボトムフッターの背景フレームデザインとして単一のボトムディバイダーを使用することは、いくらか制限があります。 ただし、フレームデザインとして上部の仕切りを使用する場合は、セクションにカスタムの背景グラデーションを使用できます。 これにより、探索するための新しい扉が開かれます。

セクション設定に移動し、下部の仕切りスタイルをなしに設定します。 次に、セクションの背景として背景グラデーションを追加します。

これで、セクションに上部仕切りスタイルを追加して、まったく新しい外観を作成できます。

グラデーションの背景と仕切りのスタイルを変更するだけで可能なデザインの例をいくつか示します。

色とりどりのボーダーフレームデザインのための仕切りと背景グラデーションの組み合わせ

今度はそれをワンランク上に上げる時が来ました。 セクションや行内に独自の背景デザインを作成するには、多くの可能性があることを忘れないでください。 したがって、この最後の例では、これらの機能を組み合わせて完全にユニークなデザインを作成する方法を紹介します。

このデザインをすぐに開始するには、ライブラリに保存したセクションをクリックしてビジュアルビルダーに新しいセクションを追加し、[ライブラリから追加]タブを選択して、セクションレイアウトを選択します。

セクションがページに追加されると、カスタマイズする準備が整います。

手始めに、セクション設定に移動し、以下を更新します。

背景のグラデーションの左の色：＃29c4a9
背景のグラデーションの左の色：＃2b87da

グラデーション方向：90度
開始位置：50％
終了位置：0％

次に、次のように上部仕切りを追加します。

トップディバイダースタイル：スクリーンショットを参照
仕切りの色：#ffffff
仕切りの高さ：120px（デスクトップ）、150px（タブレット）、150px（スマートフォン）
ディバイダー水平リピート：0.9x（デスクトップ）、0.5x（タブレット）、0.5x（スマートフォン）
仕切りフリップ：垂直

これらの仕切りの設定は、下の仕切りを完全に反映しているため、下の仕切りを囲む境界線が作成されます。 仕切り自体が白いので、背景のグラデーションが下の仕切りの延長であるという印象を残します。

次に、行の設定に移動し、次のように背景のグラデーションを追加します。

背景グラデーションの左の色：＃df52ff
背景のグラデーションの左の色：＃2b87da

グラデーション方向：90度
開始位置：50％
終了位置：0％

背景の各カラーセグメントの幅を均等にするには、行に50％のカスタム幅を指定します。

これが最終的なデザインです！

最終的な考え

Diviの下部フッターバーのカスタム背景デザインを使用すると、ページにさわやかな追加を加えることができます。 必要なのは、ページの下部にあるセクションを少しカスタマイズすることだけです。 残念ながら、デザインは1ページに制限されており、サイト全体に適用することはできません。 そのため、フッターの背景色がフォールバックとして使用されます。 ただし、セクションをライブラリに保存すると、任意のページに簡単にドロップできます。 次のプロジェクトで使用するために、事前に作成されたレイアウトに追加することもできます。 あなたがする必要があるのはあなたがあなたのページの一番下にセクションを追加することを確認することです。 うまくいけば、あなたはそれが役に立つと思うでしょう！

また、同様の手法を使用してナビゲーションメニューをフレーミングすることに興味があるかもしれません。

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

乾杯！