Beaver Builder 2.9 hat ein leistungsstarkes neues Design-Feature vorgestellt: Mehrschichthintergrund . Dieses Update bietet Ihnen eine kreativere Kontrolle über Zeilen, Spalten und Boxmodule, indem Sie Hintergrundfarben, -Antergradienten und Bilder an einem Ort stapeln können.

Aber mit mehr Kraft kommt die Notwendigkeit eines nachdenklichen Designs. In diesem Artikel werden wir intelligenten Möglichkeiten durchgehen, um diese neue Funktion zu nutzen und Tipps zu teilen, um Ihnen dabei zu helfen, das Beste daraus zu machen.

Was sind mehrschichtige Hintergründe?

Mehrschichtiger Hintergründe sind eine leistungsstarke Ergänzung zum Beaver Builder, mit dem Sie mehrere Hintergrundelemente-wie Bilder, Gradienten und Farben-in einer einzelnen Spalte, Zeile oder Boxmodul stapeln können.

Anstatt nur eine Art von Hintergrund auszuwählen, können Sie mehrere kombinieren, um eine ansprechendere und visuell reiche Erfahrung für Ihre Benutzer zu erstellen:

Hier erfahren Sie, wie ein mehrschichtiger Hintergrund aussehen könnte:

• Basisschicht : Ein hochwertiges Bild legt den Ton und den Kontext für den Abschnitt fest.
• Mittlere Schicht : Ein halbtransparenter Gradient fügt Kontrast hinzu und trägt dazu bei, dass der Text lesbar bleibt.
• Oberschicht : Eine Markenfarbe -Überlagerung oder eine subtile Textur verbindet alles miteinander und verstärkt Ihre visuelle Identität.

Durch das Mischen dieser Elemente können Sie Hintergründe erstellen, die sowohl ästhetische Attraktivität als auch funktionale Klarheit haben. Das Ergebnis ist ein Layout mit Tiefe, Kontrast und visueller Textur - ohne den Benutzer überwältigt.

Unabhängig davon, ob Sie einen Heldenabschnitt, einen Call-to-Action-Block oder ein Feature-Raster entwerfen, bieten mehrschichtige Hintergründe Flexibilität und kreative Kontrolle, die Ihr Design von flach bis vollständig dimensional erhöhen.

Warum mehrschichtige Hintergründe verwenden?

Mehrschichtige Hintergründe sind eine großartige Möglichkeit, Ihre Designs visuell zu verbessern-ohne eine einzige Codezeile zu schreiben. Durch Stapel von Hintergrundfarben, -gradienten und Bildern können Sie auffällige Effekte erzeugen, die sowohl die Ästhetik als auch die Benutzerfreundlichkeit verbessern:

Hier sind einige praktische Gründe für die Verwendung von vielschichtigen Hintergründen:

• Verbesserung der Lesbarkeit des Textes : Fügen Sie einen Overlay oder einen Gradienten hinter Text hinzu, um den Kontrast und die Lesbarkeit zu erhöhen - insbesondere bei der Verwendung von Bildhintergründen.
• Verstärken Sie Ihre Markenidentität : Verwenden Sie Ihre Markenfarben, Muster oder Texturen in Hintergrundschichten, um ein zusammenhängenderes und erkennbareres visuelleres Erlebnis zu schaffen.
• Achten Sie auf wichtige Inhaltsbereiche : Layered-Hintergründe können das Auge des Benutzers auf wichtige Aufrufe, vorgestellte Abschnitte oder Werbeinhalte führen.

Und das Beste von allen - alles ist im Beaver Builder UI. Es ist kein zusätzliches CSS oder ein komplexes Setup erforderlich. Mit nur wenigen Klicks können Sie dynamische, geschichtete Designs erstellen, die so funktional wie schön sind.

So verwenden Sie mehrschichtige Hintergründe im Beaver Builder

Sie können so viele Hintergrundtypen mischen, wie Sie möchten - Röcke, Gradienten und Bilder - in jeder Reihenfolge:

Hier erfahren Sie, wie Sie einer Zeile, einer Spalte oder einem Boxmodul mehrere Hintergründe hinzufügen:

1. Öffnen Sie das Element für die Bearbeitung
   Klicken Sie, um das Modul Zeile, Spalte oder Feld zu bearbeiten, in dem Sie einen mehrschichtigen Hintergrund anwenden möchten.
2. Gehen Sie zu den Hintergrundeinstellungen
   Navigieren Sie im Bereich der Moduleinstellungen zum Hintergrundabschnitt .
3. Aktivieren Sie mehrere Hintergründe
   Wählen Sie die Option mit mehreren Hintergründen aus, um die Schichten zu aktivieren.
4. Fügen Sie Ihren ersten Hintergrund hinzu
   Klicken Sie auf das Symbol + , um einen Hintergrundtyp hinzuzufügen, und wählen Sie dann aus Farbe , Foto oder Gradienten . Passen Sie die Einstellungen nach Bedarf an.
5. Fügen Sie weitere Hintergrundschichten hinzu
   Klicken Sie erneut auf das + Symbol, um eine weitere Ebene hinzuzufügen. Wiederholen Sie den Vorgang für jeden Hintergrundtyp, den Sie stapeln möchten.
6. Speichern Sie Ihre Änderungen
   Wenn Sie mit Ihrem geschichteten Hintergrunddesign zufrieden sind, klicken Sie auf Speichern .

Mit nur wenigen Klicks können Sie wunderschön geschichtete Hintergründe erstellen, die visuelle Tiefe hinzufügen und die Lesbarkeit verbessern.

Designtipps zum Schichten wie ein Profi

Um das Beste aus dieser Funktion zu nutzen, finden Sie hier sieben schnelle Tipps für die effektive Verwendung von mehrschichtigen Hintergründen.

1. Ebenenverstärkungsgradienten über Bilder für eine bessere Lesbarkeit

Überlösen Sie einen dunklen oder halbtransparenten Gradienten über einem Hintergrundbild, um die Sichtbarkeit von Text zu steigern. Dies hilft, weißem oder hellem Text zu popieren, ohne die Auswirkungen Ihres Bildes zu verlieren. Es ist ein einfacher Trick, der Ihre Inhalte klar und lesbar hält.

2. Halten Sie es subtil, nicht ablenkend

Weniger ist mehr. Halten Sie sich an 2–3 Hintergrundschichten, um zu vermeiden, dass Sie Ihr Layout überwältigen. Zu viele Texturen oder leuchtende Farben können Benutzer ablenken und Ihre Nachricht verletzen. Streben Sie saubere, fokussierte Designs an, die die Aufmerksamkeit lenken - sie nicht stehlen.

3.. Verwenden Sie die Markenfarben strategisch

Verwenden Sie Ihre Markenpalette, um Gradienten oder Farbüberlagerungen zu erstellen. Dies verstärkt die Markenidentität und verleiht Ihrer Website eine professionelle Note. Es ist eine kluge Möglichkeit, den visuellen Stil mit konsequentem Branding zu kombinieren.

4. Fügen Sie das Layer -Stapeln visuelles Interesse hinzu

Kombinieren Sie feste Farben, Gradienten und Bilder, um Tiefe zu erzeugen - keine Bewegung erforderlich. Schichten Sie beispielsweise eine subtile Textur unter eine durchscheinende Farbüberlagerung, um Ihrem Design mehr Reichtum und Komplexität zu verleihen.

5. Test auf mobile Reaktionsfähigkeit

Ein Hintergrund, der auf Desktop fantastisch aussieht, funktioniert auf kleineren Bildschirmen möglicherweise nicht. Mit Beaver Builder haben Sie die vollständige Kontrolle über reaktionsschnelle Einstellungen, damit Sie die Layer -Positionierung, die Skalierung oder sogar bestimmte Ebenen auf Mobilgeräten anpassen können.

6. Highlight Schlüsselabschnitte mit visueller Textur

Müssen Sie auf einen Anruf oder einen Abschnitt aufmerksam machen? Verwenden Sie ein strukturiertes Bild unter einem Gradienten, um subtiles visuelles Interesse zu erzeugen. Diese Technik hilft dabei, wichtige Bereiche hervorzuheben, ohne den Designfluss zu stören.

7. Verwenden Sie die Deckkraft, um Schichten reibungslos zu mischen

Passen Sie die Deckkraft jeder Schicht an, um nahtlose Mischungen zwischen Farben und Bildern zu erstellen. Niedrigere Opazitäten erweichen Übergänge und ermöglichen es Ihnen, geschichtete Designs zu bauen, die sich natürlich und kohäsiv anfühlen.

Anwendungsfälle realer Welt

Suchen Sie nach Inspiration, wie Sie mehrschichtige Hintergründe effektiv verwenden können? Hier sind einige reale Designideen, um Ihnen den Einstieg zu erleichtern:

• Heldenabschnitte : Kombinieren Sie Bilder mit Farbüberlagerungen für eine saubere Einführung mit hoher Auswirkung.
• Call-to-Actions (CTAs) : Verwenden Sie mutige Markenfarben und -texturen, um die Aufmerksamkeit sofort zu erregen.
• Blog -Highlights : Wenden Sie Gradienten- und Bildhintergrund an, um die Titel hervorzuheben.
• Bento -Gitter : Verwenden Sie hinter jedem Block geschichtete Texturen und Farben, um Tiefe und visuelles Interesse zu erzeugen.

Probieren Sie diese Ideen in Ihrem nächsten Layout aus, um visuell ansprechende Seiten zu erstellen, die einen bleibenden Eindruck hinterlassen.

Als nächstes: gespeicherte Hintergrundschichten

In einem zukünftigen Update können Sie mehrschichtige Hintergründe auf Ihrer Website speichern und wiederverwenden. Dies erleichtert es, Designs konsistent und repetitive Setup zu reduzieren. Im Moment haben Sie die Möglichkeit, Ihre Zeilen, Spalten und Module für die Wiederverwendung an anderer Stelle auf Ihrer Website zu speichern.

Versuchen Sie noch heute mehrschichtige Hintergründe

Das mehrschichtige Hintergrundfeld ist ab sofort im Beaver Builder 2.9 erhältlich. Unabhängig davon, ob Sie einen Heldenabschnitt, eine Feature Row oder eine Callout -Box entwerfen, öffnet diese Funktion die Tür zu endlosen kreativen Möglichkeiten - ohne eine Codezeile zu berühren. → Erforschen Sie die Dokumente und beginnen Sie.