Die Power von Webflow Libraries: Guide + 5 kostenlose Libraries

Was sind Webflow Libraries?

Eine Library, (dt. Bibliothek) ist Sammlung von vorgefertigten und wiederverwendbaren Komponenten. Diese Komponenten können komplette Layouts beinhalten, wie zum Beispiel eine Hero-Sektion oder auch nur aus einem einfachen Call-To-Action Button bestehen. Das Design der Komponenten ist aufeinander abgestimmt, sodass du mit einer Webflow Library in kürzester Zeit komplette Webseiten aufbauen kannst.

‍

Welche Arten von Webflow Libraries gibt es?

Grundsätzlich gibt es 2 Typen von Libraries.

‍

Starter Library

Die Starter Library wird von Webflow zur Verfügung gestellt und ist standardmäßig bei jedem Projekt vorhanden. Die Library enthält folgende Layouttypen:

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

Tipp: Elemente aus der Starter Library können über die Schnellsuche (Mac: Command + E, Windows: Control + E)

‍

Marketplace Library

Marketplace Libraries werden von unterschiedlichen Agenturen oder Designern aus der Webflow-Community erstellt und sind in der aktuellen Beta-Version alle kostenlos. Diese Libraries müssen erst installiert werden. Danach funktionieren sie aber genauso wie die Starter Library und vorgefertigte Layout Komponenten.

Um nicht jedes mal alle Komponenten durchsrollen zu müssen, kannst du auch in der Suche nach folgenden Themen suchen:

• Navbar
• Hero
• Tab
• CTA
• Footer
• Pricing
• Form
• Logo
• Testimonial
• Content
• Button
• Dropdown
• Contact

‍

Wie installiere ich eine Webflow Library?

Um eine Library aus dem Marketplace zu installieren musst du zunächst eine Library auswählen. Bei Klick landest du auf einer Infosseite auf der du eine Vorschau der Komponenten erhältst. Wenn dir die Library gefällt, kannst du einfach auf den blauen Button “Install Library” klicken.

‍

Anschließend wirst du gefragt in welchen Workspace du die Library installiert willst. Wenn du einen Workspace ausgewählt hast, kannst du die Library in ein existierendes oder ein neues Projekt hinzufügen.

‍

Wie verwende ich eine Webflow Library?

Wie bei der Starter Library erreichst du die Elemente der installierten Webflow Library über das “Layout Panel” auf der linken Seite. Dort kannst du unter dem Reiter “Layouts” die entsprechende Library anwählen und nach Elementen durchsuchen.

Per Klick oder Drag & Drop fügst du die Komponenten einfach zu deiner Webflow Seite hinzu. Um dir die Suche nach dem richtigen Element zu erleichtern, kannst du auch hier das Suchfeld verwenden.

‍

Wie deinstalliere ich eine Webflow Library?

Um eine Webflow Library zu deinstallieren, musst du einfach über den Namen der Library hovern und auf das Zahnrad-Icon auf der rechten Seite klicken. Nun erhältst du die Option, die Library zu deinstallieren.

‍

Was ist der Unterschied zu Webflow Templates?

Grundsätzlich bieten Libraries und Templates beide den Vorteil den Design Prozess zu beschleunigen.

Webflow Templates

Webflow Templates sind vorgefertigte Layouts einer Webseite mit fertigen Aufbau und Seitenstruktur. Sie bieten praktisch eine Ausgangslage, bei der du nur noch deine Inhalte einfügen musst.

Webflow Templates sind vor allem für Anfänger geeignet, die mit fertigen Inhalten weiterarbeiten möchten.

Webflow Libraries

Webflow Libraries sind Sammlungen von wiederverwendbaren Design-Komponenten wie Navigationsleisten, Formularen oder ganzen Sektionen. Durch ein konsistentes Design ist es möglich, ganze Webseiten mit einem einheitlichen Erscheinungsbild aufzubauen. Im Gegensatz zu Webflow Templates musst du bei Webflow Libraries viel mehr Aufwand für die Seitenstruktur und den allgemeinen Aufbau verwenden.

Webflow Libraries sind daher eher für Personen geeignet, die schon etwas mehr Erfahrung mit Webflow haben, sich aber bei der Entwicklung einzelner Elemente etwas Zeit sparen möchten.

‍

‍

5 Top Kostenlose Webflow Libraries

Flow Elements Webflow Library

Flow Ninja ist in der Webflow Community für seine vielen hilfreichen Cloneables bekannt. Ebenso hat die Agentur eine Library im Darkmode mit einem sehr minimalistischen aber hochwertigen Design veröffentlicht.

• Erstellt von: Flow Ninja
• 40 Layouts

‍

Waves Webflow Library

Die Waves Library bietet alle Vorraussetzungen für Webseiten mit zeitlosem Design. Die Library enthält alle wichtigen Komponenten. Ebenfalls gut für jede moderne Unternehmens oder Portfolio Webseite geeignet.

• Erstellt von: Waves Design
• 49 Layouts

‍

Relume Lite Webflow Library

Relume ist bekannt für seine riesige kostenpflichtige Library mit passender Figma-Datei. Zusätzlich gibt es jetzt auch noch eine kostenlose Variante - die Relume Library Lite. Diese Version basiert auf dem Finsweet Client-First System und ist deshalb gut für Anfänger als auch Fortgeschrittene geeignet.

• Erstellt von: Relume
• 53 Layouts

‍

Untitled UI Webflow Library

Die Untitled UI Library ist eine schön moderne Webflow Library. Das neutrale Design lässt sich einfach zu für jede Thematik anpassen und ist somit sehr flexible in den Einsatzmöglichkeiten. Die Library basiert auf  einer einfachen Version des Finsweet Client-First System. Dadurch ist sie auch hervorragend für Anfänger oder für eine Übergabe an Kunden geeignet.

• Erstellt von: Untitled UI
• 283 Layouts

‍

Walsh Webflow Library

Die Walsh Webflow Library ist perfekt für moderne & kreative Layouts. Beeindruckend sind vor allem die gestalteten Hero-Sektion. Diese sind quasi einsatzbereit und wirken sehr hochwertig. Eine gute Wahl für Portfolios oder Startup-Landingpages.

• Erstellt von: Waves Design
• 49 Layouts

‍

Du hast Probleme bei der Bearbeitung einer Webflow Library? Kontaktiere mich einfach, ich helfe gerne weiter!