HTML und der PageBuilder

Responsive Layout

Wenn du eine Seite aufbaust, beginnst du mit einem „Container“. Ein Container bestimmt die Breite des Inhalts. Auf großen Bildschirmen gibt es links und rechts Leerraum, um zu verhindern, dass Textzeilen zu lang werden; auf kleinen (mobilen) Bildschirmen ist der Container so breit wie der Bildschirm.

In einem Container befindet sich eine Zeile („Row“), die eine bis maximal 12 Spalten („Cols“) enthalten kann. Du kannst Spalten zusammenfügen, um verschiedene Layouts zu erstellen. Dies kannst du für Smartphone, Tablet und Desktop separat einstellen.

Im folgenden Beispiel sind für Desktop die Spalten 1–4, 5–8 und 9–12 zusammengefügt und für Mobilgeräte alle 12 Spalten zusammengefügt. Auf diese Weise kannst du das Layout pro Gerät anpassen, während du dieselben Elemente verwendest.

Elemente

Element-in-Element

HTML-Elemente können in ein anderes HTML-Element platziert werden. Innerhalb des PageBuilders kannst du in eine Col-Komponente ein Element aus dem linken Menü ziehen oder über einen Link im Content-Tab in den Einstellungen.

Nicht jedes Element kann innerhalb eines bestimmten Elements platziert werden. Eine Box-Komponente kannst du zum Beispiel in eine Col-Komponente ziehen, aber umgekehrt nicht. Wenn du das versuchst, erscheint im PageBuilder eine rote Linie und du kannst das Element nicht „loslassen“. Dasselbe gilt für das Kopieren. Nur wenn das zu kopierende Element innerhalb des Elements, in das du es einfügen möchtest, zulässig ist, ist die Einfügen-Schaltfläche verfügbar.

Wenn Elemente ineinander platziert sind, liegt das innerste Element sozusagen obenauf. Du kannst mit der Pfeil-Schaltfläche über dem Element tiefer in die Elementstruktur eintauchen. Dies funktioniert also von innen nach außen. Von außen nach innen ist nicht möglich, da ein Element mehrere Elemente im Inneren haben kann.

Box

Die Box-Komponente (div) ist eine Art leerer Kasten, in den du wiederum andere Komponenten platzieren kannst. Auf diese Weise werden Komponenten gruppiert. Du kannst einer Box aber auch Styling für die Platzierung der Komponenten innerhalb einer Box mitgeben. Siehe hierzu die Erläuterung der Advanced-Optionen.

Die Box-Komponente erhält standardmäßig den HTML-Tag „div“, aber du kannst dies für Styling oder SEO mit der Label-Option im Advanced-Tab anpassen. Die Option „Zwischenraum“ kann verwendet werden, um Platz zwischen Elementen innerhalb des Elements zu schaffen, wenn bei „Anzeige“ die Option Grid oder Inline-Grid gewählt wurde.

Text (Paragraph)

Die Text-Komponente (p) kann für Überschriften, Texte und Aufzählungen verwendet werden.

Obwohl es visuell keinen Unterschied zwischen der Option „Überschrift“ im Style-Tab und der Option „Klasse für Überschrift“ im Advanced-Tab gibt, ist es im Rahmen von SEO wichtig, eine gute Abwägung zwischen diesen beiden Optionen zu treffen. Wählst du h1 bei der Option „Überschrift“ im Style-Tab, erhält die Überschrift einen h1-Tag; wählst du bei der Option „Klasse für Überschrift“ h1, wird dem HTML-Tag eine h1-Klasse hinzugefügt. Mit einem h1-Tag gibst du für SEO an, dass dies die Hauptüberschrift der Seite ist. Mit einer h1-Klasse gibst du einem Text nur das Styling einer h1. Der Standard-Tag der Text-Komponente ist p (Paragraph).

Die Link-Option im Advanced-Tab ist dazu gedacht, einen Link in einen Text einzufügen.

Möchtest du den gesamten Text als Link verwenden, solltest du besser die Link-Komponente verwenden und dort eine Text-Komponente platzieren.

Icon

Möchtest du ein anderes Icon verwenden, als in der Liste steht, wähle „Icon-Name“ unter „Icon-Option auswählen“. Klicke anschließend auf den Link zur Font Awesome-Website und wähle ein Icon aus. Klicke im Popup auf den Namen des Icons (der Name wird dann kopiert) und füge diesen in das Eingabefeld im PageBuilder ein.

Abbildung

Die Option „Bildbeschreibung“ fügt dem Bild einen Alt-Text hinzu. Ein Alt-Text ist wichtig für SEO und Screenreader.

Ein Bild wird standardmäßig über die volle Breite des Elements platziert, in dem das Bild steht. Wenn du das nicht möchtest, kannst du die Option „Skalierbar“ im Advanced-Tab deaktivieren. Wenn du das tust, kannst du eine Breite und/oder Höhe wählen.

Bei der Breite und Höhe hast du die Wahl zwischen Prozentsatz und Pixel. Wenn du Prozentsatz auswählst, wird eine Klasse mit dem Prozentsatz hinzugefügt. Dadurch kannst du pro Gerät einen anderen Wert einstellen. Wenn du Pixel (px) wählst, wird der Wert als Inline-Style hinzugefügt und gilt somit für alle Geräte.

Wenn du eine Höhe und Breite eingestellt hast, kannst du mit der Option „Bild anpassen“ angeben, wie das Bild innerhalb dieses Raums angezeigt wird. Mit „Fill“ wird das Bild mit der eingestellten Breite und Höhe angezeigt. Das Bild kann hierdurch verzerrt werden. „Contain“ sorgt dafür, dass das gesamte Bild angezeigt wird; es kann dann Leerraum entstehen. „Cover“ füllt das Bild vollständig über den Raum aus, verzerrt das Bild aber nicht; es können jedoch Teile des Bildes abgeschnitten werden. Mit „None“ wird das Bild in seiner ursprünglichen Größe gezeigt; es kann sowohl Leerraum entstehen als auch Teile abgeschnitten werden. „Scale-down“ ist vergleichbar mit „Contain“, aber der Unterschied ist, dass das Bild nicht „aufgebläht“ wird, wenn die ursprüngliche Größe des Bildes kleiner als der Raum ist. „Inherit“ bedeutet, dass der Wert des Elements, in dem das Bild steht, übernommen wird.

Bildlink (Interaktives Bild)

Der Bildlink ist eine Link-Komponente mit einem darin enthaltenen Bild. Innerhalb dieser Kombination kannst du Styling dafür wählen, wenn der Nutzer mit der Maus über ein Bild fährt (Hover).

Du kannst dem Bild auch ein Standard-Verhältnis (Ratio) mitgeben. Das ist praktisch, wenn du mehrere Bilder hast, die du alle genau gleich groß anzeigen möchtest; du musst dann nicht alle Bilder in einem Bildbearbeitungsprogramm exakt gleich zuschneiden.

Button

Wenn du einem Button einen Link hinzugefügt hast und in der Vorschau auf den Button klickst, erscheint die URL in einem Tooltip. Das tatsächliche Navigieren zur URL ist im PageBuilder deaktiviert.

Bei Ziel (Target) kannst du zwischen „blank“ und „self“ wählen. Bei „blank“ wird ein neuer Browser-Tab geöffnet, bei „self“ wird die Seite im selben Tab geöffnet.

Es ist auch möglich, ein Icon mit den Toggles im Content-Tab hinzuzufügen. Wenn du einen Toggle aktivierst, wird an der linken oder rechten Seite des Buttons eine Icon-Komponente hinzugefügt. Das Icon kannst du anschließend wie unter der Überschrift „Icon“ beschrieben anpassen.

Link

Eine Link-Komponente (a) hat viele der gleichen Optionen wie eine Box-Komponente. Der große Unterschied zwischen einer a- und einer div-Komponente ist, dass du einem Link eine URL (href) hinzufügen kannst, um irgendwohin zu navigieren. Verwende einen Link nur, wenn das Ziel ist, den Nutzer weiterklicken zu lassen. Ein HTML-a-Tag ohne oder mit einer nicht funktionierenden URL ist schlecht für SEO.

Genau wie bei einem Button kannst du in der Vorschau die URL über den Tooltip überprüfen, indem du auf das Element klickst.

Dropdown

Um das Menü des Dropdowns zu öffnen, klicke auf den Punkt mit dem Zahnrad unten rechts. Du kannst dann mit dem Toggle in den Einstellungen das Dropdown-Menü öffnen.

Wenn du auf den Punkt mit dem Zahnrad beim Menü klickst, kannst du Items hinzufügen und das Menü stylen. Wenn du anschließend auf den dunklen Hintergrund klickst, wird wieder der Einstellungs-Tab des Dropdowns angezeigt und du kannst das Dropdown-Menü mit dem Toggle wieder schließen.

Slider

In den Einstellungen der Slider-Komponente kannst du pro Gerät wählen, wie viele Slides nebeneinander sichtbar sind und ob Platz zwischen den Slides angezeigt werden soll. Du kannst einstellen, ob links und rechts Pfeile oder unten Punkte zur Bedienung des Sliders angezeigt werden sollen.

Du kannst den Slider auch wieder bei der ersten Slide beginnen lassen, wenn alle Slides gezeigt wurden, indem du die Option „Wiederholung“ nutzt. Für die Option „Automatisches Abspielen“ kannst du mit „Verzögerung“ einstellen, wie schnell der Slider läuft.

Wenn du eine Slide anklickst, kannst du der Slide Inhalt hinzufügen, wie zum Beispiel ein Karten- oder Review-Element oder ein Bild, oder du kannst selbst ein Element mit einer Box- oder Link-Komponente bauen.

Der Slider bewegt sich im Builder nicht, wohl aber in der Vorschau und natürlich auf der Website.

Menü (Liste)

Die Menü-Komponente erstellt eine Liste (ol) mit Aufzählungselementen (li).

Du kannst ein fertiges Menü-Item hinzufügen; dies ist ein Aufzählungselement mit einer Link-Komponente und einer Text-Komponente. Über den Content-Tab kannst du auch ein leeres Aufzählungselement hinzufügen, um den Inhalt selbst zu bestimmen.

Tipps & Tricks: Indem du die Anzeige auf „Flex“ umstellst, kannst du ein horizontales Menü erstellen.

Akkordeon

Klicke auf den Punkt mit dem Zahnrad unten rechts, um die Einstellungen zu öffnen. Hier kannst du weitere Akkordeon-Items hinzufügen.

Standardmäßig wird ein Akkordeon-Item geschlossen, wenn ein anderes Item geöffnet wird, aber dies kannst du unter dem Tab „Advanced“ deaktivieren.

Du kannst ein Akkordeon-Item öffnen, indem du auf den Punkt mit dem Zahnrad auf der rechten Seite klickst. Im Feld unter der Akkordeon-Überschrift kannst du dann Inhalt hinzufügen.

Offcanvas

Ein Offcanvas ist ein verborgenes Seitenpanel, das eingeschoben wird. Für das mobile Menü wird beispielsweise ein Offcanvas verwendet.

Wenn du die Offcanvas-Komponente hinzufügst, siehst du zunächst nur einen Button.
Hinweis: Du musst diesem Button keinen Link oder Ziel hinzufügen.

Mit dem Punkt mit dem Zahnrad öffnest du die Einstellungen des Offcanvas. Anschließend kannst du mit dem Toggle „Offcanvas-Panel bearbeiten“ das Seitenpanel öffnen. Wenn du mit der Einrichtung des Seitenpanels fertig bist, klicke auf den dunklen Hintergrund für die Einstellungen des Offcanvas, wo du das Seitenpanel wieder schließen kannst.

Unter dem Advanced-Tab kannst du einstellen, ob es möglich ist, auf der darunter liegenden Seite zu scrollen, wenn das Seitenpanel offen ist; ob du einen dunklen Hintergrund zeigen möchtest und auf welcher Seite des Browsers das Seitenpanel geöffnet werden soll.

Advanced-Optionen

Abstand

Du kannst einen Außenabstand um ein Element (Margin) oder einen Innenabstand innerhalb eines Elements (Padding) hinzufügen. Du kannst pro Seite separat oder für alle Seiten gleichzeitig einen Abstand einstellen und falls gewünscht für jedes Gerät separat.

Padding einstellen:

Margin einstellen:

Worauf du beim Einstellen von Abständen achten musst:

• Wenn ein Element eine Breite von 100 % hat, können horizontale Scrollbalken entstehen.
• Wenn ein Element einen Außenabstand an der Unterseite hat (Margin-bottom) und das Element darunter einen Außenabstand an der Oberseite hat (Margin-top), werden diese Abstände zusammengefügt (Margin Collapsing); der größte Abstand wird dann beibehalten.

Überlauf

Mit Überlauf (Overflow) kannst du angeben, was passieren soll, wenn ein Element zu groß für das Element ist, in dem es platziert wurde. Die Optionen sind:

• Hidden: Das Element wird abgeschnitten.
• Scroll: Es werden Scrollbalken angezeigt; auch wenn ein Element nicht zu groß ist.
• Auto: Es werden Scrollbalken angezeigt, wenn das Element zu groß ist.
• Visible: Das Element wird in seiner Gesamtheit gezeigt.

Für alle gilt, dass du die Option für horizontal (x), vertikal (y) sowie horizontal und vertikal zusammen einstellen kannst.

Anzeige

Mit Anzeige (Display) kannst du einstellen, wie sich ein Element auf einer Seite verhält. Die Optionen sind:

• Block: Das Element füllt die vollständige Breite aus; das nächste Element beginnt also automatisch darunter.
• Inline: Das Element verhält sich so, als stünde es in einem Satz, und wird vor allem für Textelemente verwendet; es nimmt den Platz ein, den es benötigt, aber es kann keine Breite (Width) und Höhe (Height) eingestellt werden.
• Inline-block: Das Element wird neben anderen Elementen platziert, wenn dort Platz ist; es kann eine Breite und Höhe eingestellt werden.
• Flex: Bestimmt, wie die Elemente innerhalb des Elements in Bezug auf Richtung, Verteilung und Ausrichtung angezeigt werden. Siehe Flex-Optionen für die Funktionsweise.
• Grid: Erstellt eine Art Gitter mit Zeilen und Spalten.
• Inline-flex: Funktioniert wie Flex, aber das Element verhält sich wie ein Inline-Element.
• Inline-grid: Funktioniert wie Grid, aber das Element verhält sich wie ein Inline-Element.

Flex-Optionen

Die Optionen, die du für ein Element einstellst, bestimmen, wie die Elemente in diesem Element platziert werden. Angenommen, du hast eine Box-Komponente mit einigen Bildern darin. Dann beeinflussen die Flex-Optionen, die du für die Box-Komponente einstellst, wie die Bilder angezeigt werden.

• Direction: Bestimmt die Richtung, in der die Elemente darin platziert werden; horizontal (Row) oder vertikal (Column).
• Wrap: Wenn die Zeile oder Spalte voll ist, werden die Elemente darin in einer neuen Zeile oder Spalte angezeigt (Wrap) oder nicht (Nowrap).
• Justify content: Gibt an, wie die Elemente darin horizontal angezeigt werden. Mit „Start“ werden sie links angezeigt, mit „Center“ in der Mitte und mit „End“ rechts. Die Option „Between“ verteilt die Elemente darin gleichmäßig über die Breite des Elements. Bei „Around“ erhalten die Items links und rechts den gleichen Abstand; zwischen zwei Elementen ist also doppelt so viel Platz wie an den Rändern. Bei „Evenly“ ist zwischen dem Rand und den Elementen sowie zwischen den Elementen untereinander gleich viel Platz.
• Align items: Macht etwa dasselbe wie Justify content, aber in vertikaler Richtung. Bei Align-items gibt es keine „Between“-Option, dafür aber eine Option „Stretch“. Stretch (die Standardoption für Align-items) sorgt dafür, dass die Elemente darin bis zum verfügbaren Platz „gestreckt“ werden.
• Align content: Funktioniert nur, wenn es mehrere Zeilen oder Spalten gibt und die Elemente in die nächste Zeile oder Spalte umbrechen. Ansonsten funktioniert diese Option ähnlich wie Align-items.

„Justify content“ und „Align items“ werden oft verwendet, um ein Element zu zentrieren.

Im folgenden Video siehst du, wie die verschiedenen Optionen verwendet werden können. Hierbei wurde eine Box-Komponente mit einer festen Breite und Höhe in Pixeln verwendet. Auch die Bilder haben eine feste Breite und Höhe in Pixeln.

Verschieben

Du kannst ein Element im Verhältnis dazu verschieben (Translate), wie es nach dem üblichen Fluss platziert würde. Damit kannst du ein Element zum Beispiel ein Stück herausragen lassen.

Position

Mit der Option Position kannst du angeben, wo ein Element im Verhältnis zu einem anderen Element platziert wird. Hierbei ist es wichtig, dass die Option „Absolute“ nur auf ein Element angewendet wird, das in einem Element mit der Position „Relative“ platziert ist; andernfalls wird es im Verhältnis zum Browserfenster positioniert.

Pro Seite kannst du einen Wert wählen, um die Position zu definieren. Diese Werte können pro Gerät eingestellt werden.

Verhältnis

Du kannst das Verhältnis zwischen Breite und Höhe (Ratio) für ein Element einstellen. So kannst du quadratische und rechteckige Elemente erstellen. Der Inhalt des Elements wird automatisch mit „Position absolute“ positioniert. Dies sorgt dafür, dass mehrere hinzugefügte Komponenten übereinander platziert werden. Dies kannst du verhindern, indem du zuerst eine Box- oder eine Link-Komponente hinzufügst und darin die Komponenten platzierst.