Comment ajouter une carte Floating About à votre site Divi

Sur presque tous les sites Web que vous visitez, des éléments apparaissent et collent à la page. Avertissements et options de cookies, inscriptions par e-mail et boîtes de discussion. Nous avons tous tendance à les ignorer à un moment donné, devenant aveugles à tout ce que le site Web essaie de nous dire. Nous cliquons simplement sur le X sans lire. Mais cela ne veut pas dire que ce genre d'éléments ne peut pas être utile ni avoir sa place. Avec Divi, vous pouvez facilement créer une carte flottante qui ajoute de la valeur à votre site, expliquant discrètement qui vous êtes et ce que fait votre marque. Voyons à quel point c'est facile.

Aperçu

Bureau

Mobile

1. Créer un modèle de page

La première chose à faire est de décider quelles pages vous souhaitez inclure dans cette carte flottante. Vous pouvez le vouloir sur chaque page de votre site Web, ou vous ne le voulez peut-être que sur des pages de destination spécifiques. Dans tous les cas, vous pouvez utiliser Divi Theme Builder pour le configurer. Soit en tant que modèle global, soit en tant que modèle qui s'applique uniquement à certaines pages.

Utiliser le générateur de thème pour créer le modèle

Pour commencer, rendez-vous sur Divi – Theme Builder dans votre tableau de bord WordPress. Choisissez la section Corps personnalisé des pages auxquelles vous souhaitez appliquer la carte flottante ou le corps global pour l'appliquer partout.

Une fois que vous avez chargé le Divi Visual Builder, choisissez Démarrer à partir de zéro lorsque vous avez le choix.

Ajouter une ligne à une colonne et publier un module de contenu

Et puis choisissez une ligne à une seule colonne lorsque vous y êtes invité.

Ensuite, vous voulez choisir le module Post Content . Ceci est un exemple de notre fonctionnalité de contenu dynamique. Le module affiche le design d'accompagnement intégré à la page Divi elle-même, ce qui signifie que ce module affichera un contenu différent pour différentes pages avec ce modèle. Pour les articles de blog, ce sera le contenu du blog. Pour les pages boutique, ce seront les produits. Et pour les pages individuelles, le contenu personnalisé que vous avez créé avec Divi.

Ajuster l'espacement des sections et des rangées

Avec ceux-ci en place, nous devons faire quelques ajustements d'espacement. Allez dans les paramètres de la section (bordure bleue dans le constructeur Divi) et supprimez tout le rembourrage supérieur et inférieur. Pour ce faire, sous l'onglet Conception , l'en-tête Espacement , puis définissez 0px sur Haut et Bas sous Padding .

Enregistrez vos modifications et entrez les paramètres de ligne . Encore une fois, définissez le remplissage supérieur et inférieur sur 0px .

Ensuite, recherchez l'en-tête Dimensionnement et activez Utiliser la largeur de gouttière personnalisée et définissez sa valeur sur 1. Ensuite, définissez la largeur et la largeur maximale sur 100 %.

Une fois la préparation terminée, passons à la création de la carte flottante !

2. Ajouter une carte flottante

Ajouter une nouvelle section et une nouvelle ligne

Tout d'abord, vous voudrez ajouter une nouvelle section. Pour ce faire, faites défiler vers le bas de la page et cliquez sur le bleu + cercle et choisissez Régulier lorsque vous êtes invité à indiquer le type de section.

Ajouter un module de présentation

Ce sera la section dédiée à la carte flottante. À l'intérieur, nous voulons ajouter une autre ligne à une seule colonne. Et à l'intérieur de cela, nous voulons utiliser un module Blurb pour la carte flottante elle-même. Le module Divi Blurb est peut-être le module le plus polyvalent du constructeur, nous voulons donc profiter de ce qu'il offre pour cette fonctionnalité.

Ajuster les paramètres de section et de ligne

Une fois cela en place, nous devons ajuster le rembourrage et le positionnement de cette rangée et de cette section. Alors tout d'abord, allez dans les paramètres de la section et définissez le rembourrage supérieur et inférieur sur 0px sous Affichage - Espacement .

Ensuite, sous l'onglet Avancé , recherchez l'en-tête Position . Réglez l' index Z sur 12. Plus le nombre est élevé, plus la section et son contenu seront placés à l'avant. Et comme c'est une carte flottante, nous voulons qu'elle flotte au-dessus de tous les autres éléments.

Enfin, allez dans les paramètres de ligne et réglez à nouveau son remplissage en haut et en bas sur 0px .

Le contenu du module Blurb

Il est maintenant temps pour nous de styliser la carte elle-même. Entrez les paramètres du module Blurb. Puisqu'il s'agit d'un élément qui décrit votre entreprise, vous voudrez avoir une brève mention de ce que fait votre entreprise ou votre marque. Parce qu'il s'agit d'un exemple de publication, nous l'avons rempli avec du lorem ipsum à saveur de zombie. Vous pouvez définir le titre et le contenu du corps sous l'onglet Contenu .

Définir la couleur d'arrière-plan

Vous voulez évidemment que la carte flottante corresponde visuellement à votre site, donc choisir la bonne couleur d'arrière-plan est très important. On y va avec #ffffff (blanc). L'onglet Contenu contient également cela, et vous le trouverez sous l'en - tête Arrière - plan et le Pot de peinture .

Choisissez une image de carte

Le module Blurb vous donne la possibilité d'inclure une image ou une icône pour le module, et nous voulons une image qui représente notre entreprise. Encore une fois, sous l'onglet Contenu , recherchez Image et Icône et téléchargez simplement l'image qui fonctionne pour votre module.

Façonner les coins de la carte

Ensuite, allez dans l'onglet Conception et dans l'en - tête Bordure . Recherchez les options Coins arrondis et définissez chaque coin à 25px . Cela lissera les bords tranchants et carrés sans changer la forme de la carte globale.

Alignement du texte

Sous l'en-tête Texte , définissez l' alignement du texte au centre.

Stylisez le texte du titre de la carte flottante

Le texte du titre que vous avez défini précédemment est par défaut H4 . Pour le styler, allez dans l'en-tête Titre du texte , choisissez l'onglet H4 et modifiez les options de titre suivantes :

• Police : Poppins
• Poids de la police : gras
• Couleur du texte : # 22303f
• Taille du texte : 20 pixels
• Hauteur de ligne : 1,3 em

Ensuite, nous devons accéder aux paramètres de réactivité et modifier la taille du titre pour les appareils mobiles. Modifiez la taille du texte du titre à 14px .

Styliser le texte de la carte

Ensuite, accédez au corps du texte et modifiez la police du corps en Poppins pour qu'elle corresponde à la police du titre.

Cliquez ensuite sur l'onglet Lien (icône de chaîne) et remplacez la couleur du texte du lien par une couleur complémentaire pour votre site. Nous avons choisi #97c357 .

Dimensionnement de la carte À propos

Sous l'en-tête Dimensionnement , ajoutez les valeurs suivantes à ces paramètres :

• Largeur de l'image : 75 %
• Largeur du contenu : 25 vw
• Largeur: 25vw
• Largeur maximale : 30 vw

Sous les paramètres de réactivité, ajustez les valeurs suivantes :

• Largeur du contenu : 90 vw
• Largeur: 90vw
• Largeur maximale: 95vw

Ces valeurs garantiront que la carte occupe toute la largeur de l'écran sur les appareils mobiles, car une carte flottante dans le coin est généralement impossible à lire.

Espacement pour le Blurb

L'en-tête Espacement est une solution rapide, où vous devez définir la marge gauche sur 0px , le rembourrage supérieur et inférieur sur 2vw et le rembourrage gauche et droit sur 1vw.

Pour les paramètres réactifs, seuls les rembourrages supérieur et inférieur changeront. Nous les fixerons à 5% .

Ajouter une ombre de boîte

Parce que la carte flottante va rester fixe à son emplacement, nous voulons qu'elle ait l'air de flotter au-dessus de votre contenu. Cet effet est assez simple en ajoutant une ombre de boîte de base au module. Cette option se trouve sous Box Shadow , et nous avons choisi l'ombre inférieure de base.

Ajuster le CSS réactif

C'est maintenant la partie amusante. Nous passons à l'onglet Avancé où nous allons faire en sorte que la carte flottante s'attache à la page. Pour ce faire, notre première étape consiste à désactiver l'image que nous avons ajoutée pour le bureau. Les images dans le module Blurb peuvent vraiment affecter la taille et la convivialité sur mobile, en plus c'est autre chose pour la page à charger.

Nous voulons donc ajouter display:none; sous le champ Image Blurb réservée aux mobiles sous CSS personnalisé .

Fixer et faire flotter la carte avec le réglage de la position

Enfin, nous allons positionner la carte où nous voulons qu'elle flotte. Tout d'abord, nous voulons nous diriger vers l'onglet Avancé et faire défiler jusqu'à Position . Sélectionnez Fixe dans le menu déroulant.

Ensuite, recherchez les options de localisation . C'est le point sur l'écran où la carte flottante restera. Pour le bureau, nous voulons qu'il soit dans le coin inférieur de l'écran. Nous cliquons donc sur le carré qui correspond à cela. Nous voulons également qu'il soit légèrement décalé par rapport à la bordure de la fenêtre, nous allons donc changer le décalage vertical à 3% et le décalage horizontal à 2%.

Ensuite, nous voulons créer un emplacement et un décalage différents pour le mobile. Ci-dessus, nous définissons la largeur de la carte pour étirer toute la largeur de l'écran. Dans cet esprit, nous allons changer l' emplacement fixe en bas au centre afin que la carte flotte simplement au bas de l'écran à tout moment.

De plus, nous allons uniquement modifier le décalage vertical pour mobile. Réglez cette valeur sur 3 % . Il n'y a pas besoin de décalage horizontal car c'est la largeur de l'écran mobile et centrée.

Résultats finaux

Lorsque tout est correctement configuré et ajusté pour votre site personnel, le produit final devrait ressembler à celui-ci.

Bureau

Mobile

Conclusion

Grâce aux puissantes options et à l'interface intuitive de Divi, vous pouvez concevoir et apposer une carte flottante sur votre site en un rien de temps. En faisant savoir à vos utilisateurs à qui ils ont affaire dès le début, vous êtes sûr de fidéliser votre marque.

Pourquoi avez-vous utilisé des cartes flottantes sur vos sites Web ? Faites le nous savoir dans les commentaires!