Belknop maken met html en css

Belknop in css gr1

Submit to FacebookSubmit to TwitterSubmit to LinkedIn

 

Je komt op een website en snel informatie, dan kun je contact opnemen via het contactformulier of gelijk bellen, dat is met een desktop of een laptop natuurlijk geen probleem.

Want tegenwoordig is het heel normaal dat je snel contact op kunt nemen als dit nodig is, het liefst met zo min mogelijk moeite.

Bekijk je de website op een mobiele telefoon kun je ook contact opnemen via het contactformulier maar wil je contact opnemen door te bellen moet je eerst het telefoonnummer onthouden of opschrijven, dit duurt te lang en de bezoekers klikken weg.

De oplossing hiervoor is een belknop, als hier op wordt geklikt gaat de telefoon naar de contactenlijst en er kan gelijk gebeld worden.

Belknop of WhatsApp op je website

Voor de mobiele telefoon heb ik 2 oplossingen namelijk een belknop of een berichtje via het zeer populaire WhatsApp, maar hoe kun je dit toepassen op je eigen website zonder weer een plugin te moeten gebruiken.

In deze blog ga ik dit uit leggen zodat je zelf ook een belknop of een knop voor WhatsApp op je website hebt staan. Eerst zal je de afbeeldingen moeten hebben van een knop voor het bellen en/of WhatsAppen.

De onderstaande afbeeldingen zijn nu ook zichtbaar op een desktop maar dienen alleen als voorbeeld. Ze werken wel gewoon maar op een desktop gaat dit niet lukken. Op een mobiel werkt dit perfect, test dit maar eens.

 

Ik maak deze plaatjes met Photoshop, maar dit zou je ook met canva kunnen doen, deze online tool heeft vele mogelijkheden om zoiets te maken.

Voor de plaatje van het belknopje en de afbeelding van WhatsApp kun je het zipbestand downloaden, hier heb ik ook de html code instaan die je kunt gebruiken om de knopjes te linken aan je telefoonnummer. Download het zip bestand.


Pak het bestand uit, hierin staan 5 bestanden, 2 plaatjes en 3 tekstbestanden die je op de website kunt plaatsen. Je kunt natuurlijk ook je eigen plaatjes gebruiken met een mobiele telefoon ofzo, wat je zelf leuk vindt. Nu moeten deze plaatjes eerst op de webserver komen van je website, upload daarvoor de plaatje eerst naar de imagemap.

Nu moet je een artikel of module gaan maken zodat de plaatje zichtbaar worden op je website, maak daarvoor een artikel of module aan, zelf gebruik ik hier een module voor zodat deze op alle gewenste plaatsen zichtbaar kan worden gemaakt. Als je een nieuwe module hebt aangemaakt plaats je de gewenste plaatjes hierin.

Nu ga je het plaatje koppelen aan je telefoonnr, dubbelklik hiervoor op het bel mij plaatje.

WhatsApp linken2

 

Ga dan naar het ketting symbooltje, dan kom je hier. Vul bij de url tel:0612345678.
Vul hier je eigen nr in incl. tel: ervoor.

Belknop linken2

 

Vergeet niet om op update te klikken. Voor het symbool van WhatsApp doe je hetzelfde, alleen vul je bij de url nu de code https://api.whatsapp.com/send?phone=31612345678 gebruik hier je eigen telefoonnr voor. Deze code staat ook in het tekstbestand wat in de download staat.

Als er nu op het WhatsApp symbool wordt geklikt komt de bezoeker in zijn eigen WhatsApp omgeving uit om een bericht te sturen.

Media Queries toevoegen aan de css van je template

Nu moet er nog worden voorkomen dat de belknop en het WhatsApp knopje word weergegeven op een desktop, alleen weergeven op een mobiel apparaat is nodig omdat er met een desktop toch niet kan worden gebeld of een WhatsApp kan worden verstuurd.

Hiervoor moet er een nieuwe class voor worden aangemaakt die voorkomt dat de plaatje van de belknop en WhatsApp zichtbaar zijn op een desktop of laptop.

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.

Ga voor de eerste regel staan en klik op enter, nu krijg je een lege eerste regel waar je de class neerzet die er voor zorgt dat de plaatje alleen op een mobiel scherm zichtbaar zijn, helemaal onderaan sluit je de Div weer af met </div> net als in het voorbeeld. De code die je daar neerzet is:

<div class="belwhats"> Hier staan de plaatjes en teksten</div>

Nu gaan we de class in de template zetten zodat deze uitgevoerd wordt en de plaatje alleen zichtbaar zijn op schermen die kleiner zijn dan 480px wat meestal mobiele schermen zijn. Ga naar extenties-templates nu kom je op de pagina waar alle templates staan die op je website staan.

Als voorbeeld gebruiken we nu Protostar welke standaard in Joomla aanwezig is. Ga nu naar de rechtse rij met de naam template:

  • klik nu op protostar
  • maak een nieuw bestand aan met de naam user
  • kies bij bestandstype voor css, klik nu bij de mappen op css en dan op maken
  • let er wel op dat je nieuwe bestand bij css komt te staan anders werkt het niet

Open het nieuwe user.css bestand, nu moet je het onderstaande bestand er naar toe kopieren. De class naam belwhats moet beginnen met een punt dus dat is geen schrijffout.

/******** Belknop en WhatsApp knopje******/
@media screen and (min-width: 480px) {
.belwhats{
display:none;
}
}

Als je een ander template gebruikt zoek dan naar user.css of custom.css. Nu zou het moeten werken, controleer dit door je scherm kleiner te maken of de website te openen op je telefoon.

Het nadeel hiervanvan is dat dit alleen voor gebruikers van een Android telefoon of een iPhone is te gebruiken, de gebruikers van een oude Blackberry of Windows telefoon kunnen hier geen gebruik van maken omdat het eenvoudigweg niet gaat werken.

Kun je er niet uitkomen.

 

 

Wil jij mij ook helpen deze artikelen te delen?
Voor jou één simpele muisklik op deze pagina, voor mij een zeer gewaardeerd cadeautje!

Submit to FacebookSubmit to TwitterSubmit to LinkedIn