11 CSS-Template-Sites: Fangen Sie nicht bei Null an!

11 CSS-Template-Sites: Fangen Sie nicht bei Null an!

Webdesign ist zugänglicher denn je, aber es erfordert immer noch viel Arbeit – und viel Geschick – um professionell aussehende Ergebnisse zu erzielen.





Glücklicherweise müssen Sie nicht jedes Mal bei Null anfangen. Es gibt Tausende von kostenlosen CSS-Vorlagen, die online verfügbar sind und alle moderne Designtrends und -technologien berücksichtigen. Sie können sie in ihrer ursprünglichen Form verwenden oder sie anpassen, um sie zu Ihren eigenen zu machen.



In diesem Handbuch werfen wir einen genaueren Blick auf CSS-Vorlagen und wo sie zu finden sind.





Was ist eine CSS-Vorlage?

Eine CSS-Vorlage enthält nicht nur CSS: Sie bietet Ihnen alles, was Sie zum Erstellen einer voll funktionsfähigen Website benötigen. Wenn Sie einen herunterladen, erhalten Sie normalerweise einen Ordner mit den folgenden Inhalten:

  • HTML-Dateien -- Sie erhalten für jede Seite der Website eine HTML-Datei. Es enthält Beispieltext und Bilder, die Sie durch Ihren eigenen Inhalt ersetzen müssen. Sie müssen auch in der Lage sein, die Metadaten, die sich auf Dinge wie die Site-Beschreibung beziehen, anzupassen.
  • CSS-Datei -- Sie erhalten normalerweise eine CSS-Hauptdatei, die das gesamte Styling für die Site enthält, plus Extras wie ein Reset-Stylesheet oder eine für Webfonts.
  • Javascript-Datei -- Wenn die Site Javascript-Funktionen enthält, sollten diese idealerweise in einer eigenen separaten Datei enthalten sein, anstatt in die HTML-Dokumente aufgenommen zu werden.
  • Bilder, Schriftarten und Symbole -- Alle Bilder, die in der Vorlage verwendet werden, sollten ebenfalls enthalten sein. Möglicherweise möchten Sie Dinge wie Symbole und Hintergründe beibehalten, müssen jedoch die anderen Platzhalterbilder durch Ihre eigenen ersetzen. Einige benutzerdefinierte Schriftarten können ebenfalls enthalten sein.

Im Gegensatz zu den meisten anderen Arten von Vorlagen, denen Sie begegnen werden – sei es Wordpress, Excel oder InDesign-Vorlagen -- CSS-Vorlagen erfordern ein gewisses Maß an technischem Wissen.



Es gibt keine benutzerfreundliche Oberfläche, um sie zu bearbeiten, daher müssen Sie zumindest wissen, wie Sie sich in einem HTML-Dokument zurechtfinden, nur um Ihren eigenen Inhalt hinzuzufügen. Um Ihre eigenen Anpassungen vorzunehmen, benötigen Sie gute CSS-Kenntnisse.

So teilen Sie Videos vom iPhone

Worauf Sie in einer CSS-Vorlage achten sollten

Es gibt so viele kostenlose CSS-Vorlagen zur Auswahl. Woher wissen Sie also, welches das Richtige für Sie ist? Hier sind ein paar Dinge, auf die Sie achten sollten:



  • Entwurf -- Offensichtlich möchten Sie eine Site, die gut aussieht und das Bild widerspiegelt, das Sie darstellen möchten. Überlegen Sie aber auch, ob die Vorlage jetzt und in Zukunft für Ihre Bedürfnisse geeignet ist. Viele sind für einseitige Websites gedacht; einige sind für mehrere Seiten ausgelegt. Wenn Sie Letzteres benötigen, überlegen Sie, ob Sie stattdessen ein CMS wie Wordpress verwenden könnten.
  • Mobil-optimiert -- Die mobile Webnutzung ist jetzt höher als die des Desktops, daher ist es wichtig, dass Ihre Website auf Smartphones richtig funktioniert. Jede anständige CSS-Vorlage sollte ein responsives Design verwenden, damit die Website auf jedem Bildschirm perfekt funktioniert. Wenn Ihr Auserwählter dies nicht tut, wechseln Sie zu einem, der dies tut.
  • Gut geschrieben -- Laden Sie die Vorlage herunter und sehen Sie sich den Code an, bevor Sie ihn verwenden. Es sollte sauber, gut strukturiert und leicht zu bearbeiten sein. Es sollte auch SEO-bewusst sein und Titel- und Überschriften-Tags richtig verwenden.
  • Lizenz -- Überprüfen Sie unbedingt die Lizenz für die von Ihnen gewählte CSS-Vorlage. Viele sind verfügbar unter einer Creative Commons-Lizenz , aber unterschiedliche Versionen dieser Lizenz bestimmen, ob Sie die Vorlage bearbeiten können, ob Sie sie kommerziell verwenden können und ob Sie den ursprünglichen Designer nennen müssen.
  • Addons -- Einige CSS-Template-Entwickler bieten ihre Arbeit auf 'Freemium'-Basis an. Sie erhalten die Vorlage kostenlos, haben aber die Möglichkeit, für zusätzliche Anpassungen zu bezahlen, um sie für Ihre Website einzigartig zu machen.

Lassen Sie uns nach all diesen Erläuterungen einen Blick auf die besten Orte werfen, um kostenlose CSS-Vorlagen zu finden.

1. Templated.co

Diese beeindruckende Sammlung von mehr als 800 CSS-Vorlagen enthält Stile für jede Art von Website. Sie wurden alle speziell für die Website erstellt, daher sollten sie nirgendwo anders auftauchen.



Alle Vorlagen sind responsiv und mit HTML5 erstellt. Sie sind klein und leicht und verfügen über zusätzliche Javascript-Funktionen wie eine Video-Lightbox oder Scroll-Effekte, die nur dort verwendet werden, wo sie dem Erlebnis einen echten Mehrwert verleihen.

2. Styleshout.com

Styleshout bietet eine große Auswahl an kostenlosen und Premium-Vorlagen, wobei erstere unter der Creative Commons-Lizenz veröffentlicht wurden.

Die kostenlosen Vorlagen decken eine Vielzahl von Kategorien ab, von vollständigen Websites über Coming Soon-Seiten bis hin zur oft übersehenen 404-Fehlerseite . Sie können sie selbst anpassen und an den Stil Ihrer bestehenden Website anpassen, oder Sie können dafür bezahlen, dass Styleshout dies für Sie erledigt.

3. HTML5Up.net

Diese super-stylische Sammlung von Vorlagen ist auch sehr beliebt. Die meisten wurden Hunderttausende Mal heruntergeladen, und es ist leicht zu verstehen, warum.

Alle üblichen Kategorien von Websites werden berücksichtigt, wie Blog und Produktseite, und es gibt einige besonders schöne Designs für Fotografen, um ihre Arbeit zu präsentieren. Die grundlegenden Raster-Stil-Vorlagen sind extrem anpassbar, während die auffälligeren dazu neigen, Javascript ziemlich stark zu verwenden, so dass sie möglicherweise weniger für Ihre Optimierungen geeignet sind.

Vier. Freebiesbug.com

Was Freebiesbug an Quantität fehlt, macht es durch die Qualität mehr als wett. Eine Website, auf der junge Entwickler ihre Fähigkeiten präsentieren und viele High-End-Premium-Designs enthalten.

Die beeindruckende Sammlung kostenloser Vorlagen der Website ist perfekt für Agenturen, Fotografen, App-Entwickler und andere Kreative. Vollgepackt mit Javascript- und CSS-Effekten und Animationen können Sie die Sites anpassen, obwohl sie oft so schön sind, dass Sie es vielleicht nicht möchten.

Darüber hinaus enthält Freebiesbug.com alle Arten von kostenlosen Ressourcen für Webdesigner, einschließlich Schriftarten, Stockfotos, Illustrator-Skizzen und PSD-Dateien und mehr.

5. Free-CSS.com

Free-CSS.com ist eine schnörkellose Website, die - zum Zeitpunkt des Schreibens - etwa 2503 kostenlose Vorlagen sowie viele Premium-Vorlagen anbietet, falls Sie immer noch nicht finden, wonach Sie suchen.

Bei so vielen zur Auswahl kann es ein wenig schwierig sein, sich auf das perfekte Design zu einigen. Die Qualität ist im Allgemeinen gut, obwohl das 10-jährige Bestehen der Site bedeutet, dass sie immer noch in XHTML geschriebene Vorlagen hostet. Diese sollten Sie vermeiden. Die andere Sache ist, sicherzustellen, dass Sie die Lizenz für Ihre gewählte Vorlage überprüfen. Sie sind alle kostenlos, aber einige sind gemeinfrei, einige Creative Commons und einige verwenden eine autorspezifische Lizenz.

6. OS-Templates.com

28 Seiten kostenlose CSS-Vorlagen, meist mit modernen, rasterbasierten Layouts auf einer einzigen Seite. Wenn es einfach ist, was Sie suchen, dann ist dies der richtige Ort, um zu suchen. Die Designs sind sauber, attraktiv und einfach anzupassen.

OS-Templates.com bietet auch eine große Sammlung von 'Basisvorlagen'. Diese geben Ihnen die Grundstruktur für eine Website in verschiedenen gängigen Layout-Schemata (zweispaltig, dreispaltig usw.), während sie völlig unstyled sind. Wie bei der Verwendung des Standarddesigns in Wordpress können Sie mit der leeren Leinwand Ihre Website in alles verwandeln, was Sie möchten.

7. boag.online [Nicht mehr verfügbar]

Maglev ist eine einseitige Website-Vorlage, die in Aktion auf boag.online vorgestellt .

Es ist eine schnelle, saubere Vorlage, ideal für eine Produktseite. Das minimalistische Design wird nur durch einige Jquery-Effekte ergänzt, die Ihnen beim Scrollen zwischen den Abschnitten helfen. Das einfache Layout funktioniert für sich allein, ist aber auch ein guter Ausgangspunkt für Ihre eigenen Anpassungen.

8. Pixelbuddha

Die Vorlagen von Pixel Buddha sind nicht nur auf Websites beschränkt, sie enthalten auch einige für E-Mail-Newsletter.

In jedem Fall sind sie alle mit HTML5 und CSS3 gestaltet und reagieren reaktionsschnell, sodass sie auf jedem Gerät großartig aussehen. Zu den Highlights zählen Howdy HTML, eine schöne Portfolio-/Lebenslauf-Vorlage und SOHO HTML, eine fantastisch aussehende E-Commerce-Seite, die die Quell-PSD-Dateien zusätzlich zu HTML und CSS enthält.

So erhalten Sie gelöschte Nachrichten von Facebook

9. Templatemo.com

Fast 500 kostenlose Vorlagen sind von Templatemo erhältlich. Einige der besten sind diejenigen, die sich vom Rastersystem im Bootstrap-Stil befreien, um etwas anderes auszuprobieren.

Die meisten Vorlagen sind einfach und übersichtlich, obwohl Funktionen wie Leuchtkästen und Inhaltskarussells dort enthalten sind, wo sie benötigt werden. Wir mögen auch die Tatsache, dass einige der Vorlagen standardmäßig so eingerichtet sind, dass sie mit bis zu sechs Seiten arbeiten. Dies macht es einfacher, wenn Ihre Inhalte nicht in das immer häufiger verwendete einseitige Layout passen.

10. Startbootstrap.com

Bootstrap ist ein unglaublich beliebtes Frontend-Framework, mit dem Sie im Handumdrehen qualitativ hochwertige Websites erstellen können. Das Erlernen dauert jedoch ein wenig, und hier kommt Start Bootstrap ins Spiel.

Diese Sammlung kostenloser Open-Source-Vorlagen wird alle mit dem Grid-System von Bootstrap erstellt. Es stehen mehr als 30 zur Auswahl. Einige sind vollständig entworfen und für Apps, Blogs und Landingpages gedacht, während andere leere Layouts sind, die darauf warten, dass Sie sie stylen.

elf. Bootswatch.com

Endlich mal was praktischeres. Bootswatch bietet 16 Open-Source-Themen zum Stylen von Websites, die mit Bootstrap erstellt wurden.

Sie können das Layout Ihrer Site entweder selbst mit Bootstrap erstellen oder eine der leeren Vorlagen von Start Bootstrap herunterladen. Bootswatch ändert die Schriftarten, Hintergrundfarben und das Styling für Schaltflächen, Menüs und andere Elemente. Es verleiht Ihrer Website ein einzigartiges Aussehen und bleibt dabei dem ultra-sauberen Ethos von Bootstrap treu.

Es ist einfach, mit Bootstrap eine einfache Website zusammenzustellen, und Bootswatch verleiht ihr sofort den letzten Schliff.

So verwenden Sie CSS-Vorlagen

Im Allgemeinen gibt es zwei Möglichkeiten, Vorlagen zu verwenden. Sie verwenden sie entweder so, wie sie sind, oder Sie verwenden sie als Grundlage für Ihr eigenes Design.

Die Gefahr bei der Verwendung von Vorlagen besteht darin, dass Sie am Ende eine Website erhalten, die mit der einer anderen identisch ist. Wählen Sie eine beliebte Vorlage und es könnte buchstäblich Zehntausende identischer Websites geben. Dies ist das Hauptargument für deren Anpassung.

So fügen Sie eine Zeile in Microsoft Word hinzu

CSS-Vorlagen sind eine großartige Abkürzung für erfahrene Webdesigner, die ein grundlegendes Layout im Sinn haben und es direkt gestalten möchten.

Sie sind auch perfekt für alle, die neu im Webdesign sind. Wenn Sie sich mit HTML und CSS auskennen, aber noch nicht das Vertrauen oder die Kenntnisse haben, eine Site von Grund auf neu zu erstellen, dann dient eine CSS-Vorlage sowohl als einfacher Weg, um eine gut aussehende Site zu erstellen, als auch als großartiges Lernwerkzeug.

Sie können es als laufende Arbeit behandeln. Beginnen Sie mit die Schriftarten wechseln und das Farbschema ändern , und im Laufe der Zeit können Sie vorhandene Elemente neu gestalten, neue hinzufügen usw. Es gibt keinen besseren Weg, etwas zu lernen, als durch praktische Erfahrung.

Verwenden Sie CSS-Vorlagen beim Erstellen von Websites? Wo findest du sie am liebsten? Teile deine Erfahrungen und Tipps mit uns in den Kommentaren.

Teilen Teilen Tweet Email So reinigen Sie Ihren Windows-PC mit der Eingabeaufforderung

Wenn der Speicherplatz Ihres Windows-PCs knapp wird, bereinigen Sie den Müll mit diesen schnellen Eingabeaufforderungsdienstprogrammen.

Weiter lesen Verwandte Themen
  • Programmierung
  • Web-Design
  • CSS
Über den Autor Andy Betts(221 veröffentlichte Artikel)

Andy ist ein ehemaliger Printjournalist und Zeitschriftenredakteur, der seit 15 Jahren über Technologie schreibt. In dieser Zeit hat er an unzähligen Publikationen mitgewirkt und Texterarbeiten für große Technologieunternehmen erstellt. Er hat auch Expertenkommentare für die Medien bereitgestellt und Podiumsdiskussionen bei Branchenveranstaltungen moderiert.

Mehr von Andy Betts

Abonniere unseren Newsletter

Abonnieren Sie unseren Newsletter für technische Tipps, Rezensionen, kostenlose E-Books und exklusive Angebote!

Klicken Sie hier, um sich zu abonnieren