Zelf een bel- en Whatsappknop maken met html en css
Boost je Conversies: Voeg een Slimme Bel- en WhatsApp-knop toe aan je Website
Heb je er wel eens bij stilgestaan hoe frustrerend het kan zijn voor mobiele bezoekers om contact met je op te nemen? In dit artikel leer je hoe je eenvoudig een bel- en WhatsApp-knop aan je website kunt toevoegen. Zo maak je het voor je bezoekers een fluitje van een cent om direct met je in gesprek te gaan!
Waarom zijn Bel- en WhatsApp-knoppen zo belangrijk?
Laten we eerlijk zijn: in deze snelle, mobiele wereld wil niemand tijd verspillen aan het onthouden of opschrijven van telefoonnummers. Met één tikje direct bellen of appen? Dat is pas gebruiksvriendelijk!
- Verbeterde gebruikerservaring: Maak het je bezoekers zo makkelijk mogelijk.
- Hogere conversieratio's: Hoe makkelijker het contact, hoe groter de kans op conversie.
- Professionele uitstraling: Laat zien dat je met je tijd meegaat.
Stap-voor-stap: Zo voeg je de knoppen toe
1. Creëer je knop-afbeeldingen
Eerst heb je aantrekkelijke afbeeldingen nodig voor je knoppen. Je kunt hiervoor tools als Photoshop of Canva gebruiken. Wil je snel aan de slag? Download dan hieronder de voorbeeldafbeeldingen en benodigde code:
De code staat in een tekstbestand en de afbeeldingen zijn 2 jpeg bestanden die je eventueel kunt aanpassen in een bewerkingsprogramma.
2. Upload de afbeeldingen
Zorg ervoor dat je de knop-afbeeldingen uploadt naar de juiste map op je webserver. Bij Joomla is dit de media map.
Je kunt de knoppen in een artikel zetten maar het is veel eenvoudiger om de knoppen aan te maken in een module, zo kun je zelf bepalen waar en wanneer deze zichtbaar zijn. Je kunt de knoppen dan bijvoorbeeld in je footer laten verschijnen op de mobiele weergave.
3. Voeg de knoppen toe aan je website
Nu komt het leuke deel! We gaan de knoppen daadwerkelijk aan je site toevoegen en ze ook actief maken als er op wordt geklikt. Voor deze uitleg gebruik ik de gratis jce editor voor het schrijven van artikelen.
Voor de belknop:
Nu ga je het plaatje linken aan je telefoonnr, klik hiervoor op het bel mij plaatje zodat het geselecteerd wordt.
Ga dan naar het ketting symbooltje, (groene pijl). Vul hier je eigen nr in incl. tel: ervoor, dus tel:+31610721564
Voor de Whatsapp knop:
De stappen zijn gelijk aan het toevoegen van de belknop alleen het plaatje en de code is anders, waarbij je voor de belknop je telefoonnummer moest ingeven bij de URL is dat bij de Whatsapp knop een code met je telefoonnr:
Wil je er geen plaatje voor gebruiken maar een tekst zoals: Stuur snel een berichtje via Whatsapp en je linkt de tekst aan de code https://wa.me/31610721564 dan werkt dit uiteraard ook.
Gebruik hiervoor wel je eigen telefoonnummer, deze code staat ook in de download.
4. Alleen zichtbaar op mobiel met CSS en Media Queries
We willen deze knoppen alleen tonen op mobiele apparaten. Voeg daarom de volgende CSS toe aan je user.css of custom.css bestand in je template, deze zijn te vinden in de Systeem > Website templatestijlen > Klik hier bij Template aan de rechterkant op de betreffende template die je gebruikt voor je website, klik bij /media/templates/site(naam template) op css.
Gebruik je de standaard template Cassiopeia maak hier dan een nieuw css bestand aan met de naam user.css, bij andere templates is meestal custom.css al aanwezig, bij de Astroid template in ieder geval wel.
Plaats daarin de onderstaande code om de afbeeldingen alleen op een mobiel zichtbaar te maken.
/***** Belknop en WhatsApp knopje******/
@media screen and (min-width: 720px) {
.bel-whatsappknop{
display:none;
}
}
Bovenstaande knoppen zijn wel zichtbaar op een desktop/laptop en zijn ook werkend, dit is alleen als voorbeeld bedoelt, op je mobiel kun je het testen.
Nu de code aanwezig is in de template moet deze nog worden aangeroepen zodat de afbeeldingen alleen zichtbaar zijn op een mobiel. Om dit te doen moet je een class toevoegen aan je module of artikel, open hiervoor je artikel in de code editor, bij JCE is dat rechtsbovenaan het artikel blok, nu zie je de code van je artikel of module.
Zorg ervoor dat je de knoppen in een div met de class 'bel-whatssappknop' plaatst. De naam van de class maakt niks uit als je deze maar gelijk houd aan wat er in de template staat.
Dit zal er dan zo ongeveer uitzien:
<div class="bel-whatssappknop">
hiertussen staan de afbeeldingen dan in html code
</div>
Gebruik van een pagebuilder
Kom je er niet goed uit en loop je vast met het gebruik van HTML en CSS dan kun je het ook gaan proberen met een Pagebuilder, voor Joomla 5 is er een gratis versie van SP Pagebuilder om te downloaden, maak dan een module aan met de pagebuilder en roep deze op in je artikel.
Conclusie
Door het toevoegen van handige bel- en WhatsApp-knoppen maak je je website niet alleen gebruiksvriendelijker, maar ook professioneler. Je laat zien dat je bereikbaar bent en meebeweegt met de wensen van je bezoekers. Probeer het vandaag nog uit en zie je conversies stijgen!
Veelgestelde vragen:
Werken deze knoppen op alle apparaten?
De knoppen werken op de meeste moderne smartphones, testen en je weet het.
Kan ik de knoppen aanpassen aan mijn huisstijl?
Absoluut! Gebruik je eigen ontwerpen of pas de voorbeeldafbeeldingen aan in een foto-bewerkingsprogramma.
Hoe zorg ik ervoor dat de knoppen niet storen op desktop?
Dankzij de CSS-code worden de knoppen automatisch verborgen op grotere schermen. Zo houd je je desktop-versie netjes en overzichtelijk.
Heb je nog vragen of loop je ergens tegenaan? Aarzel dan niet om contact op te nemen. We helpen je graag verder!
Meest gelezen artikelen