Sélectionner une page

SÉPARATEURS : LIVE DEMO

Dans ce tutoriel, découvrez trois séparateurs de section simple à utiliser et utiles pour séquencer du contenu sans changer la couleur de l’arrière plan.

Ce tutoriel est inspiré du site diviguide.com et de l’article Divi Section Dividers.

Ajoutez les différents codes CSS sur votre thème enfant

Sélectionnez le / les séparateurs qui vous plaisent, copiez les code CSS et collez-les sur le fichier « style.css » de votre thème enfant Divi.

1. Séparateur 3x points

/*----------------------------------*/
/*---Trois points - Diviguide.com---*/
/*----------------------------------*/

.three-dots:before {
    display:block;
    position:absolute;
    content:'';
    bottom: 20px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    background: #fff; /* Changez la couleur du rond central ICI */
    box-shadow: 30px 0 #fff, -30px 0 #fff; /* Changez la couleur des ronds extérieurs ICI */
}

2. Séparateur 2x lignes

/*----------------------------------*/
/*---Double ligne - Diviguide.com---*/
/*----------------------------------*/

.double-line:before {
    display:block;
    position:absolute;
    content:'';
    bottom: 30px;
    width: 140px;
    height: 3px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    background: #fff; /* Changez la couleur des lignes ICI */
    box-shadow: 0 30px 0 #fff;
}

3. Séparateur en croix

/*------------------------------*/
/*---La croix - Diviguide.com---*/
/*------------------------------*/

.cross-x:before {
    display:block;
    position:absolute;
    content:'';
    padding-bottom: 5em;
    background: #fff;
    bottom: 0px;
    width: 3px;
    height: 50px;
    left: 50%;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transform: translateX(-50%) rotate(45deg);
    transform: translateX(-50%) rotate(45deg);
}

.cross-x:after {
    display:block;	
    position:absolute;
    content:'';
    padding-bottom: 5em;
    background: #fff;
    bottom: 0px;
    width: 3px;
    height: 50px;
    left: 50%;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transform: translateX(-50%) rotate(-45deg);
    transform: translateX(-50%) rotate(-45deg);
}

Ajoutez la classe CSS de votre choix à la section

Direction le Divi Builder de votre page. Sélectionnez ensuite les « paramètres » de votre section, onglet « Avancé » et rentrez la classe de votre choix :

  • three-dots
  • double-line
  • cross-x

zd

Et voilà ! Pensez à vider votre cache et rafraîchir votre page pour visualiser les résultats.

Baptiste.