Découvrez les bons plans & les réductions Alpa14

Tuto Divi | Un footer Pro avec un carrousel de logos

Alpa14 les tutoriels faciles !

Catégories

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 ! ?

Licence Divi
Code Promo Divi Supreme
.

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 ».

Footer global Divi Theme Builder

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 ».

Appeler "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.

Thinkific un mois gratuit
MailerLite free-trial
Choisir les images du carrousel

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é.

paramétrage du module Carrousel

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.

réglages du carrousel de logos

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.

Création du menu vertical

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.)

 

Module Divi email Optin
MalerLite
 LearnDash créer une formation sur un site WordPress

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.

Paramétrage du module Divi Résumé
3 modules résumé

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.

 

Icônes des réseaux sociaux
Code Promo Divi Supreme
Licence Divi

Vous serez peut-être intéressé par les articles suivants :

Supreme Card Carousel : un carrousel pour Divi efficace

Supreme Card Carousel : un carrousel pour Divi efficace

Dans ce tutoriel, je vous guide étape par étape dans l’utilisation de ce module de Divi Supreme pour créer des carrousels attrayants et dynamiques sur votre site WordPress. Ce tutoriel est fait pour vous si vous souhaitez améliorer l’apparence et l’interaction de vos contenus!

lire plus
Ajouter une barre de progression animée à Divi.

Ajouter une barre de progression animée à Divi.

Dans ce tutoriel, je vous montre comment utiliser le module Progress Bar pour Divi grâce à l’un des modules de Divi Supreme Pro, l’excellent Plugin pour le thème Divi d’Elegant Themes. Ce module intitulé « Progress Bar » vous permettra de créer des barres de progression animées sur votre site WordPress. Le module Progress Bar est une fonctionnalité utile qui permet aux visiteurs de votre site de suivre leur progression sur une page en affichant leur progression en pourcentage.

lire plus
Thème Divi : Créer une bannière accordéon

Thème Divi : Créer une bannière accordéon

Dans ce tutoriel Divi, je vous montre comment créer une bannière accordéon très design pour votre site web en utilisant le module « Image Accordion » du plugin Divi Supreme Lite. Divi Supreme Lite est la version gratuite de l’excellent Divi Supreme Pro. Divi Supreme lite compte un 20aine de nouveaux modules pour Divi contre une 60aine pour Divi Supreme Pro.

lire plus