Divi ve Divi Builder 'ı kullanarak güzel WordPress web siteleri oluşturun.

Elementor Kullanarak WordPress'te Özel Şeritler Nasıl Eklenir

Muneeb WordPress Eğiticileri May 1, 2021

Şeritler, web sitenizde bir duyuru yapmanın görsel olarak hoş bir yoludur. Şeritleri kullanabileceğiniz birçok durum olsa da, bunları Woocommerce mağazalarında Satış, İndirimler veya Stok Dışı duyurularla sık sık bulabilirsiniz.

Kurdeleler, web sitenize ulaşır ulaşmaz ziyaretçiye bir satış veya indirimden bahsetmek için kullanılır. Bu öğreticide, Elementor kullanarak nasıl şerit ekleyebileceğinizi anlayacağız.

Neden Şerit Kullanmalısınız?

Kurdeleler, bir duyuru yaparken ziyaretçinizi anında çekmenin harika bir yoludur. Örneğin, belirli bir üründe indirim açıkladınız ve ardından indirim şeridini o ürünün küçük resmine uygularsanız, kullanıcının ürünü tıklamasını hemen sağlayacaktır.

Şeritler belirli bir şekilde kullanıldığında görsel olarak çekicidir. Kullanıcının ilgisiz ürünlerden geçmesine ve web sitenizin dönüşümlerini ve satışlarını iyileştirmesine yardımcı olabilirler.

Divi'yi İndirin En İyi WordPress Temasını

Dünyadaki en popüler WordPress teması ve nihai WordPress sayfası oluşturucu

Divi'yi indirin

Elementor Kullanarak Özel Şeritler Nasıl Eklenir

İşlemi başlatmak için, widget'ları ekleyeceğimiz bir İç bölüm eklemeniz gerekir.

Ardından, bölümdeki bir sütunu sürüklemeniz gerekir. Bu öğretici için tek sütunlu bir yapı kullanıyor olacağız.

Yukarıdaki ayarlarla işiniz bittiğinde, devam edebilir ve şeridiniz için bir başlık oluşturabilirsiniz.

Bir sonraki adım için, Gelişmiş sekmesindeki CSS Sınıfları'na ilerleyin ve alana "gc şerit stili" ekleyin.

Bunun altına aşağıdaki Özel CSS'yi eklemeniz gerekir.

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

Neredeyse bitirdin. Nasıl çalıştığını görmek için web sitenizi yayınlayın ve kontrol edin.

Bu şekilde Elementor kullanarak ürünlerinize şerit ekleyebilirsiniz. İçeriğimiz hakkında sık sık güncellemeler almaya devam etmek için Facebook ve Twitter'ımızda bize katıldığımızdan emin olun.

Share Your Thoughts