Gratis template voor je Joomla website
Zoek je een leuke Joomla template die je kunt aanpassen zodat deze helemaal voldoet aan je wensen.
Oh, en als je benieuwd bent hoe cool deze Astroid template eigenlijk is,
check dan even de YouTube video over de installatie van Astroid.
Er staan meer video's trouwens, voor als je er echt je tanden in wilt zetten.
Zo, dat was 'm! Met Astroid kun je je Joomla-site helemaal pimpen zoals jij dat wilt. Veel plezier ermee!
Wil je 'm zelf uitproberen? Geen probleem! Je kunt 'm gratis downloaden op astroidframe.work. Even scrollen, een paar keer klikken, en voor je het weet zit je op GitHub waar je alles kunt binnenhalen.
Pro-tip: Pak meteen het hele pakket mee, dan heb je zowel het framework als de template. Zo weet je zeker dat alles lekker samenwerkt want ze kunnen niet zonder elkaar.
Klaar om je website een boost te geven met de Astroid template? Laten we er samen induiken en echt alles uit deze powerhouse van een template halen!
Installeer de Astroid template op je Joomla website
Allereerst, zorg dat je de Astroid template geïnstalleerd hebt. Zodra dat gefixt is, is het tijd om 'm actief te maken:
- Ga naar Systeem > Extensies > Templates > Website Templatestijlen
- Zoek de Astroid template in de lijst
- Klik op het sterretje naast de template om 'm standaard te maken voor alle pagina's
- Als je verschillende stijlen wilt voor verschillende pagina's, kun je meerdere templatestijlen aanmaken en die toewijzen aan specifieke menu-items, maar dat is iets voor later.
Nieuwsgierig hoe je site er nu uitziet? Klik gewoon op de naam van je website bovenaan de werkbalk. BAM! Daar is ie, je gloednieuwe Joomla-creatie met Astroid power! Deze ziet er nu nog standaard uit maar alles is instelbaar en aanpasbaar naar je eigen kleuren en indeling.
Nu komt het leuke deel: de Astroid template verkennen!
Oké, misschien voel je je eerst een beetje overweldigd door alle opties. Geen stress! We gaan dit samen ontrafelen. Hier is een pro-tip: schets een simpel plannetje van je ideale website layout. Zo houd je het overzicht van waar je al die coole modules wilt plaatsen.
Denk na over:
- Welke moduleplaatsen wil je op je homepage?
- Hoe wil je je menu structureren?
- Welke kleuren passen bij je merk?
- Welke speciale features wil je gebruiken (zoals een sticky header of off-canvas menu)?
Even een heads-up: dit artikel is gebaseerd op Template versie 3.012 en Framework 3.1.1. Er komen vast nog meer updates om de template en framework nóg beter te maken. Maar geen zorgen, je pikt het supersnel op zodra je ermee aan de slag gaat. Plus, de Astroid-ontwikkelaars zijn constant bezig met verbeteringen, dus hou de updates in de gaten voor nieuwe coole features!
Genoeg gepraat, laten we die Astroid template eens goed onder de loep nemen!
Aanpassen van de Astroid template
- Basis instellingen
- Header instellingen
- Kleuren
- Layout oftewel indeling
- Typography
- Artikel en Blog instellingen
- Sociale Media iconen
- Custom Code
- Miscellaneous oftewel Diverse instellingen
- Theming
- Preset profiles
1. Basis instellingen
Laten we beginnen met de basics. Je ziet dat de template nu op een donkere weergave staat. Dat is niet alleen cool, maar ook rustiger voor je ogen als je uren aan je site sleutelt. Helemaal bovenin kun je switchen tussen licht en donker. Experimenteer met beide om te zien wat het beste bij jouw merk past!
Bij de Bootstrap Settings kun je alles laten staan zoals het is, tenzij je een echte techie bent die graag experimenteert. Deze instellingen bepalen hoe de Bootstrap framework wordt geladen, wat invloed heeft op de responsiviteit en het grid-systeem van je site.
Bij Page Settings heb je de keuze tussen 'Wide' en 'Boxed':
- 'Wide' geeft je een brede, moderne look die het hele scherm vult.
- 'Boxed' plaatst je content in een container, wat een meer gestructureerde look geeft.
Probeer ze allebei uit om te zien wat beter bij jouw stijl past!
Oh, en doe jezelf een plezier: zet die Preloader uit. Die irritante animatie kan bezoekers wegjagen als je site wat trager is. Klik gewoon het schuifje naar links en voilà, weg ermee! Je bezoekers zullen je dankbaar zijn voor een no-nonsense laadervaring.
Favicon instellen
Weet je wat cool is? Een eigen favicon! Dat is dat kleine icoontje in de browsertab. Het maakt je site herkenbaar tussen al die andere tabs. Je kunt zelfs twee verschillende instellen:
- Een standaard favicon (96x96 pixels)
- Een grotere speciaal voor iOS-gebruikers (vaak 180x180 pixels)
Daar had je vroeger een speciale .ico afbeelding voor nodig, maar nu kun je gewoon een standaard .png gebruiken.
Tips voor een goede favicon:
Je kunt een favicon maken met Photoshop of met Canva, gebruik hiervoor een herkenbaar gedeelte van je logo of ontwerp iets geheel nieuw.
Hou het simpel; het is maar klein!
Zorg dat het past bij je logo of merk
Test het op verschillende achtergronden (donker en licht)
Maak verschillende formaten voor optimale weergave op alle apparaten
Maak 't persoonlijk, maak 't uniek!
Back to top
Bezoekers scrollen, scrollen, scrollen... en dan? Met een 'Back to top' knop kunnen ze in één klik terug naar boven springen. Superhandig! Je kunt 'm helemaal aanpassen:
- Kies een kleur die past bij je site
- Pas de vorm aan (rond, vierkant, wat jij wilt!)
- Kies een leuk icoontje (pijl, raket, wat bij jouw stijl past)
Pro-tip: Zorg dat de knop opvalt, maar niet te opdringerig is. Het moet een hulpmiddel zijn, geen afleiding.
Smooth scroll
Wil je dat je bezoekers soepel over je pagina glijden? Zet dan 'Smooth scroll' aan. Vooral handig als je ankerlinks gebruikt. In plaats van dat bezoekers in een flits naar een sectie springen, glijden ze er smooth naartoe.
Voordelen van smooth scroll:
- Geeft een premium gevoel aan je site
- Helpt bezoekers hun plaats op de pagina te behouden
- Werkt geweldig met one-page designs
Je kunt zelfs de snelheid van de scroll aanpassen voor de perfecte gebruikerservaring.
2. Headerinstellingen
Tijd om je header aan te pakken! Dit is vaak het eerste dat bezoekers zien, dus het is belangrijk om het goed te doen. Hier kun je spelen met:
- Je logo (tekst of afbeelding?)
- Menu-instellingen
- De positie van alles
Denk na over wat het belangrijkst is voor jouw bezoekers. Wil je dat ze meteen je contactinfo zien? Of is het belangrijker dat ze snel door je menu kunnen navigeren?
Menu instellingen
Kies welk menu je wilt laten zien. Standaard staat het op 'Main Menu', maar misschien wil jij iets anders? Je kunt ook bepalen hoeveel levels van je menu zichtbaar zijn.
Tips voor een effectief menu:
- Hou het overzichtelijk; niet meer dan 7 hoofditems ivm keuze stress
- Gebruik duidelijke, beschrijvende labels
- Overweeg een mega-menu voor sites met veel content
- Test de navigatie op zowel desktop als mobiel
Experimenteer tot je de perfecte mix hebt!
Mobiele menu instellingen
In deze smartphone-wereld is een goed mobiel menu cruciaal.
Overweeg deze opties voor je mobiele menu:
- Een slide-in menu van de zijkant
- Een full-screen overlay menu
- Een dropdown onder het hamburger-icoon
Je kunt zelfs bepalen wanneer het hamburger menu tevoorschijn komt bij Header Breakpoint. Op een klein mobieltje? Of al op een tablet? Jij bepaalt!
Test verschillende stijlen om te zien wat het beste werkt voor jouw content en doelgroep.
Logo
Je logo is het gezicht van je site. Of je nu kiest voor een cool ontwerp of gewoon je bedrijfsnaam in een gaaf font, zorg dat het opvalt!
Pro-tips voor je logo:
- Zorg voor een transparante achtergrond (PNG-formaat) ook weer te doen in Canva
- Maak een versie met en zonder tagline
- Stel verschillende groottes in voor desktop en mobiel
- Overweeg een 'light' en 'dark' versie voor verschillende achtergronden als je daar gebruik van gaat maken
Zo ziet je logo er altijd top uit, ongeacht het scherm of de achtergrond.
Sticky header
Wil je dat je menu altijd zichtbaar blijft, zelfs als bezoekers naar beneden scrollen? Dan is de sticky header je beste vriend!
Voordelen van een sticky header:
- Verbeterde navigatie voor bezoekers
- Constante zichtbaarheid van je merk
Je kunt zelfs een kleiner logo instellen voor de sticky versie om ruimte te besparen. Nice!
Off- canvas menu
Ken je die coole zijmenu's die tevoorschijn schuiven? Dat is het off-canvas menu! Perfect voor extra info of links die je niet in je hoofdmenu kwijt kunt.
Ideeën voor je off-canvas menu:
- Uitgebreide navigatie
- Contactinformatie
- Social media feeds
Niet iedereen gebruikt 't, maar het kan een leuke toevoeging zijn, vooral voor mobiele gebruikers!
Animatie met menu
Geef je menu wat extra flair met animaties! Laat submenu's smooth uitschuiven of fade in. Speel met de snelheid tot het precies goed voelt.
Enkele populaire menu-animaties:
- Fade in/out
- Slide down/up
- Zoom effect
- Rotatie
Een subtiele animatie kan je site echt tot leven brengen! Maar onthoud: less is more. Het doel is om de gebruikerservaring te verbeteren, niet om af te leiden, het is geen 2010 meer.
3. Kleuren
Begin met de basis: de achtergrondkleur en tekstkleur van je hele site. Dit zet de toon voor alles wat volgt.
Tips voor het kiezen van body kleuren:
- Kies een lichte achtergrond voor betere leesbaarheid
- Zorg voor voldoende contrast tussen tekst en achtergrond wat weer belangrijk is voor iemand met een visuele beperking
- Overweeg een subtiele textuur of gradiënt voor wat diepte
Vergeet ook de linkjes niet, die wil je laten opvallen! Kies een kleur die contrasteert met je normale tekst, maar nog steeds past binnen je kleurenschema.
Kleuren van de header aanpassen
Je header is vaak het eerste dat bezoekers zien. Zorg dat de huiskleuren van je website perfect bij je merk passen!
Denk na over:
- De achtergrondkleur van je header
- De kleur van je hoofdmenu-items
- Hover-effecten voor menu-items
- De kleur van je logo (als het een tekst-logo is)
Pro-tip: Als je header een afbeelding of patroon als achtergrond heeft, zorg dan dat je menu-tekst er goed op leesbaar blijft.
Kleuren van het stickey menu aanpassen
Vergeet je sticky menu niet! Misschien wil je hier wel voor een iets subtielere kleur gaan? Vaak werkt een lichtere of juist donkerdere versie van je hoofdheader-kleur goed.
Overweeg:
- Een semi-transparante achtergrond
- Een compleet andere kleur voor een verrassingseffect, maar blijf trouw aan je huiskleuren
Kleuren aanpassen van je desktop menu
Pas de kleuren van je hoofdmenu aan. Denk aan:
- De achtergrond van dropdown-menu's
- De tekstkleur van menu-items
- Hover- en active-states van menu-items
Zorg dat alles goed leesbaar blijft en past bij de rest van je design.
Kleuren aanpassen van het dropdown menu
Als je submenu's hebt, geef ze dan ook wat kleurliefde! Zorg dat ze passen bij je hoofdmenu, maar toch goed te onderscheiden zijn.
Tips:
- Gebruik een lichtere of donkerdere tint van je hoofdmenu-kleur
- Voeg een subtiele schaduw toe voor diepte
- Experimenteer met hover-effecten voor een interactieve feel
Kleuren aanpassen van het Off-canvas menu
Gebruik je het off-canvas menu? Maak het speciaal met unieke kleuren! Dit is je kans om echt creatief te zijn:
- Kies een contrasterende kleur voor de achtergrond
- Gebruik witruimte voor een clean look
- Voeg een patroon of textuur toe voor interesse
Kleuren aanpassen van het mobiel menu
Vergeet je mobiele bezoekers niet! Zorg dat je mobiele menu er net zo strak uitziet als de desktop versie.
Aandachtspunten:
- Maak touch-targets (knoppen, links) groot genoeg
- Zorg voor voldoende contrast voor kleine schermen
- Test je kleurenschema onder verschillende lichtomstandigheden
4. De layout aanpassen
Nu kom je op een belangrijk punt uit om te bepalen waar alles op je website komt te staan, hier kun je gaan bepalen waar je alle moduleplaatsen wil hebben, in een module kun je diverse content plaatsen zoals tekst, foto's, adresgegevens, btwnr en kvknr noem maar op.
Sluit de template nog even af en ga eerst de modules aanmaken die in de template moeten komen te staan, open dan weer de template.
Astroid template layout
Nu wordt het echt interessant! Hier bepaal je waar alles op je site komt te staan. Het is als een digitale puzzel, en jij mag 'm oplossen!
Voordat je in de template duikt, is het slim om eerst je modules aan te maken. Denk aan:
- Tekstblokken
- Foto galleries
- Contactformulieren
- Social media feeds
- Custom HTML-modules voor speciale content
Als je die klaar hebt, kun je ze makkelijk in je layout plaatsen.
Wil je een nieuwe sectie toevoegen, bijvoorbeeld voor een vette header-foto? Klik dan op '+ New Section' onder de Header-sectie. Je kunt kiezen uit verschillende kolomverdelingen.
Kolomopties:
Eén brede kolom? Kies dan voor 12.
Twee gelijke kolommen? Ga voor 6+6.
Drie kolommen? Probeer 4+4+4 of 3+6+3.
Of ga voor een custom verdeling, zolang het maar optelt tot 12. Bijvoorbeeld: 2+3+2+3+2.
Zo kun je echt creatief worden met je layout! Experimenteer met verschillende indelingen voor verschillende secties van je site.
Pro-tips voor een effectieve layout:
Gebruik witruimte effectief; laat je content ademen
Zorg voor een logische flow van informatie
Maak belangrijke elementen (zoals CTA's) opvallend
Hou rekening met de 'boven de vouw' - wat zien bezoekers zonder te scrollen?
Test je layout op verschillende schermgroottes
5. Typography aanpassingen
Lettertypes zijn cruciaal voor je website. Ze bepalen niet alleen de leesbaarheid, maar ook de hele uitstraling van je design. Met de Astroid template heb je veel opties om je typography perfect af te stemmen op je merk en doelgroep.
Begin met het instellen van je basis lettertype voor de body text. Dit is het lettertype dat het meest voorkomt op je site, dus kies iets dat goed leesbaar is.
Tips voor body typography:
Kies een serif font voor een traditionele look, of sans-serif voor een moderne uitstraling
Houd de lettergrootte tussen 16px en 18px voor optimale leesbaarheid
Stel een comfortabele regelhoogte in (meestal 1.5 tot 1.6 keer de lettergrootte)
Overweeg verschillende groottes voor desktop en mobiel
Systeem fonts vs. Google Fonts vs. Custom fonts
Je hebt drie hoofdkeuzes als het gaat om lettertypes:
1. Systeemfonts (al aanwezig in de template)
- Voordelen: Snel, geen extra laadtijd
- Nadelen: Beperkte keuze, minder uniek
2. Google Fonts
- Voordelen: Enorme keuze, gratis te gebruiken
- Nadelen: Kunnen laadtijd vertragen, AVG-overwegingen
3. Custom fonts
- Voordelen: Volledig uniek, perfect afgestemd op je merk
- Nadelen: Extra werk om te implementeren
Let op: Bij het gebruik van Google Fonts is er een AVG-overweging. Elke keer als je website wordt bezocht, worden de Google Fonts opgeroepen. Hierbij wordt het IP-adres van de bezoeker meegestuurd naar Google, wat in strijd kan zijn met de AVG.
Pro-tip: Wil je Google Fonts gebruiken maar ook AVG-proof zijn? Laad de fonts dan lokaal! Er zijn handige tutorials die je laten zien hoe je dit doet met de Astroid template.
Heb je problemen met het lokaal laden laden van je lettertypes, neem dan even contact op.
Menu lettertype aanpassen
Vergeet je dropdown menu's niet! Hier kun je kiezen:
Je menu verdient speciale aandacht. Het moet opvallen, maar ook goed leesbaar zijn.
In de Astroid template kun je het volgende aanpassen voor je menu:
- Lettertype
- Lettergrootte
- Letterspatiëring
- Hoofdletters/kleine letters
- Vetgedrukt of normaal
Pro-tip: Je kunt verschillende instellingen kiezen voor desktop, tablet en mobiel. Bijvoorbeeld, je kunt op mobiel een iets kleiner lettertype gebruiken om ruimte te besparen.
Lettertype en afmeting aanpassen voor headingtags
Je headings (H1, H2, H3, etc.) zijn cruciaal voor zowel design als SEO. Hier zijn wat tips:
- Gebruik een consistente hiërarchie: H1 het grootst, dan H2, etc.
- Overweeg een ander lettertype voor headings dan voor bodytekst voor contrast
- Experimenteer met verschillende eenheden px, em, rem
- Denk na over letterspatiëring en lijnhoogte voor headings
Voorbeeld instellingen:
- H1: 2.5rem (40px), vetgedrukt
- H2: 2rem (32px), vetgedrukt
- H3: 1.75rem (28px), normaal gewicht
- H4: 1.5rem (24px), normaal gewicht
- H5: 1.25rem (20px), vetgedrukt
- H6: 1rem (16px), vetgedrukt, mogelijk in een accentkleur
6. Artikel/blog instellingen
In mijn eigen website staan alle instellingen uit. Neem dan even de tijd om door de opties te scrollen. Je weet maar nooit wat voor coole features je tegenkomt!
7. Sociale media instellen in de template
Laat de wereld weten waar ze je kunnen vinden! Voeg je sociale media-iconen toe en link ze aan je profielen.
Of je nu een Facebook-fanaat bent of liever twittert, er is een icoontje voor jou. Ik zag op de foto dat bij Whatsapp de code ontbreekt dit moet zijn https://wa.me/31610721564, gebruik hiervoor je eigen telnr.
8. Custom code toevoegen in je template
Hier kun je echt los gaan met CSS! Wil je je knoppen een unieke stijl geven? Of de tekstgrootte in specifieke secties aanpassen? Dit is de plek. Als je nog niet zo bekend bent met CSS, check dan websites als W3Schools voor handige voorbeelden en tutorials.
Copyright toevoegen aan je website
Vergeet niet je copyright-info toe te voegen! Met de juiste instelling update het jaartal automatisch. Handig!
9. Miscellaneous instellingen
Hier kun je verschillende dingen instellen die zichtbaar worden op de website.
Contact informatie toevoegen
Zorg dat bezoekers je kunnen vinden! Voeg je contactgegevens toe die bovenaan je site verschijnen. Deze staat standaard op topbar-1 in de website layout.
Coming soon en 404 pagina toevoegen
Het is belangrijk om je bezoekers te informeren, is de website nog in aanbouw dan gebruik je de coming soon instelling, omdat deze pagina altijd in beeld is, kun je beter de website op een subdomein bouwen om het resultaat te zien. Ook voor een mooie 404 pagina, je hoopt dat de bezoeker daar niet op terecht komt natuurlijk, deze kun je helemaal naar eigen smaak inrichten.
Nog bezig met bouwen? Zet een coole 'Coming Soon' pagina op! Je kunt zelfs een afteller toevoegen naar je lanceerdatum. Bouw de website op een sub domein zodat je daar geen last van hebt tot de oplevering.
En maak je 404-pagina leuk! Niemand vindt het fijn om op een foutpagina te belanden, maar met een grappige afbeelding en wat humor maak je er toch iets leuks van. Voeg een zoekbalk toe, een Naar homepage knop staat er al in, zodat bezoekers makkelijk verder kunnen surfen.
Test de 404 van deze website maar eens, ga naar homepage en zet daar iets van /probeer achter, deze bestaat in elk geval niet dus geeft deze een 404.
Lazy Load Images
Wil je je site supersnel maken? Zet 'Lazy Load' aan voor je afbeeldingen. Ze laden dan pas als ze in beeld komen. Goed voor je laadtijd én je Google-ranking!
Minify JS/CSS
Nog zo'n snelheidsboost! Maar test het wel goed, want soms kan het averechts werken. Gebruik tools als Pagespeed insight of GTMetrix om te zien wat het beste werkt voor jouw site.
10. Theming
Colors
Hier vind je de standaardkleuren van Bootstrap 5. Voel je vrij om ze aan te passen aan jouw huisstijl! Zag je ergens een kleur die niet helemaal klopte? Hier kun je 't fixen. Bij Sass Overrides kun je ook aanpassingen doen maar dat is meer voor de experts onder ons.
11. Preset Profiles
Wil je snel een mooi kleurenschema? Check de preset profiles! En als je je perfecte instellingen hebt gevonden, exporteer ze dan. Super handig als je meerdere sites maakt of als backup.
Zo, dat was een hoop info! Maar geloof me, zodra je ermee aan de slag gaat, valt alles op z'n plek. Dus, waar wacht je nog op? Duik in die Astroid template en maak die droompagina!
Heb je nog vragen of loop je ergens tegenaan? No worries! Er is een geweldige community van Joomla- en Astroid-gebruikers die altijd klaar staat om te helpen. Dus experimenteer, heb plezier, en creëer iets geweldigs! 🚀✨
Loop je ergens tegenaan neem dan vrijblijvend contact op voor een gesprek of informatie.
Meest gelezen artikelen