Abstände und Ausrichtungen im Brizy Builder

Dieser Artikel ist mit Brizy Pro entstanden. Alle Informationen sind aber genauso für Brizy Free gültig.

Einleitung / Begriffe

Alle Elemente, wie Text, Bilder usw. liegen in Containern, quasi in Kästen. Diese Container bestehen aus HTML Elementen wie “section”, “div”, “h1”, “span” usw. Das sind im Grunde genommen Rechtecke, in denen die Inhalte liegen.

  • Padding ist der innere Abstand in einem Container zu seinem Rand. Also z.B. vom Text zur Kante, zum Rahmen.
  • Margin ist der äußere Abstand vom Container / Rahmen zum nächsten Objekt.
  • Border ist der mögliche Rahmen um einen Container. Hierfür kann eine Farbe, eine Stärke und die Art der Linie definiert werden.
  • Shadow ist ein Schatten für die Elemente.

Es folgen ein paar Grundlagen und dann zwei Beispiele

Abstände

Abstände können wir bei den Elementen in den Einstellungen finden. Wenn wir ein Element anklicken, bzw. auf den “Berabeitungspunkt” klicken, taucht unter anderem ein “Zahnrad” auf.

optionen

Unter “Mehr Einstellungen” kommen wir zu dem Tab “Styling”. Hier können wir mit Padding und Margin die Abstände regeln. Hier haben wir zwei Wahlmöglichkeiten. Alle Seiten gesamt einen Wert und einen Wert für jede Seite. Diese Einstellungen haben wir so gut wie in jedem Element.

abstaende

Lücke oberhalb und unterhalb

In dem Textelement finden wir im “Zahnrad” noch die Möglichkeit “Lücke oberhalb und unterhalb” einzustellen. Der Container bekommt hierbei ein “Margin” oberhalb bzw. unterhalb.

luecke

Section / Block

In der Section finden wir die Einstellungen für die Breite, “Boxed” oder “Voll”. “Boxed” passt sich der Breite des vor eingestellten Layouts des Themes an und hat im Brizy Layout eine maximale breite von 1170 Pixel. “Voll” füllt 100% der Fensterbreite. Eine Section wird dann eingefügt, wenn wir “NEUEN BLOCK HINZUFÜGEN” auswählen.

section boxed

Die Höhe kann auf “Auto” eingestellt werden. Sie richtet sich dann nach den Inhalten. Unter “Individuell” kann die Höhe mit Pixel oder Prozent eingestellt werden. Der Inhalt kann vertikal ausgerichtet werden. “Volle Höhe” ist ein Wert (vh – view height) der sich nach der Bildschirmhöhe des User richtet. 100vh ist volle Höhe, 50vh ist die halbe Höhe usw…

section hoehe

Der Abstand, das Padding in einer Section oben und unten kann auch per “Maus-ziehen” eingestellt werden. Die Maus wird im oberem und unterem Teil der Section zu einem Doppelpfeil. Damit kann man den Abstand “ziehen”…

padding section

Beispiel Text neben Bild

Für das Beispiel füge ich eine eigene Section ein, keinen vorgefertigten Block.

eigene section

In die Section ziehe ich ein Spalten-Element. Brizy legt mir nun zwei Spalten in einer Section an.

spalte

Die rechte fülle ich mit einem Foto, in die linke ziehe ich zwei Text-Elemente. Das erste Text-Element wird eine Überschrift. Hierfür wende ich eine h1 Formatierung an und ändere den HTML Tag in “h1”. Für die Suchmaschinen ist es wichtig das eine Überschrift nicht nur dementsprechend aussieht, sondern auch im HTML die richtige Auszeichnung bekommt. Für eine Überschrift den h1, h2, h3 usw. Tag.

heading format
heading tag

In den Einstellungen für die Spalte habe ich eine vertikal mittige Ausrichtung gewählt. Möglich ist hier “oben bündig”, “mittig” und “unten bündig”.

spalte vertical

Der Text “klebt” mir nun zu dicht am Bild. Ich habe zwei Möglichkeiten dies zu ändern. 

spalte 100

Über die Einstellungen der Spalte, blauer Rahmen rechts oben der kleine runde “Button”. Dann Zahnrad und “Mehr Einstellungen”. Nun kann ich im Bereich “Padding” die am Bild liegende Seite bearbeiten. Hier die rechte Seite. Der Standardwert von Brizy ist 15 px. D.h. 15 Pixel Abstand zum äußerem Rand. Diesen Wert setze ich auf 100px. Jetzt habe rechts vom Text Luft zum Bild. Da ich in der Spalte bin, bekommen alle Elemente hier den gleichen Abstand zum Nachbarelement.

padding spalte

Möchte ich nur ein einzelnes Element in der Spalte ansprechen, z. B. den Text, kann ich dieses direkt anklicken und über die Einstelllungen den Abstand wie oben beschrieben eingeben.

padding text

So kann ich unter “Mehr Einstellungen” alle Abstände vertikal und horizontal einstellen. Ich bevorzuge es immer etwas “luftig” und mit genügend Raum zu den anderen Elementen, damit das Auge nicht überfordert wird…

Beispiel Text mit Hintergrund neben Bild

Ein weiteres Beispiel ist ein Text, farblich hinterlegt und wieder ein Bild rechts.

text bild2

Hier habe ich der Spalte mit dem Text eine Hintergrundfarbe gegeben und diese gleichmäßig mit Padding aufgefüllt.

padding gleich

Würde ich hierbei mit “Margin” arbeiten, hätte ich auch eine Lücke zum Bild, dieses aber vom Containerrand zum Bildrand.

text hintergrund margin

Wichtig ist hierbei zu schauen, ob bei der Bild-Spalte Padding und Margin auf Null sind. Dann schließt das Bild mit dem Text Container gleichmäßig ab.

bild padding

Mobile Ansicht

Die Auswirkung auf die mobilen Ansichten können wir unter “Mobile Ansicht” für Tablets und Smartphones überprüfen.

mobile view

Gegebenenfalls müssen wir die Padding-Werte hier dann noch anpassen. In diesem Fall würde ich bei beiden Textelementen rechts und links ca. 15px Padding einstellen.

mobile view1

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.