Sektion "Volle Breite" – So erstellt du ein Headerbild auf deiner Seite

In dieser Anleitung möchten wir dir zwei Möglichkeiten vorstellen, wie du mit Divi und einer Sektion vom Typ "Volle Breite" einen Headerbereich auf einer Seite gestalten kannst.

INHALTSVERZEICHNIS:

Headerbereich – Bild und Text
Headerbereich – Nur Bild

Logge dich auf deiner Spreadmind Plattform ein (wie das geht erfährst du in dieser Anleitung), rufe deine gewünschte Seite im Frontend auf und aktiviere den visuellen Builder.

1. Headerbereich – Bild und Text

Im aktivierten visuellen Builder klickst du auf das Plus-Symbol, um eine neue Sektion bzw. einen neuen Abschnitt hinzuzufügen:

Wähle dafür den Sektionstyp "Volle Breite" aus:

Wähle als nächstes das Modul "Vollbreite Kopfzeile" aus:

Du kannst nun in den Moduleinstellungen unter dem Reiter "Inhalt" bei den Option "Titel", "Untertitel" usw. deine gewünschten Inhalte eintragen:

In der gleichen Ansicht weiter unten findest du die Option "Hintergrund", bei welcher du ein Hintergrundbild einfügen kannst:

Standardmäßig ist die Größe des Hintergrundbildes auf "Cover (Bedecken) eingestellt:

Dies bedeutet, dass das Hintergrundbild nicht in seiner vollständigen Größe dargestellt wird, sondern immer nun den sichtbaren Bereich ausfüllen wird. Unser Headerbild hat in diesem Beispiel eine Bildgröße von 1920 x 980 px (Breite x Höhe) und wird somit in der Höhe angeschnitten.

Die Höhe der Sektion wird folglich nicht durch das Hintergrundbild bestimmt, sondern durch die Länge deines Inhalts.

Aus diesem Grund empfehlen wir bei diesem Modul gerne die Option "Vollbild machen", welche du in den Modul Einstellungen unter dem Reiter "Design" bei der Option "Layout" findest:

Dadurch erstreckt sich das Modul vollständig über den gesamten Sichtbaren Bereich deines Browser-Fensters. Diese Einstellung ist auch komplett responsive – egal von welchem Endgerät aus die Seite betrachtet wird, das vollbreite Kopfzeilen Modul wird immer den gesamten sichtbaren Bereich bedecken.

Somit ist auch mehr vom Hintergrundbild selbst zu sehen.

Damit der Besucher weiß, dass es auch darunter noch weiteren Inhalt gibt, kannst du ein unter der Option "Icon zum Herunterscrollen" ein Icon einblenden und dieses bei Bedarf gestalterisch anpassen:

Stelle sicher, dass du alle Anpassungen am Modul speicherst (grüner Button unten rechts innerhalb der Modul Einstellung) und auch deine Seite selbst sicherst, bevor du den visuellen Builder von Divi verlässt: Wie speichere ich meine Seite und verlasse den visuellen Builder?

2. Headerbereich – Nur Bild

Hast du bspw. einen Text schon direkt auf deinem Bild und möchtest nun, dass dieses Bild als dein Headerbild dient und somit immer vollständig zu sehen ist, nutzt du am besten das Modul "Vollbreites Bild".

Im aktivierten visuellen Builder klickst du auf das Plus-Symbol, um eine neue Sektion bzw. einen neuen Abschnitt hinzuzufügen:

Wähle dafür den Sektionstyp "Volle Breite" aus:

Wähle als nächstes das Modul "Vollbreites Bild" aus:

Füge in den Modul Einstellungen unter dem Reiter "Inhalt" bei der Option "Bild" dein Bild aus deiner Mediathek ein:

Das Bild wird innerhalb des vollbreiten Moduls nun automatisch in seiner ganzen Höhe angezeigt. Egal, wie breit das Browserfenster ist. Egal, von welchem Endgerät aus die Seite aufgerufen wird. Das Bild ist als Headerbild immer vollständig zu sehen.

Unser Headerbild hat in diesem Beispiel eine Bildgröße von 1920 x 560 px (Breite x Höhe). Das Bild haben wir mit Hilfe des online Gestaltungsprogramm Canva bearbeitet und dabei den Text eingebunden.