Sélectionner une page

SÉPARATEURS : LIVE DEMO

Je ne suis personnellement pas super fan de ce type de séparateur… Il me fait pensé à des fesses ! Après j’imagine qu’avec quelques petites optimisations au niveau du CSS il est possible d’en tirer un meilleur résultat ;).

Encore une fois, ce tutoriel est inspiré à 100% du site de Geno Quiroz – Article original.

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 :

/*---------------------------------*/
/*---Flèche Arrondie - Quiroz.co---*/
/*---------------------------------*/

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

.roundedsplit::before,
.roundedsplit::after {
top: -70px;
left: 0;
z-index: 10;
width: 50%;
height: 70px;
background: inherit;}

.roundedsplit::before {
border-radius: 0 80px 0 0;}

.roundedsplit::after {
left: 50%;
border-radius: 80px 0 0 0;}

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 :

  • roundedsplit

Ajout de la classe CSS pour la flèche arrondie de séparation

Videz votre cache, mettez à jour votre page et voilà !

N’hésite pas à partager l’article et à commenter pour présenter vos résultats ;). Baptiste.