Sélectionner une page

SÉPARATEURS : LIVE DEMO

Séparateur de section sympa avec trois petites flèches qui pointent vers le haut ou vers le bas.

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

Ajoutez le CSS sur votre thème enfant

Copiez le code CSS ci-dessous et collez-le sur le fichier « style.css » de votre thème enfant Divi :

/*-----------------------------------------------------------*/
/*---Multiple Triangles vers le haut / bas - Diviguide.com---*/
/*-----------------------------------------------------------*/

/* Flèches vers le bas */
.multi-triangle:after {
    display:block;
    position:absolute;
    content:'';
    z-index: 10;
    bottom: -25px;
    background: inherit; /* Changez la couleur de la flèche principale ici */
    box-shadow: -50px 50px 0 #3498db, 50px -50px 0 #3498db; /* Changez les couleurs et la taille des flèches secondaires ICI */
    left: 50%;
    width: 50px;
    height: 50px;
    -webkit-transform: translateX(-50%) rotate(45deg);
    transform: translateX(-50%) rotate(45deg);
}

/* Flèches vers le haut */
.multi-triangle:before {
    display:block;
    position:absolute;
    content:'';
    z-index: 10;
    top: -25px;
    background: inherit; /* Changez la couleur de la flèche principale ici */
    box-shadow: -50px 50px 0 #2ea3f2, 50px -50px 0 #2ea3f2; /* Changez les couleurs et la taille des flèches secondaires ICI */
    left: 50%;
    width: 50px;
    height: 50px;
    -webkit-transform: translateX(-50%) rotate(45deg);
    transform: translateX(-50%) rotate(45deg);
}

Ajoutez la classe CSS à la section

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

  • multi-triangle

Ajout de la classe CSS pour la séparation avec multi flèches

Voilà !

Il vous suffit de vider votre cache, actualiser votre page pour profiter de ce nouvel élément graphique :).

N’hésitez pas à partager ce post et à donner votre avis dans les commentaires. Peace – Baptiste.