Créer un footer Pro avec Divi et Divi Supreme
Dans ce nouveau tuto WordPress Divi, je vous explique comment remplacer le pied de page (footer) WordPress par un pied de page global au look Pro grâce au Divi Thème Builder. Dans ce nouveau footer, nous placerons un carrousel de logos grâce à un des modules de Divi Supreme l’excellent plugin pour Divi. Un carrousel de logos peut être intéressant pour donner du crédit à votre site et présenter les marques partenaires. Pour suivre ce tutoriel vous devez logiquement avoir Divi et Divi Supreme d’installés sur votre site WordPress.
Bon visionnage à toutes et à tous ! 😊
1) Le Thème Builder
Nous réaliserons ce pied de page (footer) à partir du Thème Builder. Pour y accéder, rendez-vous dans le menu WordPress marge de gauche aller dans Divi > Thème Builder
Choisir le premier modèle qui est le modèle de site Web par défaut, puis cliquer sur « Ajouter un pied de page global » ainsi ce footer se retrouverai automatiquement sur toute page crée.
Vous allez être ensuite invité à choisir le type de page, nous choisirons ici « Construire à partir de zéro ».
2) Création du carrousel de logos et du titre dans la section 1
Une section est déjà présente. Aller dans les paramètres de cette section pour définir la couleur de fond. (Onglet contenu puis « Fond »).
Créer ensuite dans cette section une rangée à une colonne puis insérer le module Divi Supreme « Image Carousel ».
Dans l’onglet « Contenu » puis « Image Carousel », appeler les images de votre carrousel. Pour des logos, préférer des images PNG sang fond afin de ne pas voir le contour de l’image. Si vous ne savez pas comment procéder pour créer de telles images, je vous invite à regarder cette vidéo où je vous explique comment procéder.
Ensuite la partie importante du paramétrage de notre carrousel va se jouer toujours dans l’onglet « Contenu » dans la partie « Carousel Effect ». Plusieurs fonctions sont disponibles ici dont notamment « Slider Speed » la vitesse du Slider (du glissé des images) et aussi « Autoplay Change Interval » qui est l’intervalle de temps entre les changements, les rotations automatiques. Pour profiter de cette dernière fonction, il faut que l’interrupteur « Autoplay » (auto-lecture) soit activé.
Toujours dans la partie « Carousel Effect », vous pouvez activer l’option « Infinite Smooth Scrolling » qui rendra le défilement fluide et continu. Vous pouvez aussi ici activer ou pas les flèches « Show Arrows » de chaque côté du Carrousel (pour une rotation anticipée) ou « Show Pagination » (la pagination) qui affiche par de petits points sous le Carrousel le nombre d’images en défilement. Dans notre exercice, nous désactiverons ces 3 fonctions, et surtout les 2 dernières afin d’avoir un Carrousel simple et minimaliste et ne pas trop surcharger notre footer.
Vous pouvez si vous le souhaitez ajouter ensuite une nouvelle rangée et insérer un module texte qui servira de titre au Carrousel comme je le fais dans le tutoriel avec le titre « Nos partenaires ».
3) Placement du logo, du menu et du formulaire de Newsletter
Ajouter en dessous une nouvelle section (normale). Vous pouvez tout de suite apporter une couleur de fond à votre section. Pour cela, aller dans des paramètres de la section > Fond. Dans le tutoriel, je pars de la même couleur que la section supérieure et je l’assombrit légèrement à l’aide du nuancier. Ensuite, dans cette section, insérer une rangée 2/4 – 1/2.
Dans la première rangée, nous insérerons un module image pour placer le logo.
Dans la rangée du milieu, nous créerons un menu vertical avec une succession de modules texte. Dans le premier module texte inséré, (dans les paramètres du module, onglet « Contenu »), donner le nom de votre première page dans texte, puis lier ce mot à l’adresse URL de votre page.
Dans l’onglet « Style », apporter le style souhaité à ce premier mot (ici accueil). Dans « Espacement » vous pouvez définir une marge internet (bas) du nombre de pixels souhaités pour avoir un espacement qui vous convienne entre les titres des pages de votre menu. Ici nous choisirons 10 pixels. Enregistrer le travail pour ce premier module. Dupliquer ensuite ce module (en cliquant sur l’icône des 2 petits rectangles). Il vous suffit ensuite pour chaque module dupliqué d’aller dans ses paramètres (dans l’onglet « Contenu ») et de modifier le texte et l’adresse URL de destination.
Dans la troisième colonne, insérerer le module « Email Optin ». Ce formulaire va nous servir à récupérer les adresses email des clients qui veulent s’abonner à la Newsletter du site. Dans l’onglet « Contenu » il vous est possible de supprimer la couleur de fond par défaut (en choisissant couleur transparente) de ce module afin qu’il se fonde mieux dans le footer.
Dans « Compte de messagerie » il faudra connecter ce formulaire à une plateforme d’emails marketing. Si vous n’en n’avez pas, je vous recommande MailerLite, c’est simple et efficace. De plus leur formule gratuite est très généreuse avec une liste de 1000 emails et la possibilité d’envoyer 12 000 emails envoyés par mois. Vous avez la possibilité également de réaliser des ‘automatisations très cool et de créer des landing pages. Pour lier le formulaire à la plateforme de votre choix, choisissez votre plateforme, cliquez sur « Ajouter » puis entrer votre nom de compte et la clé API de votre plateforme d’email marketing.
Ensuite, toujours dans l’onglet « Contenu » vous pouvez dans « Champs » sélectionner les champs que vous souhaiter faire apparaître. Puis dans l’onglet « Style », apporter le style souhaité (taille des polices, couleurs, bordures etc.)
4) Placement de renseignements sur la boutique à l’aide de 3 modules « Résumé »
Toujours dans la même section, ajouter une nouvelle rangée à 3 colonnes (3/3). Dans ces 3 colonnes, nous allons placer des informations sur la boutique (heures d’ouverture, adresse, téléphone).
Pour cela, nous utiliserons le module « Résumé ». Placer le premier module « Résumé » dans la première colonne. Dans l’onglet « Contenu » des paramètres, entrer votre texte puis dans « Image et icône » choisir « Utiliser les icônes » puis choisir une icône qui remplacera l’image.
Ensuite dans l’onglet Style dans « Image et icône » vous pouvez choisir de placer l’icône à gauche (dans « Placement image/icône ») afin de minimiser la hauteur du module. Vous pouvez aussi ici modifier la taille de l’icône en activant l’interrupteur « Utiliser la taille de la police de l’icône ».
Toujours dans l’onglet « Style » vous pourrez également modifier l’aspect de votre texte.
Vous n’avez plus maintenant qu’à dupliquer 2 fois ce modules et de les placer dans les colonnes 2 et 3. Il vous suffira ensuite de modifier les icônes et le texte.
5) Icônes des réseaux sociaux
Insérer en dessous une dernière section. Dans les paramètres de la section (onglet « Contenu ») puis fond, donner une couleur de fond à votre section. Insérer ensuite une rangée à une colonne et appeler le module « Suivez-nous sur les réseaux sociaux ».
Dans l’onglet « Contenu », ajouter les icônes des réseaux sociaux voulues en cliquant sur le + (Ajouter nouveau Réseau Social). Ensuite cliquer sur l’engrenage des paramètres de la première icône. Apporter le Contenu (lier cette icône à l’URL de votre réseau social dans « Lien ») et le Style souhaités à cette icône.
Revenir ensuite à l’affichage de départ qui liste toutes les icônes. Afin de gagner du temps pour la mise en Style des autres icônes, cliquer sur les 3 petits points au bout de la ligne de la première icône (dans notre cas, ce sera l’icône FaceBooK) puis choisir « Copier Elément Styles ». Il vous suffit alors d’aller sur les 3 petits points au bout de la ligne de chacune des autres icône et de choisir « Coller Elément Styles ». N’oublier pas ensuite de lier correctement chaque icône avec l’URL de son réseau social respectif.
Pour finir vous pouvez si vous le souhaiter dans l’onglet « Style » puis « Alignement » centrer les icônes.