Kako dodati trakove po meri na WordPress z uporabo Elementorja

Muneeb WordPress Tutorials Feb 28, 2022

Trakovi so vizualno prijeten način objave na vašem spletnem mestu. Čeprav obstaja veliko situacij, ko lahko uporabite trakove, jih pogosto najdete pri objavah o razprodajah, popustih ali ni na zalogi v trgovinah Woocommerce.

Trakovi se uporabljajo za obveščanje obiskovalca o razprodaji ali popustu takoj, ko pride na vašo spletno stran. V tej vadnici bomo razumeli, kako lahko dodate trakove z Elementorjem .

Zakaj bi morali uporabiti Ribbons?

Trakovi so odličen način, da takoj pritegnete obiskovalca, ko objavljate. Na primer, napovedali ste popust na določen izdelek in nato na sličico tega izdelka nalepite trak s popustom, uporabnik bo takoj kliknil na izdelek.

Trakovi so vizualno privlačni, če se uporabljajo na določen način. Uporabniku lahko pomagajo pri pregledu nepovezanih izdelkov ter izboljšajo konverzije in prodajo vašega spletnega mesta.

Ustvarite neverjetna spletna mesta

Z najboljšim brezplačnim graditeljem strani Elementor

Začni zdaj

Kako dodati trakove po meri z uporabo Elementorja

Za začetek postopka morate dodati notranji razdelek , kamor bomo dodali pripomočke.

Nato boste morali v razdelku povleči stolpec . Za to vadnico bomo uporabili strukturo z enim stolpcem .

Ko končate z zgornjimi nastavitvami, lahko nadaljujete in ustvarite naslov za svoj trak.

Za naslednji korak se pomaknite naprej do Razredi CSS na zavihku Napredno in v polje dodajte » gc-ribbon-style «.

Spodaj boste morali dodati naslednji CSS po meri .

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

Skoraj ste končali. Objavite ga in preverite svoje spletno mesto, da vidite, kako deluje.

Tako lahko s pomočjo Elementorja svojim izdelkom dodate trakove. Ne pozabite, da se nam pridružite na našem Facebooku in Twitterju, da boste še naprej prejemali pogoste posodobitve o naši vsebini.