Webflow Templates in einfachen Schritten anpassen

In diesem Artikel, zeige ich dir wie du ein Webflow-Template in einfachen Schritten bearbeiten und in eine individuelle Webseite verwandeln kannst. Die Anleitung ist für jeden geeignet, egal ob Anfänger oder erfahrener Designer. Neben einfachen Tipps empfehle ich jedem sich die Zeit zu nehmen und mehr über Webflow zu lernen. Es lohnt sich! So festigst du dein Wissen und dir fällt es in Zukunft leichter Templates anzupassen oder Webseiten komplett neu zu erstellen.

Was sind Webflow-Templates?

Webflow-Templates sind vorgefertigte Website-Vorlagen, die du nach deinen Bedürfnissen anpassen kannst. Durch die bestehenden Komponenten sparst du dir also die Zeit, eine Webseite von Grund auf neu zu erstellen. Die Templates bieten alle Elemente, die du für eine professionelle Webseite benötigst, wie z. B. wiederverwendbare Layouts, Navigationsleisten oder Styleguides.

‍

Wie können Webflow-Templates helfen?

Im Grunde gibt es 2 wesentliche Vorteile, die für Webflow Templates sprechen:

• Zeit & Kosten: Eine Webseite von einem Webdesigner komplett neu aufbauen zu lassen, dauert in der Regel länger, als auf ein bestehendes Template aufzubauen. So kannst du dir häufig Zeit sparen. 
  

Durch den Zeitfaktor ergibt sich gleichzeitig der zweite Vorteil.

• Weniger Kosten: Durch ein vorgefertigtes Template sparst du dir die Kosten für die Designphase. Natürlich musst du das Template trotzdem noch anpassen oder du engagierst einen Webdesigner für diese Arbeit. Dadurch, dass sich viele Komponenten einfach umbauen lassen, sparst du dir aber meistens unterm Strich mehr Zeit, als die Webseite von Grund auf designen zu lassen.

‍

Welches Template ist am besten für mich geeignet?

Bevor du dir ein Template kaufst, solltest du dir Gedanken über deine Inhalte machen. Je genauer diese definiert sind, desto leichter fallen am Ende die Schritte aus, um das Template zu bearbeiten. Die folgenden Folgende Punkte solltest du bei der Wahl deines Webflow-Templates berücksichtigen:

• Preis: Die Preise der Templates liegen im Bereich von 24$ – 129$. Die teureren Templates sind oft umfangreicher aufgebaut oder enthalten eine zusätzliche Figma-Datei.
  

• CMS: Ein Content-Management-System erleichtert die spätere Inhaltspflege deiner Webseite. Gerade wenn sich Inhalte häufig ändern oder neue dazukommen, wie zum Beispiel Blogartikel, ist ein CMS sinnvoll. Überlege dir also bei der Projektplanung, ob du ein CMS für deine Inhalte brauchst.
  

• Interaktivität & Micro-Interaktionen: Manche Templates sind aufwändiger gebaut als andere. Mit interessanten Interaktionen oder Hover-Zuständen kannst du bei Usern einen Wow-Effekt erzeugen und die Webseite wirkt gleich viel hochwertiger.
  

• Thematik: Manche Webflow-Templates sind für einen bestimmten Zweck designed. Wenn du also eine Webseite für ein Café erstellen möchtest, macht es Sinn, ein Template zu wählen, dass für diese Thematik designed wurde. Generell kann aber natürlich jedes Template an eine gewünschtes Thema angepasst werden.

‍

1. Projekteinstellungen

Bei jedem neuen Webflow-Projekt starte ich immer gerne bei den allgemeinen Einstellungen. Hier gibt es ein paar wichtige Tipps zu beachten:

‍

Favicon & Sprachcode

Bei den generellen Einstellungen hast du die Möglichkeit, ein Favicon bzw. Webclip für deine Webseite zu hinterlegen. Ein Favicon ist das kleine Icon, welches oben am Browserfenster angezeigt wird. Bei einem Webflow-Template wird hier ein Platzhalter vorhanden sein. Durch Upload kannst du einfach dein eigenes Favicon hinterlegen. 

Kurz darunter findest du ein Feld mit *Language Code*. Der Sprachcode ist ein HTML-Attribut, um die Sprache für deine Webseite festzulegen. Diese Information hilft Browsern oder Übersetzungsprogrammen, damit sie sprachsensitive Aufgaben erledigen können. Für eine deutschsprachige Webseite fügst du hier einfach *de* ein.
‍

‍

Webflow Subdomain Indexing

Webflow bietet bei jedem Projekt eine kostenlose Subdomain webflow.io mit an. Diese ist nützlich, um eine Vorschau deiner Webseite zu generieren und Aktualisierungen zu testen. Allerdings sollen Suchmaschinen diese Domain nicht indexieren, also erfassen. Um das zu verhindern, stellst du den Schieberegler auf *Yes*.

Darunter findest du die Einstellung *Auto-generate Sitemap*. Diese kannst du auch auf *Yes* stellen. Webflow generiert dann automatisch eine Sitemap für dein Projekt und aktualisiert sie jedes Mal, wenn du deine Website veröffentlichst.

‍

Benutzerdefinierte Schriftarten

In jedem Webflow-Template gibt es eine Auswahl an Standardschriften. Wenn du eine bestimmte Schriftart für deine Webseite verwenden möchtest, lässt sich diese ganz einfach in den Projekteinstellungen ändern. Im Bereich *Fonts* gibt es einen Button, über den du benutzerdefinierte Schriftdateien hochladen kannst. Nach dem Upload ist die Schrift in deinem Projekt verfügbar. 

ACHTUNG: Vermeide Google-Fonts aus der Auswahlliste. Falsch eingebunden werden diese seit 2022 in Deutschland abgemahnt. Hochgeladen über den *Custom Fonts*-Button kannst du Google-Fonts aber problemlos verwenden.

‍

2. Gehe zum Stylguide

Alle Webflow-Templates verfügen über einen Styleguide. Auf dieser Seite bekommst du einen Überblick über alle wichtigen grafischen Elemente wie verwendete Farben, Schriftgrössen oder Buttons. Um die Elemente dem Branding deines Unternehmens anzupassen, kannst du hier mit ein paar Klicks das Template anpassen.

‍

3. Globale Farben anpassen

Durch das ändern der globalen Farbwerte können gleichzeitig alle Farben des Templates angepasst werden. So kannst du Beispielsweise alle Buttons mit dem Farbton Lila in Buttons in Grün verwandeln. Dazu musst du einen Farbe auswählen und im Farbwähler auf *Edit Swatch* klicken. Nun kannst du über den integrierten Hex-Farbwähler eine neue Farbe vergeben.

‍

4. Globale Schriften anpassen

Wenn du eine eigene Schriftart für deine Webseite verwenden möchtest, musst du diese vorher in den Projekteinstellungen hinzufügen (siehe oben). Nun kannst du die Schriftart seitenübergreifend ändern. Klicke dazu den *Body* oben im Navigator an und wähle rechts im Selector *Body (All Pages)*. Danach kannst du im Feld *Typography* die gewünschte Schriftart auswählen. 

‍

5. Sitemap anlegen

Sind die grundsätzlichen grafischen Einstellungen gemacht, kannst du anfangen die Struktur deines Webflow-Templates anzupassen. Die Namen der bestehenden Seiten lassen sich einfach in den Site-Einstellungen anpassen (bei der jeweiligen Seite im Page-Menü auf das kleine Zahnrad klicken). Falls du mehr Seiten benötigst, als im Template angelegt sind, kannst du einfach bestehende Seiten duplizieren. Auf diese Weise kannst du die Sitemap deiner Webseite anlegen.

‍

6. Zusätzliche Seiten entfernen oder ausblenden

Webflow Templates besitzen oft Seiten wie *Style Guide*, *Licences* oder *Changelog*. Diese Seiten geben Informationen über das Template, werden aber nicht zwingend benötigt. Wenn du diese nicht benötigst, kannst du sie einfach löschen. 

Seiten wie der Style-Guide können aber für die Bearbeitung hilfreich sein. Um zu verhindern, damit die Seite in Suchmaschinen auftaucht, klicke das Kästchen *Exclude this page from site search results* an. Das findest du ebenfalls in den Site-Einstellungen.

Falls du dich mit HTML-Code auskennst, kannst du auch eine entsprechende Codezeile im Feld *Custom Code* eintragen.

‍

7. Seiten mit Inhalten befüllen

Nach dem Aufbau der Struktur kannst du ins Detail gehen und die Inhalte auf den einzelnen Seiten austauschen.

‍

Assets hochladen

Alle verwendeten Assets des Templates findest du in der linken Navigationsspalte bei dem *Bild-Icon*. Hier kannst du über den *Upload*-Button eigene Bilder hochladen. An den bestehenden Bildern kannst du dich ganz gut orientieren, welches Format die jeweiligen Bilder haben müssen um, optimal dargestellt zu werden. Die nicht benötigten Assets kannst du einfach löschen.

‍

Texte bearbeiten

Um statische Textfelder zu bearbeiten, musst du einfach nur einen Doppelklick in das jeweilige Feld machen. Bei der Bearbeitung gibt es auch die Möglichkeit Formatierungen wie *Bold*, *Italic* oder Verlinkungen zu verwenden.

‍

Bilder austauschen 

Um Bilder auszutauschen, musst du nur auf das jeweilige Bild und dann das Zahnrad-Symbol klicken. Nun kannst du ein Bild aus den Assets verwenden oder ein neues Bild hochladen.

‍

8. Komponenten bearbeiten

Für Elemente wie die Navigation oder den Footer werden häufig Komponenten-Elemente verwendet. Das bedeutet, dass ein Element auf mehreren Seiten wiederverwendet wird. Wenn es zum Beispiel eine Änderung in der Navigation gibt, musst du diese nur einmal durchführen. Die Änderung wird dann automatisch auf allen anderen Seiten nachgezogen. Komponenten erkennst du an dem grünen Würfel-Symbol. Mit einem Doppelklick oder Klick auf *Edit component* kannst du diese wie gewohnt bearbeiten.

‍

9. Dynamische Inhalte durch CMS

Ein hilfreicher Vorteil von Webflow ist das CMS. Durch das Webflow CMS kannst du schnell Inhalte einpflegen, welche sich dann dynamisch auf den jeweiligen Collection Seiten aktualisieren. Wenn du ein Template kaufst, ist das CMS für Blogbeiträge oder ähnliche Inhalte bereits richtig konfiguriert. 

Im besten Fall kannst du das vorhandene CMS so verwenden und mit eigenen Inhalten füllen. Oft müssen die verschiedenen Eingabefelder mit zugehöriger Verknüpfung auf den Collection Seiten aber angepasst werden. In diesem Fall empfehle ich dir die alle Video-Tutorials von Webflow University, zu diesem Thema anzuschauen oder einen Experten für Webflow-CMS zu engagieren.

‍

‍

10. SEO & Open-Graph Einstellungen

Damit deine Webseite später von Usern und Suchmaschinen gut gefunden wird, musst du Angaben wie Title-Tag oder Meta-Description vergeben. Die entsprechenden Felder findest du ebenfalls in den Site-Einstellungen unter dem Bereich *SEO Settings*.

Danach kannst du noch die Open-Graph Einstellungen vergeben. Diese Informationen erscheinen, wenn deine Webseite in sozialen Medien geteilt wird. Im Grunde kannst du hier die gleichen Texte wie bei den SEO-Einstellungen verwenden. Das Open-Graph Bild dient als Vorschaubild beim Teilen deiner Webseite.

‍

‍

11. Preisplan auswählen

Bevor du deine Webseite live stellen kannst, musst du einen Webflow-Preisplan auswählen. Die Auswahl dazu findest du in den Projekteinstellungen im Reiter *Plans & Billing*. Ausführlichere Informationen zum Webflow-Preisplänen findest du in dem Artikel: Webflow Preispläne einfach erklärt.

‍

12. Verbinde deine Domain

Sobald du einen Preisplan ausgewählt hast, kannst du im letzten Schritt deine Domain anbinden. Dafür brauchst du eine Domain von einem beliebigen Hosting-Anbieter. Für eine genaue Anleitung empfehle ich wieder die Webflow-University Tutorials zu diesem Thema. Die Einstellungen dazu findest du im Reiter *Publishing*. Nach erfolgreicher Anbindung kannst du deine Webseite mit Klick auf den *Publish*-Button live stellen. 

Um sicher zu gehen, dass du keine wichtigen Schritte vergessen hast, habe ich in diesem Artikel eine Pre-Launch Checkliste für dich vorbereitet: Die ultimative Webflow Pre-Launch Checkliste für deine Webseite.

‍

Du benötigst Hilfe?

Falls du Hilfe bei der Bearbeitung deines Templates benötigst, kannst du mich gerne kostenfrei kontaktieren. Ich helfe dir gerne weiter!