Template 4000 - Content Sjabloon

Op deze pagina vind je een compleet overzicht van de beschikbare content-elementen en stijlen die je kunt gebruiken binnen jouw webshop. Van USP-lijsten tot knoppen en iconen: per onderdeel leggen we uit hoe je het toepast, tonen we voorbeelden en bieden we de bijbehorende code. Gebruik de onderstaande inhoudsopgave om snel naar het gewenste onderdeel te navigeren.

USP-lijsten

Gebruik je een lijstje met voordelen, kenmerken of redenen om voor jouw product of dienst te kiezen? Dan kun je dat visueel mooi presenteren met de class st-usp-list.

Gestylde USP-lijst (st-usp-list)

Ideaal voor bijvoorbeeld productvoordelen, redenen om klant te worden, of pluspunten van je service.

Voorbeeldweergave

• Lorem ipsum dolor sit
• Consectetur adipisicing elit
• Adipisci illo in repudiandae tempora voluptas

Voorbeeld code

    <ul class="st-usp-list">
        <li><span>Lorem ipsum dolor sit</span></li>
        <li><span>Consectetur adipisicing elit</span></li>
        <li><span>Adipisci illo in repudiandae tempora voluptas</span></li>
    </ul>

Uitleg

• De class st-usp-list zorgt ervoor dat de lijst visueel aantrekkelijk wordt weergegeven, vaak met ✔️ of andere iconen.
• De <span> binnen elk <li>-item maakt het mogelijk om extra stijl toe te passen op de tekst zelf.

Standaard lijst (zonder styling)

Wil je een gewone opsomming zonder extra opmaak? Pas dan de volgende code toe.

Voorbeeldweergave

• Lorem ipsum dolor sit
• Consectetur adipisicing elit
• Adipisci illo in repudiandae tempora voluptas

Voorbeeld code

    <ul>
        <li><span>Lorem ipsum dolor sit</span></li>
        <li><span>Consectetur adipisicing elit</span></li>
        <li><span>Adipisci illo in repudiandae tempora voluptas</span></li>
    </ul>

Uitleg

Geen visuele aanpassingen — gewoon een normale lijst met bullets. Prima voor inhoud zonder speciale nadruk.

Informatieteksten & Meldingen

Soms wil je een stukje tekst extra laten opvallen — bijvoorbeeld om een waarschuwing te tonen, of belangrijke informatie. Daarvoor kun je onderstaande tekstblokken gebruiken.

Informatieblokken (info-text)

Voorbeeldweergave

Voorbeeld code

    <div class="info-text">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        </p>
    </div>

Uitleg

• info-text toont een tekstblok in een informatieve stijl, vaak met een lichte achtergrondkleur.
• Goed geschikt voor uitleg of extra toelichting in je content.

Donkere infoblokken (info-text__dark)

Voorbeeldweergave

Voorbeeld code

    <div class="info-text__dark">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        </p>
    </div>

Uitleg

Zelfde als info-text, maar met een donkere achtergrond. Handig voor contrast of in donkere secties van je webshop.

Waarschuwingsteksten (warning-text)

Voorbeeldweergave

Voorbeeld code

    <div class="warning-text">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        </p>
    </div>

Uitleg

warning-text geeft het tekstblok een opvallende kleur (zoals rood of oranje), bedoeld voor waarschuwingen of belangrijke aandachtspunten.

Optioneel: not-prose óf prose gebruiken

Op alle pagina's waar je geen gebruik maakt van de HPB staat, wanneer je dit hebt ingeschakeld in de backoffice, standaard een typografische styling actief via een prose class. Die zorgt voor:

• grotere marges tussen elementen
• nette afstanden tussen koppen, paragrafen en lijsten
• een prettige leesstijl

Wil je geen van die extra opmaak in een specifiek blok? Dan gebruik je not-prose.

    <div class="not-prose">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        </p>
    </div>

Wanneer gebruik je not-prose?

• Als je de stijl strak en compact wilt houden
• Bij bijvoorbeeld meldingen, blokjes met vaste hoogte, of tekst in kolommen

Liever wél extra styling? Gebruik prose

Staat de standaard styling uit en wil je juist dat een bepaald blok netjes wordt opgemaakt met fijne typografie (zoals mooie marges, verantwoorde witruimte, en gestylede lijsten of tabellen) zonder de standaard styling actief te hoeven zetten? Dan kun je de class prose gebruiken:

    <div class="prose">
        <h2>
            Lorem ipsum dolor
        </h2>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        </p>
        <ul>
            <li><span>Lorem ipsum dolor sit</span></li>
            <li><span>Consectetur adipisicing elit</span></li>
            <li><span>Adipisci illo in repudiandae tempora voluptas</span></li>
        </ul>
    </div>

Let op:

• De class prose of not-prose plaats je altijd op een <div> rond de content die je wilt beïnvloeden.
• Dit werkt niet alleen voor infoblokken, maar voor alle HTML-elementen waarbij je de tekstopmaak wilt beïnvloeden (zoals artikelen, productbeschrijvingen, blogs, etc.).

Samenvattend

• Gebruik not-prose als je géén typografische opmaak wilt.
• Gebruik prose als je juist wél automatisch gestylede tekst wilt.
• Deze classes kun je overal toepassen, zolang ze op een <div> staan die de elementen omsluit.

Tekst stijlen

Wil je de grootte van teksten op je webshop aanpassen? Dat kan eenvoudig door bepaalde CSS-classes toe te voegen aan je HTML-elementen. Hieronder leggen we uit hoe je dat doet met voorbeelden, zodat je het zelf makkelijk kunt toepassen.

1. Tekstgroottes aanpassen met text-size- classes

Gebruik een paragraaf (<p>) met een class zoals text-size-sm of text-size-xl om de tekstgrootte aan te passen.

Voorbeeldweergave

Lorem ipsum dolor sit

Lorem ipsum dolor sit

Lorem ipsum dolor sit

Lorem ipsum dolor sit

Lorem ipsum dolor sit

Voorbeeld code

    <p class="text-size-xs">Lorem ipsum dolor sit</p>
    <p class="text-size-sm">Lorem ipsum dolor sit</p>
    <p class="text-size-md">Lorem ipsum dolor sit</p>
    <p class="text-size-lg">Lorem ipsum dolor sit</p>
    <p class="text-size-xl">Lorem ipsum dolor sit</p>

Uitleg

De class text-size-xx bepaalt hoe groot de tekst is.
Je vervangt xx door:

• xs = extra klein
• sm = klein
• md = medium (standaard)
• lg = groot
• xl = extra groot

2. Kopgroottes instellen met h1 t/m h6 classes

Je kunt ook een gewone paragraaf (<p>) opmaken alsof het een kop is, zonder een echte <h1> of <h2> te gebruiken. Handig voor styling, zonder de structuur van de pagina te beïnvloeden.

Op dezelfde manier kun je ook bestaande koppen aanpassen — bijvoorbeeld een <h2> de uitstraling geven van een <h1> — door de juiste class toe te voegen.

Voorbeeldweergave

Lorem ipsum dolor sit

Lorem ipsum dolor sit

Lorem ipsum dolor sit

Lorem ipsum dolor sit

Lorem ipsum dolor sit

Lorem ipsum dolor sit

Uitleg

Deze classes geven je tekst dezelfde stijl als HTML-koppen (<h1> t/m <h6>), maar dan zonder dat je de echte HTML-kop hoeft te gebruiken.

3. Extra grote koppen met display- classes

Wil je nog grotere, opvallendere tekst voor titels of promotionele blokken? Dan kun je de display- classes gebruiken.

Deze classes kun je toepassen op verschillende HTML-elementen, zoals een <p> of een <h1> t/m <h6>, om ze visueel extra groot en opvallend te maken – zonder de HTML-structuur te hoeven aanpassen.

Voorbeeld code

    <p class="h1">Lorem ipsum dolor sit</p>
    <p class="h2">Lorem ipsum dolor sit</p>
    <p class="h3">Lorem ipsum dolor sit</p>
    <p class="h4">Lorem ipsum dolor sit</p>
    <p class="h5">Lorem ipsum dolor sit</p>
    <p class="h6">Lorem ipsum dolor sit</p>

Voorbeeldweergave

Lorem ipsum dolor sit

Lorem ipsum dolor sit

Lorem ipsum dolor sit

Lorem ipsum dolor sit

Lorem ipsum dolor sit

Lorem ipsum dolor sit

Voorbeeld code

    <h2 class="display-1">Lorem ipsum dolor sit</h2>
    <h2 class="display-2">Lorem ipsum dolor sit</h2>
    <h2 class="display-3">Lorem ipsum dolor sit</h2>
    <h2 class="display-4">Lorem ipsum dolor sit</h2>
    <h2 class="display-5">Lorem ipsum dolor sit</h2>
    <h2 class="display-6">Lorem ipsum dolor sit</h2>

Uitleg

• display-1 is het grootst
• display-6 is het kleinst

Perfect voor titels, kopteksten of landingspagina’s.

Iconen

Wil je een icoon plaatsen? Gebruik dan een <span> met de fa-icon-class en de gewenste icon-class.

Voorbeeldweergave

​ ​ ​ ​

Voorbeeld code

<span class="fa-icon fa-icon-arrow-left">&ZeroWidthSpace;</span>
<span class="fa-icon fa-icon-check">&ZeroWidthSpace;</span>
<span class="fa-icon fa-icon-envelope">&ZeroWidthSpace;</span>
<span class="fa-icon fa-icon-facebook">&ZeroWidthSpace;</span>

Uitleg

• De fa-icon-class samen met een icon-specifieke class (zoals fa-icon-check) toont het icoon.
• Het &ZeroWidthSpace; karakter voorkomt renderbugs bij sommige browsers.

Beschikbare icon-classes

Hieronder vind je de opties die je kunt gebruiken in fa-icon-... voor losse iconen of iconen in teksten of buttons. Deze iconen zijn gebaseerd op FontAwesome en passen automatisch de gekozen stijl toe die je instelt in Website uiterlijk > Algemeen > Stijl > Iconen.

Er is bewust een beperkte set iconen beschikbaar om de snelheid van de shop optimaal te houden. Mis je een specifiek icoon? Laat het ons weten; dan kunnen wij kijken of we deze voor je kunnen toevoegen.

Buttons

Wil je knoppen toevoegen aan je pagina? Gebruik dan de btn-class gecombineerd met een stijl zoals btn-primary, btn-secondary, etc. Hiermee kun je eenvoudig mooie, consistente knoppen maken.

1. Buttons zonder iconen

Gebruik onderstaande voorbeelden om knoppen zonder icon te tonen:

Voorbeeldweergave

Voorbeeld code

<a href="/link-url" class="btn btn-primary" role="button">Primary</a>
<a href="/link-url" class="btn btn-secondary" role="button">Secondary</a>
<a href="/link-url" class="btn btn-tertiary" role="button">Tertiary</a>
<a href="/link-url" class="btn btn-transparent" role="button">Transparent</a>
<a href="/link-url" class="btn btn-link" role="button">Link</a>

Uitleg

• btn is de basisklasse voor alle buttons.
• De modifier classes btn-primary, btn-secondary, btn-tertiary, btn-transparent, en btn-link bepalen de stijl.

2. Buttons met icon rechts

Gebruik has_icon_right om een icoon rechts van de tekst te plaatsen. Vervang de class van het icoon door een van de beschikbare iconen.

Voorbeeldweergave

Voorbeeld code

<a href="/link-url" class="btn btn-primary has_icon_right" role="button">
    Primary<span class="fa-icon fa-icon-arrow-right">&ZeroWidthSpace;</span>
</a>
<a href="/link-url" class="btn btn-secondary has_icon_right" role="button">
    Secondary<span class="fa-icon fa-icon-arrow-right">&ZeroWidthSpace;</span>
</a>

Uitleg

• has_icon_right zorgt voor correcte uitlijning van het icoon rechts.

3. Buttons met icon links

Gebruik has_icon_left om een icoon links van de tekst te tonen.

Voorbeeldweergave

Voorbeeld code

<a href="/link-url" class="btn btn-primary has_icon_left" role="button">
    <span class="fa-icon fa-icon-arrow-left">&ZeroWidthSpace;</span>Primary
</a>
<a href="/link-url" class="btn btn-secondary has_icon_left" role="button">
    <span class="fa-icon fa-icon-arrow-left">&ZeroWidthSpace;</span>Secondary
</a>

Uitleg

• has_icon_left zorgt voor correcte uitlijning van het icoon links.

4. Buttons groeperen met btn-group

Wil je meerdere buttons netjes naast elkaar tonen, bijvoorbeeld als een reeks acties of keuzes? Plaats de buttons dan in een <div class="btn-group">. Dit zorgt ervoor dat de knoppen mooi op één lijn staan en er visueel als groep uitzien.

Voorbeeldweergave

Voorbeeld code

<div class="btn-group">
    <a href="/link-url" class="btn btn-primary" role="button">Primary</a>
    <a href="/link-url" class="btn btn-secondary" role="button">Secondary</a>
    <a href="/link-url" class="btn btn-tertiary" role="button">Tertiary</a>
</div>

Uitleg

• De class btn-group zorgt ervoor dat alle knoppen binnen deze container netjes naast elkaar worden uitgelijnd.
• Ideaal voor bijvoorbeeld meerdere call-to-action buttons die bij elkaar horen.

5. Buttons uitlijnen met btn-group en justify-classes

Wil je de positie van één of meerdere knoppen bepalen, bijvoorbeeld gecentreerd of rechts op de pagina? Gebruik dan <div class="btn-group"> om de button(s) in te plaatsen. Dit werkt zowel voor meerdere buttons als voor een enkele button: ook bij één knop zorgt btn-group ervoor dat de uitlijnings-classes correct werken.

Voeg daarna één van de Bootstrap justify-classes toe aan de btn-group:

• justify-content-start: knoppen links uitgelijnd (standaard).
• justify-content-center: knoppen gecentreerd.
• justify-content-end: knoppen rechts uitgelijnd.
• justify-content-between: maximale ruimte tussen eerste en laatste knop, met ruimte ertussen.

Hieronder vind je voorbeelden:

Voorbeeld gecentreerde buttons

Voorbeeld code

<div class="btn-group justify-content-center">
    <a href="/link-url" class="btn btn-primary" role="button">Primary</a>
    <a href="/link-url" class="btn btn-secondary" role="button">Secondary</a>
</div>

Voorbeeld rechts uitgelijnde buttons

Voorbeeld code

<div class="btn-group justify-content-end">
    <a href="/link-url" class="btn btn-primary" role="button">Primary</a>
    <a href="/link-url" class="btn btn-secondary" role="button">Secondary</a>
</div>

Voorbeeld knoppen met ruimte ertussen

Voorbeeld code

<div class="btn-group justify-content-between w-100">
    <a href="/link-url" class="btn btn-primary" role="button">Primary</a>
    <a href="/link-url" class="btn btn-secondary" role="button">Secondary</a>
</div>

Voorbeeld gecentreerde enkele button

Voorbeeld code

<div class="btn-group justify-content-center">
    <a href="/link-url" class="btn btn-primary" role="button">Enkele knop</a>
</div>

Uitleg

• De combinatie van btn-group en een justify-content-... class bepaalt eenvoudig de horizontale positie van de knoppen.
• Gebruik btn-group ook bij een enkele button als je deze wilt uitlijnen, bijvoorbeeld gecentreerd of rechts.
• Let op: voor justify-content-between moet de btn-group meestal 100% breed zijn met w-100, zodat er ruimte is voor spreiding.

Elementen verbergen met d-none classes

Soms wil je bepaalde elementen alleen op desktop of mobiel tonen, of juist helemaal verbergen. Dit kun je eenvoudig regelen met de classes d-none-desktop, d-none-mobile en d-none.

Hoe werken deze classes?

• d-none-desktop: verbergt het element op desktop (grote schermen) en toont het alleen op mobiele apparaten.
• d-none-mobile: verbergt het element op mobiele apparaten en toont het alleen op desktop.
• d-none: verbergt het element volledig op alle apparaten.

Waar voeg je deze classes toe?

In de homepagebuilder kun je bij een rij, kolom of widget naar het tandwiel-icoontje aan de rechterkant klikken. In het veld CSS classes voeg je de gewenste class toe, bijvoorbeeld d-none-mobile of d-none-desktop.

Voorbeelden

<div class="d-none-desktop">
    <img src="/images/mobile-banner.jpg" alt="Mobiele banner">
</div>

    
<div class="d-none-mobile">
    <h2>Alleen zichtbaar op desktop</h2>
</div>

    
<div class="d-none">
    <p>Dit is overal verborgen</p>
</div>

Uitleg

• Met deze classes kun je flexibel bepalen welke content zichtbaar is op welke apparaten.
• Ideaal om specifieke banners, tekstblokken of rijen te tonen of verbergen per schermgrootte.
• Door deze classes in te vullen bij "CSS classes" in de rij-instellingen, kun je complete rijen eenvoudig verbergen zonder dat je code hoeft aan te passen.

Highlight-secties met achtergrondafbeelding

Op de homepage kun je secties maken met een speciale achtergrondafbeelding. Dit doe je door in de homepagebuilder bij de rij instellingen (te vinden onder tandwiel-icoontje aan rechter kant) de classes highlighted-section en bijvoorbeeld highlight-hamsterscaping in te vullen bij het veld CSS classes. De eerste class (highlighted-section) zorgt voor de basisstijl, terwijl de tweede class bepaalt welke specifieke achtergrondafbeelding er wordt geladen.

CSS voor de achtergrondafbeeldingen

In Website uiterlijk > CSS aanpassen voeg je per highlight-sectie CSS toe die de achtergrond instelt via een pseudo-element. Bijvoorbeeld:

.highlighted-section.highlight-hamsterscaping::before {
    background-image: var(--highlight-gradient-1), url(/images/hamsterscaping-highlight-image.jpg);
}

.highlighted-section.highlight-terrarium-op-maat::before {
    background-image: var(--highlight-gradient-2), url(/images/terrarium-op-maat-highlight-image.jpg);
}

.highlighted-section.highlight-over-ons::before {
    background-image: var(--highlight-gradient-1), url(/images/over-ons-highlight-image.jpg);
}

.highlighted-section.highlight-fokkerij::before {
    background-image: var(--highlight-gradient-2), url(/images/fokkerij-highlight-image.jpg);
}

Hoe pas je een afbeelding aan?

• Ga naar Website uiterlijk > CSS aanpassen.
• Zoek de regel met de class die je wilt aanpassen, bijvoorbeeld .highlighted-section.highlight-hamsterscaping::before.
• Vervang de URL in background-image door het pad naar je nieuwe afbeelding, bijvoorbeeld url(/images/nieuwe-afbeelding.jpg).

Waarom ook een Afbeelding-widget?

In de homepagebuilder is bij elke highlight-sectie een Afbeelding-widget toegevoegd. Dit is altijd nodig voor mobiele apparaten: daar worden achtergrondafbeeldingen die via CSS zijn toegevoegd namelijk vaak niet (goed) weergegeven. De widget zorgt ervoor dat bezoekers op mobiel de afbeelding alsnog zien, boven of onder de tekst, zodat de visuele uitstraling behouden blijft op alle schermformaten.

Op desktop is de Afbeelding-widget niet zichtbaar, doordat hier de class d-none-desktop aan is toegevoegd. Hierdoor wordt de afbeelding alleen op mobiele apparaten weergegeven, terwijl op grotere schermen de achtergrondafbeelding via CSS zichtbaar is.

Samenvattend

• De class highlighted-section activeert de speciale layout.
• De extra class, zoals highlight-hamsterscaping, bepaalt welke achtergrond er via CSS geladen wordt.
• De Afbeelding-widget is nodig voor mobiele weergave, omdat CSS-backgrounds op sommige telefoons niet zichtbaar zijn. En deze heeft de class d-none-desktop om ervoor te zorgen dat deze niet op desktops zichtbaar is.