Laatste update: 19-05-2023
In deze uitleg: Tekst opzetten | Afbeeldingen plaatsen | Blokken en buttons
Als het goed is heb je voor je homepage een design aangeleverd bij team White Labels en hebben zij dit voor je gebouwd. Ben je al even bezig met je site, dan kan het zijn dat je hier dingen op wilt aanpassen, of dat je zelf andere pagina’s meer opmaak wilt geven.
Kopieer altijd voordat je aanpassingen aan je pagina doet de broncode (onder source) van de pagina en bewaar deze ergens op je eigen computer. Als er dan iets misgaat bij het aanpassen, kun je altijd de originele code weer plakken in source om een functionerende pagina te hebben.
In deze handleiding leggen we de volgende dingen uit:
Op elke pagina heb je tekst nodig. In het CMS kun je makkelijk zelf teksten schrijven en heb je veel knopjes om je te helpen. Als je boven een icoontje zweeft, verschijnt de uitleg eronder.
Met deze knopjes kom je al een heel eind! Maar we leggen graag nog wat meer uit.
Een tekst bestaat vaak uit verschillende alinea’s met kopjes erboven. Deze kopjes dienen voor SEO en voor de orde op je pagina. Het belangrijkste kopje is je ‘H1 Koptekst’ die je meestal al ingevuld hebt. H1 staat voor Heading 1. Er mag maar één H1 per pagina zijn; ook op de home.
De alinea’s die onder de H1 komen en een kopje hebben, krijgen een H2 kopje en alinea’s die onder het onderwerp van de H2 horen, krijgen een H3 kopje. Hier kunnen er meerdere per pagina van zijn. Je kunt makkelijk het kopje als H2 of H3 zetten door de juiste heading te selecteren:
Op je site komt dit er afhankelijk van jouw styling er zo uit te zien:
Klik je op het knopje van ‘source’, dan zie je het op deze manier:
Het gebruik van H1, H2 of H3 gaat níet alleen om de styling, maar de logische opbouw is ook belangrijk voor SEO! Je kunt dus niet zomaar een H3 gebruiken omdat het mooi staat, terwijl dit voor een onlogische opbouw zorgt.
Alinea’s kun je bij ‘source’ terugvinden als de tekst tussen <p> en </p>
Soms verwijs je in je tekst naar een andere pagina van je site of naar een pagina buiten je site. Je kunt een link toevoegen door de tekst te selecteren en op het 'link' icoontje te te klikken.
Er opent dan het volgende scherm:
Hier vul je de URL in waar je heen linkt. Hier vul je de URL in waar je heen linkt. Is dit een pagina op je eigen site, dan hoef je alleen het gedeelte vanaf de eerste slash (/) in te vullen.
Link je naar een pagina buiten je site (zoals naar postzegels van PostNL, dan klik je vervolgens op het tabblad ‘Target’. Daar kun je kiezen om de link in een nieuw tabblad op internet te laten openen, zodat je klant niet van je site weg gaat. Je kiest dan voor ‘Nieuw Window (_blank)’.
Je kunt ook linken naar een gedeelde op dezelfde pagina. Dit werkt via ‘Anchor tags’. Op de plaats waar je heen wilt linken zet je bij source dit gedeelte: <a name=”TEKST”></a>.
Nu kun je hier heen gaan linken. Hiervoor zijn 2 manieren: .
Bij ‘Link Type’ kies je voor ‘Link to anchor in the text’.
Hier kies je de juiste anchor tag. Bij ‘Element Id’ hoef je niets in te vullen.
Als je op ‘OK’ klikt, wordt de link aangemaakt.
Controleer altijd even op de pagina of de links werken.
Je kunt eenvoudig opsommingen plaatsen met de volgende knopjes:
Je moet hier echter nog wel opmaak aan toevoegen, omdat dit per shop verschillend is. Op jouw pagina /styleguide kun je zien wat de html code is. Bijvoorbeeld:
Als je nu bij het bewerken van je pagina naar ‘source’ gaat, zie je ook deze html, alleen dan zonder het stukje 'class="..." ’. Voeg je dat stukje in bij je <ul> of <ol>, dan komt de opmaak goed te staan.
Je kunt ook zonder de knopjes voor opsommingstekens direct de html die je op /styleguide vindt bij ‘source’ plakken en dan aanpassen. In plaats van 'List item 1', 'List item 2' enz. vul je je eigen teksten in.
Op je site wil je niet alles onder elkaar hebben staan, maar soms ook naast elkaar. Voor je home is dit al mooi opgemaakt door Sparkles. Wil je op andere pagina’s ook zoiets doen, dan kijk je eerst of de code al op /styleguide staat.
Wil je later iets aanpassen, dan is het handig om te weten hoe het precies werkt.
De breedte van je kolommen wordt bepaald aan de hand van een cijfer. De standaard volledige breedte is 12, de halve breedte is 6 en 1/3e breedte is 4. Met deze cijfers kun je bepalen hoe tekst of blokken op laptop, tablet en mobiel worden getoond.
In de code zie je waarschijnlijk zoiets als dit staan:
<div class="xs-12 xsm-12 sm-6 md-6 lg-6">
Hier zie je de cijfers in terugkomen. Elke afkorting die ervoor staat heeft met een andere schermbreedte te maken.
Bij het voorbeeld hierboven staat het stukje dus op mobiel op volledige breedte, maar op tablet en desktop in 2 kolommen.
Wil je je pagina’s opmaken met afbeeldingen (denk bijvoorbeeld aan navigatieblokken met een afbeelding van jongensgeboortekaartjes erin), dan moet je deze afbeeldingen eerst uploaden op de site en dan verwerken op de betreffende pagina.
In het CMS > Bestandsbeheer bewaar je de afbeeldingen die je gebruikt in de shop. Het bewaren van een afbeelding doe je door deze te ‘uploaden’. Je upload de afbeelding zo klein mogelijk.
Dat houdt in:
Wanneer je de afbeelding upload kan je kiezen voor de optie om de afbeelding te comprimeren door het systeem. Hiermee maakt hij de afbeelding iets kleiner door bepaalde pixels weg te nemen die ons oog niet waarneemt.
Heb je dit zelf al gedaan, met een andere tool (bijvoorbeeld tinypng.com) dan kan je deze functie beter uitvinken.
Rechts zie je de gegevens van de afbeelding staan. ‘Bestand-URL’ geeft de url van de afbeelding weer. Deze heb je nodig om de afbeelding op pagina’s te zetten.
Als je een bepaalde afbeelding wilt tonen op een pagina dan is het de volgende link die je moet gebruiken:
/media/BESTANDSNAAM
Dus voor de afbeelding van de Broers & Zus kaarten genaamd “03-blok_broerzus.png” wordt het dan: /media/03-blok_broerzus.png
Om afbeeldingen op een pagina te zetten is wel verstand van html nodig. Je moet dit namelijk via de broncode invoeren. Je kunt veel html vinden op /styleguide.
Lukt het niet? Schakel dan Support White Labels in.
Je hebt met Sparkles besproken hoe je je site eruit wilt laten zien. Hierbij zitten ook blokken en buttons op bijvoorbeeld de home. Als het goed is wordt dit volledig aan je afgeleverd.
Wanneer je site groeit, kan het zijn dat je op andere pagina’s ook blokken of buttons toe wilt voegen en wanneer je even onderweg bent, wil je misschien teksten of afbeeldingen van blokken en buttons wijzigen. Daarom maakt Sparkles voor jou een Styleguide aan. Je kunt dit vinden via /styleguide.
Heb je dit zelf al gedaan, met een andere tool (bijvoorbeeld tinypng.com) dan kan je deze functie beter uitvinken.
In de styleguide vind je van alles wat met de styling van jouw site te maken heeft, ook over blokken en buttons. Je ziet steeds een voorbeeld en daaronder staat de html hiervan. Deze kun je kopiëren en op je pagina plaatsen en daar aanpassen.
Buttons
Voorbeelden:
Blok:
<a class="button button-secundary--light" href="#">Button secundary light</a>
Button:
<div class="xsm-12 sm-6">
<div class="main-categories__item"><a href="#"><img class="img-responsive" loading="lazy" src="/media/hochzeitkarten1.png" alt=”Happy File” /> <span class="button button-sw-right">Happy Text</span> </a></div>
</div>