Je souhaite obtenir des informations sur une formation complète concernant le thème DIVI dispensé
par un organisme de formation certifié par l’état.
Que la formation soit finançable par mon CPF (idéalement) ou autre


Depuis la sortie des Divi Sticky Options, des possibilités infinies de conception d’interactions ont été ajoutées à nos boîtes à outils Divi. En plus de la possibilité de rendre un en-tête collant lors du défilement, vous pouvez également changer le style de vos éléments en un état collant. C’est un excellent moyen de marquer votre en-tête une fois qu’il est collant et de créer une expérience utilisateur différente lorsque les utilisateurs lisent vos pages et vos publications.

L’une des questions fréquemment posées dans la communauté est de savoir comment changer le logo Divi dans un état collant. Dans ce tutoriel, nous allons vous montrer un moyen rapide et facile de le faire. Nous allons commencer le didacticiel en créant un en-tête global, puis appliquer les effets collants et, dans la troisième partie du didacticiel, vous montrer comment changer votre logo collant pendant que vous faites défiler. Si vous êtes déjà familiarisé avec les options collantes et les capacités d’en-tête globales de Divi, vous pouvez passer à la troisième partie du didacticiel pour voir les quelques étapes nécessaires pour changer votre logo collant au fur et à mesure que vous faites défiler.

Commençons!

Aperçu

Avant d’entrer dans le didacticiel, examinons rapidement le résultat sur différentes tailles d’écran.

Bureau

logo collant

Téléphone portable, téléphone portable

logo collant

Téléchargez le modèle d’en-tête global GRATUITEMENT

Pour mettre la main sur le modèle d’en-tête global gratuit, vous devez d’abord le télécharger à partir du bouton ci-dessous. Pour accéder au téléchargement, vous devez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez encore plus de bonté Divi et un pack de mise en page Divi gratuit tous les lundis! 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 plus abonné et ne recevrez aucun e-mail supplémentaire.

1. Créez la structure d’élément d’en-tête dans un nouveau modèle d’en-tête

Créer un nouveau modèle d’en-tête global

Tout d’abord, allez dans le Générateur de Thèmes Divi et créez un nouvel en-tête global ou personnalisé.

logo collant

logo collant

Section Paramètres

Couleur de l’arrière plan

Une fois que vous êtes dans l’éditeur de modèles, vous remarquerez une section. Ouvrez les paramètres de cette section et appliquez une couleur d’arrière-plan.

  • Couleur de fond: # 556de0

logo collant

distance

Accédez à l’onglet Conception de la section et supprimez les tampons supérieurs et inférieurs standard.

  • Rembourrage supérieur: 0px
  • Rembourrage au sol: 0px

logo collant

Boîte ombre

Ajoutez également une ombre de boîte.

  • Force de flou de l’ombre de la boîte: 50px
  • Couleur de l’ombre: rgba (0,0,0,0,15)

logo collant

Ajouter une nouvelle ligne

Structure de la colonne

Allez-y en ajoutant une nouvelle ligne à la section avec la structure de colonnes suivante:

logo collant

Dimensionnement

Ouvrez les paramètres de ligne et modifiez les paramètres de taille de ligne comme suit sans ajouter de modules:

  • Utiliser une largeur de gouttière personnalisée: Oui
  • Largeur de gouttière: 1
  • Compenser les hauteurs de colonne: Oui
  • Largeur:
    • Bureau: 80%
    • Tablette et téléphone: 100%
  • Largeur maximale: 2580px

logo collant

distance

Ensuite, retirez tous les tampons supérieurs et inférieurs standard.

  • Rembourrage supérieur: 0px
  • Rembourrage au sol: 0px

logo collant

Distance de la colonne 1

Ensuite, ouvrez les paramètres de la colonne 1 et appliquez un rembourrage supérieur et inférieur.

  • Rembourrage supérieur: 15px
  • Rembourrage au sol: 15px

logo collant

Couleur d’arrière-plan de la colonne 2

Passez aux paramètres de la deuxième colonne et ajoutez une couleur d’arrière-plan.

  • Couleur de fond: # 6eba01

logo collant

Ajouter le module de menu à la colonne 1

Choisissez le menu

Une fois les paramètres généraux de ligne et de colonne définis, des modules doivent être ajoutés, en commençant par un module de menu dans la colonne 1.

logo collant

Supprimer la couleur d’arrière-plan

Supprimez la couleur d’arrière-plan blanc par défaut du module.

logo collant

Paramètres du texte du menu

Accédez à l’onglet Conception du module et modifiez les paramètres de texte du menu en conséquence:

  • Police du menu: Montserrat
  • Épaisseur du menu des polices: gras
  • Couleur du texte du menu: #ffffff
  • Taille du texte du menu: 16px
  • Alignement du texte: à droite

logo collant

Paramètres du menu déroulant

Apportez ensuite quelques modifications aux paramètres du menu déroulant.

  • Couleur d’arrière-plan du menu déroulant: # 556de0
  • Menu déroulant des couleurs de ligne: rgba (0,45,76,0)
  • Couleur d’arrière-plan du menu mobile: # 556de0
  • Couleur du texte du menu mobile: #ffffff

logo collant

Icônes de paramètres

Ensuite, changez les couleurs des icônes.

  • Couleur de l’icône du panier: #ffffff
  • Couleur de l’icône de recherche: #ffffff
  • Couleur de l’icône du menu Hamburger: #ffffff

logo collant

distance

Appliquez des valeurs de distance réactives.

  • Bord supérieur:
  • Marge inférieure:
  • Marge de gauche:
  • Marge droite: 5%

logo collant

Ajouter le module de boutons à la colonne 2

Ajouter une copie

Dans la colonne 2, nous n’avons besoin que d’un module de boutons. Incluez une copie de votre choix.

logo collant

Alignement des clés

Accédez à l’onglet Conception du module et modifiez l’orientation du module.

logo collant

Paramètres des boutons

Ensuite, concevez le bouton.

  • Utiliser des styles de boutons personnalisés: Oui
  • Taille du texte du bouton: 17px
  • Couleur du texte du bouton: #ffffff
  • Largeur du cadre du bouton: 0px

logo collant

  • Espacement des lettres clés: 1px
  • Police du clavier: Montserrat
  • Style de police du bouton: majuscule

logo collant

distance

Appliquez des valeurs de distance réactives.

  • Bord supérieur:
    • Bureau: 30px
    • Tablette et téléphone: 20px
  • Marge inférieure:
    • Bureau: 30px
    • Tablette et téléphone: 20px

logo collant

2. Appliquer des effets collants personnalisés

Rendre la section collante

Maintenant que tous les éléments sont installés, il est temps d’ajouter l’effet collant et de changer également notre logo collant. Tout d’abord, ouvrez à nouveau les paramètres de la section. Allez dans l’onglet « Avancé » et acceptez les paramètres suivants pour la position de collage:

  • Position collante: restez debout
  • Limite inférieure collante: aucune
  • Décalage des éléments collants environnants: Oui
  • Styles de transition standard et collants: Oui

logo collant

Couleur d’arrière-plan de la section collante

Une fois que la section devient collante, nous pouvons donner aux éléments parent et enfant un style collant. Tout d’abord, accédez aux paramètres d’arrière-plan de la section et appliquez une couleur d’arrière-plan blanche dans un état collant.

  • Couleur d’arrière-plan: #FFFFFF

logo collant

Dimensionnement des lignes collantes

Ensuite, changez la largeur de la ligne en un état permanent.

logo collant

Distance collante de la colonne 1

Ensuite, nous supprimons le rembourrage supérieur et inférieur de la colonne 1 dans un état collant.

  • Rembourrage supérieur: 0px
  • Rembourrage au sol: 0px

logo collant

Colonne collante 2 couleur d’arrière-plan

Nous allons également changer la couleur d’arrière-plan de la colonne collante 2.

  • Couleur d’arrière-plan: # 556de0

logo collant

Couleur du texte du Sticky Menu

Ensuite, ouvrez le module de menu et appliquez une couleur de texte de menu collant.

logo collant

Paramètres du menu déroulant Sticky

Modifiez également certaines couleurs de menu déroulant dans un état collant.

  • Couleur d’arrière-plan du menu déroulant: #ffffff
  • Couleur d’arrière-plan du menu mobile: #ffffff
  • Couleur du texte du menu mobile: # 556de0

logo collant

Paramètres de l’icône du menu collant

Avec les couleurs des symboles collants.

  • Couleur de l’icône du panier: # 556de0
  • Couleur de l’icône de recherche: # 556de0
  • Couleur de l’icône du menu Hamburger: # 556de0

logo collant

Espace de menu collant

Ensuite, allez dans les paramètres d’espacement et appliquez une marge gauche collante.

logo collant

Espacement des boutons collants

Enfin, modifiez les valeurs de la bordure collante du module de boutons dans les paramètres d’espacement.

  • Marge supérieure: 15px
  • Marge inférieure: 15px

logo collant

3. Changez le logo en état permanent

Téléchargez les deux symboles dans la médiathèque

Tout ce que vous avez à faire est d’ajouter nos deux logos différents au module de menu. Un logo est appliqué dans un état statique et l’autre dans un état collant. Téléchargez les deux logos dans votre bibliothèque multimédia.

logo collant

Choisissez le logo statique

Ouvrez ensuite le module de menu et sélectionnez le fichier image du logo statique dans les paramètres du logo.

logo collant

Appliquer la largeur et la hauteur maximales du logo en pixels

Passez à l’onglet «Design» du module et appliquez une largeur et une hauteur maximales du logo. Ces valeurs nous aident à conserver la même taille de notre logo statique et collant.

  • Largeur maximale du logo: 100px
  • Hauteur maximale du logo: 60px

logo collant

Copiez l’URL du logo collant

Revenez maintenant à votre médiathèque et copiez l’url de votre logo collant.

logo collant

Ajouter une URL persistante dans un état permanent (menu de l’élément principal du logo)

Pour changer le logo en état collant, naviguons vers l’onglet « Avancé » du module de menu et faisons défiler vers le bas jusqu’au champ CSS « Logo du menu ». Là, nous activons les options collantes dans la boîte CSS et ajoutons une ligne de code CSS avec l’URL du logo collant entre parenthèses. C’est ça!

content: url(addlinkhere);

logo collant

Aperçu

Maintenant que nous avons parcouru toutes les étapes, jetons un dernier coup d’œil au résultat sur différentes tailles d’écran.

Bureau

logo collant

Téléphone portable, téléphone portable

logo collant

Dernières pensées

Dans cet article, nous vous avons montré comment changer votre logo collant lorsque vous faites défiler en utilisant les options collantes de Divi. Avec cette approche, vous pouvez utiliser deux logos différents dans votre en-tête sans avoir à utiliser des menus séparés. Nous vous avons d’abord montré comment créer l’en-tête global. Ensuite, nous avons rendu notre section collante et changé les styles collants. Nous avons terminé le didacticiel en vous montrant comment modifier votre logo collant au fur et à mesure que vous faites défiler la troisième partie du didacticiel. Si vous avez des questions ou des suggestions, n’hésitez pas à laisser un commentaire dans la section commentaires ci-dessous!

Si vous voulez en savoir plus sur Divi et obtenir plus de cadeaux Divi, assurez-vous de l’avoir Abonnez-vous à notre newsletter et chaîne Youtube Vous êtes donc toujours l’un des premiers à connaître et à bénéficier de ce contenu gratuit.





Source link

Recent Posts