In dit document leggen we graag uit hoe je de standaard elementen van je website kan stylen. Aangezien in de meeste gevallen de workflow van het thema en de naamgeving van de styling instellingen vrij voordehandliggend zijn, gaan we alleen maar in op de locatie van de instelling en wat je er mee kunt. We gaan in dit document ervan uit dat we de styling opties zoals: kleur, tekst, lettertype, letterdikte, en lettergrootte niet hoeven toe te lichten.
De globale styling instellingen vind je op iedere pagina en op ieder bericht rechtsboven (naast het zwarte vierkant met wit tandwieltje). Het tandwiel is bedoeld voor de pagina specifieke instellingen (pagina/bericht niveau). Het zwarte Affiliate Held logo is bedoeld voor de globale styling instellingen (gehele website).
Klik op het logo. Er worden nu nieuwe velden getoond met twee opties: 1) Algemeen en 2) Elementen. We leggen ze één voor één uit.
Onder deze instellingen vind je globale styling instellingen voor je gehele website.
Responsiviteit betekent dat de website zich aanpast aan het apparaat/scherm waarmee de bezoeker je website bekijkt. Hoe beter dit is ingericht, des te beter de gebruikservaring is en de zoekmachines je website beter waarderen.
Breekpunten zijn misschien wel het belangrijkste als je het hebt over een responsieve website. Een breekpunt zorgt er makkelijk gezegd voor dat de website herkent bij hoeveel pixels het design moet overschakelen naar een ander design. Standaard staat het breekpunt voor een tablet op 1024px en mobiel 768px. Dit betekent dat als het scherm kleiner wordt dan 768 pixels het design van de website veranderd wordt naar de mobiele styling. Hetzelfde geldt voor de tablet. Wanneer het scherm kleiner wordt dan 1024 pixels wordt het design van de website aangepast naar de styling voor tablets. Een ander correct woord voor breekpunt is in dit geval “omslagpunt”. Het is het punt waar één design “breekt” en het volgende design wordt getoond.
Onder deze instellingen vind je globale styling instellingen voor standaard website elementen. Klik op Elementen en vervolgens “Selecteer een optie”. Hier kun je kiezen uit de volgende standaard elementen:
Het “body” element is de <body>-tag van je website. Het
<body>
element bevat alle content van een HTML document zoals “koppen, paragrafen, afbeeldingen, links, tabellen, etc. Met dit body element kun je je hele website voorzien van globale styling.
Een link, ook wel een hyperlink genoemd, is een klikbare tekst. Als je hier op klikt wordt de websitebezoeker naar een andere webpagina doorgestuurd. De links op je website kan je stylen met deze functie. Je kunt bij deze de kleur van de tekst, maar ook de hover kleur veranderen. De hover kleur is de kleur die getoond wordt zodra er met de cursus over de link wordt bewogen. Dit geeft een extra aantrekkend visueel effect. Daarnaast kun je de letterdikte kiezen en de link onderstrepen.
Een kop, in webdesign ook wel heading genoemd, kan dienen voor verschillende zaken. Je gebruikt koppen voor het begin van een tekst of hoofdstuk aan te duiden (titel). Ook worden koppen gebruikt om een goede rangschikking te kunnen maken. Door koppen te gebruiken maken we een tekst dus leesbaar en geven we het begin aan van een nieuwe alinea. Voor de koppen kun je de kleur, het lettertype en de letterdikte instellen.
Een paragraaf is een sectie met “platte” tekst. Met deze instelling kun jij de teksten, ook wel paragrafen, op je website stylen. Voor de styling voor paragrafen kun je gebruik maken van keurstyling, je kan de lettertype aanpassen en de lettergrootte aanpassen (op ieder device). Deze styling opties hebben effect op alle <p>-HTML elementen.
Het element lijst is
Met het label duiden we op het <label>-HTML element. Dit element wordt vaak gebruikt boven een invoerveld. Hier een duidelijk voorbeeld:
In het Element kunnen we de kleur, het lettertype, de lettergrootte en de letterdikte stylen.
Een invoerveld is een veld waar een website bezoeker zelf tekst in kan schrijven. Invoervelden zijn bijvoorbeeld beschikbaar bij (contact)formulieren. Invoervelden komen vaak in combinatie voor met labels (nummer 3.4 van dit document):
Met deze globale styling instellingen kan je de volgende elementen van het invoerveld aanpassen:
Binnen deze styling instellingen zijn vier opties die wellicht minder vanzelfsprekend zijn. Deze lichten we daarom uitgebreider toe:
Een knop is, wederom, een element wat niet veel uitleg verschaft. Een knop is een knop en daar kun je op klikken waar een actie aan gekoppeld is. Vaak noemen we dit een Call-To-Action-Knop (CTA-knop). Een knop is een veelgebruikt element op je website en kan daarom ook handig zijn om deze te stylen. Binnen het element “knop” kun je de volgende instellingen aanpassen:
Voor alle iconen die op je website te vinden zijn (die gebruik maken van een HTML <svg>-tag), kun je ook globaal de styling aanpassen. Zie welke opties beschikbaar zijn in de afbeelding hieronder.
Met “onderschrift” bedoelen we de aanvullende beschrijving onder afbeeldingen (zie afbeelding hieronder). Deze balk met tekst kan desgewenst via de globale styling instellingen ook voorzien worden van “standaard” styling. Zo hoef je dit niet bij iedere afbeelding opnieuw in te stellen.
Hieronder zie je welke mogelijkheden je hebt om het onderschrift globaal te stylen.
Het element “paginering” zijn de nummers die het aantal pagina’s aanduiden wanneer je je bevind in een archief of categorie (zie afbeelding hieronder). Door op deze nummers te klikken navigeer je door de beschikbare berichten.
Zie hieronder welke opties beschikbaar zijn voor het paginering element.
Met een scheidingslijn wordt het <hr>-HTML element bedoeld. Dit element is aanwezig in onze “scheidingslijn” blok. Hierdoor kun je gemakkelijk alle scheidingslijnen tegelijk stylen.
Heb je na het lezen van dit document vragen gekregen, kom je er niet uit of wil je gewoon contact met ons? Vul dan ons contactformulier in of stel een vraag in onze community.
Dit bericht heeft nog geen reacties