DIVI 4 est disponible ! License Version LIFETIME avec 20% de réduction immédiate

Ajouter un ruban sur un bloc DIVI

Ajouter un effet ruban Divi

Mettre un Ruban sur un élément de votre site permet, du point de vue du design, d’attirer le regard de vos visiteurs et de mieux convertir les visiteurs du site en clients potentiels 🙂

Les images sont un moyen facile pour les personnes qui visitent votre site de scanner et d’obtenir rapidement des informations. C’est ce qui rend les rubans si puissants : ils sont une combinaison d’image et de texte !

Vous pouvez ajouter des rubans aux prix, aux images, aux blogs et même aux modules de texte !

Vous avez une vente flash ? Vous souhaitez mettre en avant un nouveau produit ou un produit particulier ? Mettez un ruban sur l’image et surveillez les conversions !

Dans ce tutoriel, nous vous montrons comment créer de magnifiques rubans avec Divi.

Dans ce tutoriel Divi, je vous montre comment insérer du code CSS simplement pour ajouter des rubans sur les éléments et modules de Divi.

Suivez simplement les étapes ci-dessous pour créer votre propre ruban !

Comment ajouter un ruban dur Divi ?
  1. Ajouter le code CSS, ci-dessous, dans Divi !
    Plusieurs solutions s’offrent à vous :
    a- Vous utilisez un Thème enfant, intégrez le code dans le fichier style.css
    b- Dans le Divi > Options du thème > Général > Personnaliser CSS
    c- dans Réglages de la page > Avancer > Personnaliser CSS

Ici j’ai intégré le code dans les Réglages (Paramètres) de la page (Méthode c).
Si vous prévoyez d’ajouter des rubans sur l’ensemble du site, privilégiez l’une des 2 autres Méthodes (a ou b)

/* general */
.ruban {
  width: 150px;
  height: 150px;
  overflow: hidden;
  position: absolute;
  z-index: 999;
}
.ruban::before,
.ruban::after {
  position: absolute;
  z-index: 1;
  content: '';
  display: block;
  border: 5px solid #26a536;
}
.ruban span {
  position: absolute;
  display: block;
  width: 225px;
  padding: 15px 0;
  background-color: #37db4b;
  box-shadow: 0 5px 10px rgba(0,0,0,.1);
  color: #fff;
  font: 700 18px/1 'Lato', sans-serif;
  text-shadow: 0 1px 1px rgba(0,0,0,.2);
  text-transform: uppercase;
  text-align: center;
}

/* top left*/
.ruban-top-left {
  top: -10px;
  left: -10px;
}
.ruban-top-left::before,
.ruban-top-left::after {
  border-top-color: transparent;
  border-left-color: transparent;
}
.ruban-top-left::before {
  top: 0;
  right: 0;
}
.ruban-top-left::after {
  bottom: 0;
  left: 0;
}
.ruban-top-left span {
  right: -25px;
  top: 30px;
  transform: rotate(-45deg);
}

/* top right*/
.ruban-top-right {
  top: -10px;
  right: -10px;
}
.ruban-top-right::before,
.ruban-top-right::after {
  border-top-color: transparent;
  border-right-color: transparent;
}
.ruban-top-right::before {
  top: 0;
  left: 0;
}
.ruban-top-right::after {
  bottom: 0;
  right: 0;
}
.ruban-top-right span {
  left: -25px;
  top: 30px;
  transform: rotate(45deg);
}

2. Ajouter un module « Code »

Ajouter un module code ruban

Et ajouter le code spécifique :

– Pour ajouter un ruban en haut à gauche

<div class="ruban ruban-top-left"><span>Image</span></div>

– Pour ajouter un ruban en haut à droite

<div class="ruban ruban-top-right"><span>Image</span></div>

Pour afficher le texte de votre choix, modifier le mot entre <span></span>

Ruban avec Divi

Il suffit maintenant de placer le module code devant le module auquel on souhaite associer le ruban :

A vous de jouer 😉

Diviking school formation pour apprendre Divi
Apprendre divi et wordpress

DIVIKING SCHOOL

Vous souhaitez vous formez à DIVI / WORDPRESS / WOOCOMMERCE ?
Découvrez les formations DIVI.
Toutes les formations sont présentées en étude de cas concrets pour un apprentissage clair et basées sur de la pratique.