Deze pagina is standaard voor je ingericht en je hoeft hier eigenlijk niets aan te veranderen. De klant moet toestemming voor cookies geven en op deze pagina kan hij/zij nalezen waar dit voor is. Je vindt het onder ‘CMS > Content > Cookiepagina‘.
Cookiepagina bewerken in het CMS
Zodra een klant een aankoop heeft gedaan, komt hij op de bedankpagina. Je vindt deze onder CMS > Instellingen > Bedankpagina. Op deze pagina kan je de klant bedanken voor de bestelling, daarbij kun je de klant eventueel op andere leuke dingen wijzen op de site, of een kortingscode meegeven voor de volgende aankoop. Je bewerkt deze pagina net als alle andere.
Bedankpagina bewerken in het CMS
Bezoekers van jouw webshop komen op deze pagina als ze contact willen met de shophouder/klantenservice. De pagina is naar eigen wens in te richten, zoals je ook een ‘normale’ pagina inricht. Je vind de pagina onder ‘CMS > Content > Contact’. De link naar je contactpagina staat standaard in de header van je website.
Contactpagina bewerken in het CMS
De contactpagina moet naast je contactgegevens ook altijd ook je zakelijke gegevens bevatten, dit zijn onderstaande gegevens:
Door bewust te kiezen welke producten/designs je aan een kaart koppelt, kun je een potentiële klant inspireren en helpen hun kaart extra leuk en persoonlijk te maken door bijvoorbeeld een bijpassend sluitzegel toe te voegen.
Welke opties zijn er?
Hoe krijg ik al deze verschillende opties gekoppeld? En wat is raadzaam voor mij?
Wanneer je in het CMS naar > Content > Kaarten bewerken gaat, zie je de mogelijkheid om producten/designs te koppelen aan je kaarten of aankondigingsproducten.
Als hij/zij net de kaarten in het mandje heeft gelegd wil hij/zij niet aan het twijfelen gebracht worden met andere ontwerpen, maar juist met extra opties. Maar op de PDP wil ze misschien juist wel andere ontwerpen in dezelfde stijl zien!
Wanneer je op de knop ‘Relaties’ klikt, wordt een modal (extra veld) geopend waarin je de product relaties voor een bepaald ontwerp kunt instellen en/of aanpassen.
Gerelateerde producten/designs worden getoond in een slider op de PDP.
Door gerelateerde designs aan je kaart te koppelen, maak je het een potentiële klant extra makkelijk om kaarten in dezelfde stijl te bekijken. Zo hoeft een potentiële klant niet terug naar de collectie pagina. Je faciliteert op deze manier het besluitvormingsproces en helpt hopelijk de klant bij het plaatsen van een bestelling. Je kunt er ook voor kiezen om de rail te gebruiken om bezoekers te inspireren door bijpassende producten te tonen.
Als je geen gerelateerde producten toevoegt, worden automatisch andere kaarten/producten uit dezelfde categorie ingeladen. Als je wel gerelateerde producten koppelt worden enkel deze producten getoond en wordt dit niet verder aangevuld met andere automatisch ingeladen kaarten uit dezelfde categorie.
Voorbeeld van gerelateerde designs getoond in een slider op een PDP pagina van Hippe-Geboortekaartjes.
Cross-sell producten/designs worden getoond in een rail in de eigen collectie pagina of eventueel in de tweede rail op de Product Detail Pagina. Heeft een bezoeker een mooie kaart gevonden en in de eigen collectie bewaard? Op het moment dat de bezoeker terugkeert naar de eigen collectie om de kaart te bekijken, ziet deze meteen een cross-sell rail met leuke bijpassende producten en designs.
Dit moment kun je gebruiken om klanten te inspireren en helpen hun bestelling zo compleet en mogelijk te maken. Zie het als een soort herinnering om hun kaart extra leuk te maken met een strik of lint, bijvoorbeeld of door een geboortebord of bruiloftsbord als extra aankoop te tonen.
Voorbeeld van cross-sell designs/producten die getoond worden op de eigen collectie van een klant.
Upsell producten worden getoond na het bestelproces samen met aankondigingsproducten.
Plaatst de klant een bestelling zonder eerst de kaart op te slaan in haar eigen collectie? Geen probleem! Ook kun je leuke bijpassende producten laten zien na het bestelproces, net voordat de klant naar de kassa wordt geleid.
Deze rail wordt alleen getoond wanneer een klant een ‘pakket’ kiest, de upsell rail wordt niet getoond met een ‘proefdruk’.
Voorbeeld van upsell producten die getoond worden na het bestelproces (Hippe-geboortekaartjes).
Bij een design kan nu worden ingesteld welke extra’s voorgeselecteerd zijn in de bestelproces. Dit gaat via de zogenaamde ‘set-relatie’ (dit is iets anders als een bundel maken). Als je een bewerkbare sluitzegel koppelt via de set-relatie, wordt deze ook getoond in de editor. De klant kan de sluitzegel dan nog wel zelf deselecteren in de customize of winkelmand. In onderstaand voorbeeld hebben we drie extra’s toegevoegd:
Set maken in het CMS via kaarten bewerken.
Wanneer een klant vervolgens de kaart gaat bestellen, zijn in het bestelproces de extra’s standaard geselecteerd, net zoals dat het geval is met de envelopkleur.
Voorbeeld set bij het bestellen van een proefdruk (Hippe-geboortekaartjes).
Voorbeeld set bij het bestellen van een pakket (Hippe-geboortekaartjes).
De twee designs die je aan elkaar wilt koppelen upload je eerst los van elkaar op site met de juiste categorie. Dit zodat aan beide designs de juiste technische specificaties (indentiteit) en papiersoorten zijn gekoppeld.
Nadat je beide kaarten goed online hebt staan, zoek je alleen het calco voorblad nogmaals op via CMS > CONTENT > KAARTEN BEWERKEN. Je hoeft alleen deze calco kaart aan te passen en makkelijk omdat hier ook maar één papiersoort voor beschikbaar is. Hierin heeft de klant geen keuze. Dit wordt de kaart die je straks gaat koppelen aan de ‘hoofdkaart’ (achterblad). De hoofdkaart heeft geen voorkeurspapiersoort nodig want je wilt dat de klant hierin juist wel een keuze heeft. Wanneer je de calco kaart hebt opgezocht vul je bij standaard papiersoort het juiste papiersoort in.
Voorkeurspapiersoort instellen.
In dit geval Kalkpapier 110 grams. Wel belangrijk om te weten, is dat het een 150 grams papier is. Helaas is de 110 grams een benaming in onze administratie die vast staat en we niet meer kunnen aanpassen. In het winkelmandje ziet de klant overigens wel netjes 150 grams staan. Samenvatting calco papier: Kalkpapier 110 grams (dus 150 grams) > Wordt gebruikt als voorblad, schijnt beter door want dunner. Kalkpapier 200 grams (dus 200 grams) > Wordt gebruikt als enkel kaartje, is dus steviger. Beide dus enkelzijdige bedrukking, folie mogelijk.
Het calco voorblad gaan we koppelen aan de ‘hoofdkaart’. In het geval van deze set is de hoofdkaart dus het achterste kaartje. Zoek nu dus je hoofdkaart op CMS > CONTENT > KAARTEN BEWERKEN. Je kaart verschijnt, en vervolgens klik je onderaan op de oranje button relaties. Een nieuw scherm opent. Zoek vervolgens de kaart op door de titel van deze kaart op te zoeken (niet de url). Klik er vervolgens op en 4 nieuwe buttons verschijnen. Klik op de oranje aan set toevoegen button. Deze zie je vervolgens links erbij staan, bij set. Het scherm kun je nu wegklikken, en dan als vervolgens de kaart opslaan.
Deze handelingen kun je ook toepassen op andere designs die je met elkaar wilt koppelen. Zoals bijvoorbeeld het Insteekhoesje met de Kaart 11×17 tbv Insteekhoesje.
Het is niet duidelijk als alleen de preview van de hoofdkaart wordt getoond. Maak een ‘Featured Image’ met beide designs op de afbeelding. Zo toon je dat er een calco kaart bij de hoofdkaart zit.
Voorbeeld featured image kalkkaart aan hoofdkaart
In deel 1 heb je kennisgemaakt met de basis van HTML en CSS. In dit tweede deel gaan we een stap verder. Je leert hoe je elementen gerichter kunt stylen, hoe je blokken naast elkaar zet, hoe formulieren werken en hoe je een pagina beter laat meebewegen op verschillende schermgroottes.
Met class en id kun je HTML-elementen een naam geven. Daardoor kun je ze in CSS gericht opmaken.
Een class gebruik je als meerdere elementen dezelfde styling mogen krijgen.
<p class="highlight">Deze tekst valt op.</p> <p class="highlight">Deze tekst valt ook op.</p>
In CSS schrijf je dat zo:
.highlight {
background-color: yellow;
}
Een id is bedoeld voor één uniek element op de pagina.
<h1 id="hoofdtitel">Welkom op mijn pagina</h1>
In CSS schrijf je een id met een hekje:
#hoofdtitel {
color: darkblue;
}
Kort onthouden:
. in CSS betekent een class# in CSS betekent een idGebruik meestal een class. Een id gebruik je alleen als iets echt uniek is.
Beginners halen links en knoppen vaak door elkaar. Dat is logisch, want ze lijken soms op elkaar. Toch hebben ze niet dezelfde functie.
Een gewone link ziet er zo uit:
<a href="https://voorbeeld.nl">Lees meer</a>
Een knop ziet er zo uit:
<button>Versturen</button>
Je kunt een link met CSS ook laten lijken op een knop:
<a href="#" class="button-link">Start nu</a>
.button-link {
display: inline-block;
background-color: #0066cc;
color: white;
padding: 12px 20px;
text-decoration: none;
border-radius: 6px;
}
Hiermee blijft het technisch een link, maar ziet het eruit als een knop.
In deel 1 heb je gezien hoe je een afbeelding toevoegt met <img>. Nu gaan we kijken hoe je die mooier kunt stylen met CSS.
<img src="bloem.jpg" alt="Een gele bloem" class="foto">
.foto {
width: 300px;
border-radius: 12px;
}
Wat gebeurt hier?
Wil je dat een afbeelding netjes meeschaalt met het scherm, dan is dit vaak handiger:
.foto {
max-width: 100%;
height: auto;
}
Dan wordt de afbeelding nooit breder dan de ruimte die beschikbaar is.
Formulieren gebruik je wanneer iemand iets moet invullen. Denk aan een contactformulier, zoekbalk of inlogscherm.
Een simpel formulier kan er zo uitzien:
<form> <label for="naam">Naam</label> <input type="text" id="naam" name="naam"> <label for="bericht">Bericht</label> <textarea id="bericht" name="bericht"></textarea> <button type="submit">Versturen</button> </form>
De belangrijkste onderdelen zijn:
<form> is het formulier zelf<label> is het label bij een veld<input> is een invulveld<textarea> is een groter tekstvak<button> is de verzendknopEen label is belangrijk, omdat het duidelijk maakt wat iemand moet invullen. Ook voor toegankelijkheid is dit erg goed.
Je kunt formulieren ook stylen:
input,
textarea {
width: 100%;
padding: 10px;
border: 1px solid #cccccc;
border-radius: 6px;
margin-bottom: 16px;
}
button {
background-color: #0066cc;
color: white;
padding: 12px 18px;
border: none;
border-radius: 6px;
}
Met de CSS-eigenschap display bepaal je hoe een element zich gedraagt in de layout.
| Waarde | Betekenis |
| block | Het element begint op een nieuwe regel en vult meestal de volle breedte |
| inline | Het element blijft in de lopende regel staan |
| inline-block | Het blijft in de regel staan, maar je kunt wel breedte en hoogte meegeven |
Een paragraaf is standaard meestal een block-element. Een span is standaard inline.
Voorbeeld:
.blok {
display: block;
}
.inline-tekst {
display: inline;
}
.knopje {
display: inline-block;
}
Een link die op een knop moet lijken krijgt vaak inline-block, zodat padding goed werkt.
Met position kun je elementen preciezer plaatsen. Dit is voor beginners vaak wat lastiger, dus zie dit vooral als een eerste kennismaking.
De meest gebruikte waarden zijn:
static, de standaardpositierelative, het element blijft op zijn plek maar kan iets verschoven wordenabsolute, het element wordt los geplaatst ten opzichte van een ouder-elementVoorbeeld:
.box {
position: relative;
}
.label {
position: absolute;
top: 10px;
right: 10px;
}
Hiermee kun je bijvoorbeeld een klein label rechtsboven in een kaart zetten.
Belangrijk om te onthouden: een element met position: absolute; kijkt vaak naar het dichtstbijzijnde ouder-element met position: relative;.
Flexbox is een heel handige manier om elementen naast elkaar te zetten en netjes te verdelen. Dit wordt veel gebruikt in moderne websites.
Stel dat je twee blokken naast elkaar wilt tonen:
<div class="row"> <div class="kolom">Blok 1</div> <div class="kolom">Blok 2</div> </div>
.row {
display: flex;
gap: 20px;
}
.kolom {
background-color: #f2f2f2;
padding: 20px;
flex: 1;
}
Wat gebeurt hier?
display: flex; zet de blokken naast elkaargap: 20px; maakt ruimte tussen de blokkenflex: 1; zorgt dat beide blokken evenveel ruimte krijgenAndere handige flexbox-eigenschappen zijn:
| Eigenschap | Wat doet het? |
| justify-content | Verdeelt de ruimte horizontaal |
| align-items | Lijnt items verticaal uit |
| flex-direction | Bepaalt of items naast of onder elkaar staan |
| flex-wrap | Laat items doorlopen naar een nieuwe regel als er te weinig ruimte is |
Voorbeeld:
.row {
display: flex;
justify-content: space-between;
align-items: center;
}
Een website wordt bekeken op verschillende schermen, zoals mobiel, tablet en desktop. Responsive design betekent dat je layout zich aanpast aan het scherm.
Een veelgebruikte techniek hiervoor is een media query.
@media (max-width: 768px) {
.row {
flex-direction: column;
}
}
Wat betekent dit?
Dat is handig op mobiel, omdat daar minder horizontale ruimte is.
Nog een paar responsive tips voor beginners:
max-width: 100% dan vaste breedtes voor afbeeldingenHier zie je een simpel kaartblok met afbeelding, titel, tekst en knop:
<div class="card"> <img src="voorbeeld.jpg" alt="Voorbeeld afbeelding" class="card-image"> <h2>Leer HTML en CSS</h2> <p>Met kleine stappen kom je al heel ver.</p> <a href="#" class="button-link">Lees meer</a> </div>
.card {
max-width: 400px;
padding: 20px;
border: 1px solid #dddddd;
border-radius: 10px;
background-color: #ffffff;
}
.card-image {
max-width: 100%;
height: auto;
border-radius: 8px;
margin-bottom: 16px;
}
.button-link {
display: inline-block;
background-color: #0066cc;
color: white;
padding: 12px 18px;
text-decoration: none;
border-radius: 6px;
}
Dit is een mooi voorbeeld waarin meerdere dingen samenkomen:
Maak een blok met:
<div class="blok"> <h2>Welkom</h2> <p>Dit is mijn eerste contentblok.</p> <a href="#" class="button-link">Bekijk meer</a> </div>
.blok {
padding: 20px;
background-color: #f3f3f3;
}
.button-link {
display: inline-block;
background-color: #0066cc;
color: white;
padding: 10px 16px;
text-decoration: none;
}
Maak twee blokken naast elkaar met flexbox.
<div class="row"> <div class="kolom">Links</div> <div class="kolom">Rechts</div> </div>
.row {
display: flex;
gap: 20px;
}
.kolom {
flex: 1;
background-color: #eeeeee;
padding: 20px;
}
Zorg dat twee kolommen op mobiel onder elkaar komen te staan.
@media (max-width: 768px) {
.row {
flex-direction: column;
}
}
id meerdere keren op dezelfde pagina gebruikendisplay: flex; op het ouder-element moet staanposition: absolute; gebruiken zonder te begrijpen ten opzichte van welk element het geplaatst wordtIn dit tweede deel heb je geleerd hoe je HTML-elementen beter kunt aansturen met class en id, hoe links en knoppen van elkaar verschillen, hoe formulieren werken en hoe je met flexbox en media queries een layout beter kunt opbouwen. Dit zijn belangrijke bouwstenen voor bijna elke moderne webpagina.
Het belangrijkste is dat je klein begint. Bouw eerst een simpel blok, style dat met CSS en voeg daarna pas nieuwe dingen toe. Zo houd je overzicht en leer je het snelst.
Maak zelf een klein profielkaartje met:
Geef het kaartje een achtergrondkleur, padding, afgeronde hoeken en zorg dat de afbeelding netjes meeschaalt. Als dat lukt, heb je al een heel mooie basis te pakken.
Naast kaartjes heb je ook beschikking tot producten die je kunt verkopen, zoals sluitzegels. Net als bij kaartjespagina’s maak je ook productpagina’s aan waar je dit op kunt laten zien. We leggen je uit hoe je dit doet.
Als het goed is heb je al aangegeven welke producten jij in je shop wilt hebben. Je kunt deze vinden onder CMS > Content > Producttypen. Je kunt daar de beschrijving hiervan aanpassen als je dat beter lijkt.
CMS > Content > producttypen
Via CMS > Content > Product bewerken kom je op de plek waar je al jouw producten ziet. Hier ga je aan de slag om je producten een eigen tekst mee te geven en kun je de producten koppelen aan bepaalde kaartcategorieën.
Er staan al standaard teksten geschreven bij de titel, lange tekst en korte tekst. Toch is het handig om je eigen teksten te schrijven:
Bij URL staat niets geschreven. Elk product heeft een standaard url, wil je dat niet, dan kun je hier je eigen URL schrijven.
Producten bewerken in het CMS
Bij live event vink je de life events aan waarbij je dit product wilt tonen. Dit is belangrijk als je in het bestelproces dit producttype laat zien. Voorbeeld: Een geboortesluitzegel wil je bijvoorbeeld niet tonen bij communiekaarten.
Het maken van pagina’s met producten gaat helemaal op dezelfde manier als het maken van pagina’s met kaarten. Behalve één ding: je vinkt ‘custom content + producten’ aan in plaats van ‘custom content + kaarten’.
Je ziet dan aan de onderkant de verschillende producttypes verschijnen. Vink de producttypes aan die je wilt tonen op de pagina. De rest van de instellingen kun je net zo invullen en instellen als de kaartenpagina’s.
HTML en CSS vormen samen de basis van veel websites. HTML gebruik je om de inhoud op te bouwen, zoals koppen, teksten, links en lijsten. CSS gebruik je om die inhoud op te maken, zoals kleuren, ruimte, lettergroottes en uitlijning. In deze handleiding leer je stap voor stap de basis kennen, zonder ingewikkelde technische taal.
Probeer de oefenen op deze pagina
HTML staat voor HyperText Markup Language. Het is de structuur van een webpagina. Je kunt het zien als het skelet van een huis. Met HTML geef je aan wat iets is: een titel, een paragraaf, een link, een lijst of een afbeelding.
HTML werkt met elementen. Een element herken je meestal aan een openingstag en een sluitingstag.
<p>Dit is een paragraaf</p>
In dit voorbeeld is <p> de openingstag en </p> de sluitingstag. Alles daartussen is de inhoud.
CSS staat voor Cascading Style Sheets. CSS bepaalt hoe HTML eruitziet. Denk aan kleur, lettertype, marges, achtergrondkleur en de grootte van elementen.
Zie HTML als de inhoud van een kamer, en CSS als de inrichting en styling ervan.
p {
color: blue;
font-size: 18px;
}
In dit voorbeeld krijgen alle paragrafen een blauwe kleur en een lettergrootte van 18 pixels.
Een simpele HTML-structuur kan er zo uitzien:
<h1>Welkom op mijn pagina</h1> <p>Dit is mijn eerste stukje tekst.</p> <a href="https://voorbeeld.nl">Klik hier</a>
Hier zie je drie verschillende elementen:
<h1> voor een hoofdtitel<p> voor een paragraaf<a> voor een link| Element | Waarvoor gebruik je het? |
| <h1> t/m <h6> | Voor koppen en tussenkoppen |
| <p> | Voor gewone tekst in alinea’s |
| <a> | Voor links |
| <ol> | Voor een genummerde lijst |
| <ul> | Voor een lijst met bullet points |
| <li> | Voor een item binnen een lijst |
| <div> | Voor het groeperen van grotere blokken |
| <span> | Voor kleine stukjes tekst binnen een regel |
| <img> | Voor afbeeldingen |
| <strong> | Voor belangrijke tekst, meestal vetgedrukt |
| <em> | Voor nadruk, meestal schuingedrukt |
| <br> | Voor een regelafbreking |
Koppen gebruik je om structuur aan te brengen in je pagina. De <h1> is de belangrijkste kop op de pagina. Daarna volgen <h2>, <h3> enzovoort.
<h1>Mijn website</h1> <h2>Over mij</h2> <h3>Mijn hobby's</h3>
Gebruik koppen niet alleen omdat ze groot zijn, maar vooral omdat ze structuur geven aan de inhoud.
Een paragraaf gebruik je voor gewone tekstblokken.
<p>Ik leer stap voor stap hoe HTML werkt.</p>
Bijna alle lopende tekst op een pagina staat in een <p>-element.
Met het <a>-element maak je een link. Het adres zet je in het attribuut href.
<a href="https://www.google.com">Ga naar Google</a>
Wat tussen de tags staat, is de klikbare tekst.
Je kunt ook een link in een nieuw tabblad openen:
<a href="https://www.google.com" target="_blank">Open Google in nieuw tabblad</a>
Let op: gebruik links het liefst voor echte verwijzingen naar andere pagina’s, niet alleen om tekst op te maken.
Er zijn twee veelgebruikte soorten lijsten:
De items in de lijst zet je altijd in <li>-elementen.
Voorbeeld van een lijst met bullets:
<ul> <li>Appels</li> <li>Bananen</li> <li>Peren</li> </ul>
Voorbeeld van een genummerde lijst:
<ol> <li>Open je editor</li> <li>Schrijf HTML</li> <li>Bekijk het resultaat</li> </ol>
Dit is een belangrijk verschil in HTML.
Een <div> is een blok-element. Het wordt vaak gebruikt om grotere delen van een pagina te groeperen, zoals een kaart, een sectie of een kolom.
<div> <h2>Nieuwsbericht</h2> <p>Dit is een kort nieuwsbericht.</p> </div>
Een <span> is een inline element. Dat betekent dat het binnen een regel blijft. Je gebruikt het vaak om een klein stukje tekst apart te stylen.
<p>Deze tekst heeft een <span>belangrijk woord</span> erin.</p>
Kort gezegd:
<div> voor grotere blokken of groepen<span> voor kleine stukjes tekst binnen een regelMet <img> voeg je een afbeelding toe. Dit element heeft geen sluitingstag.
<img src="bloem.jpg" alt="Een gele bloem">
Hierbij betekent:
src: het pad naar de afbeeldingalt: een beschrijving van de afbeeldingDe alt-tekst is belangrijk voor toegankelijkheid en wordt ook gebruikt als de afbeelding niet geladen kan worden.
Wil je een woord of zin extra nadruk geven, dan gebruik je vaak:
<strong> voor belangrijke tekst<em> voor nadruk<p>Dit is <strong>heel belangrijk</strong>.</p> <p>Lees dit <em>goed</em> door.</p>
Sommige HTML-elementen hebben extra informatie nodig. Die zet je in attributen.
<a href="https://voorbeeld.nl">Bezoek de website</a>
In dit voorbeeld is href een attribuut.
Andere veelgebruikte attributen zijn bijvoorbeeld:
class voor CSS-stylingid voor een uniek elementsrc voor afbeeldingenalt voor alternatieve tekstEen class gebruik je om een element een naam te geven die je in CSS kunt gebruiken.
<p class="intro">Dit is een introductietekst.</p>
In CSS kun je deze class dan zo stylen:
.intro {
font-size: 20px;
color: darkblue;
}
De punt voor .intro in CSS betekent dat je een class aanspreekt.
CSS kun je op meerdere manieren toevoegen, maar voor de basis is het handig om te begrijpen hoe HTML en CSS samenhangen.
Stel dat je deze HTML hebt:
<p class="highlight">Deze tekst valt op.</p>
Dan kun je met CSS zeggen hoe dat element eruit moet zien:
.highlight {
background-color: yellow;
padding: 10px;
}
Zo geef je die paragraaf een gele achtergrond en wat binnenruimte.
| CSS-eigenschap | Wat doet het? |
| color | Bepaalt de tekstkleur |
| background-color | Bepaalt de achtergrondkleur |
| font-size | Bepaalt de lettergrootte |
| font-weight | Maakt tekst bijvoorbeeld vet |
| text-align | Lijnt tekst links, rechts of gecentreerd uit |
| margin | Ruimte buiten een element |
| padding | Ruimte binnen een element |
| border | Geeft een rand om een element |
| width | Bepaalt de breedte |
| height | Bepaalt de hoogte |
Hieronder zie je een klein stukje HTML:
<div class="kaart"> <h2>Welkom</h2> <p>Leuk dat je hier bent.</p> <a href="#">Lees meer</a> </div>
En dit is de bijbehorende CSS:
.kaart {
background-color: #f5f5f5;
padding: 20px;
border: 1px solid #dddddd;
}
.kaart h2 {
color: #333333;
}
.kaart a {
color: #0055cc;
}
Wat gebeurt hier?
div krijgt een lichtgrijze achtergrondBeginners halen deze twee vaak door elkaar, dat is heel normaal.
Zie het als een doos:
.box {
padding: 20px;
margin: 30px;
border: 1px solid black;
}
Maak zelf een simpele introductie met:
Probeer eerst zelf. Kijk daarna pas naar het voorbeeld hieronder.
<h1>Welkom op mijn pagina</h1> <p>Ik ben aan het leren hoe HTML werkt.</p> <a href="https://voorbeeld.nl">Bekijk meer</a>
Maak een boodschappenlijst met minimaal drie items. Gebruik hiervoor een ongenummerde lijst.
<ul> <li>Brood</li> <li>Melk</li> <li>Kaas</li> </ul>
Maak een blok met een titel en tekst, en geef dat blok via CSS een achtergrondkleur en padding.
<div class="info-blok"> <h2>Over deze cursus</h2> <p>Je leert hier de basis van HTML en CSS.</p> </div>
.info-blok {
background-color: #eeeeee;
padding: 20px;
}
</p><li> buiten een lijstclass in HTML gebruiken, maar die naam niet goed in CSS terug laten komen<br>-tags gebruiken voor ruimte, terwijl je eigenlijk CSS-margin of padding nodig hebtdiv gebruiken waar een beter semantisch element logischer zou zijnSemantische HTML betekent dat je elementen gebruikt op basis van hun betekenis. Dus niet zomaar alles in een <div> zetten, maar nadenken over wat iets echt is.
Bijvoorbeeld:
<h1> of <h2><p><ul> of <ol>Dit maakt je code duidelijker, netter en beter voor zoekmachines en toegankelijkheid.
Als je een stukje content wilt bouwen, denk dan steeds in deze volgorde:
Bijvoorbeeld: je wilt een kaartje maken met een titel, tekst en knop. Dan begin je met HTML voor de structuur, en pas daarna voeg je CSS toe voor de vormgeving.
<div class="content-blok"> <h2>HTML en CSS leren</h2> <p>Met een paar basisregels kun je al snel veel maken.</p> <a href="#">Start direct</a> </div>
.content-blok {
background-color: #f8f8f8;
padding: 24px;
border-radius: 8px;
}
.content-blok a {
color: #0066cc;
font-weight: bold;
}
Je hebt nu kennisgemaakt met de basis van HTML en CSS. HTML gebruik je om de inhoud en structuur van een pagina op te bouwen. CSS gebruik je om die inhoud op te maken. De belangrijkste HTML-elementen voor beginners zijn koppen, paragrafen, links, lijsten, divs en spans. Zodra je begrijpt wat elk element doet, wordt het veel makkelijker om pagina’s logisch op te bouwen.
De beste manier om dit te leren is door veel kleine stukjes zelf te maken, uit te proberen en te bekijken wat er gebeurt.
Probeer zelf een klein profielblok te maken met:
Geef het blok daarna in CSS een achtergrondkleur, padding en een rand. Als dat lukt, heb je de belangrijkste basis al goed te pakken.
Probeer op deze pagina zelf
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 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:
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 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.
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 klikken.
Er opent dan het volgende scherm:
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 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:
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 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.
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 zoals 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>
De mail om je klant na de bestelling feedback te laten geven via Feedback Company staat los van de andere mails. Jij bepaalt zelf of je dit wilt gebruiken.
Feedback Company instellingen
Het is mogelijk om koppelingen te maken van je sociale media of Google Analytics met je site. Team White Labels regelt dit voor je wanneer je de juiste gegevens aanlevert.
De meest voorkomende koppelingen zijn:
Redirects zijn automatische koppelingen van de ene naar de andere pagina.
Redirects gebruik je wanneer je bezoekers van een pagina automatisch naar een andere pagina wilt sturen.
Je kunt redirects maken via CMS > Content > Pagina’s. Klik op Pagina toevoegen.
Redirects maken in het CMS
De rest van de velden hoef je niet in te vullen. Klik op Pagina toevoegen om de redirect op te slaan.
Je kunt pas een redirect maken van een pagina als deze eerst is verwijderd. Dit geldt niet voor productpagina’s of categoriepagina’s.
Neem gerust contact met ons op, ons Support team staat voor je klaar!
