Background Masks und Patterns sind zwei neue Funktionen in Divi. Backgrounds – also Hintergründe – sind ein wichtiges Gestaltungselement auf Websites. Besonders attraktiv ist die neue Divi Funktion für die Erstellung von beeindruckenden und richtig coolen Headerbereichen. Wie man die neuen Funktionen nutzet und wie man ein Header passend zur Zielgruppe (WeMo-Typ) erstellt, zeigt dieser Beitrag.
Was ist ein Header?
Der Header ist der Kopfbereich deiner Website. Wie es der Name schon andeutet, handelt es sich um den oberste Bereich einer Website – nach der Navigation. Dieser erste Abschnitt ist sehr wichtig für jede Seite einer Website. Denn er wird als erstes gesehen und die Besucher:innen machen sich anhand des Headers ein Bild von Ihrem Unternehmen und Ihren Angeboten.
Das geschieht innert 2 bis 3 Sekunden.
Dieser erste Eindruck entscheidet darüber, ob die Besucher:innen bleiben und weiterlesen. Überzeugt der Header nicht, wird der Regel der Browser Back Button geklickt und die Besucher:innen sind weg. Meist für immer.
Der Header besteht meist aus einem knackigen Titel, einem informativen Kurztext und einem Call to Action in Form eines Buttons. All das findet sich vor einem entsprechenden Hintergrund. Und genau darum geht bei den Background Masks und Patterns.
Warum grosse Bilder als Hintergrund nicht ideal sind
Schaut man sich Websites an, sieht man häufig grosse Fotografien im Header als Hintergrundbilder. Zugegeben Bilder können eine gute Wahl sein, um Emotionen und Interesse zu wecken. Das gelingt aber auch nur, wenn es aussagekräftige und einzigartige Bilder vorhanden sind. So genannte Stockfotos funktionieren allerdings nur selten, denn sie sagen kaum etwas über die Einzigartigkeit eines Business aus.
Des Weiteren sind grosse Fotografien im Hintergrund ein Nachteil bei der Ladegeschwindigkeit einer Website. Flächige Farben sieht man selten – den meisten fehlt wohl der Mut zur Reduktion und man hat das Gefühl, dass die Seite langweilig wirken könnte. Doch das muss nicht sein.
Die Alternative zu Bildern: Background Masks und Patterns
«Elegant Themes», Herausgeber des Divi-Themas, hat nun eine Lösung und ein Update mit neuen Features für Hintergründe parat. Neu sind unter anderem die Funktionen von «Masks and Patterns» (Masken und Muster) und mit diesen wurde eine Möglichkeit geschaffen, eine Vielzahl neuer visueller Effekte für einen Hintergrund zu erstellen.
Der Hintergrund bietet nämlich die perfekte Option, Ihrer Website einen ersten visuellen Eindruck Ihres Business zu geben. Farben, Formen, Masken und Muster bieten eine grosse Gestaltungsvielfalt um Ihrem Unternehmen einen gewollten Eindruck zu verpassen.
Arbeiten Sie mit Header, die Ihre Firma in der Persönlichkeit unterstreichen.
Verwenden Sie also Farben, Formen und Muster, die Ihr Unternehmen widerspiegeln und Ihre Zielgruppe ansprechen. Ein hipper Header, der mit knalligen Farbverläufen und einem angesagten Muster daherkommt passt nicht zu jedem Unternehmen. Aber, mit den neuen Featuers haben Sie jetzt definitiv mehr Möglichkeiten mit einer innovativen Ästhetik herauszustechen.
Wie funktionieren Divi Background Masks?
Backgrond Masks kann mit Hintergrundmasken übersetzt werden. Hintergrundmasken überdecken ein bestehendes Bild, ein Farbverlauf oder sogar ein Video. Nur der Maskenausschnitt ist transparent und gibt den Blick auf den Hintergrund frei.
Klingt banal, ist aber genial!
Hintergrundmasken ermöglichen es, gleichsam ein neues Bild zu erstellen und dieses in eine einzigartige Form zu verwandeln. Formen wie sie bisher nur mit viel Arbeit in Photoshop und Co. möglich waren.
Divi hat eine Auswahl von 23 Masken erstellt – runde, eckige, harmonische, kantige etc. Die Masken können in der Grösse angepasst, gespiegelt oder in der Ausrichtung geändert werden.
Um das Design zu optimieren kann eine passende Farbe gewählt und mit einem Mischmodus, z. B. mit Transparenz, eine Kombination erzeugt werden. Somit entstehen unendlich viele neue Möglichkeiten, interessante Effekte zu erzeugen.
Das sind die 23 verfügbaren Masken in Divi:
Wie funktionieren Divi Background Patterns?
Patterns kann mit Muster übersetzt werden. Punkte, Linien, Wellen … die Vielfalt an Mustern ist unbegrenzt.
Divi stellt neu 24 Muster zur Verfügung, um einem Hintergrund eine neue Struktur zu verleihen. Die Muster basieren auf der gewählten Farbe oder einem Farbverlauf.
Wie bei den Masken, können auch die Muster mit Transparenzen oder mit einem Bild multipliziert werden – die Möglichkeiten sind auch hier schier unbegrenzt.
Grösse, Ausrichtung etc. können auch hier ganz einfach nach deinen Wünschen angepasst werden.
Und natürlich lassen sich Muster und Masken auch kombinieren und man kann somit leichter auf eine Fotografie verzichten und von der schnelleren Ladegeschwindigkeit profitieren, da sowohl die Masken wie auch die Muster als SVG Dateien integriert werden.
Das sind die 24 verfügbaren Muster in Divi:
Masks und Patterns passend zur Zielgruppe erstellen
Mit den neuen Divi-Optionen lassen sich Header und spezifisch die Hintergründe nun noch besser auf die Werte der Zielgruppe abstimmen. Wenn der Header zu die Zielgruppe anspricht, dann kann diese auch leichter überzeugt werden.
Wie das mit der Zielgruppendefinition funktioniert und wie sich daraus die WeMo-Types ergeben, haben wir hier schon mal angeschaut.
Picken wir uns nun drei WeMo-Types raus und sehen uns die neuen Möglichkeiten an, die sich ergeben.
Masks und Patterns für die Zielgruppe: Die Harmonischen
Für den harmonischen WeMo-Type sind runde Formen und eine leichte Aufmachung wichtig.
Entsprechend bieten sich abgerundete Masken aus. Nun kann noch ein harmonisches Muster hinzugefügt werden. Jetzt gilt es nur noch Farben zu bestimmen, die zum restlichen Design passen.
Tädäää – und schon ist ein einzigartiger Header entstanden, der der Zielgruppe gefallen wird und auch auf Mobilgeräten schnell geladen wird.
Beispiel für einen Header für den WeMo-Type: Die Harmonischen:
Masks und Patterns für die Genauen
Wie wir gesehen haben, können Masken auch auf Bilder gelegt werden. In diesem Beispiel verwenden wir ein eher langweiliges Stockbild.
Für die «Genauen» ist eine kühle Blauton-Farbwelt ideal. Des Weiteren mögen die Genauen Ordnung. Deshalb wird eine Maske gewählt, die eher unauffällig ist.
Zusätzlich legen wir noch ein Muster darüber – und zwar kleine Quadrate.
Und auch so ist ein Headerbereich entstanden, der zur Zielgruppe passt und trotz der Verwendung eines Stockbildes einzigartig ist.
Beispiel für einen Header für den WeMo-Type: Die Genauen:
Masks und Patterns für die Mutigen
Für die «Mutigen» darf es im Header richtig krachen. Wir verzichten ganz bewusst auf eine Fotografie. Gearbeitet wird mit einer Farbwelt, in der sich diese Zielgruppe angesprochen fühlt.
Unter der Maske wird ein Farbverlauf eingesetzt, darüber eine gewagte Typografie und ein sich farbig abhebender Button gewählt und der exklusive Header ist einsatzbereit.
Beispiel für einen Header für den WeMo-Type: Die Mutigen:
Fazit: Background Masks und Patterns
Wow, wow, wow!
Es ist unglaublich wie viele kreative Möglichkeiten sich in Divi mit der neuen Funktion ergeben. Nutzen Sie die neue Chance und erstellen Sie richtig coole Header und heben Sie sich damit von der Konkurrenz ab.
Versuchen Sie es selber. Es lohnt sich mit den verschiedenen Funktionen zu spielen. Falls Sie noch weitere Inspiration brauchen oder am kostenlosen Download von Vorlagen interessiert sind, dann schauen Sie doch auch im Divi Blog vorbei.
Wichtig ist, dass Sie sich und Ihrem Business treu bleiben und der Header mit den neuen Masken und Muster Ihre Marke widerspiegelt.
Viel Spass beim Ausprobieren!
