Comment ajouter une bascule de carte fixe à votre modèle de page Divi

Si vous gérez un magasin physique et créez un site Web pour celui-ci, de nombreuses personnes peuvent visiter votre site Web pour obtenir des informations pratiques, telles que votre adresse. Bien sûr, c'est là que votre page de contact est utile, mais ce n'est pas la seule façon de partager en toute transparence les coordonnées de vos visiteurs. Si vous cherchez une façon créative d'aborder le partage de l'adresse de votre entreprise, vous aimerez ce tutoriel. Nous vous montrons comment ajouter une bascule de carte fixe de manière dynamique à chaque page à l'aide de Theme Builder de Divi. Nous allons commencer par créer un nouveau modèle de page. Ensuite, nous inclurons le contenu de la page dynamique dans le corps du modèle et nous ajouterons une bascule de carte fixe au-dessus du contenu de la page dynamique. Vous pourrez également télécharger le fichier modèle JSON gratuitement !

Allons-y.

Aperçu

Avant de plonger dans le didacticiel, jetons un coup d'œil rapide au résultat sur différentes tailles d'écran.

Bureau

Mobile

Téléchargez le modèle de page GRATUITEMENT

Pour mettre la main sur le modèle de page gratuit, 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 !

1. Créez un modèle de page dans Divi Theme Builder

Accédez au générateur de thème Divi et ajoutez un nouveau modèle de page

Nous allons commencer ce didacticiel en accédant au Divi Theme Builder et en ajoutant un nouveau modèle de page.

Entrer la zone du corps du modèle

Ensuite, entrez le corps du modèle en sélectionnant « Créer un corps personnalisé ».

2. Ajouter du contenu de page dynamique à la zone du corps

Paramètres de section

Espacement

Une fois dans l'éditeur de modèles, vous remarquerez une section. Ouvrez les paramètres de la section et supprimez tous les rembourrages supérieur et inférieur par défaut.

• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px

Ajouter la ligne n° 1

Structure des colonnes

Continuez en ajoutant une nouvelle ligne en utilisant la structure de colonnes suivante :

Dimensionnement

Sans ajouter encore de modules, ouvrez les paramètres de ligne et modifiez les paramètres de dimensionnement comme suit :

• Largeur : 100 %
• Largeur maximale : 100 %

Espacement

Supprimez ensuite tous les rembourrages supérieur et inférieur par défaut.

• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px

Ajouter un module de contenu de publication à la colonne

Pour permettre au contenu de chaque page de s'afficher de manière dynamique, nous utiliserons le module de contenu de publication à l'intérieur de cette ligne.

3. Créer une conception de broche de carte fixe

Ajouter la ligne 2 à la section

Structure des colonnes

Passons à la ligne suivante, qui utilise la structure de colonnes suivante :

Dimensionnement

Ouvrez les paramètres de ligne, accédez à l'onglet Conception et modifiez les paramètres de dimensionnement comme suit :

• Largeur: 90%
• Largeur maximale:
  • Bureau : 600px
  • Tablette et téléphone : 100 %

Espacement

Supprimez ensuite tous les rembourrages supérieur et inférieur par défaut.

• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px

Paramètres de la colonne 1

Couleur de l'arrière plan

Ensuite, ouvrez les paramètres de la colonne 1 et utilisez une couleur de fond noire.

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

Image de fond

Téléchargez ensuite une image de fond de votre choix. Vous pouvez trouver l'image de fond dans le dossier zippé que vous pouvez télécharger au début de ce tutoriel.

Élément principal CSS

Ajoutez également les lignes de code CSS suivantes à l'élément principal de la colonne :

width: 80% !important;
max-height: 80vh;

Visibilité

Ensuite, mettez le débordement vertical sur auto. Ceci, en combinaison avec la hauteur maximale de l'étape précédente, garantit qu'une barre de défilement apparaît dès que la colonne dépasse une hauteur de 80vh.

• Débordement vertical : automatique

Paramètres de la colonne 2

Élément principal CSS

Ouvrez ensuite les paramètres de la colonne 2 et appliquez la ligne de code CSS suivante à l'élément principal :

width: 12% !important;

Ajouter le module de carte à la colonne 1

Il est temps d'ajouter des modules, en commençant par un module de carte dans la colonne 1. Ajoutez une épingle de carte de votre choix.

Dimensionnement

Passez à l'onglet de conception du module et modifiez les paramètres de dimensionnement comme suit :

• Largeur : 88 %
• Alignement du module : Centre

Espacement

Supprimez ensuite la marge inférieure par défaut.

• Marge inférieure : 0px

Ajouter le module Blurb à la colonne 1

Ajouter du contenu

Ajoutez un module Blurb sous le module Carte dans la colonne 1. Utilisez le contenu de votre choix.

Sélectionnez l'icône

Sélectionnez ensuite une icône.

Paramètres d'image/icône

Passez à l'onglet Conception et modifiez les paramètres de l'icône comme suit :

• Couleur de l'icône : #ffffff
• Placement des images/icônes : à gauche

Paramètres du texte du titre

Stylisez ensuite le texte du titre.

• Poids de la police du titre : gras
• Couleur du texte du titre : #ffffff
• Taille du texte du titre : 16px
• Hauteur de la ligne de titre : 1,6 em

Paramètres du corps du texte

Ensuite, modifiez les paramètres du corps du texte en conséquence :

• Couleur du corps du texte : #ffffff
• Taille du corps du texte :
  • Bureau : 16px
  • Tablette : 14 pixels
  • Téléphone : 13px
• Hauteur de la ligne du corps : 1,8 em

Espacement

Appliquez également les valeurs de remplissage suivantes :

• Rembourrage supérieur : 70 pixels
• Rembourrage inférieur : 70px
• Rembourrage gauche : 7%
• Rembourrage droit : 7 %

Animation

Et supprimez l'animation de module par défaut dans les paramètres d'animation.

• Animation d'image/icône : pas d'animation

Ajouter le module Blurb à la colonne 2

Laisser les boîtes de contenu vides

Passons à la colonne 2. Là, nous ajouterons un module Blurb sans contenu.

Sélectionnez l'icône

Sélectionnez ensuite une icône.

Couleur de l'arrière plan

Ensuite, changez la couleur d'arrière-plan.

• Couleur d'arrière-plan : #0045ff

Paramètres d'image/icône

Passez à l'onglet Conception et stylisez les paramètres de l'icône en conséquence :

• Couleur de l'icône : #ffffff
• Placement des images/icônes : en haut
• Alignement image/icône : Centre
• Utiliser la taille de la police de l'icône : Oui
• Taille de la police de l'icône : 25px

Dimensionnement

Modifiez ensuite les paramètres de dimensionnement.

• Largeur : 70 pixels
• Hauteur : 70px

Espacement

Ensuite, supprimez la marge inférieure par défaut.

• Marge inférieure : 0px

Boîte ombre

Incluez également une ombre de boîte.

• Position horizontale de l'ombre de la boîte : 6px
• Position verticale de l'ombre de la boîte : 6px
• Couleur de l'ombre : rgba(0,0,0,0.3)

Élément principal et image de présentation CSS

Ensuite, accédez à l'onglet avancé et utilisez les lignes de code CSS suivantes pour l'élément principal :

display: flex;
justify-content: center;
align-items: center;

Et ajoutez cette ligne de code CSS dans la zone Blurb Image :

margin-bottom: 0;

4. Ajouter une fonctionnalité de basculement

Ajouter la classe CSS à la ligne n°2

Maintenant que nous avons tous les éléments en place, il est temps de se concentrer sur la fonctionnalité. Commencez par ouvrir la deuxième ligne et appliquez la classe CSS suivante :

• Classe CSS : map-toggle-row

Ajouter une classe CSS au module Blurb dans la colonne 2

Ouvrez ensuite le module Blurb dans la colonne 2 et utilisez la classe CSS suivante :

• Classe CSS : map-toggle

Ajouter un module de code sous le module Blurb dans la colonne 2

Ensuite, ajoutez un module de code sous le module Blurb dans la colonne 2.

Ajouter des balises de style et de script

Placez des balises de style et de script dans la zone de code.

Insérer le code CSS

Nous utilisons le code CSS suivant dans les balises de style :

.map-toggle-row {
-webkit-transition: .1s ease-in-out;
-moz-transition: .1s ease-in-out;
-o-transition: .1s ease-in-out;
transition: .1s ease-in-out;
}

.reveal-map{
left: 0 !important;
}

.map-toggle {
cursor: pointer;
}

Insérer le code JQuery

Et le code JQuery suivant à l'intérieur des balises de script :

jQuery(function($){
$(document).ready(function(){

var toggleIcon = $('.map-toggle');
var toggleRow = $('.map-toggle-row');

toggleIcon.click(function(){
toggleRow.toggleClass('reveal-map');
});

});
});

Ajouter une position fixe avec un décalage horizontal à la rangée n°2

Enfin et surtout, nous devrons modifier les paramètres de position de la deuxième ligne en conséquence :

• Poste : fixe
• Emplacement : Centre gauche
• Décalage horizontal :
  • Bureau : -500px
  • Tablette & Téléphone : -72%
• Indice Z : 11

5. Enregistrer les modifications apportées au générateur de page et de thème

Une fois toutes les modifications appliquées, vous pouvez enregistrer toutes les modifications de Divi Theme Builder et afficher le résultat sur votre site Web !

Aperçu

Maintenant que nous avons parcouru toutes les étapes, jetons un dernier coup d'œil au résultat sur différentes tailles d'écran.

Bureau

Mobile

Dernières pensées

Dans ce didacticiel, nous vous avons montré comment inclure de manière créative les coordonnées de votre entreprise dans la conception de vos pages. Plus précisément, nous vous avons montré comment créer un modèle de page qui inclut une bascule de carte fixe, afin que vos visiteurs puissent accéder à l'emplacement de votre entreprise à tout moment ! Vous avez également pu télécharger le fichier modèle JSON gratuitement. Si vous avez des questions ou des suggestions, n'hésitez pas à laisser un commentaire dans la section commentaires ci-dessous.

Si vous souhaitez en savoir plus sur Divi et obtenir plus de cadeaux Divi, assurez-vous de vous abonner à notre newsletter par e-mail et à notre chaîne YouTube afin que vous soyez toujours l'une des premières personnes à connaître et à tirer parti de ce contenu gratuit.