Na de activatie van de Nieuwsbrief pop-up kan je deze verder gaan instellen en aanpassen naar eigen smaak.
Dit doe je door te gaan naar: Backoffice (linkermenu) > Add-ons > Nieuwsbrief popup
Hier krijg je de volgende mogelijkheden om te wijzigen.
1. Wijzigen van de Lay-Out van de nieuwsbrief door middel van onder andere lettertypes, kleuren en achtergrondafbeeldingen aan te passen.
2. Vervolgens kan je natuurlijk ook nog jouw eigen tekst invoeren. Hieronder zijn wat voorbeelden geplaatst.
Voorbeeld code voor Landingspagina voor inschrijving (basis)
Voor de Landingspagina voor inschrijving hebben wij voorbeeldcode geschreven die je kunt overnemen door te klikken op broncode en onderstaande code erin te plakken.
<div class="newslettersLandingWrapper"> <div class="newslettersLandingLeft"> <p><img src="https://media.shoptrader.com/images/newletter_women_pointing-min.jpg" /></p> </div> <div class="newslettersLandingRight"> <div class="newslettersLandingRightPadding"> <h1><span style="font-size:23px;">Meld je aan voor onze nieuwsbrief</span></h1> <div class="newslettersLandingRightCHecks">Blijf altijf op de hoogte van onze acties en aanbiedingen!</div> <br /> Vul het e-mailadres in waarop je onze nieuwsbrief wilt ontvangen en ontvang 5% korting<br /> <br /> |EMAIL|</div> <div class="newslettersLandingRightDOB"> <h2>Houd je van verrassingen?</h2> Vul je geboortedatum in als je door ons op jouw verjaardag verrast wilt worden<br /> |DOB|</div> <div class="newslettersLandingRightSubmit">|SUBMIT|</div> <div class="newslettersLandingRightPadding">|CAPTCHA|</div> <div class="newslettersLandingRightPadding">Lees <a href="/privacy/" target="_blank">hier</a> hoe wij met jouw gegevens omgaan</div> </div> </div>
Dit ziet er dan ongeveer zo uit:
Mocht je wat willen ontwerpen gebruik dan de volgende methode om velden te plaatsen. Voor een e-mailveld gebruik |EMAIL|. Geboortedatum kan ook maar is optioneel. Dit kan door |DOB| te plaatsen. Voor een verzendknop gebruik |SUBMIT|. En vergeet niet de reCaptcha te plaatsen d.m.v. |CAPTCHA|. Dit laatste is verplicht. Uiteraard kun je zelf css plaatsen onder website uiterlijk, css.
Voorbeeld code voor Landingspagina voor succes
Voor de Landingspagina voor inschrijving hebben wij voorbeeldcode geschreven die je zo kunt overnemen.
<div class="newslettersLandingWrapper success"> <div class="newslettersLandingLeft"> <p><img src="https://media.shoptrader.com/images/newletter_women_pointing-min.jpg" /></p> </div> <div class="newslettersLandingRight"> <div class="newslettersLandingRightPadding"> <h1><span style="font-size:23px;">Bedankt voor je aanmelding</span></h1> <p>We hebben een bevestigingsmail gestuurd naar uw e-mail adres.<br /> </p> <p>Ontvang 5% korting op jouw eerste bestelling, gebruik hiervoor couponcode <strong>5PROCENTKORTING</strong><br /> </p> <p>Vanaf nu ontvang je wekelijks onze nieuwsbrief met de laatste acties en nieuwe producten.</p> </div> </div> </div>
Dit ziet er dan ongeveer zo uit:
Voorbeeld code voor Landingspagina voor bevestiging mail
Voor de e-mailbevestigingen hebben wij voorbeeldcode geschreven die je zo kunt overnemen. Deze wordt dus niet verstuurd wanneer de mailchimp integratie aan staat. Dit komt omdat mailchimp ook nog een verificatiemail stuurt.
<table align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px;">
<tbody>
<tr>
<td style="border-left: solid 1px #e9e9e9; border-right: solid 1px #e9e9e9; border-top: solid 1px #e9e9e9; background:#fafafa;text-align:center;"><img alt="" src="https://media.shoptrader.com/images/newletter_women_pointing-newsletter-header.jpg" style="vertical-align: bottom;" /></td>
</tr>
<tr>
<td style="border-left: solid 1px #e9e9e9; border-right: solid 1px #e9e9e9; border-bottom: solid 1px #e9e9e9; padding:20px; font-family:lucida sans unicode,lucida grande,sans-serif; color:#3f37b3; font-size:16px;">
<h1 style="text-align: center;"><strong><span style="color:#292929;">Welkom bij onze nieuwsbrief!</span></strong></h1>
<p><span style="color:#292929;">Vanaf nu ontvang jij de beste aanbiedingen, nieuwste artikelen en handige tips in jouw inbox.</span></p>
<div style="border:2px dotted #fe6f27; padding: 20px; text-align: center;"><span style="color:#002664;">Ontvang 5% korting op jouw eerste bestelling<br />
<strong>5PROCENTKORTING</strong></span></div>
<p><span style="color:#292929;"><strong>Nog vragen?</strong></span></p>
<p><span style="color:#292929;">Neem gerust contact met ons op</span></p>
</td>
</tr>
</tbody>
</table>Dit ziet er dan ongeveer zo uit:
Veel gestelde vragen
Vraag
Hoe kan ik de pop-up zien? Ik zie die namelijk niet!
Antwoord
Je kunt deze zien door in je browser cookies te blokkeren. Zelf configureren wij bijvoorbeeld de add-on in FireFox om het resultaat te zien in Crome waar cookies geblokkeerd zijn. (vergeet deze niet weer aan te zetten anders werken veel sites niet)