So soll der Header aussehen, links ein Logo und rechts die Navigation mit einem Call to Action Button.
Inhalt
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.
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“.
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.
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.
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.
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.
Dieser Container wird nun in Blau dargestellt, hat wieder eine max. Breite von 1100px und ist links ausgerichtet. Diesen Container nenne ich „Container Innen“.
Ein Klick auf „Align Container“ „Zentriert“ setzt diesen mittig.
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.
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“.
Ich markiere sie jeweils und benenne sie entsprechend „Container links“ und „Container rechts“.
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.
Logo einfügen
Ich klicke den linken Container an und füge über das Elementpanel das Logo ein.
Das Logo soll vertikal mittig sein. Klick auf den linken Container und im Panel links auf „Align Container“ „Zentriert“…
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.
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.
Das Struktur Panel sieht nun so aus:
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.
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.
Weiter unten im Bereich „Hintergrund“ stelle ich als Farbe Weiß ein. Ansonsten ist der Header transparent…
Darunter ist der Bereich „Schatten“ hier gebe ich dem Header eine kleinen Schatteneffekt.
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.
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.
Dann markiere in den „Container rechts“ und gebe diesem ein Padding rechts von 15px. Passt…
In der nächsten mobilen Ansicht stapeln sich nun die Elemente.
Wir klicken auf den „Container innen“, in diesem liegen die Elemente, die sich stapeln und klicken links im Panel auf „Umbruch“ „Keine Umhüllung“.
Es sollte jetzt so aussehen…
Sollte die Navigation zu lang sein, können wir auch das „Hamburger“ Menü schon ab einer Pixelbreite von 992px aktivieren. Das Menü anklicken und…
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.
Ich ändere jetzt die Anordnung im rechten Container und stapel die mobile Navigation und den Button.
Das Menü richte ich rechts aus und gebe ein Margin rechts und nach unten von 20px.
Beim linken Container ändere ich die Breite auf 40% und stelle unter „Inhalt“ „Align Container“ den Wert „Start“ ein.
So könnte es aussehen…
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.
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.
