11 CSS-Template-Sites beginnen nicht von vorne!

Webdesign ist zugänglicher als je zuvor, erfordert jedoch immer noch viel Arbeit - und viel Geschicklichkeit. Möchten Sie Webdesign lernen? 7 YouTube-Kanäle für den Einstieg Möchten Sie Webdesign lernen? 7 YouTube-Kanäle zum Einstieg YouTube bietet tausende Videos und Kanäle für Anfänger im Webdesign. Hier betrachten wir einige der besten für den Einstieg. Lesen Sie mehr - um professionell aussehende Ergebnisse zu erzielen.

Glücklicherweise müssen Sie nicht jedes Mal von vorne anfangen. Es gibt Tausende von kostenlosen CSS-Vorlagen, die online verfügbar sind und moderne Trends und Technologien unterstützen. Sie können sie in ihrer ursprünglichen Form verwenden oder sie an Ihre eigenen Bedürfnisse anpassen.

In diesem Handbuch werden CSS-Vorlagen genauer beschrieben 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, der Folgendes enthält:

• 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 die Metadaten anpassen können, z. B. in Bezug auf die Site-Beschreibung.
• CSS-Datei - In der Regel erhalten Sie eine CSS-Hauptdatei, die das gesamte Styling der Site sowie Extras wie ein zurückgesetztes Stylesheet oder eine für Webfonts enthält.
• Javascript-Datei - Wenn die Site Javascript-Funktionen enthält, sollten sie idealerweise in einer eigenen separaten Datei enthalten sein, anstatt in die HTML-Dokumente eingebunden zu werden.
• Bilder, Schriftarten und Symbole - Alle in der Vorlage verwendeten Bilder sollten ebenfalls enthalten sein. Sie möchten beispielsweise 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 Vorlagen, denen Sie begegnen - seien es WordPress-, Excel- oder InDesign-Vorlagen Die 7 besten Websites, um kostenlose InDesign-Vorlagen zu finden: Bücher, Flyer, Magazine und mehr Flyer, Zeitschriften und mehr Wie wäre es mit einer professionellen Adobe InDesign-Vorlage, anstatt eine eigene zu erstellen? Hier sind die besten kostenlosen Vorlagen-Websites. Read More - CSS-Vorlagen erfordern ein gewisses technisches Wissen.

Es gibt keine benutzerfreundliche Oberfläche, in der sie bearbeitet werden können. Sie müssen also zumindest wissen, wie Sie sich in einem HTML-Dokument zurechtfinden, um Ihren eigenen Inhalt hinzuzufügen. Um Ihre eigenen Anpassungen vornehmen zu können, benötigen Sie gute Kenntnisse in CSS. Lernen Sie HTML und CSS mit diesen Step-by-Step-Tutorials. Lernen Sie HTML und CSS mit diesen Step-by-Step-Tutorials. Neugierig auf HTML, CSS und JavaScript? Wenn Sie der Meinung sind, wie Sie eine Website von Grund auf neu erstellen können, dann haben Sie hier einige großartige Schritt-für-Schritt-Anleitungen, die einen Versuch wert sind. Weiterlesen .

Worauf Sie in einer CSS-Vorlage achten sollten

Es gibt so viele kostenlose CSS-Vorlagen zur Auswahl. Woher wissen Sie, was für Sie richtig ist? Hier sind einige Dinge, auf die Sie achten sollten:

• Design - Offensichtlich möchten Sie eine Website, die schön aussieht und jedes Bild widerspiegelt, das Sie darstellen möchten. Überlegen Sie auch, ob die Vorlage für Ihre Bedürfnisse jetzt und in der Zukunft geeignet ist. Viele sind für einseitige Websites; einige sind für mehrere Seiten ausgelegt. Wenn Sie letzteres benötigen, überlegen Sie, ob Sie stattdessen lieber ein CMS wie WordPress verwenden.
• Mobil optimiert - Die Nutzung des mobilen Internets ist jetzt höher als auf dem Desktop. Daher ist es wichtig, dass Ihre Website auf Smartphones ordnungsgemäß funktioniert. Jede anständige CSS-Vorlage sollte ein responsives Design verwenden, damit die Site auf jedem Bildschirm perfekt funktioniert. Wenn dies nicht der Fall ist, wechseln Sie zu einem anderen.
• Gut geschrieben - Laden Sie die Vorlage herunter und sehen Sie sich den Code an, bevor Sie sich zur Verwendung verpflichten. Es sollte sauber, gut strukturiert und leicht zu bearbeiten sein. Es sollte auch SEO-fähig sein und Titel und Überschriften korrekt verwenden.
• Lizenz - Überprüfen Sie die Lizenz für Ihre ausgewählte CSS-Vorlage. Viele sind unter einer Creative Commons-Lizenz erhältlich. Was ist Creative Commons und sollten Sie es verwenden? Was ist Creative Commons und sollten Sie es verwenden? Creative Commons umfasst eine Reihe von Lizenzen, mit denen Sie automatisch die Berechtigung erhalten, verschiedene Dinge zu tun, z. B. die Wiederverwendung und Verteilung des Inhalts. Erfahren Sie mehr darüber und wie Sie damit umgehen können. Lesen Sie mehr, aber andere 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 gutschreiben müssen.
• Addons - Einige CSS-Vorlagenentwickler bieten ihre Arbeit an “Freemium” Basis. Sie erhalten die Vorlage kostenlos, haben jedoch die Möglichkeit, zusätzliche Anpassungen zu bezahlen, um sie für Ihre Website eindeutig zu machen.

Schauen wir uns die besten Stellen an, um kostenlose CSS-Vorlagen zu finden.

1. Templated.co

Diese beeindruckende Sammlung von mehr als 800 CSS-Vorlagen enthält Stile für jede Website-Klasse. Sie sind alle speziell für die Website erstellt worden. Sie sollten also nicht anderswo auftauchen.

Alle Vorlagen sind responsiv und mit HTML5 erstellt. Sie sind klein und leicht, mit zusätzlichen Javascript-Funktionen, wie einer Video-Lightbox oder Bildlaufeffekten, die nur dort eingesetzt werden, wo sie einen echten Mehrwert schaffen.

2. Styleshout.com

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

Die kostenlosen Vorlagen decken eine breite Palette von Kategorien ab, von vollständigen Websites bis zu Coming Soon-Seiten, und sogar die oft übersehene 404-Fehlerseite. How To a Great 404 Error Page & 10 Beispiele Wie man einen Great 404 Error Page & 10 Beispiele macht Ein intelligentes Beispiel Die 404-Fehlerseite kann den Unterschied zwischen einer langweiligen Website und einer einprägsamen Website ausmachen. Weiterlesen . Sie können sie selbst anpassen und an den Stil Ihrer vorhandenen Website anpassen, oder Sie können dafür bezahlen, dass Styleshout dies für Sie erledigt.

3. HTML5Up.net

Diese super-stylische Vorlagenkollektion ist auch sehr beliebt. Die meisten wurden hunderttausend Mal heruntergeladen, und es ist leicht zu erkennen, warum.

Es werden alle üblichen Website-Kategorien wie Blog und Produktseite berücksichtigt, und es gibt einige besonders schöne Entwürfe für Fotografen, die ihre Arbeit zeigen. Die grundlegenden Rastervorlagen sind extrem anpassbar, während die auffälligeren eher Javascript verwenden, sodass sie für Ihre Anpassungen möglicherweise weniger geeignet sind.

4. Freebiesbug.com

Was Freebiesbug an Quantität fehlt, macht es in Qualität mehr als wett. Eine Website, auf der junge Entwickler ihre Fähigkeiten unter Beweis stellen, umfasst viele erstklassige Premium-Designs.

Die beeindruckende Sammlung von kostenlosen Vorlagen der Website ist perfekt für Agenturen, Fotografen, App-Entwickler und andere Kreative. Mit JavaScript- und CSS-Effekten und -Animationen können Sie die Websites anpassen, auch wenn sie oft so nett sind, dass Sie dies vielleicht nicht möchten.

Darüber hinaus enthält Freebiesbug.com alle Arten von kostenlosen Ressourcen für Webdesigner, einschließlich Schriftarten, Stock-Fotos und Illustrator-Skizzen. Zahlen Sie nicht für Adobe Illustrator: Diese kostenlose Alternative ist großartig. Bezahlen Sie nicht für Adobe Illustrator: Diese kostenlose Alternative ist großartig Adobe Illustrator ist großartig, kostet aber aufgrund des Creative Cloud-Abonnements einiges. Diese Web-App-Alternative ist fast genauso gut und kostet nichts! Lesen Sie mehr und PSD-Dateien und mehr.

5. Free-CSS.com

Free-CSS.com ist eine einfache Website, auf der zum Zeitpunkt des Schreibens 2503 kostenlose Vorlagen sowie zahlreiche Premium-Vorlagen angeboten werden, falls Sie immer noch nicht finden, wonach Sie suchen.

Bei so vielen Möglichkeiten kann es schwierig sein, sich auf das perfekte Design festzulegen. Die Qualität ist im Allgemeinen gut, obwohl die Website nach 10-jähriger Existenz immer noch Vorlagen enthält, die in XHTML geschrieben sind. Sie wollen diese vermeiden. Die andere Sache ist, um sicherzustellen, dass Sie die Lizenz für Ihre ausgewählte Vorlage überprüfen. Sie sind alle kostenlos, aber einige sind gemeinfrei, einige Creative Commons und einige verwenden eine autorenspezifische Lizenz.

6. OS-Templates.com

28 Seiten kostenlose CSS-Vorlagen, meist mit modernen, gitterbasierten Layouts auf einer einzigen Seite. Wenn Sie einfach nur nach etwas suchen, dann ist dies der richtige Ort für Sie. Die Designs sind sauber, attraktiv und einfach anpassbar.

OS-Templates.com bietet auch eine große Sammlung von “grundlegende Vorlagen”. Diese geben Ihnen die Grundstruktur einer 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 Site beliebig gestalten.

7. boag.online

Maglev ist eine einseitige Website-Vorlage, die unter boag.online in der Vorschau angezeigt werden kann.

Es ist eine schnelle, saubere Vorlage, ideal für eine Produktseite. Das minimalistische Design wird nur durch wenige Jquery-Effekte ergänzt, um das Scrollen zwischen Abschnitten zu erleichtern. Das einfache Layout funktioniert an sich, bietet aber auch einen guten Ausgangspunkt für Ihre eigenen Anpassungen.

8. Pixel Buddha

Die Vorlagen von Pixel Buddha beschränken sich nicht nur auf Websites, sondern auch auf E-Mail-Newsletter.

In jedem Fall sind sie alle mit HTML5 und CSS3 konzipiert und reagieren auf alle Geräte. Zu den Highlights zählen Howdy HTML, eine schöne Vorlage für ein Portfolio / Lebenslauf. Die letzten 5 Apps und Websites, die Sie immer wieder brauchen. Die letzten 5 Apps und Websites, die Sie jemals brauchen. Verwenden Sie diese fantastischen Websites zum Erstellen von Websites, wenn Sie diese benötigen um Ihren Lebenslauf in der Masse hervorzuheben. Mit den richtigen Tools können Sie schnell einen einzigartigen Lebenslauf erstellen, auch wenn Sie keine Konstruktionskenntnisse haben. Lesen Sie mehr und SOHO HTML, eine eCommerce-Seite, die die Quell-PSD-Dateien zusätzlich zu HTML und CSS enthält.

9. Templatemo.com

Fast 500 kostenlose Vorlagen sind in Templatemo erhältlich. Einige der Besten sind diejenigen, die sich aus dem Bootstrap-ähnlichen Rastersystem lösen, um etwas anderes auszuprobieren.

Die meisten Vorlagen sind einfach und übersichtlich, obwohl Funktionen wie Lightboxen und Inhaltskarusselle dort enthalten sind, wo sie benötigt werden. Wir mögen auch die Tatsache, dass einige der Vorlagen standardmäßig für bis zu sechs Seiten eingerichtet sind. Dies macht es einfacher, wenn Ihre Inhalte nicht in das immer mehr verbreitete einseitige Layout passen.

10. Startbootstrap.com

Bootstrap ist ein äußerst beliebtes Front-End-Framework, mit dem Sie in kürzester Zeit qualitativ hochwertige Websites erstellen können. Es dauert jedoch etwas Zeit, um zu lernen. Start Bootstrap ist da.

Diese Sammlung von kostenlosen Open-Source-Vorlagen wird alle mit dem Rastersystem von Bootstrap erstellt. Erstellen von Webschnittstellen: Wo beginnen? Erstellen von Webschnittstellen: Wo beginnen? Die Bausteine ​​waren notwendig, um sich selbst zum Webdesigner des 21. Jahrhunderts zu machen. Weiterlesen . Es stehen mehr als 30 zur Auswahl. Einige sind vollständig entworfen und für Apps, Blogs und Zielseiten vorgesehen, während andere leere Layouts sind, die auf Sie warten.

11. Bootswatch.com

Zum Schluss noch etwas mehr zum Anfassen. Bootswatch bietet 16 Open Source-Designs zum Stilisieren von mit Bootstrap erstellten Websites.

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

Es ist einfach, eine grundlegende Website mit Bootstrap zusammen zu werfen, und Bootswatch verleiht ihr sofortigen Glanz.

So verwenden Sie CSS-Vorlagen

Grundsätzlich 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.

Bei der Verwendung von Vorlagen besteht die Gefahr, dass Sie mit einer Website enden, die mit der einer anderen Person identisch ist. Wählen Sie eine beliebte Vorlage aus, und es könnten buchstäblich Zehntausende identischer Websites vorhanden sein. Dies ist das Hauptargument für deren Anpassung.

CSS-Vorlagen sind eine hervorragende Abkürzung für erfahrene Webdesigner, die ein grundlegendes Layout vor Augen haben und direkt in die Gestaltung einsteigen 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 besitzen, um eine Site von Grund auf neu zu erstellen, bietet eine CSS-Vorlage eine einfache Möglichkeit, eine gut aussehende Site zu erhalten, und ein hervorragendes Lernwerkzeug.

Sie können es als work in progress behandeln. Beginnen Sie mit dem Umschalten der Schriftarten. Wollen Sie wunderschöne Schriftarten? Hier finden Sie mehr als 25 Seiten, auf denen Sie sie finden möchten. Hier gibt es mehr als 25 Websites, an denen Sie sie finden können. Anstatt hunderte von Schriftarten zu durchsuchen, finden Sie hier einige Websites, die Ihnen dabei helfen, mit allen neuen Schriftarten Schritt zu halten, die Sie für Ihr nächstes Design verwenden möchten. Lesen Sie mehr und ändern Sie das Farbschema. So wählen Sie ein Farbschema aus wie ein Profi. Wie wählen Sie ein Farbschema aus wie ein Pro? Farben sind schwierig. Es mag einfach erscheinen, eine Handvoll Farben auszuwählen, die zusammen gut aussehen, aber wie jeder Designer, der Stunden damit verbracht hat, die Farben zu verändern, wird man Ihnen sagen: Es ist schwierig. Lesen Sie mehr, und im Laufe der Zeit können Sie vorhandene Elemente neu entwerfen, neue hinzufügen und so weiter. Es gibt keinen besseren Weg, um etwas zu lernen, als durch praktische Erfahrungen.

Verwenden Sie CSS-Vorlagen beim Erstellen von Websites? Was sind deine Lieblingsplätze, um sie zu finden? Teilen Sie uns Ihre Erfahrungen und Tipps in den Kommentaren mit.

Erfahren Sie mehr über: CSS, Webdesign.