Pita adalah cara visual yang menyenangkan untuk membuat pengumuman di situs web Anda. Meskipun ada banyak situasi di mana Anda dapat menggunakan pita tetapi Anda sering menemukannya dengan pengumuman Penjualan, Diskon, atau Stok Habis di toko Woocommerce.

Pita digunakan untuk memberi tahu pengunjung tentang penjualan atau diskon segera setelah mereka tiba di situs web Anda. Dalam tutorial ini, kita akan memahami bagaimana Anda dapat menambahkan pita menggunakan Elementor .

Mengapa Anda Harus Menggunakan Pita?

Pita adalah cara yang bagus untuk langsung menarik pengunjung Anda saat Anda membuat pengumuman. Misalnya, Anda telah mengumumkan diskon pada produk tertentu dan kemudian Anda menerapkan pita diskon pada thumbnail produk tersebut, maka pengguna akan langsung mengklik produk tersebut.

Pita secara visual menarik bila digunakan dengan cara tertentu. Mereka dapat membantu pengguna melalui produk yang tidak terkait dan meningkatkan konversi dan penjualan situs web Anda.

Cara Menambahkan Pita Kustom Menggunakan Elementor

Untuk memulai proses, Anda perlu menambahkan bagian dalam tempat kami akan menambahkan widget.

Selanjutnya, Anda perlu menyeret kolom di bagian tersebut. Untuk tutorial ini, kita akan menggunakan struktur satu kolom .

Setelah Anda selesai dengan pengaturan di atas, Anda dapat melanjutkan dan membuat judul untuk pita Anda.

Untuk langkah selanjutnya, lanjutkan ke Kelas CSS di tab Lanjutan dan tambahkan " gc-ribbon-style " di bidang.

Di bawah ini Anda perlu menambahkan CSS Kustom berikut.

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

Kamu hampir selesai. Publikasikan dan periksa situs web Anda untuk melihat cara kerjanya.

Ini adalah bagaimana Anda dapat menambahkan pita ke produk Anda menggunakan Elementor . Pastikan untuk bergabung dengan kami di Facebook dan Twitter kami untuk terus mendapatkan pembaruan yang sering tentang konten kami.