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şturmak için sadece popüler ürünler eklemekten daha fazlası vardır. Tüm sayfalar görsel olarak da çekici olmalıdır. Web siteniz görsel olarak ne kadar çekici ve kullanıcı dostu olursa, daha fazla müşteri çekme olasılığı o kadar yüksek olur.

• Açılır pencerenin konfigürasyonu
• Elementor'daki görsel oluşturucuyu kullanarak açılır pencereler de oluşturabilirsiniz.
• Tercihleri ​​Yayınla

Sitenizi oluştururken alışveriş sepetini ve ödeme sayfasını WooCommerce sizin için oluştursa da, Elementor onları özelleştirerek daha çekici hale getirir.

Bunları yeniden tasarlama veya baştan başlama seçeneğine sahipsiniz. İşlemi web sitenizdeki diğer tüm sayfalar için tekrarlayabilirsiniz.

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

Elementor'un bu öğreticiyle birlikte sürükle ve bırak işlevi, 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.

 Bir 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:

Eğer ADD YENİ POPUP tıkladıktan sonra (ki yeterince açıklayıcı), bunu bir isim verin ve sonra önceden hazırlanmış ex bir şablon seçmek istenir amp görüntülenen les. Birden çok amaç için çeşitli şablonlar mevcuttur; bazıları duyurular için uygundur, diğerleri bir indirimi teşvik etmek için, diğerleri ise kullanıcıları bir şeye kaydolmaya teşvik etmek için idealdir. Bile vardır ex amp les çerez kullanımı veya diğer GDPR bildirimlerinin uyarı kullanıcılar için. 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üzenlendiği şekilde kendinizi evinizde hissedeceksiniz. Esasen WordPress'te Elementor sayfa şablonları oluşturmakla aynı işlemdir.

Ekranın sağ tarafında, şu anda üzerinde çalıştığınız şeyin bir önizlemesini gösteren ana tuval bulunur. Her bir öğeyi seçip Düzen > Öğeleri Düzenle'yi seçerek tek tek düzenleyebilir ve özelleştirebilirsiniz. Bitirdiğinizde, çalışmanızı yayınlama seçeneğiyle birlikte soldaki kenar çubuğunda görüntülenen kontrolleri ve tercihleri ​​göreceksiniz.

Açılır pencerenin konfigürasyonu

 Bu, açılır pencerenizin bir önizlemesini görmeniz gereken zamandır - boş bir sayfa listesi veya seçtiğiniz şablon.

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

• En çok zaman geçirmek isteyeceğiniz yer burasıdır çünkü burası farklı türlerde açılır pencereler oluşturabileceğiniz yerdir. Başka bir deyişle, bu ayarları yaparak aşağıdaki efektleri yapabileceksiniz:

• Kalıcı açılır pencereler bir tür kalıcı penceredir.
• Slide-in'ler, bildirim çubukları vb.

Ek olarak, diğer birkaç önemli ayarı ö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ştirme (ex için amp le, sen üstüne saptamak o veya alt bir bildirim çubuğunu oluşturmak için)
• (Bu ex için, size sağlayan bir şablon kullanmak olup olmadığına karar vermek amp , le açılan aktifken arka plan grileştirebilir)
• Tarayıcınızdaki kapat düğmesini devre dışı bırakın.
• Giriş için bir animasyon ekleyin.

Stil sekmesinde aşağıdakileri yapabilirsiniz :

• Arka plan rengini değiştirebilir, degrade yapabilir veya arka plan olarak bir görüntü kullanabilirsiniz.
• Yer paylaşımı etkinse, yapılandırın.
• Kapat düğmesini etkinleştirdiyseniz, yapılandırmanız gerekir.

Son olarak, Gelişmiş sekmesi, aşağıdaki gibi şeyler yapmanıza izin veren bazı çeşitli içe aktarma ayarları içerir:

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

• 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ı engeller).

için, Pencerenin sağ alt köşesindeki Konum'u değiştirdiğinizde şöyle görünür

Açılır pencerenin artık sağ alt köşede kalıcı olarak nasıl sabitlendiğine bir göz atın. Bir giriş animasyonu ile birlikte bir kaydırma tetikleyicisi kullanarak hoş, gizli bir kaydırma efekti elde edebilirsiniz.

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

Temel Açılır Pencere Ayarlarını tamamlar tamamlamaz, öğ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 nihai tasarım üzerinde büyük ölçüde kontrol sağlar. Form widget'ı, e-posta katılım formunuzu oluşturmanıza izin veren tek şey olduğundan, kesinlikle eklemeniz gereken tek şeydir.

Form pencere aracıyla, sunmak istediğiniz alanların yanı sıra gönder düğmesinin metni ve görünümü üzerinde tam denetime sahip olursunuz. Örneğin 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 bir kontrole sahipsiniz ve ayrıca dönüşüm oranınızı artırmanıza yardımcı olabilecek bazı faydalı widget'lara erişiminiz var.

Tercihleri ​​Yayınla

Yarattıklarınızdan memnun olduğunuzda, onu dünyayla paylaşmak isteyeceksiniz. YAYINLA düğmesine bastıktan sonra, size bir dizi soru sunulacaktır. Örnek olarak:

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

Öyleyse, 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ırdığında hemen görüntülenip görüntülenmeyeceğini seçebilirsiniz. Bu seçeneklerin tümü, tam özelleştirmeye izin veren kendi ayarlarına sahiptir.

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

Ayarları istediğiniz şekilde tamamlayın ve ardından KAYDET & KAPAT'a tıklayın. Sen yönlendirilirsiniz amp le Popup bu düğmeyi tıkladıktan sonra nasıl görüneceğini arasında.

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 ince ayar yaptık, hepsi bu kadar. Açılır penceremizi daha fazla ö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 belirleyip bir kez daha şablon seçebiliriz.

Bundan sonra onu seçebilir, temel ayarlarda gerekli değişiklikleri yapabilir ve bir kez daha YAYINLA'ya basabiliriz.

Tamam, işlerin ilginçleşmeye başladığı yer burası. WordPress kurulumumuzdan dinamik verileri almak ve açılır penceremizdeki açılır pencerenin kendisine eklemek için Elementor'u kullanabiliriz. Kullanıcı adı, sayfa başlığı ve benzeri gibi bilgileri ekleyebiliriz.

Şu senaryoyu düşünün: WooCommerce kullanıyoruz ve bir kullanıcıyı şu anda görüntüledikleri belirli üründe indirim olduğu konusunda bilgilendirmek 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, aralarından seçim yapabileceğiniz çok çeşitli seçeneklere sahibiz. Bir Ürün Başlığı seçeceğiz ve seçimimizin bir sonucu olarak metin içerik bloğumuza eklenecek.

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

Öyleyse, ürünün fiyatını gösterecek olan buton için bu işlemi çoğaltalım. Bize zorlayıcı bir harekete geçirici mesaj sağlamak için önceki metni ŞİMDİ SATIN AL olarak ifade edebiliriz:

Hatta bir adım daha ileri götürebilir ve ürün resmini açılır pencerenin arka planı olarak kullanabiliriz.

PUBLISH'e bastığımızda, bir kez daha yayın ayarları ile karşılaşıyoruz ve bu da açılır pencerenin yalnızca WooCommerce sayfalarında görünmesini istediğimizi belirtmemize izin veriyor. Tetikleyici olması için zamanlayıcıyı 15 saniye hareketsizliğe 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 bir resmini gösterdiğimizi görebilirsiniz. Parlak!