Bricks Builder Header Template erstellen

So soll der Header aussehen, links ein Logo und rechts die Navigation mit einem Call to Action Button.

header fertig

Ein Header Template anlegen

Ein Header kann auf vielen verschiedenen Arten zusammengestellt werden. Dieses hier ist nur ein Weg von vielen… Ich erkläre hierbei viele Einzelschritte und zeige damit, wie sich das Container Element mit dem CSS Flexbox Layout berabeiten lässt.

Wir gehen im WordPress Backend auf “Bricks” und “Templates”. Hier können wir ein Template neu hinzufügen, aber auch ein vorhandenes importieren / exportieren. Templates werden als .json Dateien exportiert und importiert.

Wir geben einen Namen ein, z.B. Header und wählen rechts unter “Template Typ” den “Header” aus und klicken auf Veröffentlichen.

Nun  können wir “Mit Bricks berabeiten” anfangen den Header zu erstellen.

header neu

Der Bricks-Builder

Um den ersten Container einzufügen, können wir entweder links auf das Container Element klicken oder in der Mitte der Oberfläche auf das kleine “Plus-Symbol”.

container element
container einfuegen

Der Header Container

Das Container-Element in Bricks hat standardmäßig das HTML Tag “div” und ist mit einer maximalen Breite von 1100px versehen (width: 100% / max-width: 1100px). Der Container bewegt sich responsiv innerhalb der 1100px frei in seiner Breite und stoppt bei 1100px. Diese 1100px eigenen sich soweit ganz gut für die Breite den Inhaltes auf einer Website.

Natürlich kann ich für die Breite auch einen individuellen Wert eingeben.

erste container 1

Dieser Header soll aber über die gesamte Website gehen und der Inhalt soll sich in dem Bereich der 1100px befinden. Dafür brauchen wir einen inneren Container, der die Breite bestimmt…

Elemente benennen und auswählen

Zur besseren Übersicht können wir in Bricks in dem Strukturpanel rechts unsere Elemente benennen. Ich nenne den ersten Container “Container Header”. Da der Umgang mit mehreren Container und “flex” leicht unübersichtlich werden kann, könnt ihr in den Panels oben gut erkennen, in welchem Container die Anweisungen gegeben werden…

Um ein Element auszuwählen kann man direkt in das Element klicken, auf das kleine Bleistift-Symbol klicken oder im Strukturpanel auf das entsprechende Element klicken.

container auswahl 1
Auswählen am Element
header struktur auswahl
Auswählen am Element in der Struktur

Ich wähle den Container aus und klicke links im Panel unter “Align Container” auf “Strecken. Damit bekommt der Container eine Breite von 100% ohne max. Wert. Jetzt geht der Header über die gesamte Seite.

container strecken

Einen inneren Container einsetzen

Ich füge in diesen Container einen weiteren ein. Das kann ich bei markierten Header per Klick auf das kleine “Plus-Symbol”, über das Elementpanel oder über das Strukturpanel machen.

div einfuegen 3
Am Container selber
div einfuegen 1
Über das Struktur Panel

Dieser Container wird nun in Blau dargestellt, hat wieder eine max. Breite von 1100px und ist links ausgerichtet. Diesen Container nenne ich “Container Innen”.

erste container

Ein Klick auf “Align Container” “Zentriert” setzt diesen mittig.

container innen zentrieren

Nun haben wir das Gerüst für die Inhalte geschaffen.

Die Inhaltselemente

Für die Inhalte nutze ich zwei Spalten, links das Logo, rechts die Navigation und den Button. Ich füge zwei Container in den blauen “Container innen” ein. Diese werden übereinander angelegt.

container zwei

Ich wähle den “Container innen” aus und klicke links im Panel unter Inhalt auf “Richtung” “Horizontal”. Die eingefügten “Reihen” sind nun lila “Spalten”.

container horizontal

Ich markiere sie jeweils und benenne sie entsprechend “Container links” und “Container rechts”.

zwei spalten

Ich markiere / klicke den linken und setze links im Panel unter “Stil” “Layout” die Breite auf 30%. Das kleine “px” über dem Zahlregler kann ich in “%” umschreiben Hier kann ich verschiedene Einheiten, wie px, em, %, vw usw. nutzen. Hier wird bestimmt noch ein Dropdown o.ä. für die Einheiten integriert. Der rechte Container passt sich automatsch an.

container left breite

Logo einfügen

Ich klicke den linken Container an und füge über das Elementpanel das Logo ein.

logo

Das Logo soll vertikal mittig sein. Klick auf den linken Container und im Panel links auf “Align Container” “Zentriert”…

logo ausrichten

Diese Zahlen jetzt sind natürlich komplett anpassbar. Hier habe ich nur ein Schriftlogo und die Navi plus Button eingebunden. Es gibt viele Möglichkeiten einen Header zu gestalten und dabei kann man dann mit den Werten und Einheiten spielen, bis sie passen.

Navigation und Button

Ich markiere den rechten Container und füge die Navigation ein. Eine Navigationsmenü sollte schon erstellt sein. Ich klick die Navigation an und wähle links im Panel das Menü aus. Nun füge ich in den rechten Container noch einen Button ein.

navigation button

Mit Klick auf den rechten Container und links im Panel auf “Richtung” “Horizontal” lege ich die Elemente nebeneinander und zentriere sie vertikal mit “Align Container” “Zentriert”.

Jetzt soll die Navigation und der Button rechts liegen. Ich markiere den Container und gehe im Panel auf “Inhalt Rechtfertigen” (Merkwürdige Übersetzung :-)) auf “End”. Die Navigation und der Button rutschen nun nach rechts.

menu button ausrichtigen 2

Das Struktur Panel sieht nun so aus:

struktur panel

Abstände

Der Button klebt direkt an der Navigation. Wir könnten das mit “Column Gap” lösen. Dieses würde zwischen den Elementen einen von uns definierten Abstand setzen. Dieses wird aber noch nicht von allen (mobilen) Browsern unterstützt, darum gebe ich dem Button ein Margin / Abstand an der linken Seiten.

Den Button markieren und in den Einstellungen unter “Stil” “Layout” bei “Margin” 20px eingeben. Das Ketten Symbol vorher entsperren, damit der Wert nicht für jede Richtung eingetragen wird.

Dabei gebe ich dem Button gleich einen Border-Radius mit. Das sind die Rundungen des Buttons.

margin button
button radius

Header Grundfläche

Das gefällt mir soweit gut. Mein Header braucht jetzt noch etwas Luft zum Atmen, eine Hintergrundfarbe, eine Sticky-Funktion und ich liebe Schatten…

Ich wähle den Container Header aus und gebe einen Abstand oben und unten ein. Hierbei nehme ich “Padding”. Der Header wird so “aufgefüttert”, der Abstand ist zu den inneren Elementen und nicht nach außen.

Unter “Stil” “Layout” “Padding” trage ich Oben und Unten 20px ein. Auch hier ist das nur spielerischer wert, wenn z.B. das Logo eine andere Schrittgröße hat, ist vielleicht ein kleiner Wert sinnvoll usw.

header padding

Weiter unten im Bereich “Hintergrund” stelle ich als Farbe Weiß ein. Ansonsten ist der Header transparent…

header hintergrund

Darunter ist der Bereich “Schatten” hier gebe ich dem Header eine kleinen Schatteneffekt.

header schatten 2

Header fix

Am unteren Rand erscheint bei der Mausbewegung “Header Einstellungen”. Hier sind verschiedene Einstellungen. Hier können wir “Fixierter Header” aktivieren. Das bedeutet, der Header bleibt beim Scrollen immer oben an der Seite.

header fix

Die mobilen Ansichten

In der Ansicht “Tablett Hochformat” seht es etwas gedrängt aus… Ich markiere den “Container links” und gebe diesem ein Padding von 15px links. Damit hat das Logo etwas Luft nach links.

Die Breite ändere ich auf 20%, nun sieht es schon sauberer aus.

container links einstellen

Dann markiere in den “Container rechts” und gebe diesem ein Padding rechts von 15px. Passt…

container rechts padding
mobile padding

In der nächsten mobilen Ansicht stapeln sich nun die Elemente.

container 767px

Wir klicken auf den “Container innen”, in diesem liegen die Elemente, die sich stapeln und klicken links im Panel auf “Umbruch” “Keine Umhüllung”.

stapel losen

Es sollte jetzt so aussehen…

stapel fertig

Sollte die Navigation zu lang sein, können wir auch das “Hamburger” Menü schon ab einer Pixelbreite von 992px aktivieren. Das Menü anklicken und…

navigation umschalten

In der letzten mobilen Ansicht wird es jetzt eng. Es gibt verschiedene Möglichkeiten… Wir könnten den Button Text kürzen. Oder / und den Abstand Button zur Navigation und unseren rechten und linken Container-Padding verkleinern. Das wird jetzt etwas fummelig…

Wir könnten auch den Button in dieser Ansicht ausblenden. Siehe unten.

mobile 478

Ich ändere jetzt die Anordnung im rechten Container und stapel die mobile Navigation und den Button.

mobile stapel 2

Das Menü richte ich rechts aus und gebe ein Margin rechts und nach unten von 20px.

mobile nav

Beim linken Container ändere ich die Breite auf 40% und stelle unter “Inhalt” “Align Container” den Wert “Start” ein.

container links mobile
container links mobile 2

So könnte es aussehen…

smart mobile

Alternativ den Button ausblenden

Man könnte den Button im Header auch ausblenden und z.B. in der Navigation mit unterbringen… Dafür könnten wir im Backend ein eigenes Navigationsmenü erstellen, welches dann in der Mobile Ansicht angezeigt wird.

Ich markiere den Button und wähle unter “Layout” “Anzeige” “none” aus. Damit wird der Button per CSS ausgeblendet.

button ausblenden

Den Header anzeigen lassen

In den Header Einstellungen finden wir den Bereich “Bedingungen” Hier können wir auswählen, auf welchen Seiten unser Header angezeigt wird.

header fix 1

Schreibe einen Kommentar