Wstążki to przyjemny wizualnie sposób na zamieszczenie ogłoszenia w Twojej witrynie. Chociaż istnieje wiele sytuacji, w których można użyć wstążek, ale często można je znaleźć w ogłoszeniach o wyprzedażach, zniżkach lub braku zapasów w sklepach Woocommerce.

Wstążki służą do informowania odwiedzających o wyprzedaży lub zniżce, gdy tylko dotrą do Twojej witryny. W tym samouczku zrozumiemy, jak dodawać wstążki za pomocą Elementora .

Dlaczego warto używać wstążek?

Wstążki to świetny sposób na natychmiastowe przyciągnięcie gościa, gdy ogłaszasz ogłoszenie. Na przykład, ogłosiłeś zniżkę na określony produkt, a następnie nałożyłeś wstążkę rabatową na miniaturę tego produktu, co natychmiast skłoni użytkownika do kliknięcia produktu.

Wstążki są atrakcyjne wizualnie, gdy są używane w określony sposób. Mogą pomóc użytkownikowi przejść przez niepowiązane produkty i poprawić konwersje i sprzedaż Twojej witryny.

Jak dodać niestandardowe wstążki za pomocą Elementora

Aby rozpocząć proces, musisz dodać sekcję Wewnętrzną, w której dodamy widżety.

Następnie musisz przeciągnąć kolumnę w sekcji. W tym samouczku użyjemy struktury jednokolumnowej .

Gdy skończysz z powyższymi ustawieniami, możesz przejść dalej i utworzyć tytuł wstążki.

W następnym kroku przejdź do klas CSS na karcie Zaawansowane i dodaj w polu „ gc-ribbon-style ”.

Poniżej musisz dodać następujący niestandardowy CSS .

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

Jesteś prawie gotowy. Opublikuj go i sprawdź swoją witrynę, aby zobaczyć, jak działa.

W ten sposób możesz dodać wstążki do swoich produktów za pomocą Elementora . Dołącz do nas na naszym Facebooku i Twitterze, aby otrzymywać częste aktualizacje dotyczące naszych treści.