Sélectionner une page

SÉPARATEURS LIVE DEMO

Un moyen simple et esthétique de personnaliser son site WordPress sous Divi, consiste à ajouter des séparateurs « stylisés » entre les sections du Divi Builder !

Geno Quiroz, du site quiroz.co propose une série de tutoriels sur ce sujet – Voir l’article original. Retrouvez-le maintenant en Français sur Divi Rocket !

Ajoutez le CSS sur votre thème enfant

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

/*------------------------------------------*/
/*---Left Diagonal Lines - By Geno Quiroz---*/
/*------------------------------------------*/

#et-main-area { overflow: hidden;} /* Hides all the items that float over the right margin */
.left-diagonal {
    z-index: 1;
    padding-top: 0px;}

.left-diagonal::after {
    position: absolute;
    content: '';
    pointer-events: none;
    top: -150px;
    left: -25%;
    z-index: -1;
    width: 150%;
    height: 80%;
    background: inherit;
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
    -webkit-transform-origin: -3% 0;
    transform-origin: -3% 0;}

@media only screen and ( min-width: 1901px ) and ( max-width: 2500px ) {.left-diagonal::after {top: -150px; height: 85%;}}
@media only screen and ( min-width: 1501px ) and ( max-width: 1900px ) {.left-diagonal::after {top: -131px; height: 68%;}}
@media only screen and ( min-width: 1001px ) and ( max-width: 1500px ) {.left-diagonal::after {top: -116px;}}
@media only screen and ( max-width: 1000px ) {.left-diagonal::after {top: -90px;}}

Ajoutez la classe CSS à la section

Direction le Divi Builder de votre page en question ! Sélectionnez les « paramètres » de votre section et dans l’onglet « Avancé » et rentrez la classe CSS suivante :

  • left-diagonal

Ajout de la classe CSS pour la séparation en diagonale

Videz votre cache, actualisez votre page et observez le résultat !