Zo maak je makkelijk een Bel- en WhatsApp-knop met HTML en CSS
Vergroot je Conversies: Voeg Bel- en WhatsApp-knoppen toe
Wist je dat veel mobiele bezoekers afhaken als contact opnemen lastig is? Met een handige belknop en WhatsApp-knop op je website maak je het super makkelijk om direct in contact te komen. In dit artikel leg ik stap voor stap uit hoe je deze knoppen toevoegt met eenvoudige HTML en CSS.
Waarom zijn Bel- en WhatsApp-knoppen belangrijk?
In een snelle digitale wereld willen mensen snel en makkelijk contact. Een klik op de knop en ze kunnen direct bellen of een berichtje sturen!
- Betere gebruikerservaring: Bezoekers kunnen snel contact opnemen.
- Meer conversies: Makkelijk contact = meer klanten.
- Professionele uitstraling: Je laat zien dat je meegaat met de tijd.
Stap-voor-stap Handleiding
1. Maak mooie knop-afbeeldingen
Gebruik programma’s zoals Canva of Photoshop om knoppen te ontwerpen. Wil je snel beginnen? Download dan onze gratis set met afbeeldingen en voorbeeldcode:
2. Upload je afbeeldingen naar de server
Upload de knop-afbeeldingen naar de mediabibliotheek van je Joomla website. Je kunt de knoppen plaatsen in een artikel of nog handiger: in een module. Zo bepaal je zelf waar ze zichtbaar zijn, bijvoorbeeld alleen in de mobiele weergave.
3. Voeg de knoppen toe aan je website
Gebruik de gratis JCE-editor om gemakkelijk je knoppen in te voegen.
Belknop instellen
Link de bel-afbeelding aan jouw telefoonnummer. Klik op het plaatje, druk op het ketting-icoontje en vul je nummer in, bijvoorbeeld tel:+31612345678.
WhatsApp-knop instellen
Voor WhatsApp gebruik je een andere linkstructuur: https://wa.me/31612345678. Dit kan je ook doen door alleen tekst te linken als je geen afbeelding wilt gebruiken.
Voorbeeldafbeeldingen koppelen
4. Knoppen alleen zichtbaar maken op mobiel
Voeg onderstaande CSS toe aan je user.css of custom.css bestand:
/***** Bel- en WhatsApp-knop alleen mobiel zichtbaar ******/
@media screen and (min-width: 720px) {
.bel-whatsappknop {
display: none;
}
}
Plaats je knoppen in een div met de class bel-whatsappknop zodat ze alleen op smartphones zichtbaar zijn.
Bovenstaande bel- en whatapp knoppen zijn op een desktop nu wel zichtbaar en werkend maar dat is alleen als voorbeeld.
Tip: Gebruik een Pagebuilder
Kom je er niet uit met HTML en CSS? Gebruik dan een gratis pagebuilder zoals SP Pagebuilder Lite voor Joomla 5. Hiermee kun je eenvoudig modules maken zonder technische kennis.
Samenvatting
Een bel- of WhatsApp-knop op je website zorgt voor snellere communicatie, meer klantcontact en een professionele uitstraling. Begin vandaag nog en verhoog je conversies!
Veelgestelde vragen
Werken de knoppen op alle smartphones?
Ja, ze werken op bijna alle moderne telefoons. Test het wel altijd even.
Kan ik de knoppen aanpassen aan mijn huisstijl?
Ja, gebruik je eigen ontwerpen of bewerk de voorbeeldafbeeldingen naar wens.
Hoe voorkom ik dat de knoppen op desktop zichtbaar zijn?
Met de juiste CSS-code zijn ze alleen zichtbaar op mobiele apparaten.
Bekijk ook onze andere populaire artikelen: