Ontdek een gratis template voor je Joomla website
Als je een Joomla website wil gaan bouwen wil je in het begin de kosten laag houden. Als je gaat zoeken op gratis template voor Joomla dan heb je er zo enkele te pakken.
Er zitten mooie bij waar dan weer beperkingen opzitten die na betaling worden verwijderd, deze website templates zijn meestal heel erg uitgebreid met functies die je als beginner niet zal gebruiken of niet weet wat je er mee moet.
In het begin toen het bouwen van websites nog een hobby van me was heb ik vele gratis templates geprobeerd. Na vele teleurstellingen kwam ik een bouwer tegen uit Frankrijk, heb daar toen de gratis template nr 99 gedownload van Joomspirit.
Ik heb bij deze template bouwer nog 5 templates gekocht voor diverse projecten van klanten, ik heb met erg veel plezier gebruik gemaakt van deze templates die een prijs hadden van € 24,-, bij sommige bouwers kost een template € 60,- of nog meer en heeft zoveel extra functies die je toch niet gebruikt maar wel voor betaald, is toch zonde.
Maar na taloze meldingen dat er binnenkort templates kwamen die geschikt waren voor Joomla 4 bleef dit na het verstrijken van de houdbaarheid van Joomla 3 uit, daarom heb ik nu een nieuwe template gevonden die wel geschikt is voor Joomla 4.
Perfect geschikt voor Joomla 4
Aangezien de nieuwe websites nu gebouwd worden met joomla 4 gebruik ik nu deze Astroid template met veel plezier, ik heb ook de template van Joomshaper geprobeerd, dat was de Helix template, na een tijd ermee getest te hebben toch weer terug gegaan naar de Astroid template.
Download de Astroid template gratis
De templatebouwer Joomdev is gestopt met de doorontwikkeling van het Astroid template, de template wordt door Templaza voortgezet en onderhouden, de template is nu weer te downloaden op astroidframe.work
Als je op de downloadpagina bent dan klik dan op de downloadknop, scroll iets naar beneden en klik weer op download. Nu wordt je doorgestuurd naar Github waar je de software nu kunt downloaden, scroll weer naar beneden om bij Assets, daar staat op de 2e plaats het framework en template wat je kunt installeren om dit te gebruiken in je Joomla website. De template kan niet zonder het framework dus download deze gelijk mee.
Installeer de Astroid template op je Joomla website
Ik neem aan dat je weet hoe je een template installeerd op je joomla website.
Na installatie kun je kiezen welke template actief moet zijn voor je website, dit doe je bij Extenties > Templates, ga nu bij de template Astroid op het sterretje staan om deze standaard aan te zetten voor alle pagina's. Let wel op dat je het Framework en de template installeerd anders werkt het niet.
Nu de template actief is op je website moet je gaan bedenken waar alles komt te staan op je website. Met deze template kun je zelf bepalen waar alles komt te staan, dit zijn bij Joomla de moduleplaatsen. Standaard zijn er al vele plaatsen beschikbaar en daar heb je eigenlijk al wel genoeg aan.
Open de template om er een keer in te kijken wat er allemaal mogelijk is. Als je de template hebt geopent kom je op een pagina uit waar je alles kunt aanpassen. Hier kun je misschien een beetje van schrikken en niet weten wat je moet doen maar dat valt erg mee hoor. Ik zal proberen je er een beetje wegwijs in te maken.
Als je al een beetje weet hoe de website eruit komt te zien is het al wel slim om daar al modules voor aan te maken zodat deze gelijk een plaatsje kunnen krijgen in de template en zichtbaar worden op je website. Deze handleiding heb ik gemaakt voor de oudere versie van het framework en template, de nieuwe ziet er iets anders uit met nog meer instel mogelijkheden. Als je er meer bezig bent zie je vanzelf de instellingen die iets zijn aangepast.
Aanpassen van de Astroid template
- Basis instellingen aanpassen
- Header instellingen aanpassen
- Kleuren van template aanpassen
- Layout oftewel indeling website
- Lettertype en lettergrote
- Artikel en Blog instellingen
- Sociale Media iconen weergeven
- Custom Code toevoegen
- Miscellaneous oftewel Diverse instellingen
- Thema kleuren
Lees hieronder de redelijk uitgebreide uitleg voor het aanpassen van de Astroid template als je deze wil gaan gebruiken op je nieuwe of al bestaande website. Aangezien de template nog steeds nieuwe updates krijgt zal het er ondertussen iets anders uitzien dan op de onderstaande afbeeldingen.
Basis instellingen
Preloader
Op het tabblad Basic is het uitzetten van de preloader echt aan te raden, dit is zeer irritant voor je bezoeker omdat als je website een beetje traag laad er een animatie in beeld komt wat je bezoeker kan afschrikken en gelijk wegklikt, dus uit dat ding door het groene schuifje naar links te klikken.
Back to top
Hier kun je de knop aanpassen van de knop die je terug stuurt naar de bovenkant van de website, door op de knop te klikken gaat de website gelijk door naar boven, je kunt hier de knop de huiskleur geven van je website, ook de vorm is aan te passen net als de vorm van het icoon. Op deze website is deze ook actief en heeft een ronde vorm met een v-vorm naar boven gericht, niet op klikken want dan ga helemaal weer naar boven.
Layout Settings
Bij de Layout Settings kun je kiezen voor een volle breedte van je website of je kiest voor een box layout, dit is geheel je eigen smaak, voor op een desktop is een volle breedte van de website wel mooier voor op een mobiel maakt dit niet zo veel uit. Je kunt hier ook kiezen om de Smooth Scroll aan te zetten, probeer dit even om te zien wat het voor effect heeft op je website, ik heb deze functie niet aanstaan.
Header
Bij Header Mode hier kun je kiezen hoe de header wordt weergegeven op je website, de header bevat je menu en het logo als je de modulepositie op astroid-header laat staan. Probeer diverse instellingen zodat je de beste keuze kunt maken voor je website. De Horizontale Menu Mode veranderd naar gelang je keuze bij Header Mode, probeer hier de juiste keuze te maken voor je website.
Bij Header Block 1 kun je een module kiezen welke je eerst moet aanmaken, hier zou je bijvoorbeeld een contactknop of een kleine foto kunnen plaatsen.
Site menu
Als je dan verder naar beneden scrolt kom je Site Menu tegen, hier staat nu Main Menu wat betekent dat er in de menu balk het main menu wordt weergegeven, als je nu een meertalige website gaat bouwen kun je hier het menu selecteren van de taal die je wil weergeven, als je alles hebt ingesteld voor deze template kun je deze kopieren en op het kopie van de andere template het menu van de andere taal selecteren.
Zo gebruik je voor elke taal eigenlijk een andere template, dus zorg dat de eerste helemaal naar je zin is en kopieer de andere daarna pas, anders heb je 2 keer werk met aanpassen, mocht je tijdens het bouwen aanpassingen doen doe het dan wel op de anders talige template ook.
Bij start level staat nu 1 die kun je gewoon laten staan op 1 net als End level laten staan op Alle als je alle menu items wil laten zien in de menu balk. De Dropdown Trigger geeft aan wat er moet gebeuren als je met de muis over een menu gaat, moet deze uitschuiven als je er met de muis overheen gaat of bij het klikken op het menu item.
Logo instellingen
Voor het weergeven van een logo in de menubalk kun je hier kiezen voor het type, wil je een afbeelding, tekst of geen logo weergeven. Ook is het mogelijk om een link aan het Logo te koppelen als daar op wordt geklikt er naar bv het contactformulier wordt gegaan. Voor het weergeven van een logo op een mobiel is het mogelijk om een ander logo te kiezen of je houdt dezelfde aan als op de desktop, blijft het 1 geheel.
Sticky Header
Als er met de website naar beneden wordt gescrolt is het wel makkelijk dat de header en het menu vast blijft staan aan de bovenkant van de website, kun je eenvoudiger naar een ander menu gaan zoals naar de contactknop om contact op te nemen.
Bij de Sticky Menu Mode is het mogelijk om het menu bijvoorbeeld links tegen het logo, in de midden of geheel rechts weer te geven als het menu aan de boven kant blijft plakken. Deze instelling heeft meerdere mogelijkheden, Sticky is dat het menu blijft hangen als er naar beneden wordt gescrold, bij de instelling Sticky on Scroll up komt de menu balk weer te voorschijn als er naar boven wordt gescrold, speel hier een beetje mee om te zien wat er bij de website past. Dit is ook voor de instellingen bij de weergave op een tablet en een mobiel. Kijk wat er het beste past bij welke weergave op de diverse devices.
Off-Canvas Menu
Het Off-Canvas Menu is een extra menu wat wordt weergeven op alle schermen en ziet eruit als de 3 bekende streepje onder elkaar, ik gebruik dit eigenlijk nooit omdat op een desktop je geen zogenaamd hamburgermenu moet gebruiken omdat dit niet echt gebruiksvriendelijk is. Je zou dit ook als een module kunnen gebruiken om er extra informatie weer te geven, maak daarvoor een module aan en geef deze de plaats offcanvas om deze informatie weer te geven. Als je kiest om deze niet weer te geven zet je deze gewoon uit door op het groene schuifje te klikken.
Bij Toggle Visability kun je dan kiezen wanneer deze module wordt weergegeven bijvoorbeeld op alle schermen of alleen op een tablet of een mobiel, het is geheel aan jezelf waar je voor kiest. Daarna is het mogelijk om de breedte van het Off-canvas Menu te kiezen, standaard staat het op 320 px maar de breedte kun je zelf bepalen maar ga niet te groot want dan is het op een mobiel niet goed zichtbaar en dat zou jammer zijn.
Daarna kun je de animatie bepalen hoe het Off-canvas Menu tevoorschijn komt, hier heb je de keuze uit 3 verschillende instellingen, kies er hier 1 die past bij je website. De volgende instelling gaat over het verschijnen van het mega menu als je dit gaat gebruiken voor je menu, dit is in te stellen in het menu van Joomla zelf.
Kleuren van de template instellen
Presets
Als je alles gaat bepalen voor je website zijn de kleuren die je gaat gebruiken wel een belangrijk punt, via deze instellingen kun je alle kleuren bepalen die op je website worden weergegeven, de kleuren van de artikeltekst, menukleuren, kleuren van links en vele andere kleuren. Kies eerst aan de hand van bovenstaande afbeeldingen een kleur zodat alle instellingen worden aangepast. Daarna kun je alles nog aanpassen naar je eigen kleuren die je wil gebruiken in je website.
Kleuren voor je website aanpassen
Body
Bij Body kun je de kleuren bepalen van de achtergrond, de tekstkleur, de linkkleur en de kleur van de link als je met de muis over de link gaat.
Doormiddel van klikken op het kleuren symbool kun je de eigen kleuren van je website aanpassen, om de kleur te bepalen kun je de extentie Color Zilla installeren in je browser van je computer, deze extentie ziet eruit als een kleuren pipetje die boven in je browser staat, klik erop en je kunt de hex kleuren bepalen van een andere website of van een foto. Zet deze hexkleuren even in een kladblok bestand op je bureaublad van je computer. Om nu te kijken of deze kleuren een beetje bij elkaar passen kun je met het Adobe kleurenwiel kijken of je nog een paar bijpassende kleuren kunt vinden, hou 1 hoofdkleur aan en combineer deze met 2 of 3 extra kleuren voor je menu of call to action knoppen.
Headerkleuren aanpassen
Ook voor het aanpassen van de headerkleuren zijn er vele opties te bedenken, wil je de achtergrondkleur van het menu in een andere kleur, deze staat standaard op wit, als je een logo hebt wat je zelf hebt gemaakt en dus geen tekst hebt gebruikt hoef je hier verder niets in te stellen, anders leef je uit met de instellingen.
Sticky headerkleuren aanpassen
Hier kun je de kleuren aanpassen wanneer je hebt gekozen voor het gebruik van de Sticky Header, zo is het mogelijk om de kleuren van de menu items een andere kleur te geven wanneer het menu bovenaan is "vastgeplakt" als je dit zou willen, je zou de kleuren bijvoorbeeld om kunnen draaien van het onderstaande instellingen van het main menu.
Main menu kleuren aanpassen
Op dit tabblad zijn de kleuren aan te passen van de menu items die bovenaan de website staan, stel de kleuren in volgens je kleuren pallet wat je hebt samengesteld zodat alles goed bij elkaar past en alles perfect klopt.
Kleuren aanpassen voor Drop Down Menu
Als je een menu hebt met meerdere keuze mogelijkheden krijg je een Drop down menu, dat is een menu wat uitschuift om zo meer menu items op een kleinere plaats kwijt te kunnen. Je moet voor de menu balk een maximaal aantal van 7 of 8 items aanhouden anders is het minder overzichtelijk en krijgt de bezoeker last van keuze stress.
Off-Canvas Menu kleuren instellen
Ook voor het instellen van de kleuren van het Off-canvas Menu zijn de mogelijkheden zeer uitgebreid en kun je die helemaal maken volgens je eigen kleurenpallet om zo een goede match te krijgen met de hele website en alles perfect klopt.
Instellen kleuren van het mobiele menu
De layout van je website
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, het weerbericht noem maar op. Er zijn al een aantal module plaatsen die erin staan om alvast een idee te krijgen hoe het eruit komt te zien.
Er staan al een aantal vaste posities in zoals Topbar 1 en Topbar 2, deze is zichtbaar boven het menu en daar kun je een telefoonnummer, mailadres en eventuele adresgegevens in kwijt. Deze gegevens kun je invullen bij Miscellaneous wat verder naar beneden aan bod komt.
Hoe je website eruit gaat zien is natuurlijk je eigen keuze, ik kan moeilijk gaan zeggen je moet het zo en zo gaan doen want dit is je eigen keuze, laat de instellingen van de layout nog even staan dat kun je later altijd nog aanpassen tijdens de verdere afbouw, mocht je denken dit wil ik hier hebben dan kun je de layout altijd nog aanpassen.
Lettertype en afmetingen
Body Typography
Voor het instellen van het perfecte lettertype (Font Family) voor je website kun je vele kanten op, kies wel voor goed leesbaar lettertype ga voor niet te klein, 14pt is wel het kleinste wat je zou moeten kiezen, beter is 16pt, de standaard instelling is 1 em maar gebruik gewoon de pt instelling, vergeet niet om dit voor de tablet en mobiel ook aan te passen. Deze aanpassing wordt voor heel de website aangehouden of je moet het per instelling aanpassen, daar zie je dadelijk meer van.
Lettertype voor het menu
Om een ander lettertype voor het menu te kiezen klik je op Font family om het lettertype aan te passen voor het menu, de lettergrote kun je ook 16pt voor aanhouden als je niet teveel menu items hebt, deze komen anders in 2 rijen te staan, probeer maximaal 6 of 7 menu items aan te houden dat is gebruiksvriendelijker.
Lettertype voor het Drop Down menu
Als je meerdere menu items hebt komen deze submenu's in een uitschuifmenu te staan, dit Drop Down menu is ook geheel naar smaak aan te passen met een ander lettertype, kleur, en lettergrote. Kies niet voor elk item een ander lettertype maar hou het op 1 of max 2 verschillende lettertypes voor je gehele website, het komt al heel gauw rommelig over en dat wil je niet voor je bezoeker. Maak hier een goede keuze en kijk of het past bij de website.
Kies het lettertype en afmeting van de Headingtags
Om dit tabblad is het mogelijk om het lettertype en afmeting van de verschillende headingtags te bepalen, je kunt hier om de headingtags nog beter op te laten vallen de kleur aanpassen naar de gewenste huiskleur van de website, het maakt voor Google niets uit maar voor je bezoeker valt het nog beter op.
Dit kun je doen bij alle headingtags die er in de template zitten, ik ga meestal maar voor H1, H2, H3 en H4 meer heb ik er nog niet nodig gehad maar je kunt H5 en H6 ook voorzien van de juiste afmetingen en kleur zodat je deze kunt inzetten in je website.
Het juiste gebruik van de Headingtags is voor Google belangrijk om te weten waar het artikel overgaat, het gebruik van de H1 tag kun je zien als een hoofdstuk van een boek.
Titel van het artikel H1
Hoofdstuk van het artikel met H2
Sub hoofdstuk van het artikel met de H3 tag
Sub hoofdstuk van het artikel met de H4 tag
Sub hoofdstuk van het artikel met de H5 tag
Sub hoofdstuk van het artikel met de H6 tag
Google kijkt naar elke headingtag maar geeft minder autoriteit aan de hogere headingtags, de H1 tag is het belangrijkste en dan de H2 en zo verder, het gebruik van de andere headingtags is voor je bezoeker zeker zo belangrijk omdat het artikel dan goed leesbaar is opgedeeld is mooie hapklare brokken, de bezoeker blijft langer op je website en Google waardeert dit weer met een hogere ranking.
Article/Blog
Deze instellingen pas ik meestal zo aan dat alles uitstaat, je kunt er voor kiezen om enkele instellingen aan te laten staan, als ik een artikel schrijf laat ik de naam van de schrijver uit staan. Helemaal onderaan kun je kiezen om de leestijd van het artikel te tonen aan je bezoeker, zou een trigger kunnen zijn voor de bezoeker om het artikel helemaal te lezen.
Social media profielen
Op deze pagina is het mogelijk om al je sociale media profielen te voorzien van de juiste links, de icoontjes komen op module plaats Topbar 2 te staan zoals te zien op de afbeelding van de layout van de website, je kunt hier kiezen voor welke je wilt weergeven, verwijder degene die je niet nodig vind door op het rode prullenbakje te klikken.
Als de bezoeker nu in de bovenbalk klikt op het betreffende icoontje wordt deze doorgelinkt naar je sociale media profiel zoals Facebook, Linkedinn, of je Youtube kanaal als je dit hebt.
Custom Code toevoegen aan de template.
Dit is de plaats om custom code toe te voegen aan de template, denk aan de trackingcode van Analytics, een ander kleurtje met css voor een bepaalt item op je website.
Voor de specialisten is er ook de mogelijkheid om custom Javascript toe te voegen om bepaalde functies te verkrijgen die noodzakelijk zijn in bepaalde gevallen, ik ben geen specialist daarin en gebruik het daarom ook niet.
Miscelanous of Diverse instellingen
Hier is het mogelijk om de copyright onderaan de website weer te geven, je hoeft hier eigelijk niks in te vullen alleen als je de link naar de template bouwer weg wil hebben moet je alles wissen en alleen ©{sitename} {year} laten staan, de websitenaam wordt automatische ingevult op de website en ook het jaartal telt automatisch mee, heb je daar ook geen omkijken meer naar. Zoals je kunt zien is de module plaats voor de tekst van de copyright footer-1 zodat deze mooi helemaal onderaan de website wordt weergeven.
Contact gegevens invullen
Op dit blad is het mogelijk om je contact gegevens in te vullen die ook weer worden weergevens in de bovenste balk van je website.
De contact informatie die hier ingevuld kan worden wordt weergegeven op de bovenste balk van je website op module plaats Topbar-1, je kunt hier alle informatie kwijt zoals je telefoonnummer, mobiele nummer, e-mailadres, bezoekadres en je eventuele openingstijden. Er is heel veel mogelijk om je bezoekers van deze informatie te voorzien.
Coming Soon pagina
Als je met de website groot onderhoud gaat uitvoeren kun je een Coming Soon pagina aanzetten, je kunt op die manier je bezoeker laten weten dat je even offline bent voor onderhoud.
Beter is het dat je een back-up maakt met Akeeba en deze op een subdomein plaatst en dan de grote aanpassingen gaat doen zodat je website helemaal niet uit de lucht hoeft, na de aanpassingen kun je daar ook weer een back-up van maken en deze terug zetten op het hoofddomein.
Maar als je nu een geheel nieuwe website gaat ontwikkelen en je hebt dit al aangekondigd op de sociale media dan kun je dus een Coming Soon pagina laten zien aan je bezoekers, zo kun je deze laten weten ik ben nog wel even aan het bouwen maar ik denk dat ik dan en dan wel online ben.
Als je dan een datum opgeeft met een tijdstip wanneer je klaar denkt te zijn gaat er een countdown teller lopen op de website die aangeeft hoelang het nog gaat duren, een extra service voor je bezoeker die terug zal keren als je website weer online is. Zet daarvoor wel de knop van Development mode weer uit en je website is weer life.
De 404 pagina aanpassen
Het kan altijd gebeuren dat de bezoeker op een 404 pagina terechtkomen door een tikfoutje of een artikel dat is verwijderd en daarom niet kan worden gevonden. Hiervoor zit er in de template een mooie functie die zorgt voor een 404 pagina die je zelf kunt aanpassen.
De tekst in de template staat nu nog in het Engels maar deze is eenvoudig aan te passen, het is zelfs mogelijk om een module aan te roepen die je speciaal voor deze 404 pagina zelf kunt maken, versier deze met een mooie afbeelding, zorg ervoor dat de bezoeker niet wordt afgeschrikt door deze 404 melding maar stel deze gerust zodat deze met 1 klik op de 'Naar Homepage knop' weer verder gaat met lezen op je website.
De tekst van de Call To Action kun je aanpassen van Go Home, Naar Homepage bijvoorbeeld.
Om te testen of de 404 pagina werkt kun je achter de url van je website bijvoorbeeld /12345 typen of in ieder geval iets wat niet voorkomt op je website, je krijgt dan de 404 pagina te zien.
Favicon voor je website
Wat is een Favicon, dit is het plaatje wat bovenin de balk staat bij de websitenaam. Om een favicon op je website te laten zien moet je een plaatje van 96x96px hebben om daar voor te gebruiken. Na het uploaden van het plaatje wordt deze weergegeven in de bovenbalk van je website, gebruik hiervoor een plaatje wat iets met je logo heeft te maken zodat alles 1 mooi geheel is en blijft.
Daaronder staat een vak waar je specifieke instellingen kunt doen voor het zogenaamde Lazy Load van de afbeeldingen op je website. ook zijn er instellingen voor het comprimeren van je css e js. Ik heb na diverse testen ervaren dat je deze instelling gewoon uit moet laten staan omdat de laadtijd er door wordt vertraagd.
Met deze waardes ben ik heel tevreden, je zou met heel veel tijd en moeite op 100% kunnen krijgen maar daar win je niet heel veel mee, als de uitslag nu onder de 70% uitkomt dan is het de moeite om er wat meer tijd in te steken.
Theming
Hier kun je een bepaalde kleur die wordt gebruikt in je website aanpassen, wil je bijvoorbeeld een grijze kleur iets lichter of donkerder hebben dan kun je dat hier eenvoudig aanpassen door op de betreffende kleur te klikken en dan die kleur iets aanpassen. Heb je bijvoorbeeld een kleur gekozen bij de kleurentemplate en je wil deze iets aanpassen dan kan dat hier op een eenvoudige manier.
Template exporteren
Als je deze template nog voor een ander project wil gebruiken kun je deze opslaan en dan gebruik je Export Preset om de template op een ander project te gebruiken, installeer de Astroid template dan wel eerst op een andere Joomla website, nu kun je de template importeren met dezelfde instellingen als de ander website. Hoef je niet telkens alles weer hetzelfde te doen, sommige website hebben toch allemaal een beetje de zelfde module plaatsen om teksten op weer te geven, aanpassen kan je altijd nog doen.
Ik hoop dat ik je hier een beetje mee opweg heb kunnen helpen met de uitleg over het aanpassen van de Astroid template.
Maak ook eens kennis met pagebuilder van Joomshaper.
Neem vrijblijvend contact op voor een gesprek of informatie over een nieuwe website.