WooCommerce'de Elementor açılır pencereleri oluşturun

Hepimiz WooCommerce'in büyük hayranlarıyız. Kurulumu ve özelleştirmesi kolaydır. Dinamik ve güçlü bir e-ticaret mağazası oluşturmayı ve yönetmeyi kolaylaştıran özellikler pakete dahildir.

Ancak başarılı bir e-ticaret sayfası oluşturmanın basit bir şekilde popüler ürünleri eklemekten daha fazlası vardır. Tüm sayfaların görsel olarak da çekici olması gerekir. Web siteniz görsel olarak ne kadar çekici ve kullanıcı dostu olursa, daha fazla müşteri çekme olasılığı da o kadar artar.

• Açılan pencerenin yapılandırılması
• Elementor'daki görsel oluşturucuyu kullanarak da açılır pencereler oluşturabilirsiniz.
• Yayınlama Tercihleri

WooCommerce, sitenizi oluşturduğunuzda alışveriş sepetini ve ödeme sayfasını sizin için oluştursa da Elementor bunları özelleştirerek daha çekici hale getirir.

Bunları yeniden tasarlama veya baştan başlama seçeneğiniz vardır. Web sitenizdeki diğer tüm sayfalar için işlemi tekrarlayabilirsiniz.

Sıcak bir Teşekkür sayfası oluşturarak ve Hesabım ile Hizmet Şartları sayfalarınızı güncelleyerek müşterilerinizin kalbini ve aklını kazanabilirsiniz.

Elementor'un sürükle ve bırak işlevi, bu eğitimle birleştiğinde, sayfalarınızı oluştururken sorunsuz bir deneyim yaşamanızı sağlayacaktır.

WooCommerce mağazanızı kurduktan sonra onu ziyaretçileriniz ve müşterileriniz için daha çekici hale getirmek isteyebilirsiniz. Pop-up'lar eklemek, kullanıcıya başka bir izlenim ve mağazanızda kalma konusunda yeni bir istek verir.

 Açılır pencere oluşturmak için menü çubuğunda Şablonlar > Açılır Pencereler'e gidin. Size tüm açılır pencerelerinizin bir listesi sunulacak ve henüz bir tane oluşturmadıysanız aşağıdakine benzer bir şey göreceksiniz:

YENİ POPUP EKLE'ye tıkladıktan sonra (ki bu oldukça açıklayıcıdır), ona bir ad vermeniz ve ardından görüntülenen önceden hazırlanmış amp dosyalardan bir şablon seçmeniz istenecektir. Birçok amaç için çeşitli şablonlar mevcuttur; bazıları duyurular için uygundur, diğerleri bir indirimin tanıtımını yapmak için uygundur, diğerleri ise kullanıcıları bir şeye kaydolmaya teşvik etmek için idealdir. Kullanıcıları çerez kullanımı veya diğer GDPR bildirimleri konusunda uyarmaya yönelik amp bile mevcuttur. Beğendiğiniz bir şey bulduğunuzda, daha büyük bir önizleme görmek için üzerine tıklayın ve ardından Ekle düğmesine basın.

Bu düğmeye tıkladıktan sonra WordPress arka ucundaki açılır pencere oluşturucuya yönlendirileceksiniz.

Geçmişte Elementor ile çalıştıysanız arayüz, seçenekler ve her şeyin sizin için düzenlenme şekli sayesinde kendinizi evinizdeymiş gibi hissedeceksiniz. Bu aslında WordPress'te Elementor sayfa şablonları oluşturmakla aynı süreçtir.

Ekranın sağ tarafında, üzerinde çalışmakta olduğunuz şeyin önizlemesini görüntüleyen ana tuval bulunur. Her öğeyi seçip Düzenle > Öğeleri Düzenle'yi seçerek ayrı ayrı düzenleyebilir ve özelleştirebilirsiniz. İşiniz bittiğinde, çalışmanızı Yayınlama seçeneğiyle birlikte soldaki kenar çubuğunda görüntülenen kontrolleri ve tercihleri ​​göreceksiniz.

Açılan pencerenin yapılandırılması

 Bu, açılır pencerenizin bir önizlemesini (boş bir sayfa veya seçtiğiniz şablon) görmeniz gerektiği zamandır.

Her zaman varsayılan olarak açık olan Açılır Pencere Ayarları, açılır pencere tuvalinin nasıl çalışacağını özelleştirmenize olanak tanır. Bunlar aşağıdaki gibidir:

• Burası farklı türde açılır pencereler oluşturabileceğiniz için en çok zaman harcamak isteyeceğiniz yerdir. Başka bir deyişle, bu ayarları yaparak aşağıdaki efektleri elde edebileceksiniz:

• Kalıcı açılır pencereler bir tür kalıcı penceredir.
• Slaytlar, bildirim çubukları vb.

Ayrıca, diğer birçok önemli ayarı da özelleştirebilirsiniz.

Ayarlar sekmesinde aşağıdaki seçenekler mevcuttur :

• Resmin yüksekliğini ve genişliğini değiştirin.
• Nesnenin dikey veya yatay yönünü değiştirin ( amp , bir bildirim çubuğu oluşturmak için nesneyi yukarıya veya aşağıya sabitleyebilirsiniz)
• Bir kaplama kullanıp kullanmayacağınıza karar verin (bu, örneğin amp pencere etkinken arka planı grileştirmenize olanak tanır)
• Tarayıcınızdaki kapat düğmesini devre dışı bırakın.
• Giriş için bir animasyon ekleyin.

Stil sekmesinde aşağıdaki işlemleri yapabilirsiniz :

• Arka plan rengini değiştirebilir, degrade yapabilir veya arka plan olarak bir görsel kullanabilirsiniz.
• Kaplama etkinse yapılandırın.
• Kapatma düğmesinin etkin olması durumunda, onu yapılandırmanız gerekir.

Son olarak Gelişmiş sekmesi, aşağıdakilere benzer şeyler yapmanıza olanak tanıyan bazı çeşitli içe aktarma ayarlarını içerir:

• Kapat düğmesini görüntüleyin veya açılır pencerenin belirli bir süre sonra otomatik olarak kapanmasını sağlayın.
• Kaplamaya tıklayarak veya kaçış tuşuna basarak pencerenin kapanmasını engelleyebilirsiniz.

• Sayfayı aşağı kaydırma özelliğini devre dışı bırakın.
• Birden fazla açılır pencereden kaçının (aynı sayfaya birden fazla açılır pencere hedeflediyseniz bu, ziyaretçilerinizin rahatsız olmasını önleyecektir).

Konumu pencerenin sağ alt köşesine değiştirdiğinizde şöyle görünecektir

Açılır pencerenin artık sağ alt köşede kalıcı olarak nasıl sabitlendiğine bir göz atın. Giriş animasyonuyla birlikte kaydırma tetikleyicisini kullanarak güzel, göze çarpmayan bir kaydırma efekti elde edebilirsiniz.

Elementor'daki görsel oluşturucuyu kullanarak da açılır pencereler oluşturabilirsiniz.

Temel Açılır Pencere Ayarlarını tamamladığınızda, öğeleri görsel sürükle ve bırak arayüzüne sürükleyip bırakarak açılır pencerenizin gerçek içeriğini tasarlamaya başlayabilirsiniz.

İstediğiniz herhangi bir Elementor widget'ını kullanabilirsiniz; bu da size son tasarım üzerinde büyük bir kontrol sağlar. Form widget'ı kesinlikle eklemeniz gereken tek şeydir çünkü e-posta katılım formunuzu oluşturmanıza izin veren tek widget'tır.

Form widget'ıyla, sunmak istediğiniz alanların yanı sıra gönder düğmesinin metni ve görünümü üzerinde tam kontrole sahip olursunuz. amp :

Bunun ötesinde, Elementor'un tüm widget'ları ve tasarım seçenekleri hakkında bilgi sahibi olmanızı şiddetle tavsiye ederim.

Daha önce de belirtildiği gibi, web sitenizin görünümü üzerinde büyük ölçüde kontrole sahipsiniz ve ayrıca dönüşüm oranınızı artırmanıza yardımcı olabilecek bazı yararlı widget'lara da erişiminiz var.

Yayınlama Tercihleri

Yarattığınız şeyden memnun kaldığınızda onu dünyayla paylaşmak isteyeceksiniz. YAYINLA butonuna bastıktan sonra karşınıza bir dizi soru çıkacak. Örnek olarak:

Açılır pencerenin görünmesini istediğiniz koşulları belirtmeniz mümkün mü? Arama sonuçlarınıza hangi sayfaların dahil edileceğini veya hariç tutulacağını seçebilirsiniz. Dilediğiniz kadar koşula sahip olabilirsiniz.

Peki açılır pencerenin görünmesine neden olan olay nedir? Diğer olasılıkların yanı sıra, açılır pencerenin sayfa yüklendiğinde, kaydırıldığında veya kullanıcı belirli bir öğeye kaydırıldığında hemen görüntülenip görüntülenmeyeceğini seçebilirsiniz. Bu seçeneklerin tümü, tam özelleştirmeye olanak tanıyan kendi ayarlarına sahiptir.

Son olarak, açılır pencereyi yalnızca geri gelen ziyaretçilere göstermek, açılır pencereyi yalnızca belirli sayıda göstermek veya belki de açılır pencereyi yalnızca bir ziyaretçi web sitenize belirli bir yerden yönlendirildiğinde göstermek gibi bazı gelişmiş kurallar göreceksiniz. URL'si. Birkaç tane daha var. Bu seçenekler, açılır pencerenizin kullanıcı deneyimini önemli ölçüde iyileştirerek, onu gerçek bir bütünlükle ve kullanıcılarınıza önem vererek tasarlamanıza olanak tanır.

Ayarları istediğiniz şekilde tamamlayıp KAYDET & KAPAT butonuna tıklayın. Bu düğmeyi tıkladıktan sonra açılır pencerenizin nasıl görüneceğine dair amp bir bilgiye yönlendirileceksiniz.

Pop-up'lar özelleştirilebilir ve bunlara dinamik içerik eklenebilir.

İşleri bir sonraki seviyeye taşıyalım, olur mu? Bu noktaya kadar bir şablon seçtik ve bir veya iki oturumda ayarlamalar yaptık, hepsi bu. Açılır penceremizi daha da özelleştirmek istediğimiz senaryoyu düşünün.

Sürecin YENİ POPUP EKLE aşamasına geri döndük; burada bir başlık belirleyebilir ve bir kez daha şablon seçebiliriz.

Bundan sonra onu seçip temel ayarlarda gerekli değişiklikleri yapıp bir kez daha YAYINLA tuşuna basabiliriz.

Tamam, işlerin ilginçleşmeye başladığı yer burası. WordPress kurulumumuzdan dinamik verileri almak ve bunu açılır penceremizdeki açılır pencereye eklemek için Elementor'u kullanabiliriz. Kullanıcının adı, sayfa başlığı vb. bilgileri dahil edebiliriz.

Şu senaryoyu düşünün: WooCommerce'i çalıştırıyoruz ve kullanıcıya, o anda görüntülemekte olduğu belirli üründe bir indirimin mevcut olduğunu bildirmek istiyoruz. Başlamak için şablondan bir metin bölümü seçin ve ardından kenar çubuğunda Dinamik'i tıklayın:

Gönderinin kendisinden gelen bilgiler, bir bütün olarak siteden alınan bilgiler, medya bilgileri, yazar bilgileri ve hatta WooCommerce Bilgileri dahil olmak üzere çok çeşitli seçenekler arasından seçim yapabiliriz. Bir Ürün Başlığı seçeceğiz ve seçimimiz sonucunda metin içerik bloğumuza eklenecek.

Veritabanı ayrıntılarının düzgün şekilde alınmadığını varsayalım. Bu durumda, bazılarını metinden önce, bazılarını metinden sonra ve bir yedek metin (veritabanı ayrıntıları düzgün şekilde alınmazsa) belirtmek mümkündür.

O halde bu işlemi ürünün fiyatını gösterecek buton için de tekrarlayalım. Bize etkileyici bir harekete geçirici mesaj sağlamak için önceki metni ŞİMDİ SATIN ALIN şeklinde ifade edebiliriz:

Hatta bunu bir adım daha ileri götürüp ürün görselini açılır pencerenin arka planı olarak kullanabiliriz.

PUBLISH'a bastığımızda, bir kez daha yayınlama ayarları sunulur ve bu, açılır pencerenin yalnızca WooCommerce sayfalarında görünmesini istediğimizi belirtmemize olanak tanır. Tetikleyici olması için zamanlayıcıyı 15 saniyelik hareketsizlik süresine ayarlayacağız. İşte sonunda nasıl ortaya çıktı:

Tasarım geliştirilebilse de, açılır pencerenin arka planı olarak ürün adını, fiyatını ve ürünün resmini gösterdiğimizi görebilirsiniz. Muhteşem!