Kit de mise en page Divi gratuit chaque semaine! Comment ajouter un modèle de tiroir de pied de page à votre partage de site remarque!: L’ajout de ce modèle écrasera le modèle de site par défaut sur le site Divi, le cas échéant. Nous vous recommandons de l’ajouter au site d’essai afin que vous ne détruisiez rien sur le site.
Pour importer un modèle de tiroir à pied de page fixe dans un site Web, décompressez et téléchargez le fichier zip pour accéder au fichier json. Ensuite, allez sur le tableau de bord WordPress et allez sur Divi > Theme Builder. Cliquez ensuite sur l’icône portabilité dans le coin supérieur droit de la page. Dans la fenêtre contextuelle de portabilité, sélectionnez le fichier json que vous venez de décompresser et sélectionnez l’option Télécharger la sauvegarde avant l’importation au cas où vous auriez déjà quelque chose dans le modèle de site par défaut que vous ne voulez pas écraser. Puis cliquez sur le bouton importer.
Enfin, enregistrez les modifications dans le générateur de thème et visualisez la page active pour voir le pied de page fixe. Passons au tutoriel. Partie 1: le générateur de sujets qui ajoute global footer Divi vous permet de remplacer le footer par défaut par un nouveau footer en mettant à jour le modèle de site par défaut. Pour créer un pied de page global, allez sur le tableau de bord WordPress, puis allez sur Divi > Theme Builder. Cliquez ensuite sur Ajouter un pied de page global dans le modèle de site par défaut. Sélectionnez ensuite l’option créer un pied de page global dans le menu déroulant.
Ajoutez la mise en page par défaut à la mise en page globale du pied de page ceci déploiera l’éditeur de mise en page du modèle, qui vous demandera immédiatement trois options sur la façon de commencer la construction. Sélectionnez l’option select default Layout. À partir de la fenêtre contextuelle upload from Library, localisez la disposition de la page d’atterrissage de la papeterie. Puis cliquez sur utiliser cette mise en page. Supprimer l’index de contenu
En haut de la partie. Brouillez le contenu \ icône, puis supprimez le contenu par défaut du titre et du corps, et sélectionnez l’icône flèche pointant vers le coin supérieur gauche (voir capture d’écran). Nous utilisons une icône partiellement tournée parce qu’elle sera tournée plus tard.
Blurb Design fournit ensuite l’arrière – plan suivant pour Blurb: couleur de l’arrière – plan: # 081540 Puis mettre à jour les paramètres de conception comme suit: couleur de l’icône: # icône du cercle eeee: couleur du cercle S: # 081540 utiliser la taille de police de l’icône: taille de police de l’icône s: 17px La taille du flou indique maintenant la hauteur et la largeur du module comme suit: largeur: 30px hauteur: 30px cela fera déborder l’icône du cercle du conteneur flou pour créer la forme de la goutte d’eau. Ensuite, spécifiez une position absolue pour Blurb au Centre supérieur de la section.
Position: absolue: Centre supérieur Les paramètres de transformation du flou vous permettent maintenant de faire tourner verticalement l’icône du flou \ flou en utilisant les options de transformation et de la placer directement au – dessus du conteneur de section. Maintenant, l’icône reste visible \ cliquable lorsque nous cachons la section sous la fenêtre du navigateur. Mise à jour comme suit: Transform Transform x axis: – 50% Transform y axis: – 250% Transform z axis Wheel: – 45° and delete default icon Animation: image \ icon Animation: No Animation Nous utiliserons jquery pour activer \ désactiver le dessin, donc nous devons utiliser Blurb \ icon comme un élément cliquable avec une classe CSS que nous utiliserons plus tard dans notre Code. Ajouter la classe CSS suivante: classe CSS: dessiner la cible Configuration de la section tiroirs de pied de page maintenant, nous allons utiliser l’option convertir pour masquer la section tiroirs de pied de page. Ouvrir les paramètres de section et mettre à jour ce qui suit: transformer l’axe Y: 100% en utilisant
Ici, le translate de transformation est la valeur en pourcentage basée sur la taille réelle de l’élément. Par conséquent, 100% de l’axe des y sera directement relatif à la hauteur de la section, quel que soit le moment donné. En d’autres termes, le projet se déplace vers le bas à une distance précise de sa hauteur. Pour restaurer le tiroir du pied de page, nous devons inverser la traduction de conversion que nous venons d’ajouter à la section. Pour ce faire, nous devons cibler la classe CSS et désactiver la conversion de conversion lorsque nous cliquons sur l’icône (retourner toute la section à son emplacement d’origine). Ajoutez la classe CSS à la section tiroirs de pied de page de l’onglet avancé et ajoutez la classe CSS suivante: classe CSS: has Transform Position du tiroir de pied de page fixe pour la dernière étape, nous devons fixer le tiroir de pied de page de sorte qu’il (avec l’icône) flotte au bas de la fenêtre du navigateur. Mettre à jour la section tiroir du pied de page aux endroits suivants: emplacement: emplacement fixe: index Z en bas à gauche: 13 En raison de la quantité limitée de contenu dans votre tiroir de pied de page qui convient à votre tablette et à votre téléphone (en raison de la hauteur limitée de l’écran), vous devez désactiver \ masquer l’affichage des éléments non essentiels. Dans cet exemple, nous cacherons la ligne centrale de la disposition de la section. Ouvrez les paramètres de l’avant – dernière ligne de la section tiroir du pied de page. Dans l’onglet avancé, mettez à jour l’option visibilité pour désactiver les lignes sur votre téléphone et votre tablette. Ajouter du code personnalisé pour ajouter des clics et activer \ désactiver la fonctionnalité au tiroir du pied de page, vous devez ajouter des CSS personnalisés et jquery à la page. Pour ce faire, créez un nouveau module de code sous le module Blurb Utiliz
Zato per il button. Ensuite, collez le code suivant dans la zone de code:
– Oui. Converti. Dessiner la cible {
Transition: tous les 400 MS entrent et sortent lentement;
}
– Oui. Basculer l’animation du tiroir
Transformation: aucune! Important
}
– Oui. Basculer l’animation des icônes
Transformation: rotation (- 135 degrés)! Important
}
– Oui. Dessiner la cible {
Curseur: pointeur;
}
(fonction ($)
USD (file). Ready (Function () {
$(\
$(this). Toggleclass (« TOGGLE icon animation»);
$(\
});
});
}) (jquery);
Enregistrer les modifications n’oubliez pas d’enregistrer la mise en page avant de quitter l’éditeur. Il enregistre également les modifications apportées au générateur de thème. Résultats finaux nous pouvons maintenant consulter les résultats finaux sur n’importe quelle page de votre site Web. Son portable est là. Notez que le pied de page global est également dans la bonne position au bas de la page, tout comme le tiroir du pied de page fixe. Nous espérons que le déplacement du tiroir du pied de page vous aidera à promouvoir le contenu d’une manière amusante et accessible. Comme n’importe quel tiroir, vous pouvez le remplir avec tout ce que vous pouvez penser. J’ai hâte d’entendre vos commentaires. Bonjour!
En haut de la partie.
Position: absolue: Centre supérieur
Ici, le translate de transformation est la valeur en pourcentage basée sur la taille réelle de l’élément. Par conséquent, 100% de l’axe des y sera directement relatif à la hauteur de la section, quel que soit le moment donné. En d’autres termes, le projet se déplace vers le bas à une distance précise de sa hauteur.
Zato per il button.
Transition: tous les 400 MS entrent et sortent lentement;
}
– Oui. Basculer l’animation du tiroir
Transformation: aucune! Important
}
– Oui. Basculer l’animation des icônes
Transformation: rotation (- 135 degrés)! Important
}
– Oui. Dessiner la cible {
Curseur: pointeur;
}
USD (file). Ready (Function () {
$(\
$(this). Toggleclass (« TOGGLE icon animation»);
$(\
});
});
}) (jquery);