11 CSS-sjabloon Sites starten niet van kras!

Webdesign is toegankelijker dan ooit, maar er is nog steeds veel werk voor nodig - en veel vaardigheden. Wilt u webontwerp leren? 7 YouTube-kanalen om aan de slag te gaan Wilt u webontwerp leren? 7 YouTube-kanalen om aan de slag te gaan YouTube heeft duizenden video's en kanalen voor beginnende webontwerpers. Hier bekijken we enkele van de beste om aan de slag te gaan. Lees meer - om professioneel ogende resultaten te produceren.

Gelukkig hoeft u niet elke keer opnieuw van nul te beginnen. Er zijn duizenden gratis CSS-sjablonen online beschikbaar, die allemaal moderne designtrends en -technologieën omarmen. Je kunt ze in hun originele vorm gebruiken of ze aanpassen om ze je eigen te maken.

In deze gids zullen we CSS-sjablonen van dichterbij bekijken en zien waar ze te vinden zijn.

Wat is een CSS-sjabloon?

Een CSS-sjabloon bevat niet alleen CSS: het geeft u alles wat u nodig hebt om een ​​volledig functionerende website te maken. Als u er een download, krijgt u meestal een map met de volgende informatie:

• HTML-bestanden - U krijgt een HTML-bestand voor elke pagina van de website. Het bevat voorbeeldtekst en afbeeldingen die u moet vervangen door uw eigen inhoud. Je moet ook de metagegevens kunnen aanpassen, gerelateerd aan zaken als de beschrijving van de site.
• CSS-bestand - U krijgt meestal één hoofd-CSS-bestand met alle stijlen voor de site, plus eventuele extra's zoals een gereset stylesheet of een voor weblettertypen.
• Javascript-bestand - Als de site Javascript-functies bevat, moeten ze idealiter worden opgenomen in hun eigen afzonderlijke bestand, in plaats van opgenomen in de HTML-documenten.
• Afbeeldingen, lettertypen en pictogrammen - Alle afbeeldingen die in de sjabloon worden gebruikt, moeten ook worden opgenomen. Misschien wilt u dingen zoals pictogrammen en achtergronden behouden, maar moet u de andere plaatshouderafbeeldingen vervangen door die van uzelf. Sommige aangepaste lettertypen kunnen ook zijn opgenomen.

In tegenstelling tot de meeste andere soorten sjablonen die u tegenkomt - zij het WordPress, Excel of InDesign-sjablonen De 7 beste sites om gratis InDesign-sjablonen te vinden: Boeken, Flyers, Tijdschriften en meer De 7 beste sites om gratis InDesign-sjablonen te vinden: Boeken, Flyers, tijdschriften en meer Hoe zit het met het gebruik van een professionele Adobe InDesign-sjabloon in plaats van uw eigen sjabloon te maken? Hier zijn de beste gratis sjabloon sites. Meer lezen - CSS-sjablonen vereisen een bepaalde hoeveelheid technische kennis.

Er is geen gebruiksvriendelijke interface om ze in te bewerken, dus je moet op zijn minst weten hoe je een HTML-document kunt vinden om je eigen inhoud toe te voegen. Als u uw eigen aanpassingen wilt maken, hebt u een behoorlijke kennis van CSS nodig. Leer HTML en CSS met deze stapsgewijze zelfstudies Leer HTML en CSS met deze stapsgewijze handleidingen Benieuwd naar HTML, CSS en JavaScript? Als je denkt dat je de gave hebt om vanaf nul te leren hoe je websites kunt maken - hier zijn een paar geweldige stap-voor-stap tutorials die het proberen waard zijn. Lees verder .

Waar moet ik op letten in een CSS-sjabloon?

Er zijn zoveel gratis CSS-sjablonen om uit te kiezen. Dus hoe weet je welke geschikt is voor jou? Hier zijn een paar dingen om op te letten:

• Ontwerp - Het is duidelijk dat u een site wilt die er goed uitziet en die elke afbeelding weergeeft die u wilt weergeven. Maar bedenk ook of de sjabloon geschikt is voor uw behoeften, nu en in de toekomst. Veel zijn voor websites met één pagina; sommige zijn ontworpen voor meerdere pagina's. Als u dit laatste nodig heeft, overweeg dan of u misschien beter af bent met het gebruik van een CMS zoals WordPress.
• Mobile-geoptimaliseerde - Mobiel internetgebruik is nu hoger dan desktop, dus het is essentieel dat uw site correct werkt op smartphones. Elke fatsoenlijke CSS-sjabloon moet responsief ontwerp gebruiken, zodat de site perfect werkt op elk formaat scherm. Als uw gekozene dat niet doet, ga dan over naar een die dat wel doet.
• Goed geschreven - Download de sjabloon en bekijk de code voordat u zich ertoe verbindt deze te gebruiken. Het moet schoon, goed gestructureerd en gemakkelijk te bewerken zijn. Het moet ook SEO-bewust zijn, met correct gebruik van titel- en koerslabels.
• Licentie - Controleer de licentie voor uw gekozen CSS-sjabloon. Velen zijn beschikbaar onder een Creative Commons-licentie Wat is Creative Commons en zou u het moeten gebruiken? Wat is Creative Commons en moet je het gebruiken? Creative Commons is een verzameling licenties die u automatisch toestemming geeft om verschillende dingen te doen, zoals hergebruik en distributie van de inhoud. Laten we er meer over te weten komen en hoe het te gebruiken. Meer lezen, maar verschillende versies van deze licentie bepalen of u de sjabloon kunt bewerken, of u deze commercieel kunt gebruiken en of u de oorspronkelijke ontwerper moet crediteren.
• addons - Sommige CSS-sjabloonontwikkelaars bieden hun werk aan a “freemium” basis. Je krijgt de sjabloon gratis, maar je hebt de mogelijkheid om extra aanpassingen te betalen om deze uniek te maken voor je site.

Laten we met al het bovenstaande eens kijken naar de beste plaatsen om gratis CSS-sjablonen te vinden.

1. Templated.co

Deze verbluffende verzameling van meer dan 800 CSS-sjablonen bevat stijlen voor elke klasse van websites. Ze zijn allemaal speciaal gemaakt voor de site, dus je moet ze nergens anders zien opduiken.

Alle sjablonen zijn responsief en gebouwd met HTML5. Ze zijn klein en lichtgewicht, met extra Javascript-functies, zoals een videolightbox of scroll-effecten, alleen gebruikt waar ze echt waarde toevoegen aan de ervaring.

2. Styleshout.com

Styleshout biedt een groot aantal gratis en premium-sjablonen, de eerste uitgebracht onder de Creative Commons-licentie.

De gratis sjablonen bestrijken een breed scala aan categorieën, van volledige websites tot Coming Soon-pagina's, en zelfs de vaak over het hoofd gezien 404-foutpagina How To Make a Great 404 Error Page & 10 Examples How to Make a Great 404 Error Page & 10 Examples A smartly ontworpen 404-foutpagina kan het verschil zijn tussen een saaie website en een gedenkwaardige website. Lees verder . Je kunt ze zelf aanpassen en aanpassen aan de stijl van je bestaande site, of je kunt betalen om Styleshout te krijgen om het voor je te doen.

3. HTML5Up.net

Deze superstijlvolle verzameling sjablonen is ook super populair. De meesten zijn honderdduizenden keren gedownload en het is gemakkelijk te zien waarom.

Alle gebruikelijke categorieën van de site worden verzorgd, zoals blog en productpagina, en er zijn enkele bijzonder leuke ontwerpen voor fotografen om te pronken met hun werk. De eenvoudige sjablonen in rasterstijl zijn extreem aanpasbaar, terwijl de flitsender modellen over het algemeen nogal Javascript gebruiken, dus minder geschikt zijn voor uw aanpassingen.

4. Freebiesbug.com

Wat Freebiesbug mist qua kwantiteit compenseert het ruimschoots in kwaliteit. Een site waar jonge ontwikkelaars hun vaardigheden onder de aandacht brengen, inclusief veel hoogwaardige premium-ontwerpen.

De indrukwekkende verzameling gratis sjablonen van de site is ideaal voor bureaus, fotografen, app-ontwikkelaars en andere creatievelingen. Boordevol Javascript en CSS-effecten en -animaties, kunt u de sites aanpassen, hoewel ze vaak zo leuk zijn dat u dit misschien niet wilt.

Daarnaast bevat Freebiesbug.com allerlei gratis hulpmiddelen voor webontwerpers, waaronder lettertypen, stockfoto's, Illustrator-schetsen Niet betalen voor Adobe Illustrator: dit gratis alternatief is fantastisch Niet betalen voor Adobe Illustrator: dit gratis alternatief is geweldig Adobe Illustrator is geweldig, maar het kost behoorlijk wat dankzij het Creative Cloud-abonnement. Het alternatief voor deze web-app is bijna net zo goed en kost niets! Lees meer en PSD-bestanden, en meer.

5. Gratis-CSS.com

Free-CSS.com is een no-nonsense website en biedt - op het moment van schrijven - zo'n 2503 gratis sjablonen, plus tal van premiums, voor het geval je nog steeds niet kunt vinden wat je zoekt.

Met zo veel om uit te kiezen kan het een beetje moeilijk zijn om zich te vestigen op het perfecte ontwerp. De kwaliteit is over het algemeen goed, hoewel het 10-jarig bestaan ​​van de site betekent dat er nog steeds sjablonen zijn geschreven in XHTML. Je wilt deze vermijden. Het andere ding is om ervoor te zorgen dat u de licentie voor uw gekozen sjabloon controleert. Ze zijn allemaal gratis, maar sommige zijn openbaar domein, sommige Creative Commons en sommige gebruiken een auteurspecifieke licentie.

6. OS-Templates.com

28 pagina's gratis CSS-sjablonen, meestal met behulp van moderne, grid-gebaseerde lay-outs op een enkele pagina. Als simpel is wat je zoekt, dan is dit de plek om te kijken. De ontwerpen zijn schoon, aantrekkelijk en gemakkelijk aan te passen.

OS-Templates.com biedt ook een grote collectie “basissjablonen”. Deze geven je de basisstructuur voor een website in verschillende populaire opmaakschema's (twee kolommen, drie kolommen, enzovoort), terwijl ze volledig onstabiel zijn. Net zoals bij het gebruik van het standaardthema in WordPress, kunt u met het lege canvas uw site omzetten in alles wat u maar wilt.

7. boag.online

Maglev is een websjabloon met één enkele pagina dat in actie kan worden bekeken op boag.online.

Het is een snelle, schone sjabloon, ideaal voor een productpagina. Het minimalistische ontwerp wordt alleen aangevuld met enkele Jquery-effecten om u te helpen door de secties te bladeren. De eenvoudige lay-out werkt op zichzelf, maar het is ook een prima startpunt voor uw eigen aanpassingen.

8. Pixel Boeddha

De sjablonen van Pixel Boeddha beperken zich niet alleen tot websites, maar bevatten ook enkele voor e-mailnieuwsbrieven.

Hoe dan ook, ze zijn allemaal ontworpen met HTML5 en CSS3 en reageren snel, dus zien er geweldig uit op elk apparaat. Hoogtepunten zijn Howdy HTML, een prachtige portfolio / CV-sjabloon De laatste 5 Doorgaan met bouwen van apps en sites die u ooit nodig zult hebben De laatste 5 door u gegenereerde Apps en Sites die u ooit nodig zult hebben Gebruik deze fantastische CV-bouwlocaties en -apps wanneer u dat nodig heeft om je cv op te laten vallen in de massa. Met de juiste hulpmiddelen kunt u snel een uniek CV opbouwen, zelfs zonder ontwerpvaardigheden. Read More, en SOHO HTML, een ontzagwekkende eCommerce-pagina met de bron PSD-bestanden bovenop de HTML en CSS.

9. Templatemo.com

Bijna 500 gratis sjablonen zijn verkrijgbaar bij Templatemo. Sommige van de beste zijn degenen die zich losmaken van het rastersysteem in de Bootstrap-stijl om iets anders te proberen.

De meeste sjablonen zijn eenvoudig en overzichtelijk, hoewel functies zoals lightboxes en content-carrousels zijn opgenomen waar ze nodig zijn. We houden ook van het feit dat verschillende sjablonen zijn ingesteld om standaard met maximaal zes pagina's te werken. Dit maakt het eenvoudiger als uw inhoud niet past in de steeds vaker voorkomende lay-out van één pagina.

10. Startbootstrap.com

Bootstrap is een ongelooflijk populair front-end framework waarmee je in een mum van tijd websites van hoge kwaliteit kunt bouwen. Het kost echter wat tijd om te leren, en daar begint Start Bootstrap.

Deze verzameling gratis open source-sjablonen worden allemaal gemaakt met behulp van het netwerksysteem van Bootstrap. Webinterfaces maken: waar beginnen met het maken van webinterfaces: waar te beginnen We laten u zien hoe webinterfaces uiteenvallen en wijzen u vervolgens op de belangrijkste concepten, hulpmiddelen en bouwstenen nodig om van jezelf een 21-eeuwse webontwerper te maken. Lees verder . Er zijn meer dan 30 om uit te kiezen. Sommige zijn volledig ontworpen en bedoeld voor apps, blogs en bestemmingspagina's, terwijl andere lege lay-outs zijn die op je wachten om je stijl te verbeteren.

11. Bootswatch.com

Eindelijk iets handiger. Bootswatch biedt 16 open source-thema's om websites te stylen die gebouwd zijn met Bootstrap.

U kunt de lay-out van uw site zelf bouwen met Bootstrap of een van de lege sjablonen downloaden van Start Bootstrap. Wat Bootswatch doet, is de lettertypen, achtergrondkleuren en de stijl van knoppen, menu's en andere elementen wijzigen. Het geeft uw site een unieke look en blijft trouw aan Bootstrap's ultra-schone ethos.

Het is gemakkelijk om een ​​basiswebsite samen te stellen met Bootstrap en Bootswatch geeft het een instant-look.

CSS-sjablonen gebruiken

Over het algemeen zijn er twee manieren om sjablonen te gebruiken. Je gebruikt ze zoals het is of je gebruikt ze als basis voor je eigen ontwerp.

Het gevaar bij het gebruik van sjablonen is dat je terechtkomt op een website die identiek is aan die van iemand anders. Kies een populaire sjabloon en er kunnen letterlijk tienduizenden identieke sites zijn. Dit is het belangrijkste argument om deze aan te passen.

CSS-sjablonen vormen een geweldige snelkoppeling voor ervaren webontwerpers die een basislay-out in gedachten hebben en meteen willen beginnen met het vormgeven ervan.

Ze zijn ook perfect voor iedereen die nieuw is bij webdesign. Als u de weg kent in HTML en CSS, maar nog niet het vertrouwen of de kennis hebt om een ​​site helemaal opnieuw te bouwen, dan dient een CSS-sjabloon zowel als een gemakkelijke manier om een ​​goed uitziende site te krijgen, als een geweldig leermiddel..

Je kunt het behandelen als een werk in uitvoering. Begin met het uitschakelen van de lettertypen Wil je prachtige gratis lettertypen? Hier zijn 25+ sites waar u ze kunt vinden Wilt u prachtige gratis lettertypen? Hier zijn meer dan 25 sites waar u ze kunt vinden In plaats van honderden lettertypen te doorlopen, volgen hier enkele sites die u helpen bij het bijhouden van alle nieuwe lettertypen die u in uw volgende ontwerp wilt gebruiken. Lees meer en verander het kleurenschema Hoe kies je een kleurenschema zoals een pro Hoe kies je een kleurenschema zoals A Pro Kleuren zijn lastig. Het lijkt misschien gemakkelijk genoeg om een ​​handvol kleuren te kiezen die er samen goed uitzien, maar zoals elke ontwerper die urenlang heeft gewerkt aan het bijstellen van kleuren, zal hij je vertellen: het is lastig. Meer lezen, en na verloop van tijd kunt u bestaande elementen opnieuw ontwerpen, nieuwe toevoegen, enzovoort. Er is geen betere manier om iets te leren dan door praktische, hands-on ervaring.

Gebruikt u CSS-sjablonen bij het bouwen van websites? Wat zijn jouw favoriete plekken om ze te vinden? Deel uw ervaringen en tips met ons in de comments.

Ontdek meer over: CSS, Web Design.