In deze uitleg: Sidebar menu | Headermenu | Hamburgermenu | Footer | Zoekbalk | Filters | Blokken en buttons
<p><strong>In deze uitleg:</strong> <a href="#id">Sidebar menu</a> | <a href="#id">Headermenu</a> | <a href="#id">Hamburgermenu</a> | <a href="#id">Footer</a> | <a href="#id">Zoekbalk</a> | <a href="#id">Filters</a> | <a href="#id">Blokken en buttons</a></p> <div class="border-top mt-4"> </div>
<div class="border-top mt-5"> </div>
<div class="cols">
<div class="xs-12 sm-6">
<div class="info-box px-3 mb-4" >
<h3 class="text-underline mb-3">Specificaties</h3>
<ul class="info-list-bullets">
<li>Formaat 35 mm</li>
<li>Gedrukt op glanzend stickervel, 25 zegels per vel</li>
<li>Prijs per vel is €5,50</li>
</ul>
</div>
</div>
<div class="xs-12 sm-6">
<div class="info-box px-3 mb-4" >
<h3 class="text-underline mb-3">Let op:</h3>
<ul class="info-list-bullets">
<li>Deze sluitzegels komen <strong>NIET</strong> in de bestelproces te staan.</li>
<li>Levertijd is 1-2 werkdagen</li>
</ul>
</div>
</div>
</div>
<div class="content-block" id="id-nodig-voor-navigatie">
<h3 class="mt-4">Titel</h3>
<p>
Lorem ipsum dolor sit amet, test link adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.
</p>
<ul class="info-list-bullets">
<li>Lorem ipsum dolor</li>
<li>Lorem ipsum dolor</li>
<li>Lorem ipsum dolor</li>
</ul>
<p>
Lorem ipsum dolor sit amet, test link adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.
</p>
</div>
<ul class="info-list">
<li>Lorem ipsum dolor</li>
<li>Lorem ipsum dolor</li>
<li>Lorem ipsum dolor</li>
</ul>
<ol class="info-list-numbers">
<li>Lorem ipsum dolor</li>
<li>Lorem ipsum dolor</li>
<li>Lorem ipsum dolor</li>
</ol>
<ul class="info-list-bullets">
<li>Lorem ipsum dolor</li>
<li>Lorem ipsum dolor</li>
<li>Lorem ipsum dolor</li>
</ul>
Maak een tag voor je sluitzegel.
<div class="mt-4 bg-light-grey border-img"> <img alt="Maak een tag voor je sluitzegel" class="img-center img-responsive " loading="lazy" src="/media/sluitzegel-tag.png" /> </div> <p class="figcaption">Maak een tag voor je sluitzegel.</p>
Wenskaarten categorie aanmaken in het CMS.
<div class="mt-4 bg-light-grey border-img">
<div class="cols">
<div class="xs-12 sm-6 mb-3">
<img alt="Voorbeeld CMS" class="img-center img-responsive " loading="lazy" src="/media/CMS-CAT-screendump.png" />
</div>
<div class="xs-12 sm-6 mb-3">
<img alt="Voorbeeld CMS" class="img-center img-responsive " loading="lazy" src="/media/CMS-CAT-screendump2.png" />
</div>
</div>
</div>
<p class="figcaption">Wenskaarten categorie aanmaken in het CMS.</p>
Sluitzegel in de editor.
<div class="mt-4 bg-light-grey border-img">
<video class="my-3 img-center img-responsive" controls="" height="400px;" width="auto;">
<source src="/media/sluitzegel-editor.mp4" type="video/mp4" />
</video>
</div>
<p class="figcaption">Sluitzegel in de editor.</p>
De sluitzegels moeten eerst opgeslagen worden in de collectie van een klant of live staan op de site voor ze besteld kunnen worden!
<div class="warning-block">
<div class="cols">
<div class="xs-2 sm-2 md-1"><img alt="opmerking" class="img-center img-responsive warning-icon" loading="lazy" src="/media/let-op.png" /></div>
<div class="xs-10 sm-10 md-11">
<h4>Opmerking</h4>
<p>De sluitzegels <strong>moeten</strong> eerst opgeslagen worden in de collectie van een klant of live staan op de site voor ze besteld kunnen worden!</p>
</div>
</div>
</div>
Maak een algemen hoofdcategorie zoals ' Geboorte-extra producten' of 'Trouwen- extra producten'. Waarin je alle extra producten kan plaatsen.
<div class="tip-block">
<div class="cols">
<div class="xs-2 sm-2 md-1"><img alt="tip" class="img-center img-responsive tip-icon" loading="lazy" src="/media/idea.png" /></div>
<div class="xs-10 sm-10 md-11">
<h4>Tip</h4>
<p>Maak een algemen hoofdcategorie zoals <strong>' Geboorte-extra producten' of 'Trouwen- extra producten'</strong>. Waarin je alle extra producten kan plaatsen.</p>
</div>
</div>
</div>
NB: de naam is tevens ook de URL, de Titel is hoe jij het in het CMS ziet.
Bewaar door op Voeg hoofdcategorie toe te klikken. Je categorie is nu toegevoegd!
<div class="oefening-block">
<div class="cols">
<div class="xs-2 sm-2 md-1">
<img alt="opmerking" class="img-center img-responsive homework-icon" loading="lazy" src="/media/homework.jpg" />
</div>
<div class="xs-10 sm-10 md-11">
<h4>Oefening: Maak een categorie aan en vul in:</h4>
<ul class="info-list">
<li>1. Naam: test (kleine letters aan elkaar)</li>
<li>2. Titel: Test</li>
</ul>
<p><em>NB: de naam is tevens ook de URL, de Titel is hoe jij het in het CMS ziet.</em></p>
<p>Bewaar door op <strong>Voeg hoofdcategorie toe</strong> te klikken. Je categorie is nu toegevoegd!</p>
</div>
</div>
</div>
<h3 class="accordion-faq-title mt-5 mb-3" id="handig-om-te-weten">Handig om te weten!</h3>
<div class="html-box" id="kaart-omzetten">
<button class="accordion-faq">Lorem ipsum dolor </button>
<div class="panel" style="display:none;">
<ul class="info-list">
<li>Lorem ipsum dolor sit amet, test link adipiscing elit.</li>
<li>Lorem ipsum dolor sit amet, test link adipiscing elit.</li>
<li>Lorem ipsum dolor sit amet, test link adipiscing elit.</li>
</ul>
<div class="mt-4 bg-light-grey border-img">
<video class="my-3 img-center img-responsive" controls="" height="400px;" width="auto;">
<source src="/media/kaart-omzetten.mp4" type="video/mp4" />
</video>
</div>
<p class="figcaption">Kaart omzetten naar sluitzegel.</p>
</div>
</div>
<div class="html-box" id="tips">
<button class="accordion-faq">Tips</button>
<div class="panel" style="display:none;">
<ul class="info-list-bullets">
<li>Lorem ipsum dolor sit amet, test link adipiscing elit. .</li>
<li>Lorem ipsum dolor sit amet, test <a href="/" target="_blank">link adipiscing elit</a>.</li>
</ul>
<div class="mt-4 bg-light-grey border-img"><img class="show-image-on-hover img-center img-responsive" loading="lazy" src="/media/sluitzegels-relaties-bewerken.png" /></div>
<p class="figcaption">Sluitzegels aan kaart koppelen via relaties bewerken.</p>
</div>
</div>
<div class="my-3"> <a class="basic-button pull-right icon-arrow-up" href="#categories">Terug naar boven</a> </div>
Alles over verkoopcijfers, categorieën en SEO. Je shop begrijpen is je shop laten groeien.
Hoe maak ik een gebruiksvriendelijk ontwerp van een kaart? Alles ins & out over de editor.
Alles stap voor stap uitgelegd om je shop gereed te maken voor Google zoekresultaten.
<div class="bg-blue mt-5" id="ook-interessant">
<div class="container">
<h3>Ook interessant</h3>
<div class="cols">
<div class="xs-12 sm-12 md-4">
<div class="content-block" onclick="window.location.href='/cms/statistieken';">
<h4 class="content-block-title button-arrow-right">Marketing</h4>
<p>Alles over verkoopcijfers, categorieën en SEO. Je shop begrijpen is je shop laten groeien.</p>
</div>
</div>
<div class="xs-12 sm-12 md-4">
<div class="content-block" onclick="window.location.href='/editor';">
<h4 class="content-block-title button-arrow-right">Een kaart ontwerpen</h4>
<p>Hoe maak ik een gebruiksvriendelijk ontwerp van een kaart? Alles ins & out over de editor.</p>
</div>
</div>
<div class="xs-12 sm-12 md-4">
<div class="content-block" onclick="window.location.href='/seo-tips-en-tricks';">
<h4 class="content-block-title button-arrow-right">Aan de slag met SEO</h4>
<p>Alles stap voor stap uitgelegd om je shop gereed te maken voor Google zoekresultaten.</p>
</div>
</div>
</div>
</div>
</div>
<div class="bg-light-grey display-none display-md-block mt-5 " id="video-block">
<div class="container">
<h2 class="mb-4">Video tutorials <span class="see-all-videos"><a class="icon-angle-right" href="https://sites.google.com/sparkles.io/whitelabels-ondersteuning/tips-tricks/videos?authuser=0" target="_blank">Alle video's</a></span></h2>
<div class="cols">
<div class="cols sm-cols-spacing">
<div class="xs-6 xsm-6 sm-6 md-6 mb-4 card-border-padding">
<div class="card">
<video class="my-3 img-center img-responsive" controls="" width="auto;">
<source src="/media/CMS-Categorieen.mp4" type="video/mp4" />
</video>
<h4 class="text-center">Categorieën</h4>
</div>
</div>
<div class="xs-6 xsm-6 sm-6 md-6 mb-4 card-border-padding">
<div class="card">
<video class="my-3 img-center img-responsive" controls="" width="auto;">
<source src="/media/CMS-Tags.mp4" type="video/mp4" />
</video>
<h4 class="text-center">Tags</h4>
</div>
</div>
</div>
</div>
</div>
</div>