Les rubans sont une façon visuellement agréable de faire une annonce sur votre site Web. Bien qu’il existe de nombreuses situations où vous pouvez utiliser des rubans, mais vous les trouvez souvent avec des ventes, des rabais, ou des annonces en rupture de stock sur les magasins Woocommerce.

Les rubans sont utilisés pour parler au visiteur d’une vente ou d’un rabais dès leur arrivée sur votre site Web. Dans ce tutoriel, nous allons comprendre comment vous pouvez ajouter des rubans en utilisant Élémenteur.

Pourquoi devriez-vous utiliser des rubans?

Les rubans sont un excellent moyen d’attirer instantanément votre visiteur lorsque vous faites une annonce. Par exemple, vous avez annoncé un rabais sur un certain produit, puis vous appliquez le ruban d’escompte sur la vignette de ce produit, il va immédiatement amener l’utilisateur à cliquer sur le produit.

Les rubans sont visuellement attrayants lorsqu’ils sont utilisés d’une certaine manière. Ils peuvent aider l’utilisateur à passer par des produits indépendants et améliorer les conversions et les ventes de votre site Web.

Comment ajouter des rubans personnalisés à l’aide d’Elementor

Pour démarrer le processus, vous devez ajouter une section intérieure où nous ajouterons les widgets.

Ensuite, vous devrez faire glisser une colonne dans la section. Pour ce tutoriel, nous allons utiliser une structure d’une colonne.

Une fois que vous avez terminé avec les paramètres ci-dessus, vous pouvez aller de l’avant et créer un titre pour votre ruban.

Pour l’étape suivante, passez aux classes CSS dans l’onglet Avancé et ajoutez « gc-ribbon-style » sur le terrain.

Ci-dessous, vous devrez ajouter le CSS personnalisé suivant.

.gc-ribbon-style {
text-shadow: 0em 0em 0.3em rgba(0,0,0,0.2);
background: #61CE70;
color: #ffffff;
font-size: 17px;
display: block;
width: calc(100% + 20px);
height: 50px;
line-height: 50px;
text-align: center;
margin-left: -10px;
margin-right: -10px;
position: relative;
top: 0px;
Z-index:10;
}

.gc-ribbon-style:before {
border-top: 10px solid #63a06c;
content: "";
position: absolute;
height: 0;
width: 0;
bottom: -10px;
left: 0;
border-left: 10px solid transparent;
}

.gc-ribbon-style:after {
border-top: 10px solid  #63a06c;
content: "";
position: absolute;
height: 0;
width: 0;
right: 0;
bottom: -10px;
border-right: 10px solid transparent;
}

Tu as presque fini. Publiez-le et consultez votre site Web pour voir comment il fonctionne.

C’est ainsi que vous pouvez ajouter des rubans à vos produits en utilisant Élémenteur. Assurez-vous de vous joindre à nous sur notre Facebook et Twitter pour continuer à recevoir des mises à jour fréquentes sur notre contenu.