I nastri sono un modo visivamente piacevole per fare un annuncio sul tuo sito web. Mentre ci sono molte situazioni in cui puoi usare i nastri, ma spesso li trovi con annunci di vendita, sconti o esaurito sui negozi Woocommerce.

I nastri vengono utilizzati per inorci al visitatore di una vendita o di uno sconto non appena arrivano sul tuo sito web. In questa esercitazione verrà illustrato come aggiungere barre multifunzione utilizzando Elementor.

Perché usare le barre multifunzione?

I nastri sono un ottimo modo per attirare istantaneamente il tuo visitatore quando fai un annuncio. Ad esempio, hai annunciato uno sconto su un determinato prodotto e quindi applichi la barra multifunzione dello sconto sulla miniatura di quel prodotto, farà immediatamente fare clic sull'utente sul prodotto.

I nastri sono visivamente accattivanti se usati in un certo modo. Possono aiutare l'utente a passare attraverso prodotti non correlati e migliorare le conversioni e le vendite del tuo sito web.

Come aggiungere barre multifunzione personalizzate con Elementor

Per avviare il processo, è necessario aggiungere una sezione Interna in cui aggiungeremo i widget.

Successivamente, sarà necessario trascinare una colonna nella sezione. Per questa esercitazione verrà utilizzato una struttura a una colonna.

Al termine delle impostazioni precedenti, è possibile procedere e creare un titolo per la barra multifunzione.

Per il passaggio successivo, passare alle classi CSS nella scheda Avanzate e aggiungere "gc-ribbon-style" nel campo.

Di seguito dovrai aggiungere il CSS personalizzato seguente.

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

Hai quasi finito. Pubblicalo e controlla il tuo sito web per vedere come funziona.

In questo modo è possibile aggiungere nastri ai prodotti utilizzando Elementor. Assicurati di unirti a noi su Facebook e Twitter per continuare a ricevere frequenti aggiornamenti sui nostri contenuti.