TRUCS & ASTUCES

Comment commencer?

Étape 1 : Créer une Section et une Rangée dans Divi

1.  Ouvrez la page où vous souhaitez ajouter la pagination ou créez une nouvelle page dans Divi.
2.  Ajoutez une Section à votre page. Sélectionnez une Section régulière pour un agencement simple.
3.  Dans cette section, ajoutez une Rangée. Vous pouvez choisir le nombre de colonnes selon vos besoins (par exemple 1, 2, 3 ou 4 colonnes).
4.  Ajoutez des modules (texte, image, vidéo, etc.) dans chaque colonne. Ce sont ces modules que vous allez afficher ou masquer en fonction de la pagination.
5.  Si vous avez besoin de plusieurs rangées, vous pouvez dupliquer la rangée existante autant de fois que nécessaire, puis modifier le contenu de chaque rangée selon vos préférences. Par exemple, vous pouvez avoir trois rangées avec des modules différents dans chaque rangée.
6. Assurez-vous que chaque rangée à dupliquer soit correctement configurée avant de passer à l’étape suivante.

Étape 2 : Ajouter une Rangée avec un Module « Code » pour le JavaScript et le CSS

1. Sous la rangée contenant vos modules, ajoutez une nouvelle Rangée.
2. Ajoutez un module « Code » dans cette rangée pour insérer le code HTML, JavaScript et CSS nécessaires à la pagination.

Étape 3 : Appliquer des Classes CSS aux Rangées

1. Sélectionnez chaque rangée contenant les modules que vous souhaitez afficher ou masquer.
2. Dans les paramètres de chaque rangée, allez dans l’onglet Avancé > ID et classes CSS.
3. Ajoutez la classe suivante pour chaque rangée :
• section-row-1 pour la première rangée.
• section-row-2 pour la deuxième, et ainsi de suite.
4. Cette étape permet au JavaScript de cibler les rangées par classe et d’appliquer la pagination correctement.

Étape 4 : Ajouter le Code HTML, JavaScript et CSS

Ajoutez une nouvelle rangée sous la précédente et dans cette rangée, ajoutez une module « code » de Divi.

Dans ce module « Code », collez le code suivant :

Ajoutez une nouvelle rangée sous la précédente et dans cette rangée, ajoutez une module « code » de Divi.

Dans ce module « Code », collez le code suivant :

<div id= »pagination-container »>
<!– Boutons de navigation –>
<button id= »prev-btn »>Précédent</button>
<button class= »pagination-btn » data-row= »1″>1</button>
<button class= »pagination-btn » data-row= »2″>2</button>
<button class= »pagination-btn » data-row= »3″>3</button>
<button id= »next-btn »>Suivant</button>
</div>

<script>
// Attendre que le DOM soit entièrement chargé avant d’exécuter le script
document.addEventListener(‘DOMContentLoaded’, function() {
// Sélectionner tous les boutons de pagination
const paginationButtons = document.querySelectorAll(‘.pagination-btn’);
const prevButton = document.getElementById(‘prev-btn’);
const nextButton = document.getElementById(‘next-btn’);

// Initialiser la page actuelle et le nombre total de pages
let currentPage = 1;
const totalPages = paginationButtons.length;

// Fonction pour afficher la rangée correspondant à la page
function showRow(page) {
// Sélectionner toutes les rangées (ici, les rangées sont section-row-1, section-row-2, etc.)
const rows = document.querySelectorAll(‘.section-row-1, .section-row-2, .section-row-3’);

// Masquer toutes les rangées sauf celle correspondant à la page
rows.forEach((row, index) => {
row.style.display = (index + 1 === page) ? ‘block’ : ‘none’;
});

// Mettre à jour l’état des boutons de pagination
paginationButtons.forEach(button => {
button.classList.toggle(‘active-button’, parseInt(button.dataset.row) === page);
});

// Désactiver les boutons « Précédent » et « Suivant » lorsque nécessaire
prevButton.disabled = (page === 1);
nextButton.disabled = (page === totalPages);

// Appliquer un style aux boutons désactivés
if (page === 1) {
prevButton.classList.add(‘disabled’);
} else {
prevButton.classList.remove(‘disabled’);
}

if (page === totalPages) {
nextButton.classList.add(‘disabled’);
} else {
nextButton.classList.remove(‘disabled’);
}
}

// Ajouter des écouteurs d’événements sur les boutons de pagination
paginationButtons.forEach(button => {
button.addEventListener(‘click’, function() {
// Mettre à jour la page actuelle et afficher la rangée correspondante
currentPage = parseInt(this.dataset.row);
showRow(currentPage);
});
});

// Gestion des clics sur les boutons « Précédent » et « Suivant »
prevButton.addEventListener(‘click’, function() {
if (currentPage > 1) {
currentPage–;
showRow(currentPage);
}
});

nextButton.addEventListener(‘click’, function() {
if (currentPage < totalPages) {
currentPage++;
showRow(currentPage);
}
});

// Afficher la première rangée par défaut
showRow(currentPage);
});
</script>

<style>
/* Par défaut, afficher la première rangée et masquer les autres.
Vous pouvez ajouter d’autres rangées en suivant le modèle suivant.
Exemple : Pour une rangée 4, dupliquer la classe .section-row-3 et lui attribuer la classe .section-row-4 dans le HTML et le CSS. */
.section-row-1 {
display: block;
}
.section-row-2,
.section-row-3 {
display: none;
}

/* Si vous ajoutez plus de rangées, par exemple .section-row-4, vous devrez aussi l’ajouter ici */
.section-row-4 {
display: none;
}

/* Style pour le conteneur de pagination */
#pagination-container {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
margin-top: 20px;
}

#pagination-container button {
padding: 10px 15px;
border: none;
border-radius: 5px;
background-color: #f25252;
color: white;
cursor: pointer;
font-size: 14px;
}

#pagination-container button:hover {
background-color: #d24040;
}

#pagination-container button:disabled {
background-color: #ccc;
cursor: not-allowed;
}

#pagination-container button.disabled {
background-color: #ccc;
cursor: not-allowed;
}

#pagination-container button.active-button {
background-color: #d24040;
font-weight: bold;
}
</style>

Explications pour l’utilisateur :

1. Ajout de nouvelles rangées :

Dans l’exemple ci-dessus, il y a trois rangées :
section-row-1, section-row-2, et section-row-3.
Si vous souhaitez ajouter plus de rangées, dupliquez l’une des classes existantes (par exemple, section-row-3)
et attribuez-lui un nouveau nom, comme section-row-4.

Ensuite, ajoutez une entrée similaire dans le CSS (en suivant le même modèle) pour masquer cette nouvelle rangée par défaut.

2. Mise à jour des boutons de pagination :

• Pour chaque nouvelle rangée ajoutée, créez un bouton correspondant dans le HTML :

• <button class="pagination-btn" data-row="4">4</button>
  

Le nombre total de pages est calculé automatiquement en fonction du nombre de boutons de pagination.
Il n’est donc pas nécessaire de modifier la variable totalPages manuellement.

3. Affichage et masquage des rangées :

La fonction showRow() masque toutes les rangées sauf celle correspondant à la page actuelle.
Elle sélectionne les rangées grâce à des classes comme section-row-1, section-row-2, etc.

Si vous ajoutez de nouvelles rangées, assurez-vous que leurs classes soient correctement ajoutées
dans votre code HTML et CSS.

Conclusion