Sélectionner une page

SÉPARATEURS : LIVE DEMO

Effet plutôt sympa, inspiré du tutoriel de Geno Quiroz. Il vous permettra d’ajouter au dessus ou en dessous de votre section une flèche de la couleur de votre arrière plan.

Ajoutez le CSS sur votre thème enfant

Copiez le code CSS ci-dessous et collez-le sur le thème enfant de votre installation wordpress :

/*----------------------------------------------*/
/*---Triangles vers le haut / bas - Quiroz.co---*/
/*----------------------------------------------*/

.triangles::before, .triangles::after {position: absolute; content: ''; pointer-events: none;}

.triangles::before, .triangles::after {
    left: 50%;
    width: 100px;
    height: 100px;
    -webkit-transform: translateX(-50%) rotate(45deg);
    transform: translateX(-50%) rotate(45deg);}

/* Flèche du haut - Effacer la ligne ci-dessous pour effacer cette flèche */
.triangles::before {top: -50px; background: inherit;}

/* Flèche du bas - Effacer la ligne ci-dessous pour effacer cette flèche */
.triangles::after { bottom: -50px; z-index: 10; background: inherit;}

Ajoutez la classe CSS à la section

Direction le Divi Builder de votre page, sélectionnez les paramètres de votre section, onglet « Avancé » et rentrez la classe CSS suivante :

  • triangles

Ajout de la classe CSS triangles sur la section de séparation

Videz le cache, actualisez votre page… et voilà !