Stap 8 van de gids: Zelf goedkoop je eigen WordPress website bouwen.
Toch nog even wat theorie, theorie die toch wel erg belangrijk is! Websites bouwen werkt volgens een structuur, die elke website hanteert. Welk bouwsysteem je ook gebruikt, ze werken allemaal volgens dezelfde principes. Om dus goed pagina’s te kunnen bouwen moet je een beetje kennis krijgen van hoe dit precies in elkaar zit. Dit is de langste les, dus ga er even goed voor zitten!
Secties, rijen, kolommen en elementen
Met deze vier begrippen ga je continu werken, in het begin kan het best verwarrend zijn en daarom is het slim om hier gelijk mee te beginnen. Met een afbeelding zal ik het zo duidelijk mogelijk proberen te maken.
Een webpagina bestaat uit secties, binnen een sectie heb je rijen. Rijen zijn in te delen in kolommen, en in een kolom plaats je elementen! Gemakkelijk toch?
Secties
Een sectie (in sommige thema’s ook wel container genoemd) is een bepaald deel van een pagina. Op een webpagina kun je verschillende stukken van je website opdelen in secties. Stel je wil dat een deel van je pagina een andere achtergrondkleur heeft, dan creëer je een nieuwe sectie en geef je die een andere achtergrondkleur dan de vorige sectie.
Rijen
Een rij zit altijd in een sectie, en wordt gebruikt om aan te geven hoe breed de inhoud op de pagina mag worden en op welke positie het moet komen te staan. Rijen worden ook gebruikt om de kolomstructuur aan te geven.
Kolom(men) en kolomstructuur
Met kolomstructuur wordt bedoeld wat voor indeling je wil dat een rij heeft op je pagina. Je kunt namelijk een rij opsplitsen in meerdere kolommen en zo meerdere dingen in een rij zetten. Soms wordt dit in thema’s aangegeven in breuken, en soms (zoals in Divi) met plaatjes.
Een 1/1 kolom is dus een enkele kolom.
Twee kolommen naast elkaar zijn twee 1/2 kolommen.
Drie kolommen naast elkaar zijn drie 1/3 kolommen.
De instellingen van de kolom(men) open je via de instellingen (tandwiel-icoon) van de rij.
Elementen
Met elementen plaats je inhoud, er zijn diverse elementen die je kunt plaatsen binnen een kolom. De meest voorkomende elementen zijn tekstelementen en afbeeldingselementen. Er zijn vaak erg veel elementen te vinden binnen het bouwsysteem, dus experimenteer vooral door elementen die je niet herkent toe te voegen en te kijken wat ze doen.
Handige kleurherkenning in Divi
In het bouwsysteem van Divi kun je gemakkelijk onderscheid maken tussen secties, rijen en elementen.
Blauw: sectie
Groen: rij
Grijs: elementen
Afstand toewijzen via marge of buffer
In secties, rijen, kolommen en elementen kun je ruimte toewijzen. Dat is niet in elk thema zo maar in Divi wel, wat het stijlen van je pagina enorm flexibel maakt. De afstand-instellingen vind je bij het bewerken van iets onder het tabblad “Ontwerp”.
Wil je dat een bepaald deel van je pagina lager kom te staan? Dan voeg je wat afstand toe aan de bovenkant. Wil je dat een foto iets van de kant af komt? Voeg dan wat afstand toe aan de linker of rechterkant.
Buffer of marge?
Afstand toewijzen kan alleen op twee manieren, via buffer of marge. In het begin kan dit heel verwarrend werken omdat beide opties soms dezelfde resultaten geven. Het verschil zit ‘m in de plaatsing van de ruimte.
Stel je hebt een tekstelement gemaakt, zet er een zin in en je geeft het een rode achtergrond. De rand van de achtergrond zit dan tegen de tekst aan. Voeg je buffer-afstand toe, dan voeg je ruimte toe binnen het element. De tekst verplaatst zich van de grens van de rode achtergrond af.
Voeg je marge-afstand toe aan het tekstelement, dan verplaatst het hele element. De ruimte wordt op dit moment dus buiten het element toegepast en niet binnenin.
Een responsive website voor alle apparaten
Standaard kun je er vanuit gaan dat een thema in WordPress responsive is ingesteld. Met “responsive” wordt bedoeld dat de inhoud van de pagina mee schaalt, en goed zichtbaar is op alle mogelijke apparaat schermgroottes. Maar goed, de inhoud schaalt mee. Dat wil nog niet zeggen dat de inhoud er ook daadwerkelijk goed uitziet op alle apparaten.
Stel je stelt een titel van een pagina in op 48px lettertypegrootte. Dan is dit op de desktop hartstikke mooi, maar dit is veel te groot voor mobiel. Elk thema heeft hier vaak zijn eigen aanpak in, en tot mijn verbazing is niet elk thema hier goed in. Als webbouwer ontkom ik er niet aan, om in sommige thema’s wat CSS code te moeten schrijven.
Divi is ideaal responsive werken
In responsive werken blinkt Divi als thema uit boven de rest. Alles wat je invult en instelt, kun je wijzigen voor tablet en mobiele weergave. Wanneer je met je muis vlak (rechts) naast de optie-titel beweegt, verschijnen er een aantal opties. Eén daar van is het icoontje van een mobiel, en wanneer je daar op klikt verschijnen er ineens tabbladen. Deze tabbladen kun je gebruiken om te wisselen tussen een waarde/instelling per apparaat voor elke optie!
In het visuele bouwsysteem zit een gemakkelijke wissel, waardoor je het bouwsysteem kunt instellen op een andere weergave en dus kan controleren hoe het er uit ziet op mobiel of tablet en het vervolgens kan aanpassen. Je vind de wissel, door onderin op de paarse knop (drie horizontale stippen) te klikken en dan vind je de opties linksonderin.
