Neu beim Astra Theme: Der Header Footer Builder - und so funktioniert's!

Vielleicht weißt du schon, dass ich ein großer Fan des Astra Themes bin - es ist schnell, vielseitig und flexibel! Wenn du das Theme bisher noch gar nicht kennst, schau dir gerne meine Astra Theme Review an.

In diesem Artikel möchte ich dir jetzt ein spezifisches Feature vorstellen, das Astra ganz neu integriert hat: Den Header Footer Builder.

Du lernst,

• wie der Header Footer Builder generell aufgebaut ist
• wie du neue Elemente hinzufügen, richtig positionieren und anpassen kannst
• wie du damit einen transparenten Header erstellen kannst

Außerdem zeige ich dir einige Beispiele, wie deine Header und Footer aussehen können, wenn du sie mit dem neuen Builder von Astra erstellst.

Also, legen wir los!

So ist der Header Footer Builder aufgebaut

Was ich am Astra Theme besonders mag, ist die Tatsache, dass der Customizer - über den du sämtliche Einstellungen vornimmst - so clean und aufgeräumt ist!

Über die Astra Optionen, die du in WordPress unter dem Menüpunkt Design findest, kannst du außerdem mit nur einem Klick direkt zu der Stelle im Customizer springen, die du gerade brauchst.

Hier kommst du jetzt auch zum Header bzw. Footer Builder.

Schauen wir uns im Beispiel mal den Header Builder im Detail an! Den bedienst du also direkt über den Customizer. (Der Footer Builder ist genau gleich aufgebaut.)

Wenn du den Builder aufrufst, siehst du (wie gewohnt im Customizer) deine Website in der gleichen Ansicht, wie deine Besucher:innen sie auch sehen werden.

Unten wird allerdings dann noch der Header Builder angezeigt. Dieser ist in 3 Ebenen eingeteilt, innerhalb dieser Ebenen gibt es auch jeweils nochmal 3 Bereiche, in die du Elemente hinzufügen kannst.

Du siehst immer direkt, wie dein Header dann am Ende auf deiner Website auch wirklich aussieht - sobald du ein Element hinzufügst oder verschiebst, siehst du die Änderung direkt in der Live-Vorschau.

Das ist super praktisch und funktioniert auch einwandfrei!

So gestaltest du deinen Header

Wie genau baust du mit dem Header Builder jetzt wirklich deinen Header? Schauen wir uns das mal Schritt für Schritt an.

Elemente per Drag&Drop verschieben

Das Prinzip ist eigentlich ganz simpel: Du kannst die Elemente per Drag&Drop im Header Builder verschieben. Nehmen wir ein simples Beispiel: Logo und Menü sind bereits eingefügt (siehe letzter Screenshot).

Das Logo-Element kannst du jetzt in den mittleren Bereich der oberen Ebene verschieben, das Menü-Element kommt in die Mitte in der mittleren Ebene.

Dann sieht dein Header so aus:

Wenn du also ein Element in eine andere (bisher leere) Ebene verschiebst, wird diese automatisch angezeigt.

Du kannst so mit verschiedenen Elementen ganz einfach ausprobieren, was dir am besten gefällt!

Neue Elemente hinzufügen

Um ein neues Element hinzuzufügen, klickst du einfach im entsprechenden Bereich auf das +, das angezeigt wird, wenn du mit der Maus darübergehst.

In der kostenlosen Version des Astra Themes stehen dir folgende Elemente zur Verfügung:

• Logo
• Primary und Secondary Menü
• Button
• HTML
• Social Icons
• Suche
• Widget

Wenn du HTML auswählst, kannst du so bspw. Text einfügen. In den Menü-Einstellungen des Themes kannst du festlegen, welches Menü Primary bzw. Secondary Menü sein soll.

Zwei Menüs in einem Header klingt erstmal viel, kann aber Sinn machen, je nachdem wie viele Angebote bzw. Inhalte etc. du hast. Schau dir hier die Astra Website an - sie haben auch zwei Menüs im Header!

In Astra Pro stehen dir noch weitere Elemente für Header und Footer zur Verfügung!

Die neuen Elemente kannst du dann wie die anderen auch per Drag&Drop verschieben, falls du sie doch an einer anderen Stelle haben möchtest. Du kannst auch mehrere Elemente in einen Bereich einfügen, z.B. Social Icons und Suche direkt nebeneinander!

Elemente bearbeiten

Die einzelnen Elemente kannst du natürlich noch bearbeiten und genau deinen Vorstellungen entsprechend anpassen. Klick dazu einfach auf das jeweilige Element. Dann öffnen sich links die Einstellungen.

Diese sind aufgeteilt in "General" und "Design". Nehmen wir mal das Menü-Element als Beispiel. (Das Menü erstellst du übrigens wie gewohnt in WordPress unter Design > Menü)

Unter General kannst du jetzt z.B. die Animation festlegen. Interessant wird es hier vor allem beim Design, wo du Farben, Schriftarten, Spacing etc. festlegen kannst.

Beim Logo-Element z.B. fügst du in den Einstellungen das Logo ein, legst die Größe fest etc. Wie gesagt: Du kannst alles individualisieren und anpassen!

Die einzelnen Ebenen deines Headers

Zu Beginn habe ich schon gesagt, dass dir für den Header drei "Ebenen" zur Verfügung stehen: Above Header, Primary Header und Below Header. So hast du wesentlich mehr Gestaltungsmöglichkeiten, als wenn du nur eine Ebene hättest!

Auch die Ebenen kannst du natürlich noch bearbeiten und so z.B. die Höhe oder die Hintergrundfarbe bearbeiten.

So erstellst du einen transparenten Header

Mit dem Header Builder kannst du natürlich auch einen transparenten Header für deine Website erstellen. Dazu wählst du unter Header Types einfach die Option aus (in der kostenlosen Variante ist das die einzige Option).

Dann setzt du den Haken bei "Enable on complete website". Wenn du möchtest, kannst du dann einzelne Bereiche deiner Website ausschließen, sodass dort kein transparenter Header angezeigt wird.

Außerdem kannst du festlegen, ob der Header nur am Desktop transparent angezeigt werden soll oder auch mobil und du kannst ein alternatives Logo einfügen.

Unter Design kannst du weitere Einstellungen für Farben festlegen!

Header Footer Builder: Beispiele

Jetzt hab ich schon mehrmals erwähnt, dass du mit dem neuen Builder super flexibel bist, was das Design von Header und Footer angeht. Aber was bedeutet das genau?

Astra zeigt auf der Website einige Beispiele, wie dein Header aussehen kann:

Auch beim Footer kannst du deiner Kreativität freien Lauf lassen (dabei aber bitte immer noch die Nutzerfreundlichkeit im Blick haben).

Hier kann es auch Sinn machen, Widgets einzufügen - z.B. für deine neuesten Blogbeiträge oder Kategorien.

Auch für den Footer zeigt Astra einige Beispiele:

Du siehst: Hier ist eine ganze Menge möglich!

Fazit: Der neue Header Footer Builder im Astra Theme

Jetzt konntest du dir einen ersten Einblick verschaffen, wie der neue Header Footer Builder aufgebaut ist und funktioniert - noch im November soll das neue Feature dann live geschaltet werden, sodass du damit auch wirklich arbeiten kannst!

Ich muss sagen, mir gefällt der neue Builder echt gut - dadurch hast du auch in der kostenlosen Version des Astra Themes wesentlich mehr Spielraum bei der Gestaltung von Header und Footer als vorher!

Das könnte es auch überflüssig machen, Header und Footer mit dem Theme Builder von Elementor Pro zu erstellen. Ich kann mir vorstellen, dass das die Ladezeit der Seite nochmal verbessern würde.

Was hältst du vom neuen Header Footer Builder? Kannst du dir vorstellen, damit zu arbeiten? Schreib deine Gedanken dazu gerne in die Kommentare! Schau dir gerne auch mein ausführliches Tutorial für das Astra Theme an.

___________________

Einige Links sind Affiliate Links. Wenn du dir darüber die Pro Version von Astra kaufst, erhalte ich eine Provision – für dich bleibt der Preis natürlich gleich. Danke für deine Unterstützung!