Webflow, Anfänger

Webflow Templates - Guide & Anleitung

Mit Webflow Templates und vordefinierten Komponenten kannst du den Aufbau deiner Webseite erheblich beschleunigen. Mit diesem Guide helfe ich dir die Vorlagen für deine Bedürfnisse anzupassen.

Drei iMac Desktops zeigen Screenshots von verschiedenen Webflow Templates.

Du hast keine Zeit und Energie um dich auf den Aufbau deiner Webseite zu kümmern? Zum Glück gibt es vorgefertigte Webseite-Vorlagen, die deinen Designprozess beschleunigen und dein Unternehmen in Schwung bringen. In diesem Artikel erkläre ich dir, was du alles bei der Bearbeitung beachten solltest.


Warum sollte man Webflow Template verwenden?

Viele Webdesigner oder Agenturen erstellen Webseiten mit Webflow von Grund neu auf. Daran ist grundsätzlich nichts falsch, allerdings ist es oft sehr zeitaufwändig. Wenn es bei einer Webseite aber um Effizienz und Schnelligkeit geht, sind Templates die beste Wahl. 

Durch die vorgefertigten Elemente und Komponenten, ist es möglich vorhandene Texte oder Bilder bequem durch eigene Inhalte zu ersetzen. Durch die Zeitersparnis beim Aufbau deiner Webseite, kannst du in der Regel auch Budget einsparen und deine neue Webseite schnell online stellen. 


Die Auswahl des richtigen Templates

Eine Übersicht von Webflow Templates.

Auf Webflow gibt es eine riesige und ständig wachsende Auswahl an Webseite Templates. Viele Templates wurden für einen bestimmten Zweck designed. Zum Beispiel gibt es Templates für einen Blog oder E-Commerce Webseiten. Um dir einen ersten Überblick über die Templates zu verschaffen, kannst du diese nach folgenden Kategorien filtern:

  • Populäre Tags
  • Kategorie
  • Sprache
  • Style
  • Features
  • Typ

Die Anpassung des Templates

01. Projekteinstellungen

Detailansicht der Projekteinstellungen eines Webflow Templates.

Sobald sich das Template in deinem Webflow Workspace befindet, kannst du schon direkt damit arbeiten. Als erstes solltest du deiner Webseite in den allgemeinen Projekteinstellung einen passenden Namen geben. In diesem Bereich findest du auch noch wichtige Einstellungsmöglichkeiten zu Hosting, SEO, globale Schriften und benutzerdefinierten Code.

02. Sitemap anlegen

Detailansicht von Seiten eines Webflow Templates.

Nach den allgemeinen Projekteinstellungen kannst du mit der eigentlichen Bearbeitung loslegen. Im besten Fall hast du dir im Vorfeld eine Sitemap für deine Webseite überlegt. Also welche Seiten deine Webseite alles beinhalten soll. Nach Vorlage deiner Sitemap kannst du die vorhandenen Seiten des Templates entsprechend umbenennen, löschen oder ggf. neue Seiten anlegen. 

Tipp: Skizziere die Struktur deiner Sitemap vorher einfach auf einem Notizblock. Das erleichtert die den späteren Umbau des Templates. 


03. Globalen Style anpassen

Ansicht eines Stylguides eines Webflow Templates.

Jedes Webflow Template verfügt über eine Styleguide Seite. Dort findest du alle verwendeten Design-Elemente wie Schriftenarten, Schriftgrößen, Farben, Icons, Buttons und weitere Elemente. Über globale Anpassungen der Styles kannst du beispielsweise so die Schriftart der Webseite mit einem Klick ändern. Das gleiche Prinzip kannst du natürlich auch für andere Styles anwenden und erhältst so deinen ganz benutzerdefiniertes Aussehen deiner Webseite. Die globalen Styleanpassungen ermöglichen es dir auch im Nachhinein ohne großen Aufwand Änderungen an einzelnen Elementen vorzunehmen. 


04. Eigene Bilder und Texte einfügen

Detailansicht des Media-Uploads in Webflow.

Wenn du mit dem allgemeinen Style deiner Webseite zufrieden bist, ist es an der Zeit, eigene Inhalte einzufügen. Deine vorbereiteten Bilder kannst du ganz einfach über den Media-Upload zu deinem Projekt hinzufügen. Das Gute bei Webflow Templates ist, dass du dir um Textlängen keine Gedanken machen musst. Die Vorlage gibt dir genau vor, wie viel Überschriften und Absatzlängen optimal in dein Design passen.

Detailansicht von einem CMS-Element in Webflow.

Wenn dein Template über CMS-Elemente wie Blogartikel oder Portfolio-Projekte verfügt, kannst du diese im Webflow CMS in der Seitennavigation von Webflow aufrufen. Über eine Liste der angelegten CMS-Elemente gelangst du in das jeweilige Element und kannst es mit neuen Inhalten füllen.


05. SEO Einstellungen – Titel & Beschreibung

Detailansicht der SEO Einstellungen eines Webflow Temlates.

Neben den grafischen und inhaltlichen Anpassungen sind die SEO Einstellungen in Webflow extrem wichtig. Bei jeder Seite deiner Webseite kannst du SEO- Titel & Beschreibungen vergeben. Diese Texte sind eine Art Kurzbeschreibung und geben deinen Webseitebesuchern und Suchmaschinen Informationen, welche Inhalte sie auf der jeweiligen Seite finden. Das Einstellungsfeld erreichst du indem du, bei deinen Seiten im Navigator auf das Zahnradsymbol klickst. Einen ausführlichen Guide zu den SEO Einstellungen von Webflow findest du hier.

Tipp: Verwende für die SEO-Beschreibung eine Zeichelänge zwischen 50 und 160 Zeichen. 


06. Benutzerdefinierte Domain & Veröffentlichung

Wenn du mit der Bearbeitung fertig bist, ist es Zeit, deine Webseite zu veröffentlichen. Stelle vor der Veröffentlichung sicher, dass du keine wichtigen Details vergessen hast. Eine Pre-Launch Checkliste kann dir dabei helfen. Die Möglichkeit, eine benutzerdefinierte Domain zu verbinden, findest du in den allgemeinen Projekteinstellungen unter dem Tab „Hosting“. Nachdem deine Domain verbinden ist, kannst du deine Webseite mit einem Klick veröffentlichen. Je nach Größe deiner Webseite und deinen Fähigkeiten kann der gesamte Bearbeitungsprozess zwischen 1–2 Tagen und einigen Wochen dauern. 


Fazit 

Webflow Templates können dir eine große Auswahl an Möglichkeiten bieten. Durch die vorgefertigten Komponenten können sie dir den Aufbau deiner Webseite erleichtern und den Designprozess beschleunigen. Um sich mit allen Funktionalitäten von Webflow zu beschäftigen, benötigt es allerdings eine gewisse Lernkurve. Selbst um Templates anzupassen, benötigt man einige Grundkenntnisse. Falls du Hilfe bei der Bearbeitung eines Templates brauchst oder du den Prozess komplett abgeben willst, kannst du mich gerne zur Unterstützung deines Projektes kontaktieren. 

Portrait von Lukas Rudrof, Webflow Designer aus Nürnberg.

Lukas Rudrof

July 11, 2023

Du hast Fragen oder benötigst Hilfe bei deinem Projekt?