Jetzt, wo du eine tolle Webseite hast, ist der nächste Schritt, deine Webseiten so zu organisieren und zu strukturieren, dass sie fantastisch aussehen. Um dir zu helfen, bietet HostPapa Layouts an, damit deine Inhalte ansprechend erscheinen und leicht zugänglich sind. Layouts sind Teil des Website Builders und verfügen über ein einfach zu bedienendes Drag-and-Drop-System.
Um zu erfahren, wie du auf deinen Website Builder zugreifen und loslegen kannst, lies bitte diesen Artikel.
So fängst du mit Layouts an
- Bewege deinen Cursor zum Menü auf der linken Seite deines Bildschirms.
- Wähle die erste Option, das ist der Tab Build.
- Wähle die Option Layouts im Dropdown-Menü.
Mit Layouts vertraut werden
Um deine Inhalte so zu gestalten, dass Besucher deiner Webseite angezogen werden, ermöglichen dir Layouts, mehrere Inhaltsbereiche zu erstellen. Diese Bereiche sind voneinander getrennt, werden aber gleichzeitig auf deiner Webseite angezeigt.
Die Inhaltsbereiche können eine große Menge an Details auf begrenztem Raum aufnehmen. Inhaltsbereiche werden auch als Container bezeichnet.
Diese Container werden erstellt mit:
- Reihen (Rows)
- Zusammenklappbare Reihen (Collapsible Rows)
- Spalten (Columns)
- Tabs
- Vertikale Tabs
- Akkordeons (Accordions)
Es kann Bereiche auf deiner Webseite geben, die dem Besucher nicht angezeigt werden müssen, es sei denn, er wählt eine entsprechende Option. Mit Layouts kannst du Informationen nach Bedarf verbergen.
Was sind Reihen?
Reihen enthalten Inhaltsbereiche und können vertikal übereinander gestapelt werden.
Was sind zusammenklappbare Reihen?
Mit zusammenklappbaren Reihen kannst du deine Reihen auf- oder zuklappen, und das mit einem Animationseffekt. Um die Option für zusammenklappbare Reihen zu nutzen, gehe wie folgt vor:
- Bewege deinen Cursor zum Menü auf der linken Seite deines Bildschirms.
- Wähle die erste Option, das ist der Tab Build.
- Wähle die Option Layouts im Dropdown-Menü aus.
- Klicke auf die zweite Option im nächsten Menü, also auf Collapsible Rows.
Jetzt kannst du deine Reihe auf- oder zuklappen
- Setze deinen Cursor ins Feld Caption, um deiner Reihe einen Namen zu geben.
- Setze den Cursor anschließend ins Feld Sub-caption, das sich im Bereich Additional Options befindet. Im Feld kannst du eine Unterüberschrift, eine sogenannte H2, hinzufügen.
- Entscheide, ob die neue Reihe aufgeklappt oder zugeklappt sein soll, indem du den Radiobutton bei Expanded oder Collapsed auswählst.
- Füge ein Bild hinzu, indem du auf das Dropdown-Menü Image Source klickst.
Mache Abschnitte deiner Webseite mit Spalten besonders
Columns help you create horizontal content areas that are open. They are best used for introduction sections and can help fill up the space on your page if the amount of content is limited.
Spalten helfen dir, horizontale Inhaltsbereiche zu erstellen, die offen sind. Sie eignen sich besonders für Einleitungssabschnitte und können helfen, den Platz auf deiner Seite zu füllen, wenn der Inhalt begrenzt ist.
Die Optionen bei Columns umfassen:
- Display section headers: Hier kannst du entscheiden, ob es eine Beschriftung gibt.
- Display section delimiters: Damit kannst du Grenzen zwischen den Spalten setzen.
- Distribute width equally across columns: Mit dieser Option bleibt die Breite der Spalte unabhängig vom Inhalt gleich.
- Equalize height of column content panels: Die Höhe der Spalten-Inhaltsbereiche hängt vom Inhalt ab. Mit dieser Option werden die Höhen der Spalten angeglichen.
Mit Tabs deine Inhalte auf kleinem Raum unterbringen
Wenn du Schwierigkeiten hast, deine Inhalte auf kleinem Raum unterzubringen, können Tabs sehr hilfreich sein.
So kommst du zum Tabs-Button:
- Bewege deinen Cursor zum Menü auf der linken Seite deines Bildschirms.
- Wähle die erste Option, das ist der Tab Build.
- Wähle die Option Layouts im Dropdown-Menü aus.
- Klicke auf den Tabs-Button, der zweite Button von unten.
Die Tabs-Gruppe besteht aus drei Abschnitten, aber nur einer kann gleichzeitig angezeigt werden. Der erste Tab öffnet sich automatisch, wenn eine Webseite geladen wird. Du hast folgende Einstellungsmöglichkeiten bei der Einrichtung deiner Tabs:
- Minimum Height in pixels: Wenn du die Mindesthöhe festlegst, haben alle deine Tabs diese Höhe.
- Animate section transitions: Wenn ein Besucher von Tab zu Tab wechselt, wird ein spezieller Übergangseffekt angezeigt.
- Distribute width equally across tabs: Unabhängig vom Inhalt bleibt die Breite der Tabs gleich.
- Equalize height of tab content panels: Jeder Tab ist standardmäßig nur so hoch wie sein Inhalt. Mit dieser Option kannst du die Höhe automatisch angleichen.
Vertikale Tabs
Operating in a similar way to Tabs, Vertical tabs can help visitors keep scrolling down your webpage rather than suddenly moving left to right.
Vertikale Tabs funktionieren ähnlich wie Tabs und helfen Besuchern, auf deiner Webseite nach unten zu scrollen, anstatt plötzlich von links nach rechts zu wechseln.
You can use most of the same options in Vertical tabs that you have in the standard Tabs.
Du kannst bei vertikalen Tabs die meisten der gleichen Optionen nutzen wie bei den Standard-Tabs:
- Mindesthöhe in Pixeln angeben.
- Abschnittsübergänge animieren.
- Höhe der Tab-Inhaltsbereiche angleichen.
Akkordeons verwenden
Die Idee des Akkordeons ist, dass immer nur ein Abschnitt gleichzeitig angezeigt wird. Wenn ein Abschnitt des Akkordeons geöffnet wird, klappt ein anderer mit einem Animationseffekt zu.
Um die Akkordeon-Optionen anzuschauen, gehe wie folgt vor:
- Bewege deinen Cursor zum Menü auf der linken Seite deines Bildschirms.
- Wähle die erste Option, das ist der Tab Build.
- Wähle die Option Layouts im Dropdown-Menü aus.
- Klicke auf den Accordions-Button, der erste Button im nächsten Menü.
Wenn du Hilfe mit deinem HostPapa-Account benötigst, öffne bitte ein Support-Ticket über dein Dashboard.
