Sélectionner une page

SÉPARATEURS : LIVE DEMO

Après le tutoriel sur la diagonale de gauche à droite, voici la double diagonale de droite à gauche !

Tutoriel inspiré du super site quiroz.co – Article original en anglais ICI.

Ajoutez le CSS sur le thème enfant

Copiez le code ci-dessous et collez-le sur votre fichier « style.css » du thème enfant (child theme).

/*----------------------------------*/
/*---Double Diagonale - Quiroz.co---*/
/*----------------------------------*/

#et-main-area { overflow: hidden;} /* Hides all the items that float over the right margin */

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

.diagonal-shadow {
z-index: 1;
padding-top: 1em;
background: inherit; 
}

.diagonal-shadow::before,
.diagonal-shadow::after {
top: 0;
left: -25%;
z-index: -1;
width: 150%;
height: 75%;
background: inherit;
-webkit-transform: rotate(-2deg);
transform: rotate(-2deg);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;}

.diagonal-shadow::before {
height: 50%;
background: #535353; /* Changez la couleur de la double diagonale ICI */
-webkit-transform: rotate(-3deg);
transform: rotate(-3deg);
-webkit-transform-origin: 3% 0;
transform-origin: 3% 0;}

Ajoutez la classe sur la section

Maintenant RDV sur le Divi Builder de votre page. Sélectionnez les paramètres de la section de séparation et ajouter dans l’onglet « Avancé » la classe CSS suivante :

  • diagonal-shadow

Insertion de la classe CSS pour la double diagonale de séparation entre sections

Videz votre cache, actualisez votre page et voilà monsieur !

N’hésitez pas à partager l’article et à me faire vos retours :). Baptiste.