{"id":350969,"date":"2022-03-30T04:32:32","date_gmt":"2022-03-30T04:32:32","guid":{"rendered":"https:\/\/www.lafactory.online\/?p=350969"},"modified":"2022-03-30T04:32:36","modified_gmt":"2022-03-30T04:32:36","slug":"comment-concevoir-un-tiroir-de-pied-de-page-flottant-dans-divi","status":"publish","type":"post","link":"https:\/\/www.lafactory.com\/blog\/comment-concevoir-un-tiroir-de-pied-de-page-flottant-dans-divi\/","title":{"rendered":"Comment concevoir un tiroir de pied de page flottant dans Divi"},"content":{"rendered":"\n
Divi-Footer-Template-with-Footer-Drawer.json_<\/a>Download<\/a><\/div>\n\n\n
\n

Les tiroirs de pied de page sont des ajouts utiles \u00e0 tout site Web car ils permettent de stocker du contenu suppl\u00e9mentaire facilement accessible aux utilisateurs. Les tiroirs de pied de page sont des conteneurs de contenu Web (comme une section Divi) qui peuvent \u00eatre ouverts et ferm\u00e9s par un simple clic sur un bouton ou par survol. C’est comme avoir une petite cachette pour le contenu premium.<\/p>\n

Dans ce tutoriel, nous allons concevoir un tiroir de pied de page flottant dans Divi. Nous ajouterons le tiroir de pied de page \u00e0 la zone de pied de page globale du mod\u00e8le de site Web afin que le tiroir de pied de page soit accessible dans tout le site avec le contenu de pied de page normal.<\/p>\n

Avec le processus que nous allons utiliser, n’importe quelle section Divi (et son contenu) peut \u00eatre convertie en tiroir de pied de page en quelques minutes.<\/p>\n

C’est parti !<\/p>\n

\u00a0<\/p>\n

Comment ajouter le mod\u00e8le de tiroir de pied de page \u00e0 votre site Divi<\/h3>\n

ATTENTION ! L’ajout de ce mod\u00e8le remplacera le mod\u00e8le de site Web par d\u00e9faut (si vous en avez un) sur votre site Divi. Nous vous sugg\u00e9rons d’ajouter ce mod\u00e8le \u00e0 un site de test afin de ne rien g\u00e2cher sur un site r\u00e9el.<\/p>\n

Pour importer le mod\u00e8le de tiroir de pied de page fixe sur votre propre site Web, d\u00e9compressez le fichier zip de t\u00e9l\u00e9chargement pour acc\u00e9der au fichier JSON.<\/p>\n

Ensuite, allez dans le tableau de bord de WordPress et naviguez dans Divi > Theme Builder.<\/p>\n

Cliquez ensuite sur l’ic\u00f4ne de portabilit\u00e9 en haut \u00e0 droite de la page.<\/p>\n

Dans la fen\u00eatre popup de portabilit\u00e9, choisissez le fichier JSON que vous venez de d\u00e9compresser et s\u00e9lectionnez l’option \u00ab\u00a0T\u00e9l\u00e9charger la sauvegarde avant l’importation\u00a0\u00bb, juste au cas o\u00f9 vous aviez pr\u00e9c\u00e9demment quelque chose dans le mod\u00e8le de site Web par d\u00e9faut que vous ne vouliez pas remplacer.<\/p>\n

Cliquez ensuite sur le bouton \u00ab\u00a0Importer\u00a0\u00bb.<\/p>\n

\"fixed<\/p>\n

Enfin, enregistrez les modifications apport\u00e9es par le constructeur de th\u00e8me et affichez une page en direct pour voir la barre de bas de page fixe.<\/p>\n

\"fixed<\/p>\n

Maintenant, passons au tutoriel, d’accord ?<\/p>\n

Partie 1 : Ajout d’un pied de page global<\/h2>\n

Le cr\u00e9ateur de th\u00e8me de Divi vous permet de remplacer le pied de page par d\u00e9faut par un nouveau en mettant \u00e0 jour le mod\u00e8le de site Web par d\u00e9faut.<\/p>\n

Pour cr\u00e9er un pied de page global, allez sur le tableau de bord de WordPress et naviguez vers Divi > Theme Builder. Cliquez ensuite sur l’espace \u00ab\u00a0Ajouter un pied de page global\u00a0\u00bb dans le mod\u00e8le de site Web par d\u00e9faut.<\/p>\n

\"divi<\/p>\n

S\u00e9lectionnez ensuite l’option \u00a0\u00bb Build Global Footer \u00a0\u00bb dans la liste d\u00e9roulante.<\/p>\n

\"divi<\/p>\n

Ajouter une mise en page pr\u00e9fabriqu\u00e9e \u00e0 la mise en page du pied de page global<\/h3>\n

Cette op\u00e9ration d\u00e9ploie l’\u00e9diteur de mod\u00e8le de mise en page, dans lequel vous \u00eates imm\u00e9diatement invit\u00e9 \u00e0 choisir parmi trois options pour commencer la construction. S\u00e9lectionnez l’option \u00ab\u00a0Choose a Premade Layout\u00a0\u00bb.<\/p>\n

\"fixed<\/p>\n

Dans la fen\u00eatre contextuelle Charger de la biblioth\u00e8que, trouvez la mise en page de la page d’accueil de Stationery Shop. Cliquez ensuite sur \u00ab\u00a0Utiliser cette mise en page\u00a0\u00bb.<\/p>\n

\"fixed<\/p>\n

Supprimer le contenu ind\u00e9sirable d’une mise en page pr\u00e9fabriqu\u00e9e<\/h3>\n

Une fois la mise en page charg\u00e9e dans l’\u00e9diteur, d\u00e9ployez la fen\u00eatre popup Layers en cliquant sur l’ic\u00f4ne layers dans le menu settings. Supprimez ensuite toutes les sections de la mise en page, \u00e0 l’exception des deux derni\u00e8res.<\/p>\n

\"fixed<\/p>\n

D\u00e9placez et \u00e9tiquetez les deux sections<\/h3>\n

Une fois les sections supprim\u00e9es, vous devez avoir deux sections, l’une intitul\u00e9e \u00ab\u00a0Pied de page\u00a0\u00bb et l’autre \u00ab\u00a0Comment \u00e7a marche\u00a0\u00bb. D\u00e9placez la section \u00ab\u00a0Pied de page\u00a0\u00bb en haut de la mise en page.<\/p>\n

\"fixed<\/p>\n

Changez l’intitul\u00e9 de la section inf\u00e9rieure en \u00ab\u00a0Tiroir de pied de page\u00a0\u00bb. Il s’agit de la section que nous utiliserons pour le contenu de notre tiroir de pied de page.<\/p>\n

\"fixed<\/p>\n

Partie 2 : cr\u00e9ation du tiroir de pied de page fixe<\/h2>\n

Maintenant que nous avons d\u00e9sign\u00e9 l’une des sections comme notre pied de page et l’autre comme le tiroir de pied de page, nous sommes pr\u00eats \u00e0 commencer \u00e0 cr\u00e9er notre tiroir de pied de page fixe. Commen\u00e7ons par cr\u00e9er l’ic\u00f4ne de blurb que nous utiliserons pour faire basculer le tiroir de pied de page.<\/p>\n

Cr\u00e9ation du bouton du tiroir de bas de page<\/h3>\n

Ajouter une nouvelle rang\u00e9e<\/h4>\n

Dans la section inf\u00e9rieure \u00ab\u00a0Tiroir de bas de page\u00a0\u00bb, ajoutez une nouvelle rang\u00e9e d’une colonne.<\/p>\n

\"fixed<\/p>\n

Intitulez cette nouvelle ligne \u00ab\u00a0Bouton du tiroir\u00a0\u00bb, car c’est elle qui contiendra le bouton permettant d’ouvrir et de fermer le tiroir. D\u00e9placez ensuite la ligne vers le haut de la section.<\/p>\n

\"fixed<\/p>\n

Remplissage des rang\u00e9es<\/h4>\n

Avant d’ajouter un module, ouvrez les param\u00e8tres de la rang\u00e9e et mettez \u00e0 jour le remplissage comme suit :<\/p>\n

    \n
  • Padding : 0px haut, 0px bas<\/li>\n<\/ul>\n

    \"fixed<\/p>\n

    Remplissage de la section<\/h4>\n

    Ensuite, ouvrez les param\u00e8tres de la section \u00ab\u00a0Tiroir de bas de page\u00a0\u00bb et mettez \u00e0 jour le remplissage comme suit :<\/p>\n

    \"fixed<\/p>\n

    Pour cr\u00e9er le bouton cliquable qui fait basculer le tiroir de pied de page, nous allons utiliser un module blurb avec une ic\u00f4ne. Et nous allons lui donner une forme unique de goutte d’eau en combinant la forme carr\u00e9e du conteneur du module blurb avec l’ic\u00f4ne circulaire.<\/p>\n

    Voici comment proc\u00e9der.<\/p>\n

    Ajouter un module Blurb<\/h4>\n

    Ajoutez un module de pr\u00e9sentation \u00e0 la rang\u00e9e \u00ab\u00a0Bouton de tiroir\u00a0\u00bb en haut de la section.<\/p>\n

    \"fixed<\/p>\n

    Contenu\/ic\u00f4ne du blurb<\/h5>\n

    Supprimez ensuite le contenu par d\u00e9faut du Titre et du Corps et s\u00e9lectionnez l’ic\u00f4ne de la fl\u00e8che qui pointe vers le coin sup\u00e9rieur gauche (voir la capture d’\u00e9cran). Nous utilisons l’ic\u00f4ne partiellement tourn\u00e9e car nous allons la faire pivoter ult\u00e9rieurement.<\/p>\n

    \"fixed<\/p>\n

    Conception du texte d’accompagnement<\/h5>\n

    Ensuite, donnez un arri\u00e8re-plan au texte de pr\u00e9sentation comme suit :<\/p>\n

      \n
    • Couleur de fond : #081540<\/li>\n<\/ul>\n

      \"fixed<\/p>\n

      Mettez ensuite \u00e0 jour les param\u00e8tres de conception comme suit :<\/p>\n

        \n
      • Couleur de l’ic\u00f4ne : #eeeeee<\/li>\n
      • Ic\u00f4ne de cercle : YES<\/li>\n
      • Couleur du cercle : #081540<\/li>\n
      • Utiliser la taille de police de l’ic\u00f4ne : YES<\/li>\n
      • Taille de la police de l’ic\u00f4ne : 17px<\/li>\n<\/ul>\n

        \"fixed<\/p>\n

        Blurb Size<\/h5>\n

        Donnez maintenant au module une hauteur et une largeur comme suit :<\/p>\n

        Ainsi, l’ic\u00f4ne en forme de cercle d\u00e9bordera du conteneur du blurb pour cr\u00e9er la forme d’une goutte d’eau.<\/p>\n

        \"fixed<\/p>\n

        Position du texte d’accompagnement<\/h5>\n

        Ensuite, donnez au texte de pr\u00e9sentation une position absolue au centre sup\u00e9rieur de la section.<\/p>\n

          \n
        • Position : Absolue<\/li>\n
        • Emplacement : Centre sup\u00e9rieur<\/li>\n<\/ul>\n

          \"fixed<\/p>\n

          Param\u00e8tres de transformation du texte d’accompagnement<\/h5>\n

          Nous pouvons maintenant utiliser les options de transformation pour faire pivoter le texte publicitaire\/l’ic\u00f4ne \u00e0 la verticale et le positionner juste au-dessus du conteneur de la section. Ainsi, lorsque nous masquerons la section sous la fen\u00eatre du navigateur, l’ic\u00f4ne restera visible et cliquable.<\/p>\n

          Mettez \u00e0 jour les \u00e9l\u00e9ments suivants :<\/p>\n

            \n
          • Transformation – Axe X : -50 %<\/li>\n
          • Transformation de l’axe Y : -250%<\/li>\n
          • Transformer l’axe Z : -45deg<\/li>\n<\/ul>\n

            Puis supprimez l’animation par d\u00e9faut de l’ic\u00f4ne :<\/p>\n

              \n
            • Animation des images\/ic\u00f4nes : Aucune animation<\/li>\n<\/ul>\n

              \"fixed<\/p>\n

              Nous allons utiliser JQuery pour faire basculer le tiroir, nous devons donc cibler le blurb\/icon comme \u00e9l\u00e9ment cliquable avec une classe CSS que nous utiliserons plus tard dans le code. Ajoutez la classe CSS suivante :<\/p>\n

              \"fixed<\/p>\n

              Footer Drawer Section Section Settings<\/h3>\n

              Nous allons maintenant masquer la section \u00ab\u00a0Tiroir de bas de page\u00a0\u00bb \u00e0 l’aide de l’option de transformation et de traduction. Ouvrez les param\u00e8tres de la section et mettez \u00e0 jour les \u00e9l\u00e9ments suivants :<\/p>\n

                \n
              • Transformation Translate Y Axis : 100<\/li>\n<\/ul>\n

                La beaut\u00e9 de l’utilisation de l’option transform translate ici est que les valeurs de pourcentage sont bas\u00e9es sur la taille r\u00e9elle de l’\u00e9l\u00e9ment. Ainsi, la valeur de 100 % sur l’axe Y sera directement li\u00e9e \u00e0 la hauteur de la section (quelle que soit sa valeur \u00e0 un moment donn\u00e9). En d’autres termes, l’\u00e9l\u00e9ment sera d\u00e9plac\u00e9 vers le bas sur la distance exacte de sa propre hauteur.<\/p>\n

                \"fixed<\/p>\n

                Afin de ramener le \u00ab\u00a0tiroir de bas de page\u00a0\u00bb en vue, nous allons devoir inverser la translation de transformation que nous venons d’ajouter \u00e0 la section. Pour ce faire, nous devons cibler l’\u00e9l\u00e9ment \u00e0 l’aide d’une classe CSS et d\u00e9sactiver la translation transform\u00e9e en cliquant sur l’ic\u00f4ne (pour ramener la section compl\u00e8te \u00e0 sa position d’origine).<\/p>\n

                Ajouter une classe CSS \u00e0 la section du tiroir de bas de page<\/h4>\n

                Sous l’onglet avanc\u00e9, ajoutez la classe CSS suivante :<\/p>\n

                \"fixed<\/p>\n

                Position fixe de la section du tiroir de bas de page<\/h4>\n

                Pour la derni\u00e8re \u00e9tape, nous devons rendre le tiroir de pied de page fixe afin qu’il flotte (avec l’ic\u00f4ne) au bas de la fen\u00eatre du navigateur.<\/p>\n

                Mettez \u00e0 jour la position de la section \u00ab\u00a0Tiroir de bas de page\u00a0\u00bb comme suit :<\/p>\n

                  \n
                • Positon : Fixe<\/li>\n
                • Emplacement : En bas \u00e0 gauche<\/li>\n
                • Index Z : 13<\/li>\n<\/ul>\n

                  \"fixed<\/p>\n

                  D\u00e9sactivation du contenu pour les mobiles<\/h3>\n

                  \u00c9tant donn\u00e9 que la quantit\u00e9 de contenu du tiroir de bas de page qui tiendra sur les tablettes et les t\u00e9l\u00e9phones sera limit\u00e9e (en raison de la hauteur limit\u00e9e des \u00e9crans), vous devrez d\u00e9sactiver\/masquer les \u00e9l\u00e9ments non essentiels pour qu’ils ne s’affichent pas. Dans cet exemple, nous allons masquer la rang\u00e9e centrale de la mise en page de la section.<\/p>\n

                  \"fixed<\/p>\n

                  Ouvrez les param\u00e8tres de l’avant-derni\u00e8re rang\u00e9e de la section \u00ab\u00a0Tiroir de bas de page\u00a0\u00bb. Sous l’onglet avanc\u00e9, mettez \u00e0 jour l’option de visibilit\u00e9 pour d\u00e9sactiver la rang\u00e9e sur t\u00e9l\u00e9phone et tablette.<\/p>\n

                  \"fixed<\/p>\n

                  Ajout du code personnalis\u00e9<\/h3>\n

                  Pour ajouter la fonctionnalit\u00e9 de clic et de basculement au tiroir de pied de page, nous devons ajouter quelques CSS et JQuery personnalis\u00e9s \u00e0 la page. Pour ce faire, cr\u00e9ez un nouveau module de code sous le module blurb utilis\u00e9 pour le bouton.<\/p>\n

                  \"fixed<\/p>\n

                  Collez ensuite le code suivant dans la zone de code :<\/p>\n