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


Dans ce tutoriel Divi, vous apprendrez à le faire « Sticky » ou corriger une colonne dans divi ou le menu créé avec le Générateur de thèmes, d’une manière simple et en ajoutant quelques morceaux de code. Ceci est un tutoriel très demandé par la communauté et ici à UXDIVI Nous aimons faire plaisir à la communauté, alors commençons:

Temps de lecture estimé: 4e protocole

Noter: Ce tutoriel est obsolète avec l’une des dernières mises à jour de Divi qui intégrait l’option Sticky Elements dans Divi. Tu peux le voir Dans cette vidéo, nous vous expliquons cette nouvelle fonction de Divi.

La position CSS: propriété collante en gros c’est une sorte de combinaison entre les emploi stable et le position relative Ici, l’élément défile avec son conteneur jusqu’à ce qu’il atteigne une certaine position en haut ou en bas de la page (ou le décalage spécifié).

Collez ou collez un élément sur une feuille Cela permet à l’utilisateur de toujours avoir certaines options à portée de main, ce qui ajoute à l’expérience utilisateur. Cela garde les appels à l’action en vue sans être aussi invasif qu’un popup.

Voir un exemple ici:

Ces tutoriels sont très utiles lorsque vos en-têtes de sujets Divi comportent plusieurs sections.

Comment ancrer une section, une ligne ou un module dans Divi

Cette méthode est super simple et parfaite pour tout type d’article que vous souhaitez coller.

Entrez la configuration du module, de la section ou de la ligne et sélectionnez l’onglet Avancé. Dans le CSS personnalisé, vous devez mettre le code suivant dans l’élément principal.

position: sticky;
  top: 20px;
  z-index: 9999;

Si vous faites défiler et que cet élément atteint le haut de la page, il y restera. Si vous faites défiler vers l’arrière, il reviendra à sa position d’origine.

Conseil: l’utilisation de cette méthode pour un menu d’en-tête est un excellent moyen d’ajouter une section héros avec une grande image. Ensuite, lorsque vous faites défiler le menu, il défile vers le haut et devient collant.

Si vous avez plusieurs sections dans l’en-tête de votre sujet Divi mais que vous voulez juste corriger l’une d’entre elles pendant que les autres se déplacent avec le scroll (dans ce cas, il suffit de corriger le menu), soyez prudent.

Dans votre tableau de bord WordPress, entrez divi, puis entrez cela Générateur de thèmes Divi ou Générateur de thèmes. Créez un nouveau modèle et attribuez-le où vous le souhaitez sur tous les côtés d’une page.

Cliquez sur Ajouter un en-tête personnalisé (ou Ajouter un en-tête personnalisé), puis sur Créer un en-tête personnalisé (ou Créer un en-tête personnalisé).

Sélectionnez la section que vous souhaitez coller ou épingler lorsque l’utilisateur fait défiler. Allez dans Paramètres puis dans l’onglet Avancé. Ajoutez une classe CSS personnalisée et entrez:

Si vous avez plus d’une section dans le En-tête personnalisé Qu’as-tu fait avec Générateur de thèmes ajouter une deuxième classe:

Nous allons maintenant ajouter un peu de jQuery. Copiez et collez l’extrait ci-dessous dans la section l’onglet « Intégration » des options de conception de Divi.

<script>
jQuery(function ($) {
	var headerHeight = $('header.et-l.et-l--header').outerHeight();
	$(window).bind('scroll', function () {
		var windowHeight = $(window).height();
		if ($(window).scrollTop() < windowHeight - headerHeight) {
			$('pa-header').removeClass('pa-sticky-header');
		}
		else {
			$('pa-header').addClass('pa-sticky-header');
		}
	});
});
</script>

Ajoutez ce code au bas du CSS de votre site Web. Comme pour le précédent, vous devez entrer les options du thème Divi et coller le code dans le champ CSS personnalisé.

/*set a specific element as fixed when scrolling*/

.pa-sticky-header {
	position: fixed!important;
	top: 0;
	width: 100%;
}

Et si vous avez plus d’une section dans le menu de navigation qui a été créée avec le Générateur de thèmesvous pouvez utiliser ce deuxième code.

/*set a specific element as fixed when scrolling*/

.pa-sticky-header {
	position: fixed!important;
	top: 0;
	width: 100%;
}
.pa-sticky-header-2 {
	position: fixed!important;
	top: 100;
	width: 100%;
}

Intelligent! Voyez-vous à quel point c’est facile?

Nous nous lirons dans le prochain!



Source link

Recent Posts