Aangepaste linten toevoegen aan WordPress met Elementor

Muneeb WordPress-zelfstudies Oct 21, 2021

Linten zijn een visueel aantrekkelijke manier om een aankondiging op uw website te doen. Hoewel er veel situaties zijn waarin u linten kunt gebruiken, vindt u deze vaak met aankondigingen van verkoop, kortingen of niet op voorraad in Woocommerce-winkels.

Lintjes worden gebruikt om de bezoeker te informeren over een uitverkoop of korting zodra ze op uw website aankomen. In deze zelfstudie zullen we begrijpen hoe u linten kunt toevoegen met Elementor .

Waarom zou je linten gebruiken?

Linten zijn een geweldige manier om uw bezoeker direct aan te trekken wanneer u een aankondiging doet. U heeft bijvoorbeeld een korting aangekondigd op een bepaald product en u past vervolgens het kortingslint toe op de miniatuur van dat product, zodat de gebruiker onmiddellijk op het product klikt.

Linten zijn visueel aantrekkelijk wanneer ze op een bepaalde manier worden gebruikt. Ze kunnen de gebruiker helpen door niet-gerelateerde producten te gaan en de conversies en verkopen van uw website te verbeteren.

Maak geweldige websites

Met de beste gratis paginabuilder Elementor

Begin nu

Aangepaste linten toevoegen met Elementor

Om het proces te starten, moet je een Inner sectie toevoegen waar we de widgets zullen toevoegen.

Vervolgens moet u een kolom in de sectie slepen. Voor deze zelfstudie gebruiken we een structuur met één kolom .

Als u klaar bent met de bovenstaande instellingen, kunt u doorgaan en een titel voor uw lint maken.

Ga voor de volgende stap verder naar de CSS-klassen op het tabblad Geavanceerd en voeg " gc-ribbon-style " toe in het veld.

Daaronder moet je de volgende Custom CSS toevoegen .

.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;
}

Je bent bijna klaar. Publiceer het en controleer uw website om te zien hoe het werkt.

Zo kun je met Elementor linten aan je producten toevoegen. Zorg ervoor dat u zich bij ons voegt op Facebook en Twitter om regelmatig updates over onze inhoud te ontvangen.

Divi WordPress Theme