Comment concevoir un tiroir de pied de page flottant dans Divi

Les tiroirs de pied de page sont des ajouts utiles à tout site Web, car ils stockent du contenu supplémentaire facilement accessible par les utilisateurs. Les tiroirs de pied de page sont des conteneurs de contenu Web (comme une section Divi) qui peuvent être ouverts et fermés en cliquant sur un bouton ou en survolant. C'est comme avoir une petite cachette pour le contenu premium.

Dans ce tutoriel, nous allons concevoir un tiroir de pied de page flottant dans Divi. Nous ajouterons le tiroir de pied de page à la zone de pied de page globale du modèle de site Web afin que le tiroir de pied de page soit accessible sur l'ensemble du site avec le contenu de pied de page normal.

Avec le processus que nous allons utiliser, toute section Divi (et son contenu) peut être convertie en un tiroir de pied de page en quelques minutes.

Commençons!

Aperçu

Voici un aperçu rapide du tiroir de pied de page fixe que nous allons construire dans ce didacticiel.

Téléchargez la mise en page GRATUITEMENT

Pour mettre la main sur les designs de ce tutoriel, 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 !

Comment ajouter le modèle de tiroir de pied de page à votre site Divi

ATTENTION ! : L'ajout de ce modèle remplacera le modèle de site Web par défaut (si vous en avez un) sur votre site Divi. Nous vous suggérons de l'ajouter à un site de test afin de ne rien gâcher sur un site en direct.

Pour importer le modèle de tiroir de pied de page fixe sur votre propre site Web, décompressez le fichier zip de téléchargement pour accéder au fichier JSON.

Ensuite, allez dans le tableau de bord WordPress et accédez à Divi > Theme Builder.

Cliquez ensuite sur l'icône de portabilité en haut à droite de la page.

Dans la fenêtre contextuelle de portabilité, choisissez le fichier JSON que vous venez de décompresser et sélectionnez l'option "Télécharger la sauvegarde avant d'importer", juste au cas où vous auriez déjà quelque chose dans le modèle de site Web par défaut que vous ne voudriez pas remplacer.

Cliquez ensuite sur le bouton Importer.

Enfin, enregistrez les modifications apportées au Générateur de thèmes et affichez une page en direct pour voir la barre de pied de page fixe.

Passons maintenant au tutoriel, voulez-vous ?

Partie 1 : Ajout d'un pied de page global

Theme Builder de Divi vous permet de remplacer le pied de page par défaut par un nouveau en mettant à jour le modèle de site Web par défaut.

Pour créer un pied de page global, accédez au tableau de bord WordPress et accédez à Divi > Générateur de thèmes. Cliquez ensuite sur l'espace « Ajouter un pied de page global » dans le modèle de site Web par défaut.

Sélectionnez ensuite l'option « Créer un pied de page global » dans la liste déroulante.

Ajouter une mise en page prédéfinie à la mise en page globale du pied de page

Cela déploiera l'éditeur de mise en page de modèle où vous serez immédiatement invité avec les trois choix pour la façon dont vous souhaitez commencer à construire. Sélectionnez l'option "Choisir une mise en page prédéfinie".

Dans la fenêtre contextuelle Charger à partir de la bibliothèque, recherchez la disposition de la page de destination de la papeterie. Cliquez ensuite sur « Utiliser cette mise en page ».

Supprimer le contenu indésirable de la mise en page prédéfinie

Une fois la mise en page chargée dans l'éditeur, déployez la boîte de dialogue Calques en cliquant sur l'icône des calques dans le menu des paramètres. Supprimez ensuite toutes les sections de la mise en page, à l'exception des deux dernières.

Déplacer et étiqueter les deux sections

Une fois les sections supprimées, vous devriez avoir deux sections, l'une intitulée « Pied de page » et l'autre intitulée « Comment ça marche ». Déplacez la section "Pied de page" en haut de la mise en page.

Remplacez l'étiquette de la section inférieure par « Tiroir de pied de page ». Ce sera la section que nous utiliserons comme contenu de notre tiroir de pied de page.

Partie 2 : Création du tiroir de pied de page fixe

Maintenant que nous avons désigné l'une des sections comme pied de page et l'autre comme tiroir de pied de page, nous sommes prêts à commencer à créer notre tiroir de pied de page fixe. Commençons par créer l'icône de présentation que nous utiliserons pour basculer le tiroir de pied de page.

Création du bouton du tiroir de pied de page

Ajouter une nouvelle ligne

Dans la section inférieure « Tiroir de pied de page », ajoutez une nouvelle rangée à une colonne.

Étiquetez la nouvelle ligne « Bouton du tiroir » car c'est la ligne qui contiendra le bouton utilisé pour basculer le tiroir ouvert et fermé. Déplacez ensuite la ligne en haut de la section.

Remplissage de ligne

Avant d'ajouter un module, ouvrez les paramètres de ligne et mettez à jour le remplissage comme suit :

• Remplissage : 0px en haut, 0px en bas

Remplissage de section

Ouvrez ensuite les paramètres de la section « Tiroir de pied de page » et mettez à jour le rembourrage comme suit :

Pour créer le bouton cliquable qui bascule le tiroir du pied de page, nous allons utiliser un module de présentation avec une icône. Et nous allons lui donner une forme de goutte d'eau unique en combinant la forme carrée du conteneur du module de présentation avec l'icône en forme de cercle.

Voici comment procéder.

Ajouter un module de présentation

Ajoutez un module de présentation à la ligne « Bouton du tiroir » en haut de la section.

Contenu/Icône de présentation

Supprimez ensuite le contenu par défaut du titre et du corps et sélectionnez l'icône en forme de flèche qui pointe vers le coin supérieur gauche (voir capture d'écran). Nous utilisons l'icône partiellement tournée car nous allons la faire pivoter plus tard.

Conception de présentation

Ensuite, donnez au texte de présentation un arrière-plan comme suit :

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

Mettez ensuite à jour les paramètres de conception comme suit :

• Couleur de l'icône : #eeeeee
• Icône de cercle : OUI
• Couleur du cercle : #081540
• Utiliser la taille de la police de l'icône : OUI
• Taille de la police de l'icône : 17 px

Taille de la présentation

Donnez maintenant au module une hauteur et une largeur comme suit :

• Largeur: 30px
• Hauteur : 30px

Cela entraînera le débordement de l'icône en forme de cercle dans le conteneur de présentation pour créer la forme d'une goutte d'eau.

Position de présentation

Ensuite, donnez au texte de présentation une position absolue en haut au centre de la section.

• Position : Absolu
• Emplacement : Centre supérieur

Paramètres de transformation Blurb

Nous pouvons maintenant utiliser les options de transformation pour faire pivoter le texte de présentation/l'icône vers le haut et le positionner juste au-dessus du conteneur de section. Désormais, lorsque nous masquons la section sous la fenêtre du navigateur, l'icône restera visible/cliquable.

Mettez à jour les éléments suivants :

• Transformer Traduire Axe X : -50%
• Transformer traduire l'axe des Y : -250%
• Transformer l'axe Z de rotation : -45 deg

Retirez ensuite l'animation d'icône par défaut :

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

Nous allons utiliser JQuery pour basculer le tiroir, nous devons donc cibler le texte de présentation/l'icône en tant qu'élément cliquable avec une classe CSS que nous utiliserons plus tard dans le code. Ajoutez la classe CSS suivante :

• Classe CSS : tiroir-cible

Paramètres de la section du tiroir de pied de page

Maintenant, nous allons masquer la section "Pied de page" à l'aide de l'option de traduction de transformation. Ouvrez les paramètres de la section et mettez à jour les éléments suivants :

• Transformer traduire l'axe des Y : 100 %

La beauté de l'utilisation de transform translate ici est que les valeurs en pourcentage sont basées sur la taille réelle de l'élément. Donc 100% sur l'axe Y sera directement relatif à la hauteur de la section (peu importe ce que c'est à un moment donné). En d'autres termes, l'élément sera déplacé vers le bas de la distance exacte correspondant à sa propre hauteur.

Afin de réafficher le « tiroir de pied de page », nous allons devoir inverser la traduction de transformation que nous venons d'ajouter à la section. Pour ce faire, nous devrons cibler l'élément avec une classe CSS et désactiver la traduction de transformation lorsque vous cliquez sur l'icône (ramenez la section complète à sa position d'origine).

Ajouter une classe CSS à la section du tiroir de pied de page

Sous l'onglet avancé, ajoutez la classe CSS suivante :

• Classe CSS : has-transform

Section de tiroir de pied de page Position fixe

Pour la dernière étape, nous devons réparer le tiroir de pied de page de manière à ce qu'il (avec l'icône) flotte au bas de la fenêtre du navigateur.

Mettez à jour la position de la section « Tiroir de pied de page » comme suit :

• Position : Fixe
• Emplacement : En bas à gauche
• Indice Z : 13

Désactiver le contenu pour mobile

Étant donné que vous disposerez d'une quantité limitée de contenu du tiroir de pied de page qui tiendra sur la tablette et le téléphone (en raison de la hauteur limitée des écrans), vous devrez désactiver/masquer les éléments non essentiels de l'affichage. Dans cet exemple, nous allons masquer la rangée du milieu de la disposition de la section.

Ouvrez les paramètres de l'avant-dernière rangée dans la section « Tiroir de pied de page ». Sous l'onglet Avancé, mettez à jour l'option de visibilité pour désactiver la ligne sur le téléphone et la tablette.

Ajout du code personnalisé

Pour ajouter la fonctionnalité cliquer et basculer au tiroir de pied de page, nous devons ajouter des CSS et JQuery personnalisés à la page. Pour ce faire, créez un nouveau module de code sous le module de présentation utilisé pour le bouton.

Collez ensuite le code suivant dans la zone de code :

<style>
  .has-transform, .drawer-target {
    transition: all 400ms ease-in-out;
  } 
  .toggle-drawer-animation {
    transform: none !important;
  }
  .toggle-icon-animation {
    transform: rotate(-135deg) !important;
  }  
  .drawer-target {
    cursor: pointer;
  }
</style>
<script>
(function($) {
  $(document).ready(function(){
    $('.drawer-target').click(function(){
      $(this).toggleClass('toggle-icon-animation');      
      $('.has-transform').toggleClass('toggle-drawer-animation');   
    });    
  });
})( jQuery );   
</script>

Sauvegarder les modifications

N'oubliez pas de sauvegarder la mise en page avant de quitter l'éditeur.

Enregistrez également les modifications sur le générateur de thème.

Résultat final

Nous pouvons maintenant accéder à n'importe quelle page de votre site Web pour voir le résultat final.

Et le voici sur mobile.

Remarquez comment le pied de page global est également au bon endroit en bas de la page ainsi que le tiroir de pied de page fixe.

Dernières pensées

Espérons que le tiroir de pied de page flottant vous aidera à promouvoir le contenu de manière amusante et accessible. Comme n'importe quel tiroir, vous pouvez le remplir avec à peu près tout ce à quoi vous pouvez penser.

J'ai hâte de vous entendre dans les commentaires.

À votre santé!