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.
Belangrijk voordat je begint
Kopieer altijd voordat je aanpassingen aan je pagina doet de broncode 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. Sla de bestaande code dus eerst ergens op, zodat je deze altijd nog terug kunt zetten. Verstuur daarnaast altijd een testmail om te controleren of alles goed werkt.
In deze handleiding leggen we de volgende dingen uit:
Tekst opzetten
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.
1.1 Knopjes
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:
Opmerking
Het gebruik van H1, H2 of H3 gaat niet 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.
1.2 Alinea’s
Alinea’s kun je bij ‘source’ terugvinden als de tekst tussen <p> en </p>.
1.3 Links
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 klikken.
Er opent dan het volgende scherm:
Link naar pagina op eigen site
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 naar andere site
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)’.
Link naar gedeelte op dezelfde pagina
Je kunt ook linken naar een gedeelte 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 hierheen linken. Hiervoor zijn 2 manieren:
- Dit werkt altijd: vul bij het woord wat je wilt linken naar het gedeelte op de pagina dit in bij de URL: #TEKST
- Dit werkt alleen als de beide gedeeltes in de ‘Pagina inhoud’ zitten of beide gedeeltes in de ‘Pagina footer’. Klik op het link symbooltje, waarna het volgende scherm opent:
Link type
Bij ‘Link Type’ kies je voor ‘Link to anchor in the text’.
Select an Anchor
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.
Tip
Controleer altijd even op de pagina of de links werken.
1.4 Opsommingen
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:
Opmaak uit de Styleguide
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.
1.5 Kolommen
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.
Aanpassen en code
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.
- xs = mobiel
- xsm = breed mobiel
- sm = smalle tablet
- md = tablet
- lg = desktop
Bij het voorbeeld hierboven staat het stukje dus op mobiel op volledige breedte, maar op tablet en desktop in 2 kolommen.
Afbeeldingen plaatsen
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.
2.1 Afbeelding uploaden
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:
- Gebruik afmetingen die niet groter zijn dan hoe de afbeelding op de site wordt laten zien op een groot scherm
- Comprimeer de afbeelding zoveel mogelijk voor je deze upload
Afbeelding comprimeren
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.
Opmerking
Heb je dit zelf al gedaan, met een andere tool zoals 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.
2.2 Afbeelding plaatsen
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.
Blokken en buttons
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.
Styleguide
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.
Opmerking
Heb je dit zelf al gedaan, met een andere tool zoals tinypng.com, dan kan je deze functie beter uitvinken.
Html
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
Wat moet je aanpassen?
- Tekst in blok / button
- Alt-tekst bij afbeelding
- Link naar afbeelding
- Link naar pagina waar het blok / button heen linkt. Dit is in de code op /styleguide aangegeven met een ‘#’. Dit vervang je door de paginalink vanaf de eerste slash, zoals bijvoorbeeld ‘/geboortekaartjes’.
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>
