Knop maken WordPress voor ‘nieuwsbrief ontvangen’

Je wilt een knop maken in WordPress. Gebruik één van de buttons met de juiste kleur uit dit bericht. Ik heb zowel knoppen met de tekst: ‘Nieuwbrief ontvangen’ als blanco buttons voor WordPress. Je kunt deze instructie gebruiken voor knoppen maken. Maar intussen is een nieuwe tool gekomen, genaamd Da Button Factory. Mogelijk lost dit het probleem al op. Lees deze handleiding knoppen maken door, als je wilt weten hoe je een knop binnen WordPress kunt plaatsen. Deze blog gaan in op knop maken voor nieuwsbrief, voor een ‘Tell a friend knop’, een ‘Stel een vraag button’ en ‘Stuur een reactie’ knop. Lees deze blog.

knop-maken-wordpress-website-mailto-link

Stappen button of knop maken WordPress:

  1. Kies een WordPress knop en download de button ‘nieuwsbrief ontvangen’
  2. Upload hem naar je WordPress website (via Media toevoegen)
  3. Voeg de WordPress knop toe aan je bericht of pagina
  4. Mailto-link invoegen onder de gemaakte knop of button

Ad 1 Knop kiezen

Kies de knop die je nodig hebt. De voorbeeldknoppen onder hebben al de tekst: ‘nieuwsbrief ontvangen’, maar eronder staat een link naar een blanco button die je zo kunt gebruiken. Gebruik bij gebruik van blance knop het programma Paint op je computer als tool om een knop te maken met een eigen tekst erop. Sla het bestand op als .png bestand. Download een knop via de rechtermuisknop: opslaan als.

 HTML link code onder deze knop: “Stuur mij voortaan de nieuwsbrief“:

Download blanco oranje knop (button zonder tekst)knop maken

HTML link code onder deze knop: “Vertel een vriend button over deze nieuwsbrief“:

button-maken-met-html-link-grijsDownload blanco grijze knop (button zonder tekst)

HTML link code onder deze knop: “Aanmeldbutton voor congres / bijeenkomst button“:

button-maken-WordPressDownload blanco groene knop (button zonder tekst)

HTML link code onder deze knop: “Informeer ons button, geef uw mening button” (CC & BCC):

knoppen-maken-mailto-linkDownload blanco blauwe knop (button zonder tekst)

Ps. Ik heb deze knoppen voor in WordPress gemaakt via Canva.com. De maat van het Canvas heb ik op 300 bij 100 pixels gesteld. Ik heb op het woord ‘button’ gezocht binnen de mediabank van Canva. Is een gratis plaatje! De kleur van de button heb ik ingesteld via de kleurkeuze bolletjes. Ook lettertype en letterkleur. Het lettertype boven heet Times Roman 16 pixels.

Ad 2 Knop toevoegen aan WordPress CMS

Ga binnen je WordPress dashboard naar (admin): Media toevoegen / Nieuw bestand. Kies het plaatje van de gekozen knop (zie stap 1) vanaf je pc.

knop op website plaatsen

Stap 3: knop toevoegen aan bericht of pagina WordPress

Ga binnen het WordPress CMS naar je bericht of pagina waar je de knop wilt toevoegen voor bijvoorbeeld ‘aanmelden nieuwsbrief’, druk enter na de tekst waaronder je de knop wilt. (gewoon in de visuele editor). Gebruik vervolgens de knop ‘Media toevoegen‘.

blanco-knop-in-bericht-pagina-WordPress

ad 4 mailto-link maken / link toevoegen aan knop

Ga nu naar de Bewerk instellingen van het plaatje (zie voorbeeld onder deze alinea), centreer eventueel het plaatje via icoon centreren. Ga naar het ‘potloodje’ binnen de editor van het plaatje. Je ziet op 2/3 van de pop-up de functie ‘link naar’ (dit is een dropdown menu, open dit en kies optieaangepaste url’. Haal http:// eerst uit dit veld weg. Nu ontstaat een veld waar je de mailto-link kunt inplakken.Plak één van de volgende codes (met jouw emailadres erin!)

bewerking-button-of-knop-WordPress

Gebruik deze mailto links voorbeelden als basis

Ik heb de mailto link al voor je gemaakt. Bekijk nu hieronder alle voorbeelden van stukjes HTML code die je daar kunt plakken. Merk op dat je een onderwerpregel kunt toevoegen, maar dat de code %20 (=twintig) steeds staat voor een spatie. Dus gebruik geen spaties!!! Pas de mailto link aan: 1) Voeg je eigen emailadres in op de plek van ‘jenaam@domein.nl’ en laat de rest van de link gelijk (je kunt de onderwerpzin natuurlijk wel veranderen naar je smaak). Zoals je kunt zien, is elke HTML mailto code nu live te testen via het rondje knopje ‘test’. Het werkt dus al wel!

Mailto-link 1: verzoek via standaardmail

mailto:jenaam@domein.nl?subject=Graag%20ontvang%20ik%20de%20nieuwsbrief,%20hierbij%20mijn%20mailadres%20[druk%20Verzenden]
knop-maken-in-WordPress

Mailto-link 2: Tell a friend via email

mailto:jenaam@domein.nl?subject=Ik%20tip%20je%20als%20vriend%20voor%20deze%20nieuwsbrief!&body=Je%20kunt%20aanmelden%20bij%20deze%20website:%3A%0Ahttp://www.domein.nl/aanmelden
knop-maken-in-WordPress

Mailto-link 3: Simpel retour formulier (4 velden) per email

mailto:jenaam@domein.nl?subject=Aanmelden%20bijeenkomst%20HHT%2023%20november%202015%20te%20Drimmelen&body=Bedrijfsnaam%3A%0AUw%20naam%3A%0AAdresgegevens%3A%0AE-mailadres%3A%0A
knop-maken-in-WordPress

Mailto-link 4: Reactie via de website link in HTML. Mail aan 2 of 3 personen

mailto:jenaam@domein.nl?subject=Informeer%20ons!&cc=collega@jedomein.nl&bcc=collega2@jedomein.nl&body=Deel%20uw%20wens%20of%20suggestie%20met%20ons
knop-maken-in-WordPress

  • Code geplaatst in de knop? Sla je pagina dan nu op (via Publiceer’ of ‘Bijwerken’) en test de gratis aanmeldknop even uit.

Waarom knop toevoegen en geen kale link?

Zonder aanmeldbutton is het minder wervend, vind ik

Geen button maken

Een button maken, geeft vast meer aanmeldingen… Maak het design liever zo:

nieuwsbrief-button-maken-en-in-website-plaatsen

HTML email code plaatsen onder button

Kies een HTML oplossing en pas de code aan aan je situatie. Dit is het instructie plaatje voor het WordPress CMS: je plakt dus de mailto-link op de plek van ‘aangepaste url’ in het bewerkingscherm waar je in komt, door op het plaatje te gaan staan in het WordPress CMS. Dus in je bericht ga je naar het plaatje, je pakt het potloodje en gaat naar ‘geavanceerd’.

mailto-link-onder-je-linkknop

* ‘mailto’ is een html attribuut die linkt naar een mailprogramma op de pc van de webbezoeker, zodat bij drukken op de aanmeld button een mailtje zich automatisch opent. De webbezoeker hoeft alleen nog op verzend te drukken. Simpel. Thats’ all.

Dat waren de vier stappen voor button maken voor website. KLAAR!

Groet,
Gerben G van Dijk

Reacties zijn welkom natuurlijk. En delen van dit bericht mag natuurlijk altijd.id=plaatjemedia20

Heb je iets aan mijn WordPress blog gehad? Laat het mij merken! Link, deel of mail. Of huur mij in als WordPress webredacteur Utrecht.
Share on LinkedInShare on FacebookTweet about this on TwitterPin on PinterestShare on Google+Email this to someone

Comments

  1. Op mijn website ( in de site) heb ik een blog om mijn foto’s met code naar klanten te sturen.
    Mijn vraag is hoe krijg ik mijn blog op de frontpage in de rij van home portfolio enz. geplaatst? Gaat dat hetzelfde als je uitleg van nieuwsbrief ?

    Groet Petra

    • Heb je in het WordPress in het dashboard bij weergave gekeken? Je wilt vast geen losse button, maar je navigatiebalk, je WordPress menu aanpassen. Onder weergave zou het woord ‘menu’ moeten zitten.

      Je kunt aldaar item toevoegen en in plaats van een pagina een link plakken die behoort bij je blog (start) pagina. Dus je neemt geen pagina op in je menu. Gewoon nieuw Menu-item en via knopjes ontdekken waar je link kunt plakken. Je stelt de link in. Verder kun je menu items op juiste volgorde slepen. Zo niet. Stuur mij screenshots via shift+printscreen, dan help ik je verder op weg met WordPress button maken in je menu. Mogelijk schrijf ik er een aparte blogtitel over hoe WordPress menu aanpassen. Beantwoord dit je vraag die je stelde aan gerbengvandijk.nl? Gerben

  2. Hoi Gerben,
    je kunt ook bij Da Button Factory eigen buttons maken. Ken je die ook al?

Trackbacks

  1. […] het bericht knop maken voor nieuwsbrief volgen, een grafiek is een plaatje en importeren in de media gaat op dezelfde […]

En ja, reageer gerust

*