Webflow Designer – Aufbau & Hierarchie von Elementen

Wenn du das erste Mal mit Webflow arbeitest, wirst du wahrscheinlich von den unzähligen Funktionen & Elementen etwas überwältigt sein. Das ist aber völlig normal – mir ging es am Anfang genauso. Die vielen Elemente geben dir aber auch eine enorme Kontrolle und Designfreiheit, um deine Ideen zum Leben zu erwecken. Wie du als Anfänger am besten Webflow lernen kannst, habe ich dir in dem Artikel: Die besten Tipps und Tricks um Webflow zu lernen zusammengestellt.

Je nach Anwendungsfall gibt es Elemente mit definierten Funktionen, die du zum Aufbau deiner Webseite nutzen kannst. In diesem Artikel erfährst du mehr über die wichtigsten Elemente und Tipps, die du bei deren Verwendung beachten solltest.

Um Elemente zu deiner Webseite hinzuzufügen, musst du diese nur vom Element-Panel in den Editor ziehen oder einfach darauf klicken. Im Element-Panel sind die Elemente nach Kategorien sortiert, um dir einen schnellen Überblick zu schaffen.

‍

Kategorien im Elemente-Panel

• Layout
• Basic
• Typography
• CMS
• Medien
• Formulare
• Komponenten

‍

Aufbau von Webseiten – Das Box-Modell

Um den Einstieg zu erleichtern, ist es gut zu verstehen, wie Webseiten im Generellen aufgebaut sind. Stell dir vor jedes Element besitzt eine unsichtbare Box um sich herum. Je nach ihrer Eigenschaft wird jede Box auf der Webseite anders platziert. Dasselbe Prinzip gilt beim Webflow Designer. Am einfachsten wird das Box-Modell anhand eines Screenshots deutlich. 

Hierarchie der Elemente

Wenn du Elemente zu deiner Webflow Seite hinzufügst, werden diese visuell im Webflow Designer und als Struktur im Navigator angezeigt. Im Normalfall ist jede Webseite mit verschiedenen Abschnitten aufgebaut. Jeder Abschnitt enthält viele miteinander verschachtelte Elemente. Durch diese Verschachtelung entsteht eine Hierarchie mit übergeordneten und untergeordneten Elementen. Zusammen bilden sie den Aufbau deiner Webseite.

‍

‍

Navbar

Die Navigationsleiste ist wohl eines der wichtigsten Elemente in Webflow. Ohne eine Navigation können User nicht auf deiner Webseite navigieren und erreichen so keine Unterseiten. Das Navbar-Element in Webflow hat folgende vordefinierte Eigenschaften

• Ein „Brand-Link-Element“ welches als Platzhalter für dein Logo gedacht ist
• Ein Navigationsmenü mit 3 Links. Diese kannst du je nach Umfang deiner Webseite beliebig erweitern oder anpassen
• Auf dem Tablet Viewport erscheint anstatt der Navigationslinks das Hamburger-Menü. Du kannst aber auch selbst bestimmen, ab wann das Icon angezeigt werden soll

‍

Sektion

Sektionen unterteilen deine Webseite in sinnvolle Abschnitte. Mehrere Sektionen untereinander gereiht ergeben praktisch die verschiedenen Abschnitte auf deiner Webseite. Als Layoutelement füllen sie die komplette Breite des Browserfensters. Meistens besitzen Sektionen in Webflow einen Abstand nach oben und unten, damit die Abschnitte nicht aneinanderkleben. 

‍

Container

Container werden meist als Element innerhalb einer Sektion platziert. Der Container sorgt für eine ordentliche Platzierung innerhalb der Sektion und enthält wiederum weitere Elemente. Oft begrenzt der Container die enthaltenen Elemente auf eine maximale Seitenbreit. Mit etwas Abstand links und rechts sorgt er dafür, dass die Elemente auf schmaleren Geräten nicht am Seitenrand kleben. 

‍

Div-Block

Ein Div-Block ist ein Hauptelement und sehr vielseitig einsetzbar. In der Regel befindet er sich innnerhalb eines Containers. Am häufigsten wird er als eine Box verwendet, in der Elemente gruppiert und positioniert werden.

Ein Div-Block kann aber auch alle möglichen Formen annehmen oder Funktionen erfüllen. Zum Beispiel kann er als Abstand oder Trennlinie eingesetzt werden. Man kann den Div-Block auch ein Hintergrundbild geben und es so als grafisches Element verwenden. 

‍

Grid

Ein Grid ist ein CSS-Raster, welches Spalten und Zeilen besitzen kann – ähnlich wie eine Tabelle in Excel. Mit dem Raster kannst du alle möglichen responsiven Layouts erstellen. Es ist wie ein unsichtbares Netz, welches sich um die Inhalte schließt und sie darin positioniert. 

Das einfachste Beispiel ist ein Grid mit drei Spalten, welche jeweils ein Bild enthält. Die Bilder haben in der Desktop-Ansicht genügend Platz und werden optimal angezeigt. Auf dem Tablet könnte der Platz schon zu klein sein. Nun kannst du in den Einstellungen des Grids einfach angeben, dass die Bilder nur noch in zwei Spalten angezeigt werden sollen. Auf dem Smartphone dann nur noch in einer Spalte. Die Bilder rutschen dann je nach Bildschirmgröße automatisch untereinander.

‍

Heading

Elemente aus dem Bereich Typografie sind das Herzstück, um Inhalte auf deine Webseite zu bringen. Das wichtigste Element hierbei sind die Headings – also Überschriften. Headings können von der Hierarchie von H1 bis H6 unterteilt werden. Überschriften sind sehr nützlich, da sie von Menschen und Suchmaschinen meist als erstes auf deiner Webseite erfasst werden.

‍

Rich Text

Das Rich Text Feld ist ebenfalls ein sehr nützliches Element für deine Website-Texte. In dem Textfeld lassen sich auch Bilder, Videos, Listen, HTML-Code oder Zitate einbinden. Das Element ist perfekt für dynamische CMS Seiten wie Blogartikel geeignet, um große Mengen an Text zu platzieren. Du kannst Rich Text Elemente auch für rechtliche Seiten wie Datenschutz oder Impressum nutzen, um größere Mengen an Text zu strukturieren.

‍

Bild

Das Bild-Element ist ein Platzhalter, den du überall auf deiner Webseite platzieren kannst. Den Platzhalter kannst du ganz einfach durch eigene hochgeladene Bilder, Icons oder Grafiken ersetzen. 

‍

Button

Mit einem Call-To-Action Button in deinem Layout, kannst du auf andere Webseiten, Unterseiten, Formulare oder Assets verlinken. Im Style-Panel kannst du Eigenschaften wie Farben, Schlagschatten oder Hover-Effekte anpassen. Buttons kannst du mit einer URL, einer Seite in deinem Projekt, einer E-Mail, einer Telefonnummer oder einem Anhang verlinken.

‍

Link-Block

Ein Link-Block funktioniert im Grunde genauso wie ein Button. Allerdings verlinkt er alles was sich in ihm befindet und kann mehrere Elemente enthalten. Mit dem Link-Block lassen sich verlinkte Schaltflächen mit aufwändigerer Gestaltung erstellen.

‍

Formular

Das Hauptelement um ein Formular anzulegen und Kontaktanfragen zu generieren. Alle weiteren Elemente aus der Kategorie „Formulare“ dienen nur dazu, die Funktionen des Formular-Blocks zu erweitern. Der Formular-Block enthält auch die Einstellungsmöglichkeit für eine Erfolgsmeldung und eine Fehlermeldung. In den Projekteinstellungen kannst du eine E-Mail-Adresse mit deinem Formular verknüpfen. 

‍

Webflow Element Layouts

Falls du dir immer noch nicht sicher bist, wie du die einzelnen Elemente zu einem Layout verbindest, gibt es im Elemente-Panel auch den Reiter „Layouts“. Hier findest du verschiedene vorgefertigte Layouts, die du ganz einfach in deine Webseite einbauen kannst. Ein weiterer Vorteil davon ist, dass du dir den Aufbau der Elemente genau ansehen kannst. Durch diese Hilfestellung fällt es auch leichter, den Einsatz der Elemente zu lernen. 

Folgende Vorlagen findest du im Reiter "Layouts".

• Navigation
• Hero
• Team
• Logos
• Gallery
• Features
• Pricing

‍

Hilfreiche Links

Ausführliche Beschreibungen zu allen Elementen und wie du diese effektiv einsetzen kannst, findest du auch auf Webflow University. In der umfangreichen Bibliothek erklärt das Team von Webflow alles in anschaulichen Video Tutorials.

‍

Hilfreiche Artikel

Den Aufbau deiner Webseite kannst du auch mithilfe von Templates beschleunigen. Dazu habe ich einen Guide mit hilfreichen Schritten erstellt, um das Template anzupassen.