Beaver Builder 2.9は、強力な新しいデザイン機能であるマルチレイヤーの背景を紹介しました。このアップデートにより、背景の色、勾配、画像をすべて1か所で積み重ねることにより、行、列、ボックスモジュールをより創造的に制御できます。

しかし、より多くの力があると、思慮深いデザインが必要になります。この記事では、この新しい機能を使用し、ヒントを共有して、それを最大限に活用できるようにするためのスマートな方法を説明します。

多層背景とは何ですか？

マルチレイヤーの背景は、ビーバービルダーへの強力な追加であり、単一の列、行、またはボックスモジュールのある画像、勾配、色など、複数のバックグラウンド要素を積み重ねることができます。

1つのタイプの背景を選択する代わりに、いくつかを組み合わせて、ユーザーにとってより魅力的で視覚的に豊かな体験を作成できます。

多層の背景がどのように見えるかは次のとおりです。

• ベースレイヤー：高品質の画像は、セクションのトーンとコンテキストを設定します。
• 中間層：半透明の勾配はコントラストを追加し、テキストが読みやすいままであることを確認するのに役立ちます。
• トップレイヤー：ブランドカラーオーバーレイまたは微妙なテクスチャーは、すべてを結び付け、視覚的アイデンティティを強化します。

これらの要素をブレンドすることにより、美的魅力と機能的な明快さの両方を持つ背景を作成できます。その結果、ユーザーを圧倒することなく、深さ、コントラスト、視覚的なテクスチャを備えたレイアウトができます。

ヒーローセクション、アクションへの呼びかけブロック、機能グリッドを設計するかどうかにかかわらず、マルチレイヤーの背景は、デザインをフラットから完全な寸法に引き上げる柔軟性と創造的なコントロールを提供します。

なぜ多層的な背景を使用するのですか？

マルチレイヤーの背景は、単一のコードを書くことなく、視覚的にデザインを高めるのに最適な方法です。背景の色、グラデーション、画像を積み重ねることで、美学と使いやすさの両方を改善する人目を引く効果を作成できます。

層状の背景を使用するいくつかの実用的な理由は次のとおりです。

• テキストの読みやすさの向上：テキストの背後にあるオーバーレイまたはグラデーションを追加して、特に画像の背景を使用する場合にコントラストと読みやすさを高めます。
• ブランドのアイデンティティを強化する：バックグラウンドレイヤーでブランドの色、パターン、またはテクスチャを使用して、よりまとまりのある認識可能な視覚体験を作成します。
• 重要なコンテンツ領域に注意を払ってください。レイヤード背景は、ユーザーの目を、重要な呼びかけ、特集セクション、またはプロモーションコンテンツに導くことができます。

そして何よりも、それはすべてビーバービルダーUIで行われています。余分なCSSまたは複雑なセットアップは必要ありません。わずか数回クリックするだけで、美しいのと同じくらい機能的な動的で重ねられたデザインを作成できます。

ビーバービルダーでマルチレイヤーの背景の使用方法

任意の順序で、カラー、グラデーション、画像など、好きなだけ多くのバックグラウンドタイプを組み合わせて一致させることができます。

次に、行、列、またはボックスモジュールに複数の背景を追加する方法を次に示します。

1. 編集用の要素を開きます
   クリックして、マルチレイヤーの背景を適用する行、列、またはボックスモジュールを編集します。
2. 背景設定に移動します
   モジュール設定パネルで、背景セクションに移動します。
3. 複数の背景を有効にします
   レイヤー化をアクティブにするには、複数の背景オプションを選択します。
4. 最初の背景を追加します
   +アイコンをクリックして背景タイプを追加し、色、写真、または勾配から選択します。必要に応じて設定をカスタマイズします。
5. より多くの背景レイヤーを追加します
   もう一度+アイコンをクリックして、別のレイヤーを追加します。スタックする各バックグラウンドタイプのプロセスを繰り返します。
6. 変更を保存します
   レイヤードバックグラウンドデザインに満足したら、 [保存]をクリックします。

わずか数回クリックするだけで、視覚的な深さを追加し、読みやすさを向上させる美しく層状の背景を作成できます。

プロのようなレイヤーのためのデザインのヒント

この機能を最大限に活用するために、マルチレイヤーの背景を効果的に使用するための7つの簡単なヒントを以下に示します。

1。読みやすくするために、画像上の層勾配を層状にします

背景画像の上に暗いまたは半透明の勾配をオーバーレイして、テキストの可視性を高めます。これにより、画像の影響を失うことなく、白または明るい色のテキストポップが役立ちます。これは、コンテンツを明確で読みやすくする簡単なトリックです。

2。気を散らすのではなく、微妙に保ちます

少ないです。レイアウトの圧倒を避けるために、2〜3の背景層に固執します。テクスチャや明るい色が多すぎると、ユーザーが気を散らし、メッセージを傷つける可能性があります。盗むことなく、注意を誘うきれいで焦点を絞ったデザインを目指します。

3.ブランドカラーを戦略的に使用します

ブランドパレットを使用して、グラデーションやカラーオーバーレイを作成します。これにより、ブランドアイデンティティが強化され、サイトにプロのタッチが追加されます。これは、視覚スタイルと一貫したブランディングを組み合わせる賢明な方法です。

4.レイヤースタッキングで視覚的な関心を追加します

固体、勾配、画像を組み合わせて深さを作成します。動きは必要ありません。たとえば、半透明の色のオーバーレイの下に微妙なテクスチャーを重ねて、デザインがより豊かさと複雑さを与えます。

5。モバイル応答性のテスト

デスクトップで驚くほどに見える背景は、小さな画面では動作しない可能性があります。 Beaver Builderを使用すると、レスポンシブ設定を完全に制御できるため、レイヤーポジショニング、スケール、またはモバイルの特定のレイヤーを非表示にすることもできます。

6.視覚的なテクスチャを備えたキーセクションを強調表示します

行動を促すことや注目のセクションに注意を引く必要がありますか？グラデーションの下にあるテクスチャ画像を使用して、微妙な視覚的関心を生み出します。この手法は、設計フローを混乱させることなく、重要な領域を強調するのに役立ちます。

7.不透明度を使用してレイヤーをスムーズにブレンドします

各レイヤーの不透明度を調整して、色と画像の間にシームレスなブレンドを作成します。低い不透明度は遷移を柔らかくするため、自然でまとまりがあると感じる層状のデザインを構築できます。

実世界のユースケース

マルチレイヤーの背景を効果的に使用する方法に関するインスピレーションをお探しですか？ここにあなたを始めるためのいくつかの現実世界のデザインのアイデアがあります：

• ヒーローセクション：画像を色オーバーレイと組み合わせて、きれいでインパクトのある紹介を行います。
• Call-To-actions（CTAS） ：大胆なブランドの色とテクスチャを使用して、即座に注意を引きます。
• ブログのハイライト：グラデーションと画像の背景を適用して、タイトルを際立たせます。
• Bentoグリッド：各ブロックの後ろに層状のテクスチャと色を使用して、深さと視覚的な関心を生み出します。

次のレイアウトでこれらのアイデアを試して、永続的な印象を残す視覚的に魅力的なページを作成してください。

次に：背景層を​​保存します

将来のアップデートに入ると、サイト全体でマルチレイヤーの背景を保存して再利用できるようになります。これにより、デザインの一貫性を維持し、繰り返しセットアップを削減しやすくなります。今のところ、サイトの他の場所で再利用するための行、列、モジュールを保存するオプションがあります。

今日、マルチレイヤーの背景をお試しください

マルチレイヤーバックグラウンドフィールドは、ビーバービルダー2.9で利用できます。ヒーローセクション、機能の行、またはコールアウトボックスを設計するかどうかにかかわらず、この機能は、コードの行に触れることなく、無限の創造的な可能性への扉を開きます。 →ドキュメントを探索して開始します。