Comment créer une barre de contact mobile Divi avec des liens Click-to-Call, Email, SMS et Direction

Avec le monde vivant sur les appareils mobiles, il est logique de fournir des liens de contact cliquables sur votre site Web qui tirent parti de l'expérience mobile. Ces liens de contact, comme un lien click-to-call, peuvent relancer un appel sur votre téléphone mobile en un seul clic. D'autres, comme un lien d'itinéraire, peuvent ouvrir l'itinéraire vers une adresse commerciale dans Google Maps. Ceux-ci sont vraiment pratiques pour les utilisateurs et indispensables pour certaines entreprises.

Dans ce tutoriel, nous allons vous montrer comment créer une barre de contact mobile Divi avec des liens Click-to-Call, Email, SMS et Directions. Pour ce faire, nous utiliserons le constructeur Divi pour concevoir la barre et les boutons sur un pied de page global. Ensuite, nous ajouterons des URL personnalisées à chaque lien de contact pour apporter à la maison les fonctionnalités dont nous avons besoin.

Commençons!

Aperçu

Voici un aperçu rapide de la conception que nous allons construire dans ce tutoriel.

Téléchargez la mise en page GRATUITEMENT

Pour mettre la main sur les designs de ce tutoriel, vous devrez d'abord le télécharger en utilisant le bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger. Vous ne serez pas « réinscrit » ni ne recevrez d'e-mails supplémentaires.

Télécharger les fichiers

Télécharger gratuitement

Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.

TÉLÉCHARGER

Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !

Comment ajouter le téléchargement du modèle de barre de contact fixe à votre site Divi

ATTENTION ! : L'ajout de ce modèle remplacera le modèle de site Web par défaut (si vous en avez un) sur votre site Divi. Nous vous suggérons de l'ajouter à un site de test afin de ne rien gâcher sur un site en direct.

Pour importer le modèle de barre de pied de page fixe sur votre propre site Web, décompressez le fichier zip de téléchargement pour accéder au fichier JSON.

Ensuite, allez dans le tableau de bord WordPress et accédez à Divi > Theme Builder.

Cliquez ensuite sur l'icône de portabilité en haut à droite de la page.

Dans la fenêtre contextuelle de portabilité, choisissez le fichier JSON que vous venez de décompresser et sélectionnez l'option "Télécharger la sauvegarde avant d'importer", juste au cas où vous auriez déjà quelque chose dans le modèle de site Web par défaut que vous ne voudriez pas remplacer.

Cliquez ensuite sur le bouton Importer.

Enfin, enregistrez les modifications apportées au Générateur de thèmes et affichez une page en direct pour voir la barre de pied de page fixe.

Passons maintenant au tutoriel, voulez-vous ?

Partie 1 : Création d'un pied de page global

Pour ce tutoriel, nous allons ajouter une barre de contact mobile au pied de page global à l'aide du Divi Theme Builder. Commencez par naviguer vers Divi > Theme Builder. Cliquez ensuite sur la zone de pied de page globale à l'intérieur du modèle de site Web par défaut. Dans la liste déroulante, sélectionnez Créer un pied de page global.

REMARQUE : Si vous avez déjà un pied de page global, vous pouvez ouvrir modifier le pied de page global et ajouter la barre de contact en plus du pied de page actuel.

Choisissez l'option « Construire à partir de zéro ».

Partie 2 : Création de la barre de contenu fixe

Dans l'éditeur de disposition de pied de page global, commencez le processus de conception en ajoutant une ligne d'une colonne à la section par défaut.

Paramètres de section

Avant de commencer à ajouter des modules, ouvrez les paramètres de la section, donnez-lui une hauteur définie comme suit :

• Hauteur : 80px

Ceci est important pour créer l'espace au bas de la page où la ligne fixe finira par s'arrêter. Nous supprimerons également le rembourrage supérieur et inférieur par défaut.

• Remplissage : 0px en haut, 0px en bas

Paramètres de ligne

Maintenant que notre section est prête, nous sommes prêts à personnaliser la ligne pour qu'elle serve de barre de contact fixe. Ouvrez les paramètres de la ligne, puis mettez à jour les éléments suivants :

Fond

• Couleur d'arrière-plan : #751136

Taille

• Largeur de gouttière : 1
• Largeur : 100 %
• Largeur maximale : 100 %
• Hauteur : hériter

Bien que la ligne soit fixe, nous voulons que la hauteur de la ligne corresponde à la hauteur de la section parent afin que l'espace au bas de la page contienne adéquatement la ligne. Pour ce faire, nous devons taper le texte « inherit » pour la hauteur.

Espacement

• Remplissage : 0px en haut, 0px en bas, 15 % à gauche, 15 % à droite

CSS personnalisé

Nous voulons nous assurer que le contenu de la ligne reste aligné verticalement et que les colonnes ne se cassent pas sur mobile. Pour ce faire, ajoutez le CSS personnalisé suivant à l'élément principal de la ligne :

display:flex;
flex-wrap:nowrap;
align-items:center;

Positionnement fixe

Pour que la ligne soit fixe afin qu'elle flotte en bas de l'écran, nous devons lui donner une position fixe en bas à gauche comme suit :

• Poste : fixe
• Emplacement : en bas à gauche
• Indice Z : 99999

Partie 3 : Créer les liens d'appel au clic, d'e-mail, de SMS et de direction

Maintenant que notre barre de contact est terminée, nous sommes prêts à ajouter les boutons de contact cliquables ainsi que les URL personnalisées.

Conception du bouton Click-to-Call

Le premier bouton de contact que nous allons créer est le bouton click-to-call. Pour le créer, ajoutez un nouveau module de présentation à la colonne.

Teneur

Sous l'onglet contenu, ajoutez un titre et une icône au texte de présentation comme suit :

• Titre : Appel
• Utiliser l'icône : OUI
• Icône : téléphone

Fond

Donnez-lui une couleur de fond blanche :

• Couleur d'arrière-plan : #ffffff

Paramètres de conception

Passez à l'onglet Conception et mettez à jour les paramètres comme suit :

Icône

• Couleur de l'icône : #751136
• Utiliser la taille de la police de l'icône : OUI
• Taille de la police de l'icône : 2 em

Police de titre

• Style de police Tite: TT
• Alignement du texte du titre : Centre
• Couleur du texte du titre : #751136
• Taille du texte du titre : 1em

Taille du corps du texte

Si vous l'avez remarqué, nous avons dimensionné les éléments de présentation en utilisant l'unité de longueur "em". Ceci est relatif à la taille du corps du texte. Par conséquent, ajuster la taille du corps du texte de présentation (même s'il n'a pas de corps de texte affiché) ajustera la taille de tous les éléments de présentation avec l'unité de longueur em. C'est simplement un moyen pratique de modifier la taille du bouton à l'avenir sans avoir à ajuster chaque élément individuellement.

Mettez à jour le corps du texte comme suit :

• Taille du corps du texte : 12 px

Taille

Donnez au texte de présentation une hauteur et une largeur définies comme suit :

• Largeur: 4.5em
• Alignement du module : centre
• Hauteur : 4,5 em

Rembourrage et coins

• Rembourrage: 0.5em haut

Boîte ombre

• Box Shadow : voir capture d'écran
• Position horizontale de l'ombre de la boîte : 0px
• Position verticale de l'ombre de la boîte : 2px
• Couleur de l'ombre : rgba(255,255,255,0,55)

CSS personnalisé

Afin de centrer verticalement le contenu du module de présentation, ajoutez le CSS personnalisé suivant à l'élément principal :

display:flex;
align-items:center;

Et supprimez l'espacement sous l'icône de présentation en ajoutant l'image de présentation suivante :

margin-bottom: 0.3em;

Ajout de l'URL du lien d'appel

Afin d'ajouter une URL de lien d'appel qui lancera un appel sur un téléphone mobile, ajoutez le numéro après le préfixe « tél : ».

• URL du lien du module : tél : 555-555-5555

Conception du bouton d'e-mail

Pour créer le bouton d'e-mail, dupliquez la colonne entière.

Ajout de l'icône d'e-mail et de l'URL du lien

Mettez ensuite à jour le texte de présentation en double dans la colonne 2 avec un nouveau titre et une nouvelle icône.

Afin d'ajouter une URL de lien d'appel qui lancera un e-mail sur une application mobile, ajoutez l'adresse e-mail après le préfixe « mailto : ».

• URL du lien du module : mailto:[email protected]

Conception du bouton SMS (Message texte)

Pour créer le bouton SMS, dupliquez la colonne 2.

Ajout de l'icône SMS et de l'URL du lien

Mettez ensuite à jour le texte de présentation en double dans la colonne 2 avec un nouveau titre et une nouvelle icône.

Afin d'ajouter une URL de lien d'appel qui lancera un e-mail sur une application mobile, ajoutez l'adresse e-mail après le préfixe « sms : ».

• URL du lien du module : sms :+1555555555

Conception du bouton Directions

Pour créer le bouton SMS, dupliquez la colonne 3.

Ajout de l'icône d'itinéraire et de l'URL du lien

Mettez ensuite à jour le texte de présentation en double dans la colonne 3 avec un nouveau titre et une nouvelle icône.

Afin d'ajouter une URL de lien d'appel qui initiera des itinéraires via Google Maps, utilisez ces structures d'URL de direction.

Pour ce didacticiel, nous allons ajouter un lien d'itinéraire qui générera des itinéraires depuis l'emplacement actuel de l'utilisateur vers le GooglePlex à Mountain View, CA.

• URL du lien du module :

  https://www.google.com/maps/dir/?api=1&destination=1600+amphitheatre+pkwy+mountain+view+CA

Pour ajouter votre propre adresse à l'URL, remplacez le texte après "destination=" dans l'URL, en veillant à séparer les mots par des symboles plus ("+").

Cliquer sur le bouton devrait vous donner quelque chose de similaire à ceci…

Masquer la section sur le bureau

Parce que nous voulons que la barre de contact ne s'affiche que sur les appareils mobiles, nous pouvons désactiver toute la section sur le bureau. Pour ce faire, ouvrez les paramètres de la section et mettez à jour les éléments suivants :

• Désactiver sur : Bureau

Résultats finaux

Plus de liens de contact

Avec HTML5, vous n'êtes pas limité aux numéros de téléphone. Vous pouvez ajouter d'autres appels à l'action tels que l'e-mail, la messagerie, la télécopie, etc. Les protocoles HTML5 incluent :

tél : – passer un appel téléphonique
mailto : – ouvrir une application de messagerie
callto : ouvrir Skype
sms : – envoyer un SMS
fax : – envoyer un fax

Et si vous le souhaitez, vous pouvez également ajouter un lien Waze ciblé pour l'URL de l'itinéraire.

Dernières pensées

La barre de contact semble être un excellent ajout à tout site Web d'entreprise qui souhaite permettre aux utilisateurs de les contacter à partir d'un appareil mobile. Et une fois que vous vous êtes familiarisé avec les structures des URL des liens, vous êtes prêt à tout type de lien de contact que vous souhaitez.

Pour en savoir plus, consultez notre article sur les liens téléphoniques.

J'ai hâte de vous entendre dans les commentaires.

À votre santé!