Lien pour appel telephonique sur mobile

Ajouter un numéro de téléphone cliquable

Le 27/12/2022 0

Dans Tricks CSS pour site e-monsite

Vous pouvez ajouter un numéro de téléphone cliquable sur votre site, qui reste affiché au défilement de la page. 

Pour ajouter un numéro de téléphone cliquable sur votre site, vous pouvez l'ajouter dans une page, avec l'outil Lien hypertexte. Dans un éditeur visuel, sélectionner le texte pour faire le lien et choisissez dans l'outil Lien hypertexte, le type de lien téléphone. 

Exemple : 0123456789

Vous pouvez également ajouter le code en HTML avec ce type de code : 

<a href="tel:+33123456789">0123456789</a>

Pensez à modifier l'indicatif selon votre pays (+33 pour la France, +32 pour la Belgique, +41 pour la Suisse par exemple).

Ajouter un lien d'appel sur mobile

Le lien peut aussi être inséré sur le côté du site, dans un élément flottant (affiché au même endroit même au défilement de la page) et sur mobile uniquement. Voici une méthode pour réaliser cela. 

Le code HTML pour afficher le numéro de téléphone - on y ajoute une classe :

<a href="tel:+33123456789" class="tel-flottant"><i aria-hidden="true" class="material-icons md-phone" style="color:#000000;font-size:20px;"></i></a>

 

Le code CSS pour que le lien soit flottant, à droite du site sur mobile : 


@media(min-width:992px){
.tel-flottant{
    display: none;
}}
@media(max-width:991px){
.tel-flottant {
    position: fixed;
    z-index: 3;
    right: 20px;
    bottom: 20px;
    padding: 5px;
    background-color: #ff0000;
    color: #fff;
}}


Vous pouvez modifier la couleur de fond du lien (background-color) et la couleur du lien (color). 

Utilisez une image à la place du logo fontawesome pour personnaliser le visuel. 

Ajouter un commentaire

Anti-spam