Voir la démo

Télécharger la source

Masonry c’est quoi ?

Pour ce tuto on va utiliser une librairie Javascript qui permet « d’emboiter » différents contenus entre eux comme un Tétris.
site de la librairie Masonry

Préparation des fichiers

Il va nous falloir appeler 2 fichiers javascript : Jquery et la librairie Masonry.

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>

Ces lignes de code sont à mettre dans votre footer.php  (de votre thème enfant de préférence).

Ensuite je vais appeler la fonction pour « activer » la librairie

<script>
// init Masonry
 var $grid = $('.galerie').masonry({
 itemSelector: '.galerie-item',
 percentPosition: true
 });
 </script>

2 choses à retenir ici :
.galerie est la classe css de votre conteneur
.galerie-item est la classe de l’élément

Je vais vous montrer où mettre ces classes.

Préparation du builder Divi

Vous pouvez mixer plusieurs sorte de module entre eux.
Il est possible suivant le module choisi qu’il faille faire un peu de CSS pour que celui-ci s’intègre au mieux.
Les modules les plus facile à utiliser sont l’image et le texte.

Un peu de CSS


.page .galerie .galerie-items:after {
 content: '';
 display: block;
 clear: both;
}
.page .galerie .galerie-item {
 width: 33.33%;
 margin: 0;
}
.page .galerie-item img {
 display: block;
 max-width: 100%;
}

Le plus important ici est la largeur à 33,33%.
C’est cette valeur qui va déterminer votre colonne.
Le reste du CSS est là pour maximiser l’affichage et d’éviter les bugs.

Bien évidement vous pouvez rajouter des Média Queries suivant les résolutions d’écrans pour changer la largeur de vos colonnes.

c’est tout ! Facile non ?

 

Voir la démo

Télécharger la source

Importer les sources