Bricks Builder – Beginner’s Guide: Header-Template

Was ist Bricks? 

Bricks Builder ist ein WordPress-basierter Site-Builder, der eine visuelle Drag-and-Drop-Oberfläche für die Erstellung individueller und responsiver Websites bietet im Gegensatz zu anderen Page Buildern ist der Bricks Builder ein WordPress Theme und kein Plugin. Es erzeugt sauberes semantisches HTML, nutzt Lazy Loading, hat keine JQuery-Abhängigkeiten und ist auf Geschwindigkeit optimiert. Die erste Version von Bricks Builder wurde 2020 veröffentlicht.

bricksbuilder.io

Was sind Templates bei Bricks?

Templates (engl. Vorlage) sind ein zentrales Element von Bricks. Es gibt verschiedene Arten von Templates. In der Regel erstellt man mindestens eine Kopfzeile, eine Fußzeile und ein Template für Blogbeiträge.

Ein Template kann entweder einen einzelnen Abschnitt (wie die Kopfzeile deiner Website oder einen Hero-Bereich) oder den gesamten Seiteninhalt (wie das Layout eines einzelnen Blogbeitrags, Archivseiten, Suchergebnisseiten, Fehlerseiten usw.) enthalten.

Wie erstelle ich ein Template?

Ein Template lässt sich über das Menü auf der linken Seite unter Bricks > Templates und dann “Add new template” erstellen

Neben einem eindeutigen Namen ist wichtig, dass der Template type richtig gesetzt wird. In unserem Beispiel wollen wir ein Header-Template erstellen. Daher setzten wir den Template type auf “Header”

Nach der Veröffentlichung geht es weiter im Bricks Builder. Dazu auf “edit with Bricks” klicken.

Bricks Builder – Die Editor-Ansicht erklärt

Der Editor des Bricks Builders ist in 3 Bereich aufgeteilt:

1. Linke Seitenleiste (Editor-Bereich)

Das ist das Hauptsteuerungsfeld. Hier können neue Inhalte ausgewählt werden und per Drag-&-Drop dem Arbeitsbereich in der Mitte hinzugefügt werden.

Ist ein Element im Arbeitsbereich ausgewählt, kann man auf der linken Seite über unterschiedliche Tabs den Inhalt, das Aussehen und weitere Einstellungen ändern.

• Elemente-Tab: Hier findest du alle verfügbaren Bausteine wie Text, Bild, Container, Grid, Button, usw. Du ziehst diese einfach per Drag-and-Drop in den Arbeitsbereich.
  
• Struktur-Tab: Zeigt eine hierarchische Baumstruktur deiner Seite an – ähnlich dem DOM. Nützlich für komplexe Layouts und zur schnellen Auswahl einzelner Elemente.
  
• Stile-Tab: Zeigt die CSS-Eigenschaften des aktuell ausgewählten Elements an. Hier passt du z. B. Farben, Abstände, Schriftarten usw. an.
  
• Einstellungen-Tab: Globale Seiteneinstellungen wie Breakpoints, Template-Auswahl, benutzerdefiniertes CSS/JS usw.
  

2. Arbeitsbereich (Canvas / Live-Vorschau)

In der Mitte siehst du deine Seite in Echtzeit, wie sie auf der Website aussieht.
→ Hier platzierst und bearbeitest du die Elemente visuell.

3. Struktur

Hier findest du die einzelnen Elemente der Seite in einer hierarchischen Struktur, um leichter auf der Seite zu navigieren oder um Elemente per Drag-&-Drop zu verschieben.

Die obere Werkzeugleiste enthält verschiedene Tools und Aktionen:

• Rückgängig/Wiederholen
• Ansicht wechseln (Desktop, Tablet, Mobil)
• Vorschau
• Speichern
• Conditions, Repeater, Dynamic Data
• Suche nach Elementen oder Seiteninhalten

Einen Header mit dem Bricks Builder erstellen

Für unseren Header möchten wir ein 3-spaltiges Element, das ein Logo, ein Menü und eine Suchfunktion beinhaltet.

Dazu klicken auf der linken Seite auf das Element Sektion und fügen so dem Arbeitsbereich eine neue Sektion hinzu. Eine Sektion sollte immer nur das oberste Element der Seiten-Hierarchie sein. Darin liegt (automatisch von Bricks eingefügt) ein Container. Container sind die “Wrapper” der eigentlichen Inhalte und dienen dazu, das allgemeine Layout eines Inhaltsbereiches anzupassen.

In unserem Fall soll dieser Container ein Grid mit 3-Spalten sein, wobei die mittlere Spalte für das Menü bedeutend breiter als die anderen Spalten sein soll. 

Dies machen wir über die Einstellungen auf der linken Seite, während der Container ausgewählt ist. mit dem Wert “Display:  grid“ und “Grid template columns : 1fr 9fr 2fr”

Die Einheit fr im CSS Grid Layout repräsentiert einen Bruchteil des verfügbaren Platzes im Grid-Container. Sie wird verwendet, um Spalten- oder Zeilenbreiten zu definieren, wobei eine 1fr-Einheit einen Anteil des verfügbaren Platzes einnimmt.

Durch “Display: grid” auf dem Container werden die nächsten Elemente innerhalb des Containers auf die Spalten verteilt. Das sind in unserem Fall ein Logo, ein Menü und ein Suchfeld. Um die Ausrichtung und Abstände der Inhalte besser bearbeiten zu können, werden diese Inhalte in einen Block gesetzt, sodass wir also 3 Block mit jeweils einem Inhaltselement der Seite hinzufügen. Dies machen wir wieder über die linke Seitenleiste. Dazu wählen wir erst das “+”-Icon an und ziehen die entsprechenden Elemente in den Arbeitsbereich oder die Strukturleiste auf der rechten Seite.

Dann wählen wir die einzelnen Inhaltselemente aus und passen sie nach unseren Wünschen an.

Da wir das Menü in der mittleren Spalte zentriert darstellen möchten, wählen wir den Eltern-Block des Menüs aus und setzen dort die Werte “Align main axis: center” und “Align cross axis: center”.

Auf den Container haben wir noch etwas Abstand gesetzt und das Suchfeld rechts ausgerichtet und 100 % breite gesetzt in Bezug auf die Spalte, in welcher der Block ist.

Dann müssen wir noch speichern und der Header ist inhaltlich fertig. Nun muss noch eine Bedingung gesetzt werden, wann das Template geladen wird.

Breakpoints und responsives Design mit Bricks

Breakpoints sind bestimmte Bildschirmbreiten (in Pixeln), bei denen sich das Design ändert, um sich der Bildschirmgröße unterschiedlicher Geräte anzupassen. Sie sind sozusagen die „Umschaltpunkte“, an denen das Layout für kleinere oder größere Geräte angepasst wird.

In den Theme-Einstellungen > Breakpoints kannst du definieren, ab welchen Bildschirmgrößen die Umschaltung passiert. Standardmäßig bietet Bricks sinnvolle Breakpoints, du kannst sie aber individuell anpassen.

In der oberen Werkzeugleiste kannst du die Ansicht für verschiedene Breakpoints umschalten.

Für unseren Header wollen wir für die Ansicht Mobile (landscape) die Reihenfolge der Blöcke im Container ändern.

Dazu ändern wir in den Blöcken den Wert “order” auf 1, 2 und 3, je nach gewünschter Reihenfolge.

Änderungen gelten immer vom ausgewählten Breakpoint abwärts. Das heißt, wenn du eine Änderung in der Smartphone-Ansicht machst, betrifft sie nicht automatisch Tablet oder Desktop. Wenn du z. B. ein Element nur auf dem Handy anzeigen willst, kannst du im Style Panel > Layout > Sichtbarkeit (Visibility) bestimmte Geräte ein- oder ausschließen.

Für die Ansicht “Mobile (portrait)” wollen wir die Suche ausblenden. Wir wechseln in die mobile Ansicht und ändern das Grid layout auf 2 Spalten und blenden den Suchblock aus.

Et voilà! Fertig ist der Header.

Bricks Template Bedingungen

Template Conditions in Bricks Builder sind Regeln, mit denen du festlegst, wann und wo ein bestimmtes Template auf deiner WordPress-Website angezeigt werden soll.

Hier sind einige Beispiele:

Im Falle unseres Headers möchten wir, dass der Header auf der gesamten Seite dargestellt wird. Dazu gehen wir über das Zahnrad (oben links) auf Templates settings > conditions und dann auf “Add condition” und “entire website” wählen.

Jetzt nochmal speichern und unser neuer Header wird auf der gesamten Seite angezeigt.

Fazit

Der Bricks Builder ist ein leistungsstarker und flexibler Page Builder für WordPress, der vor allem durch seine Performance, moderne Benutzeroberfläche und tiefgreifende Anpassungsmöglichkeiten überzeugt.

Die Nutzung von Templates im Bricks Builder ermöglicht es, wiederkehrende Layouts effizient zu erstellen und zu verwalten – etwa für Header, Footer, Blogbeiträge oder Produktseiten. Das spart nicht nur Zeit, sondern sorgt auch für Konsistenz und Skalierbarkeit beim Website-Aufbau.

 Insgesamt bieten Templates im Bricks Builder eine smarte Möglichkeit, Designprozesse zu optimieren und professionelle Webseiten strukturierter zu gestalten.