Divi Durum seçeneğini kullanarak bir promosyon açılır penceresi ile terk edilen sepet nasıl yeniden hedeflenir
Solun solundaki arabanın yeniden hedeflenmesi, müşterilere web sitenizdeki sepetlerine ekledikten sonra bıraktıkları ürünleri satın almaları için teşvikler sağlayan etkili bir pazarlama tekniğidir.Müşteriyi satın alma işlemini tamamlamak için geri getirmek için etkili bir strateji, satın almak istedikleri ürünler için indirimler sunmaktır.Zor kısım, bu indirimleri yalnızca arabalarını terk eden kullanıcılara sunmaktır.Divi’nin durum seçenekleri, kullanıcının WooOcommerce sepet içeriğine ve sayfa ziyaretlerine göre içeriği görüntülemenize veya gizlemenize olanak tanıyan bir görüntüleme koşulu içerir.Bu durum, arabalarını indirimler veya promosyon açılır pencerelerle bırakan kullanıcıları yeniden hedeflemeyi mümkün kılar.
Bu öğreticide, yalnızca kullanıcıların sepetlerinde öğeler varsa ve ödeme sayfasını ziyaret ettiyse, yön sayfasında görünen akıllı promosyon açmalarını yaparak kalan arabaların nasıl yeniden hedefleneceğini göstereceğiz. Başlayalım! Aşağıdaki gizlice göz atma, bu öğreticide yapacağımız promosyon açısının kısa bir görünümüdür. Kullanıcı ürünü sepetlerine eklediyse ve ödeme sayfasını ziyaret ettiyse, bu promosyon açılır penceresi sayfada görünecektir. Bu öğreticinin düzenini bulmak için Popup Promo Basket Terkedilmiş Ücretsiz Hedeflemenin Düzenini İndirin, önce aşağıdaki düğmeyi kullanarak indirmeniz gerekir. İndirmelere erişmek için, aşağıdaki formu kullanarak Divi Daily E -posta listemize abone olmanız gerekir. Yeni bir müşteri olarak, her Pazartesi daha fazla Divi’nin iyi ve ücretsiz Divi düzen paketleri alacaksınız! Zaten listede iseniz, e -posta adresinizi aşağıya girin ve İndir’i tıklayın. “Abone Olmayacak” veya Ek E -posta Almayacaksınız. Dosyayı indirin
Divi bültenine katılmak için ücretsiz indirin ve en iyi divi düzen paketinin kopyasına bir e -posta göndereceğiz, ayrıca birçok kaynak, ipucu ve olağanüstü ve ücretsiz divi hileleri. Birlikte takip edin ve kısa sürede bir divi ustası olacaksınız. Abone olduysanız, e -posta adresinizi aşağıya yazın ve Düzen Paketine erişmek için İndir’i tıklayın.
Abone olmayı başardınız. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve ÜCRETSİZ DIVI Düzen Paketine erişin!
Parçanın düzenini divi kütüphanenize aktarmak için Divi kütüphanesine gidin. İçe Aktar düğmesine tıklayın. Taşınabilirlik açılır penceresinde, İçe Aktarma sekmesini seçin ve bilgisayarınızdan indirme dosyasını seçin. Ardından İçe Aktar düğmesini tıklayın.
Bittiğinde, parçanın düzeni Divi Builder’da mevcut olacak. Öğreticinin giriş ve çıkışlarını yapma sürecine girmeden önce kavramları anlamak, ne inşa edeceğimizin temel kavramlarını anlamaya yardımcı olabilir. Fikir, mevcut yön sayfasında bir promosyon açılır penceresi oluşturmak için Divi Builder’ı kullanmaktır. Promosyon açılır bölümü yapıldıktan sonra, aşağıdaki iki koşul karşılandığında parçayı görüntüleyecek bir koşul seçeneği eklemek istiyoruz.
Kullanıcıların sepetlerinde içerik var Kullanıcılar ödeme sayfasını ziyaret etti
Bu, bölümü (veya herhangi bir Divi öğesini) düzenlerken Divi Varsayılan Durum seçeneği kullanılarak yapılabilir.
Bu bölüm (veya pop -up promosyonu) için koşul seçeneği ayarlandıktan sonra, artık koşulları karşıladıklarında açılır pencereyi göstererek sepetlerini bırakan kullanıcıları yeniden hedefleyebiliriz. Süreç böyle olacak …
Kullanıcılar görüntülenen açılır pencere promosyonu olmadan yön sayfasını ziyaret edin Kullanıcılar sepetlerine içerik ekler (Durum #1’i karşılayın)
Kullanıcılar ödeme sayfasını ziyaret eder (Durum # 2’yi karşılamak), ancak herhangi bir nedenle kullanıcı ödeme işlemini tamamlamaz ve bırakmaz.
Daha sonra kullanıcı, şimdi ödeme işlemini indirimle tamamlamaya yönlendiren bir promosyon açılır penceresini görüntüleyen yön sayfasını yeniden ziyaret etti.
Havalı şeyler! Şimdi kavramı anladıktan sonra, hadi öğreticiye gidelim, ha? Başlamak için neye ihtiyacın var
Başlamak için aşağıdakileri yapmanız gerekir: Değilse, Divi temasını yükleyin ve etkinleştirin. WordPress’te yeni bir sayfa oluşturun ve ön taraftaki sayfaları düzenlemek için Divi Builder’ı kullanın (görsel yapımcı). “Başından Uyan” seçeneğini seçin.
Bundan sonra, Divi’de tasarım yapmaya başlamak için boş bir tuvaliniz olacak. Divi Durum Seçenekleri Kullanarak Popup Promosyonu ile Vagon Arabaları Yeniden İsterleme Bölüm 1: Bu öğretici için önceden hazırlanmış yön sayfalarını yükleme, Divi web sitesi yön sayfasına promosyon açılır Popup ekleyeceğiz. Bu işlemi başlatmak için, Divi Builder’ın içinden parfüm sayfalarının düzenini içe aktaracağız.
Bunu yapmak için Ayarlar menüsünü açın ve kitaplıktan simge ekle’yi tıklayın. Ardından Parfümeri Düzeni Paketini arayın ve bulun ve Parfümeri Düzeni sayfası düzenini kullanmak için tıklayın.
Bölüm 2: Yön sayfası yüklendikten sonra bir promosyon açılır kabı olarak sabit bir parça oluşturun. Sayfanın altına gidin ve altbilgi sayfalarının altına yeni bir düzenli bölüm ekleyin.
Genişlik ve Dolgu Bölümünü Ayarlama Sonraki, parçanın ayarlarını bir genişlik ve özel dolgu ile şu şekilde güncelleyin:
Maksimum genişlik: 500 piksel Dolgu: 10 piksel üst, 10 piksel aşağıda Sınır daha sonra sınır parçasını verin.
Sınır Genişliği: 15px
Sınır rengi: #f6f4f2 Sınır kurulduktan sonra kutunun gölgesi, kutunun gölgesini biraz derinlik için bölüme ekleyin:
Gölge Kutusu: Ekran yakalamaya bakın
Bulanık Güç Gölgesi Kutusu: 38px Gölge Renk: RGBA (203,146,116,0.6)
Animasyon Gecikmeli animasyonlu pop -up’lar sağlamak için, animasyon stilini aşağıdaki gibi güncelleyin:
Animasyon Stili: Back
Animasyonlu Yön: Sol Animasyon Süresi: 3000ms
Bu, sayfanın iyi bir flip animasyonu ile yüklendikten sonra Popup Bölümünü 3 saniye görüntüler. Gelişmiş sekmesinin altındaki konumlandırın, parçanın tarayıcı penceresinin sol alt kısmında kalması için konumunu güncelleyin.
Pozisyon: Sabit
Konum: sol alt
CSS Sınıfı Son olarak, açılır pencereleri kapatacak/gizleyecek “X” simgeleri ekleyeceğiz. JQuery ile hedeflemek için bölüme özel bir CSS sınıfı eklememiz gerekiyor. Aşağıdaki CSS sınıfına girin: CSS Sınıfı: ET-PROMO-POPUP
Bölüm 3: Koşul seçeneğini ekleyin Sonraki parçaya (açılır penceremiz) yapılır, aşağıdaki iki koşul karşılandığında parçayı görüntüleyecek bir koşul seçeneği eklemeye hazırız.
Kullanıcıların sepetlerinde içerik var Kullanıcılar ödeme sayfasını ziyaret etti
Ekran Koşulu 1: İlk sepeti doldurun, kullanıcının sepetlerinde her içeriğe sahip olduğunda parçayı/açılır pencereyi görüntüleyecek bir ekran koşulu ekleyeceğiz. Bunu yapmak için bölüm ayarlarının altındaki devam eden sekmeyi açın. Ardından yeni koşullar eklemek için artı simgesini tıklayın. Çekme menüsünde sepetin durumunu seçin. Sepet İçeriği Ayarları açılır penceresinde, yalnızca kullanıcının sepeti seçeneği “bir ürüne sahip olmak” olarak ayarlanmışsa ekrana emin olun. Sonra değişikliği kaydedin. Not: Bu koşul özellikle WooCommerce kullanan Divi siteleri içindir.
Ekran Koşulu 2: Sonraki sayfa ziyareti, kullanıcı belirli bir sayfayı her ziyaret ettiğinde, bu durumda WooCommerce sitesinde bir ödeme sayfası olan parçaları/açılır pencereleri görüntüleyecek bir görüntüleme koşulu ekleyeceğiz.
Bunu yapmak için bölüm ayarlarının altındaki devam eden sekmeyi açın. Ardından yeni koşullar eklemek için artı simgesini tıklayın. Çıkış menüsünde sayfa ziyaretinin durumunu seçin. Sepet İçeriği Ayarları açılır penceresinde, yalnızca kullanıcı seçeneği “belirli bir sayfayı ziyaret ettiğinde” olarak ayarlandığında ekrana emin olun. Ardından, açılır sayfadaki sayfa listesinden ödeme sayfasını seçin. Sonra değişimi kaydedin. Görüntüleyin Tüm koşullar doğruysa, oyunda birkaç koşulumuz var, koşullardan biri veya tamamı doğruysa parçaları göstermeyi seçebiliriz. Bu durumda, tüm koşullar doğru olduğunda açılır promosyonları görüntülemek mantıklıdır (kullanıcıların sepetlerinde içeriği vardır ve check-out sayfasını ziyaret etmişlerdir). Ekran koşulları altında aşağıdakileri seçin:
Tüm koşulların doğru olup olmadığını gösterin
Bu noktada, aradığımız durumun işlevi, yalnızca kullanıcının bir sepet içeriği olduğunda ve ödeme sayfasını ziyaret ettiğinde parçaları görüntülemek için zaten oradadır. Şimdi yapmamız gereken, bölümü bir promosyon yapmak için gereken içerikle doldurmak. Bölüm 4: Popup promosyonu için içerik oluşturmak için promosyon açılır içeriği oluşturma, dört modül ekleyeceğiz: Kullanıcıların Sembulan’ı kapatabilmesi için tıklanabilen X simgesi ile modül açıklaması
Metnin başlığı ve içeriği için metin modülü
Satır ayarlarını aşağıdaki gibi güncelleyin:
Talang genişliği: 1
Genişlik:% 100
Dolgu: 0px üst, 0px aşağıda
Ardından, daha yüksek bir Z endeksi ile mutlak konum çizgisini aşağıdaki gibi verin: Pozisyon: Mutlak Dizin Z: 12
Pop -up’ı kapatmak için “X” simgesini yapmak için simge, satırda yeni bir açıklama modülü ekleyin.
Başlığın başlığını veya açıklama içeriğinin varsayılan içeriğini kaldırın. Ardından açıklama için X simgesini kullanmak için tıklayın.
Tasarım sekmesinin altında aşağıdakileri güncelleyin: Renk simgesi: #ddd
Simge yazı tipi boyutu: 40px
Genişlik: 40 piksel Modül hizalaması: doğru Yükseklik: 40 piksel Gelişmiş sekmesinin altına, açıklamaya aşağıdaki özel CSS sınıfını ekleyin:
CSS Sınıfı: ET-Close-Popup-Icon
Bu sınıfı daha sonra jQuery ile hedeflemeliyiz. Ekleyeceğimiz diğer açılır modüller için başlıklar ve içerik metni oluşturmak ayrı bir çizgi gerektirecektir. Açıklama simgesini içeren önceki satırın altına yeni bir sütun satır ekleyin.
Ardından satır ayarlarını aşağıdaki gibi güncelleyin:
Talang genişliği: 1 Genişlik:% 100
Dolgu: 0px üst, 20px dip, 40px sol, 40px sağ
Başlık ve içerik içeriği eklemek için yeni bir satıra yeni bir metin modülü ekleyin. Vücut alanındaki içeriği aşağıdaki HTML ile güncelleyin:
Tasarım sekmesinin altında, metin stilini aşağıdaki gibi güncelleyin:
Metin yazı tipi ağırlığı: yarı kalınlık
Metin Boyutu Metin: 18px Yüksek çizgi metin: 1.8em Hizalama Metni: Orta
Başlık 2 Yazı Tipi: Cormorant Garamond Başlık 2 Yazı Tipi Ağırlığı: Orta
2 renkli metin başlığı: #000
Başlık 2 Metin Boyutu: 54 piksel (masaüstü), 38px (tablet ve mobil)
Popup için bir promosyon kodu oluşturun Bir promosyon kodu oluşturmak için, bir öncekinin altına yeni bir metin modülü ekleyin.
Gövde alanını tasarım sekmesinin altındaki “Kod: Perfumoff” metniyle güncelleyin, aşağıdakileri güncelleyin:
Metin yazı tipi ağırlığı: yarı kalınlık
Metin Renk Metni: #CB9274
Metin Boyutu: 16px
Uzay metin mektubu: 2px Hizalama Metni: Orta Marj: 15px üst, 15px aşağıda Dolgu: 15px üst, 15px aşağıda
Sınır Genişliği: 4px
Sınır rengi: #f4e8dc
Sınır Kuvvetleri: Bağlantı Kesildi
Bir düğme oluşturmak için açılır bir düğme oluşturun, daha önce oluşturulan düzendeki düğmelerden birinden düğme modülünü kopyalayın.
Ardından Düğme Modülünü Promosyon Kodu Metin Modülünün altına geçirin. Düğme metnini ve düzleştirmeyi aşağıdaki gibi güncelleyin:
Metin düğmesi: Ödeme yaparken bir kupon kullanın
Düğmenin hizalanması: orta
Ödeme sayfasına bir bağlantı eklemeyi unutmayın. Bunu yapmak için, dinamik sayfa bağlantısını mevcut ödeme sayfasına düğme bağlantısının URL’si olarak kullanabilirsiniz.
Özel Kod açılır açma için son adımımız için “X” simgesine tıklarken, “X” simgesine tıklarken açılır pencereyi kapatmak için hızlı bir CSS ve jQuery eklememiz gerekir. Kodu eklemek için düğmenin altına yeni bir kod modülü ekleyin. Ardından, aşağıdaki CSS’yi yapıştırın Kodu gerekli kuvvet etiketine sarın. .Et-close-popup-icon: hover { İmleç: işaretçi; }
CSS görüntüleri içeren son stil etiketi altında, kodu gerekli komut dosyası etiketleriyle sarmak için aşağıdaki jQuery’yi yapıştırın. (işlev ($) {
$ (belge) .Ready (function () { $ (“. Et-close-popup-icon”). (“Tık”, function () { $ (“. Et-promo-popup”). Slayt (“yavaş”); })
});
}) (jQuery);
Parçanın düzenini divi kütüphanenize aktarmak için Divi kütüphanesine gidin. İçe Aktar düğmesine tıklayın. Taşınabilirlik açılır penceresinde, İçe Aktarma sekmesini seçin ve bilgisayarınızdan indirme dosyasını seçin. Ardından İçe Aktar düğmesini tıklayın.
Bittiğinde, parçanın düzeni Divi Builder’da mevcut olacak. Öğreticinin giriş ve çıkışlarını yapma sürecine girmeden önce kavramları anlamak, ne inşa edeceğimizin temel kavramlarını anlamaya yardımcı olabilir. Fikir, mevcut yön sayfasında bir promosyon açılır penceresi oluşturmak için Divi Builder’ı kullanmaktır. Promosyon açılır bölümü yapıldıktan sonra, aşağıdaki iki koşul karşılandığında parçayı görüntüleyecek bir koşul seçeneği eklemek istiyoruz.
Kullanıcıların sepetlerinde içerik var Kullanıcılar ödeme sayfasını ziyaret etti
Bu, bölümü (veya herhangi bir Divi öğesini) düzenlerken Divi Varsayılan Durum seçeneği kullanılarak yapılabilir.
Bu bölüm (veya pop -up promosyonu) için koşul seçeneği ayarlandıktan sonra, artık koşulları karşıladıklarında açılır pencereyi göstererek sepetlerini bırakan kullanıcıları yeniden hedefleyebiliriz. Süreç böyle olacak …
Kullanıcılar görüntülenen açılır pencere promosyonu olmadan yön sayfasını ziyaret edin Kullanıcılar sepetlerine içerik ekler (Durum #1’i karşılayın)
Kullanıcılar ödeme sayfasını ziyaret eder (Durum # 2’yi karşılamak), ancak herhangi bir nedenle kullanıcı ödeme işlemini tamamlamaz ve bırakmaz.
Daha sonra kullanıcı, şimdi ödeme işlemini indirimle tamamlamaya yönlendiren bir promosyon açılır penceresini görüntüleyen yön sayfasını yeniden ziyaret etti.
Havalı şeyler! Şimdi kavramı anladıktan sonra, hadi öğreticiye gidelim, ha? Başlamak için neye ihtiyacın var
Başlamak için aşağıdakileri yapmanız gerekir: Değilse, Divi temasını yükleyin ve etkinleştirin. WordPress’te yeni bir sayfa oluşturun ve ön taraftaki sayfaları düzenlemek için Divi Builder’ı kullanın (görsel yapımcı). “Başından Uyan” seçeneğini seçin.
Bundan sonra, Divi’de tasarım yapmaya başlamak için boş bir tuvaliniz olacak. Divi Durum Seçenekleri Kullanarak Popup Promosyonu ile Vagon Arabaları Yeniden İsterleme Bölüm 1: Bu öğretici için önceden hazırlanmış yön sayfalarını yükleme, Divi web sitesi yön sayfasına promosyon açılır Popup ekleyeceğiz. Bu işlemi başlatmak için, Divi Builder’ın içinden parfüm sayfalarının düzenini içe aktaracağız.
Bunu yapmak için Ayarlar menüsünü açın ve kitaplıktan simge ekle’yi tıklayın. Ardından Parfümeri Düzeni Paketini arayın ve bulun ve Parfümeri Düzeni sayfası düzenini kullanmak için tıklayın.
Bölüm 2: Yön sayfası yüklendikten sonra bir promosyon açılır kabı olarak sabit bir parça oluşturun. Sayfanın altına gidin ve altbilgi sayfalarının altına yeni bir düzenli bölüm ekleyin.
Genişlik ve Dolgu Bölümünü Ayarlama Sonraki, parçanın ayarlarını bir genişlik ve özel dolgu ile şu şekilde güncelleyin:
Maksimum genişlik: 500 piksel Dolgu: 10 piksel üst, 10 piksel aşağıda Sınır daha sonra sınır parçasını verin.
Sınır Genişliği: 15px
Sınır rengi: #f6f4f2 Sınır kurulduktan sonra kutunun gölgesi, kutunun gölgesini biraz derinlik için bölüme ekleyin:
Gölge Kutusu: Ekran yakalamaya bakın
Bulanık Güç Gölgesi Kutusu: 38px Gölge Renk: RGBA (203,146,116,0.6)
Animasyon Gecikmeli animasyonlu pop -up’lar sağlamak için, animasyon stilini aşağıdaki gibi güncelleyin:
Animasyon Stili: Back
Animasyonlu Yön: Sol Animasyon Süresi: 3000ms
Bu, sayfanın iyi bir flip animasyonu ile yüklendikten sonra Popup Bölümünü 3 saniye görüntüler. Gelişmiş sekmesinin altındaki konumlandırın, parçanın tarayıcı penceresinin sol alt kısmında kalması için konumunu güncelleyin.
Pozisyon: Sabit
Konum: sol alt
CSS Sınıfı Son olarak, açılır pencereleri kapatacak/gizleyecek “X” simgeleri ekleyeceğiz. JQuery ile hedeflemek için bölüme özel bir CSS sınıfı eklememiz gerekiyor. Aşağıdaki CSS sınıfına girin: CSS Sınıfı: ET-PROMO-POPUP
Bölüm 3: Koşul seçeneğini ekleyin Sonraki parçaya (açılır penceremiz) yapılır, aşağıdaki iki koşul karşılandığında parçayı görüntüleyecek bir koşul seçeneği eklemeye hazırız.
Kullanıcıların sepetlerinde içerik var Kullanıcılar ödeme sayfasını ziyaret etti
Ekran Koşulu 1: İlk sepeti doldurun, kullanıcının sepetlerinde her içeriğe sahip olduğunda parçayı/açılır pencereyi görüntüleyecek bir ekran koşulu ekleyeceğiz. Bunu yapmak için bölüm ayarlarının altındaki devam eden sekmeyi açın. Ardından yeni koşullar eklemek için artı simgesini tıklayın. Çekme menüsünde sepetin durumunu seçin. Sepet İçeriği Ayarları açılır penceresinde, yalnızca kullanıcının sepeti seçeneği “bir ürüne sahip olmak” olarak ayarlanmışsa ekrana emin olun. Sonra değişikliği kaydedin. Not: Bu koşul özellikle WooCommerce kullanan Divi siteleri içindir.
Ekran Koşulu 2: Sonraki sayfa ziyareti, kullanıcı belirli bir sayfayı her ziyaret ettiğinde, bu durumda WooCommerce sitesinde bir ödeme sayfası olan parçaları/açılır pencereleri görüntüleyecek bir görüntüleme koşulu ekleyeceğiz.
Bunu yapmak için bölüm ayarlarının altındaki devam eden sekmeyi açın. Ardından yeni koşullar eklemek için artı simgesini tıklayın. Çıkış menüsünde sayfa ziyaretinin durumunu seçin. Sepet İçeriği Ayarları açılır penceresinde, yalnızca kullanıcı seçeneği “belirli bir sayfayı ziyaret ettiğinde” olarak ayarlandığında ekrana emin olun. Ardından, açılır sayfadaki sayfa listesinden ödeme sayfasını seçin. Sonra değişimi kaydedin. Görüntüleyin Tüm koşullar doğruysa, oyunda birkaç koşulumuz var, koşullardan biri veya tamamı doğruysa parçaları göstermeyi seçebiliriz. Bu durumda, tüm koşullar doğru olduğunda açılır promosyonları görüntülemek mantıklıdır (kullanıcıların sepetlerinde içeriği vardır ve check-out sayfasını ziyaret etmişlerdir). Ekran koşulları altında aşağıdakileri seçin:
Tüm koşulların doğru olup olmadığını gösterin
Bu noktada, aradığımız durumun işlevi, yalnızca kullanıcının bir sepet içeriği olduğunda ve ödeme sayfasını ziyaret ettiğinde parçaları görüntülemek için zaten oradadır. Şimdi yapmamız gereken, bölümü bir promosyon yapmak için gereken içerikle doldurmak. Bölüm 4: Popup promosyonu için içerik oluşturmak için promosyon açılır içeriği oluşturma, dört modül ekleyeceğiz: Kullanıcıların Sembulan’ı kapatabilmesi için tıklanabilen X simgesi ile modül açıklaması
Metnin başlığı ve içeriği için metin modülü
Promosyon kodu için diğer metin modülleri
Ve kullanıcıların satın alma işlemini tamamlayabilmesi için ödeme sayfasına işaret edecek düğme modülü.
Satır ayarlarını aşağıdaki gibi güncelleyin:
Talang genişliği: 1
Genişlik:% 100
Dolgu: 0px üst, 0px aşağıda
Ardından, daha yüksek bir Z endeksi ile mutlak konum çizgisini aşağıdaki gibi verin: Pozisyon: Mutlak Dizin Z: 12
Pop -up’ı kapatmak için “X” simgesini yapmak için simge, satırda yeni bir açıklama modülü ekleyin.
Başlığın başlığını veya açıklama içeriğinin varsayılan içeriğini kaldırın. Ardından açıklama için X simgesini kullanmak için tıklayın.
Tasarım sekmesinin altında aşağıdakileri güncelleyin: Renk simgesi: #ddd
Simge yazı tipi boyutu: 40px
Genişlik: 40 piksel Modül hizalaması: doğru Yükseklik: 40 piksel Gelişmiş sekmesinin altına, açıklamaya aşağıdaki özel CSS sınıfını ekleyin:
CSS Sınıfı: ET-Close-Popup-Icon
Bu sınıfı daha sonra jQuery ile hedeflemeliyiz. Ekleyeceğimiz diğer açılır modüller için başlıklar ve içerik metni oluşturmak ayrı bir çizgi gerektirecektir. Açıklama simgesini içeren önceki satırın altına yeni bir sütun satır ekleyin.
Ardından satır ayarlarını aşağıdaki gibi güncelleyin:
Talang genişliği: 1 Genişlik:% 100
Dolgu: 0px üst, 20px dip, 40px sol, 40px sağ
Başlık ve içerik içeriği eklemek için yeni bir satıra yeni bir metin modülü ekleyin. Vücut alanındaki içeriği aşağıdaki HTML ile güncelleyin:
% 20 indirim!
Bugün satın aldığınızda parfüm siparişinizde% 20 indirim almak için ödeme sırasında aşağıdaki kupon kodunu kullanın! Bu teklif yalnızca sınırlı bir süre için kullanılabilir.Tasarım sekmesinin altında, metin stilini aşağıdaki gibi güncelleyin:
Metin yazı tipi ağırlığı: yarı kalınlık
Metin Boyutu Metin: 18px Yüksek çizgi metin: 1.8em Hizalama Metni: Orta
Başlık 2 Yazı Tipi: Cormorant Garamond Başlık 2 Yazı Tipi Ağırlığı: Orta
2 renkli metin başlığı: #000
Başlık 2 Metin Boyutu: 54 piksel (masaüstü), 38px (tablet ve mobil)
Popup için bir promosyon kodu oluşturun Bir promosyon kodu oluşturmak için, bir öncekinin altına yeni bir metin modülü ekleyin.
Gövde alanını tasarım sekmesinin altındaki “Kod: Perfumoff” metniyle güncelleyin, aşağıdakileri güncelleyin:
Metin yazı tipi ağırlığı: yarı kalınlık
Metin Renk Metni: #CB9274
Metin Boyutu: 16px
Uzay metin mektubu: 2px Hizalama Metni: Orta Marj: 15px üst, 15px aşağıda Dolgu: 15px üst, 15px aşağıda
Sınır Genişliği: 4px
Sınır rengi: #f4e8dc
Sınır Kuvvetleri: Bağlantı Kesildi
Bir düğme oluşturmak için açılır bir düğme oluşturun, daha önce oluşturulan düzendeki düğmelerden birinden düğme modülünü kopyalayın.
Ardından Düğme Modülünü Promosyon Kodu Metin Modülünün altına geçirin. Düğme metnini ve düzleştirmeyi aşağıdaki gibi güncelleyin:
Metin düğmesi: Ödeme yaparken bir kupon kullanın
Düğmenin hizalanması: orta
Ödeme sayfasına bir bağlantı eklemeyi unutmayın. Bunu yapmak için, dinamik sayfa bağlantısını mevcut ödeme sayfasına düğme bağlantısının URL’si olarak kullanabilirsiniz.
Özel Kod açılır açma için son adımımız için “X” simgesine tıklarken, “X” simgesine tıklarken açılır pencereyi kapatmak için hızlı bir CSS ve jQuery eklememiz gerekir. Kodu eklemek için düğmenin altına yeni bir kod modülü ekleyin. Ardından, aşağıdaki CSS’yi yapıştırın Kodu gerekli kuvvet etiketine sarın. .Et-close-popup-icon: hover { İmleç: işaretçi; }
CSS görüntüleri içeren son stil etiketi altında, kodu gerekli komut dosyası etiketleriyle sarmak için aşağıdaki jQuery’yi yapıştırın. (işlev ($) {
$ (belge) .Ready (function () { $ (“. Et-close-popup-icon”). (“Tık”, function () { $ (“. Et-promo-popup”). Slayt (“yavaş”); })
});
}) (jQuery);
