Obtenez un hébergement instantané avec ELEMEROR et ELEMENTOR Pro

avec CDN, SSL et sauvegardes.

Commencez

Comment rendre les modules Blurb utilisables comme éléments de pied de page dans Divi

Rifat Divi Tutorials Jan 28, 2022

Les modules Blurb sont d'excellentes options pour les pieds de page Divi . Ils peuvent afficher des photos ou des icônes dans différentes mises en page et avoir plusieurs options de personnalisation. De plus, ils sont extrêmement utiles pour combiner des liens et des icônes pour créer des projectiles élégants. Heureusement, avec les modules de présentation de Divi , vous pouvez facilement générer ces types de liens. Dans ce tutoriel, nous verrons comment intégrer des modules de texte de présentation dans vos pieds de page Divi .

Aperçu de la conception

Avant de commencer à concevoir, regardons à quoi ressemblera notre pied de page.

Téléchargement de modèles

Nous utiliserons l'en-tête et le pied de page du pack de mise en page de l'intelligence artificielle de Divi pour le didacticiel d'aujourd'hui. Tout d'abord, accédez à votre tableau de bord et accédez à Divi

Vous pouvez maintenant modifier votre nouveau pied de page Divi . Vous pouvez mettre à jour le pied de page à partir du back-end, ou vous pouvez le sélectionner à partir du Visual Builder du front-end. Étant donné que l'en-tête contient un menu personnalisé qui s'ouvre par défaut dans le générateur, je mettrai à jour le pied de page en arrière-plan.

Modules Blurb comme pied de page

Nous mettrons à jour les liens dans les sections Ce que nous faisons et Ressources . Cela récupérera les liens souhaités et les marquera avec des icônes. J'utiliserai le premier titre et limiterai le nombre de liens au minimum. Nous allons décorer le premier avant de le cloner pour faire le reste.

Supprimez la colonne Ressources .

Maintenant, transformez cela en une mise en page à deux colonnes, nous n'aurons donc besoin que d'une colonne pour nos modules de présentation pour concevoir le pied de page.

Enfin, supprimez le module de texte contenant les liens. Seul le module de titre est requis.

Survolez maintenant la zone et ajoutez un module Blurb.

Configuration du module Blurb

Un titre, un corps de texte et une image sont tous inclus dans le module de présentation. Le titre servira de lien. De courtes descriptions peuvent être utilisées dans le corps du texte. Pour les besoins de ce tutoriel, je vais le supprimer. Si vous l'utilisez, je vous recommande de garder le texte aussi bref que possible et de n'utiliser qu'une poignée de textes de présentation. Nous utiliserons une icône au lieu d'une image.

J'ai changé le nom du lien et supprimé le corps du texte. Ensuite, sous Image et icône, choisissez Utiliser l'icône. Ensuite, choisissez votre icône dans le sélecteur d'icônes. Sous la section Lien, saisissez l'URL dans la zone URL du lien du titre. Le reste des paramètres de liaison doit être laissé seul. C'est la seule chose que nous ferons avec cet onglet.

  • Titre : le nom de votre lien
  • Icône : Clés doubles
  • URL du lien du titre : votre lien

Dans l'onglet Conception, définissez la couleur de l'icône. Définissez le placement de l'image/de l'icône sur la gauche.

  • Couleur de l'icône : #db0eb7
  • Placement de l'image/de l'icône : à gauche

Sélectionnez Téléphone sous Largeur d'image/d'icône.

  • Largeur de l'image/de l'icône du téléphone : 15 px

Définissez la largeur de la bordure de l'image/de l'icône sur 1 px et la couleur sur #39c0ed.

  • Largeur de la bordure de l'image/de l'icône : 1 pixel
  • Couleur de la bordure de l'image/de l'icône : #39c0ed

Ajoutez du rembourrage sur les quatre côtés du rembourrage d'image/d'icône.

  • Remplissage d'image/d'icône : 10 px (haut, bas, gauche, droite)

Modifiez le texte du titre.

  • Police du titre : Archivo
  • Couleur du texte du titre : #ffffff

Placez le texte supérieur au milieu.

Faites défiler jusqu'à la section Espacement du module de présentation et ajoutez un peu de remplissage gauche.

  • Rembourrage du bureau, gauche : 17vh
  • Rembourrage du téléphone, gauche : 7vh

Onglet Avancé

Ensuite, nous appliquerons du CSS personnalisé au titre pour le centrer avec l'icône.

  • Onglet Avancé Titre de présentation CSS personnalisé : padding-top : 12px

Dupliquer le module Blurb

Ensuite, dupliquez le module de présentation trois fois en cliquant trois fois sur le bouton Dupliquer le module. Cela nous permettra d'utiliser des modules de présentation à la place des liens de texte pour les éléments de pied de page.

Modifiez maintenant les icônes et le texte de ces modules.

Conception finale

Voici un aperçu de nos modules de présentation Divi dans le pied de page des deux mises en page de bureau.

Dernières pensées

Cela conclut notre discussion sur l'utilisation des modules de présentation pour les éléments de pied de page dans les pieds de page Divi . Les présentations sont d'excellentes possibilités pour les hyperliens. Ils sont simples à utiliser et offrent de nombreuses possibilités de personnalisation des images et des icônes. Par exemple, vous pouvez utiliser les icônes avec ou sans bordures, et vous pouvez les agrandir à votre guise. Les symboles que nous avons choisis ici complètent bien la conception du menu d'en-tête.