Tam Ekran Bloom Katılım Formu, Şeffaf veya Tam Genişlik Nasıl Oluşturulur
Bugünün öğreticisinde, web sitenize bir katılım formu eklemenize yardımcı olan bir eklenti olan tam ekran katılım formu, şeffaf ve geniş çiçek dolu bir eklenti oluşturmayı göstereceğiz. İki katılım formu örneği tasarlama ve hazırlama sürecinde size adım adım rehberlik edeceğiz. Bu yazıyı dikkatlice takip ederek, kendi şeffaf katılım formunuzu oluşturabilir ve Bloom eklentisini yükleyen herhangi bir web sitesinde kullanabilirsiniz-ister kendi web siteniz olsun veya istemciye ait olsun. Web sitenizde bir veya birkaç katılım formuna sahip olmak, sadece ziyaretçilerinizle iletişim kurmanıza değil, aynı zamanda onlarla da ilgilenmenize yardımcı olan bir şeydir. Mevcut katılım formuna sahip olmayan web sitelerini bulmak zordur, çünkü veriler taşıdığı sonuçlara yöneliktir. Ziyaretçinizin e -posta adresini doğru zamanda ve yerde alarak, onları tanımak ve onları müşterileri ve/veya sadık ziyaretçileri yapmak için bir adım daha yakın olacaksınız.
Ancak, standart katılım formundan uzaklaşmayı tercih ederseniz, tam ekran katılım formu, şeffaf veya tam genişlik seçebilirsiniz. Önceki iki örnek göstereceğiz. örnek 1
Bu yüzden önce katılım formunu etkinleştirmeniz ve sayfalarınızdan birine uygulanmasını sağlamanız gerekir. Ziyaretçilerinizin hala üzerinde çalışırken katılım formlarıyla karşılaşmadığından emin olmak için, ziyaretçilerinizle paylaşmadığınız yeni bir sayfada kullanabilirsiniz. (Veya elbette, evreleme/test sitesinde.) Yeni bir sayfa oluşturarak ve bir ad vererek başlayın. O sayfaya hiçbir şey koymanıza gerek yok; Sadece var olmalı. Katılım formunu tasarlarken, Ekran Ayarları sekmesini açın. Gecikme süresini 1 saniyeye ayarlayın, böylece sonuçları her kontrol etmek istediğinizde katılım formunu beklemenize gerek kalmaz. Sekmeyi bağlama ve ‘etkin ekran’ seçeneğini bulduğunuzda ‘sayfa’ seçin. ‘Sayfa’ seçtikten sonra, web sitenizde etkin sayfaların bir listesini göreceksiniz. Yeni oluşturduğunuz sayfayı seçin. Katılım formunu bu sayfada görüntülediğinizden emin olun.
CSS kodu ile yaptığınız form etkinleştirilmiş değişikliklerinize göre değişiklik yapın Tüm katılım formları için geçerli değildir; Sadece özellikle üzerinde çalıştığınız katılım formuna uygulanırlar. Bu yüzden ihtiyacımız olan bazı sınıflar benzersiz olacak. Bu yazının ilerleyen saatlerinde, tekrar yaptığımız örnek için bunu nasıl yapacağınızı göstereceğiz. İlk örneği yapmaya başlayın Size nasıl yeniden yapacağınızı gösterdiğimiz ilk örnek, yukarıdaki basılı ekranda. Katılım formunun tam ekranda göründüğünü görebilirsiniz. Öyle görünse de, sadece şeffaf bir katılım formu yapıyoruz ve arka planın rengini değiştiriyoruz. Katılım formunu ekleyin, WordPress Dashboard> Bloom> ‘Yeni Optin’i Sağ Köşedeki’ Yeni Optin’i tıklayın ‘Pop Up’ı seçin. Kurulum. Bittiğinde Tasarım sekmesine gidebilirsiniz. Bu gönderiye odaklanacağımız ana sekme. Sağlanan şablonlardan birini seçin ve devam edin. Yaptığımız örnek için, hattaki ilkini seçtik.
Tasarım Ayarları Tasarım sekmesindeki formu herhangi bir değişiklik yapmadan incelediğinizde, aşağıdaki katılım formlarının göründüğünü göreceksiniz: Bu, görülecek sonuçlardan çok farklı görünüyor, ancak katılım formunun temelinin aynı olduğunu da görebilirsiniz.
Katılımın başlığı ve mesajı şimdi, katılım formumuz yukarıda gösterdiğimiz örneğe benzeyecek, tasarım sekmesindeki optin başlıklarının ve optin mesajlarının standart tasarım ayarlarında aşağıdaki değişiklik yaparak başlayın: Metin rengi: #ffffff Metin Stili: Kalınlık
Metin Oryantasyonu: Orta
Görüntü ayarları ve aynı sekmenin altında kaydırma stilini seçme ve görüntü ayarları, optin kuvveti ve sınır kuvvetinde aşağıdaki ayarları yapın:
Görüntü Oryantasyonu: resim yok
Arka plan rengi: açık Editör Yazı Tipi: Lato
Gövde yazı tipi: lato
Metin Rengi: Karanlık Metin
Açı Kuvveti: Sınır Kuaderya Açısı: Üst Sınır + Alt Sınır
Sınır rengi: #ffffff
Sınır Kuvvetleri: Çizgili Sınır
Sınır Tarzı, Form Ayarları ve Form Yönetimi, formun formunun ve düzenlenmesinin oluşumunda aşağı kaydırmaya ve aşağıdaki değişiklikleri oluşturmaya devam ediyor:
Oryantasyon Formu: Aşağıdaki Form
İsim alanı: ismin adı yok
E -posta Metni: E -posta Metin düğmesi: Abone olun!
Oryantasyon Alan Formu: Alan Formları Kazık
Açısal stil alanı: Yuvarlak açı
Renkli Metin Şekli: Işık Metin
Renk Arka Plan Formu: Açık
Düğme rengi: #6A18A0
Metin Renk Düğmesi: Parlak
Katılım formunda yapmanız gereken son manuel değişiklik stilinin kenarının şekli, bu durumda düz bir çizgi olan formun kenarını seçmektir.
Son özel CSS, yerinde her şeyi yönetmek için formda bazı CSS değişiklikleri yapmamız gerekiyor. Aşağıdaki kod satırını CSS özel düzlemine kopyalayın ve yapıştırın: .et_bloom .et_bloom_popup: {sonra {
Arka plan: -Webkit-linear-gradyan (RGBA (129, 83, 177, 0.98)%50, RGBA (177,194,233.0.80)%50)! Önemli;
Arka plan: -O-doğrusal gradyan (RGBA (129, 83, 177, 0.98)%50, RGBA (177,194,233.0.80)%50)! Önemli; Arka plan: -moz-lineer-gradyan (RGBA (129, 83, 177, 0.98)%50, RGBA (177,194,233.0.80)%50)! Önemli; Arka plan: doğrusal gradyan (RGBA (129, 83, 177, 0.98)%50, RGBA (177,194,233.0.80)%50! Önemli; }
.et_bloom .et_bloom_form_container {
Arka Plan Renk: Yok! Önemli;
Arka plan: hiçbiri! Önemli;
-Moz-Box-Shadow: Yok! Önemli;
Box-Shadow: Yok! Önemli;
-Webkit-Box-Shadow: Yok! Önemli;
}
.et_bloom .et_bloom_form_container .et_bloom_form_content
{Arka plan-color: yok! Önemli;
Arka plan: Yok! Önemli;}
.et_bloom .et_bloom_form_container .et_bloom_form_header .et_bloom_header_text_dark {
Arka plan: hiçbiri! Önemli;
}
.et_bloom .et_bloom_form_container.et_bloom_form_right {
Arka Plan Renk: Yok! Önemli;
Arka plan: hiçbiri! Önemli;
}
.et_bloom .et_bloom_optin_6 .et_bloom_form_container .et_bloom_form_header {
Arka Plan Renk: Yok! Önemli;
Arka plan: hiçbiri! Önemli;
}
.et_bloom .et_bloom_optin_6 .et_bloom_form_container h2 {
Yazı tipi boyutu: 50px! Önemli;
Metin -Shadow: -1px -1px 1px RGBA (33,97,160.0.5), 2px 2px 1px RGBA (33,97,160,0.5);
}
.et_bloom .et_bloom_optin_6 .et_bloom_form_container p {
Yazı tipi boyutu: 30px! Önemli;
Metin -Shadow: -1px -1px 1px RGBA (33,97,160.0.5), 2px 2px 1px RGBA (33,97,160,0.5);
}
.et_bloom .et_bloom_form_container.et_bloom_form_text_light .et_bloom_form_content giriş {
Metin-Aign: Merkez! Önemli;
Renk: #ffffff! Önemli;
}
.et_bloom .et_bloom_bottom_stacked p.et_bloom_popup_input {
Genişlik:%50! Önemli;
Marj-sol:%25;
}
.et_bloom .et_bloom_form_container.et_bloom_round düğme {
Genişlik:%50! Önemli;
Marj-sol:%25;
}
.et_bloom .et_bloom_form_container .et_bloom_form_content {
Dolgu: 0 0 40px 0! Önemli;
}
Kodu, sizinle paylaştığımız koddaki kendi Bloom Katılım Formunuza göre değiştirin, üç ayar yapmanız gerekir. Bazı CSS sınıfları sadece bir katılım formu için geçerlidir, bu yüzden hangi katılım formlarında çalıştığımızı bilmemiz gerekir. Yapmanız gereken tek şey üç kez bir numarayı değiştirmek:
Yukarıdaki basılı ekranda vurgulanan kısmın sonundaki sayılar 6’dır çünkü birbirini izleyen 6.
Bu nedenle, form listenizdeki konumuna bağlı olarak, numarayı ayarlamanız gerekir. Nihai Sonuç Mevcut katılım formunuzun önizlemesini görürseniz, tüm değişikliklerin gerçekleştirildiğini ve katılım formunuzun şöyle göründüğünü göreceksiniz: Ekran ayarlarınız artık ekran ayarlarına gidebilir ve ayarlamak için gereken değişiklikler yapabilir. Bloom Katılım Formu. Daha derin ayrıntılara gitmeyeceğiz çünkü bu yazı yalnızca bu katılım formunun tasarım bölümünü ele alacaktır. İkinci bir örnek yapmaya başlayın
Göstereceğimiz bir sonraki örnek tam bir ekran değil, tam geniş. Sonuçları nasıl elde edebileceğimizi göstermek için, önceki örnekte olduğu gibi aynı katılım formunu kullanacağız, ancak bazı küçük değişiklikler yapacağız ve farklı bir CSS kodu ekleyeceğiz. Tasarım ayarları, varsayılan tasarım ayarlarında farklı yapmamız gereken sadece üç şeydir. Unutma; Önceki örnekte oluşturduğumuz katılım formunu kullanıyoruz. Bahsedeceğimiz üç şeyin yanı sıra, ilk örnekte olduğu gibi aynı varsayılan ayarlar uygulanır. Yapmanız gereken ilk şey, sınır yönünü ‘sınırsız’ olarak yerleştirmektir.
Form metninin rengi için aşağı kaydırın ve ‘Koyu Metin’i seçin ve düğmenin rengi olarak’#724501 ‘kullanın.
Son özel CSS, özel CSS kutusuna birkaç sıra CSS kodu eklememiz gerekiyor: @edia ekran ve (min genişliği: 981px) {
.et_bloom .et_bloom_popup: sonra { Marj-Top:%12! Önemli; Yükseklik:%50! Önemli; Arka plan: URL (“”); Sınır Top: 3px Katı #B29470! Önemli; Sınır dip: 3px katı #b29470! Önemli; kutu gölgesi: 0px 1px 30px 0px RGBA (46, 50, 50, 0.92); -Webkit-Box-Shadow: 0px 1px 30px 0px RGBA (46, 50, 50, 0.92);-moz-box-shadow: 0px 1px 30px 0px RGBA (46, 50, 50, 0.92);
}
.et_bloom .et_bloom_form_container .et_bloom_close_button {
Sağ: -250px! Önemli;
Üst:%-20! Önemli;
}}
@Media sadece ekran ve (maksimum genişlik: 981px) {
.et_bloom .et_bloom_popup: sonra {
Arka plan: URL (“”);
}}
.et_bloom .et_bloom_form_container .et_bloom_popup_input {
Arka plan: #ffffff! Önemli;
}
.et_bloom .et_bloom_form_container {
Arka Plan Renk: Yok! Önemli;
Arka plan: hiçbiri! Önemli;
-Moz-Box-Shadow: Yok! Önemli;
Box-Shadow: Yok! Önemli;
-Webkit-Box-Shadow: Yok! Önemli;
}
.et_bloom .et_bloom_form_container .et_bloom_form_content {
Arka Plan Renk: Yok! Önemli;
Arka plan: hiçbiri! Önemli;
}
.et_bloom .et_bloom_form_container .et_bloom_form_header .et_bloom_header_text_dark {
Arka plan: hiçbiri! Önemli;
}
.et_bloom .et_bloom_form_container.et_bloom_form_right {
Arka Plan Renk: Yok! Önemli;
Arka plan: hiçbiri! Önemli;
}
.et_bloom .et_bloom_optin_6 .et_bloom_form_container .et_bloom_form_header {
Arka Plan Renk: Yok! Önemli;
Arka plan: hiçbiri! Önemli;
}
.et_bloom .et_bloom_optin_6 .et_bloom_form_container h2 {
Yazı tipi boyutu: 50px! Önemli;
Metin -Shadow: -1px -1px 1px RGBA (114,69,1,0,5), 2px 2px 1px RGBA (114,69,1,1,0,5);
}
.et_bloom .et_bloom_optin_6 .et_bloom_form_container p {
Yazı tipi boyutu: 30px! Önemli;
Metin -Shadow: -1px -1px 1px RGBA (114,69,1,0,5), 2px 2px 1px RGBA (114,69,1,1,0,5);
}
.et_bloom .et_bloom_form_container.et_bloom_form_text_dark .et_bloom_form_content giriş {text-align: center! Önemli;
Renk: #ffffff! Önemli;
}
.et_bloom .et_bloom_bottom_stacked p.et_bloom_popup_input {
Genişlik:%50! Önemli; Marj-sol:%25;
}
.et_bloom .et_bloom_form_container.et_bloom_round düğme {
Genişlik:%50! Önemli;
Marj-sol:%25;
}
.et_bloom .et_bloom_form_container .et_bloom_form_content {
Dolgu: 0 0 40px 0! Önemli;
}
Yapmanız gereken son şeyin arka plan görüntüsünü değiştirmek, WP klasörlerinizin içeriğinde veya başka yerlerde URL’lerden biri tarafından kullanılan arka plan görüntüsünü değiştirmektir. Aşağıdaki basılı ekranda işaretlenen ilk URL, masaüstü ve ikincisi tabletler ve cep telefonları için geçerlidir.
Nihai sonuç ve bitirdiniz! İkinci katılım formunuz şimdi şöyle görünecek:
Kullanıcılarınızın kullanacağı güzel bir katılım formu oluşturmak için çiçek açarak sahip olduğunuz son olasılık sınırsızdır. Bu yazıda nasıl yapacağımızı gösterdiğimiz tek şey, ne kadar yaratıcı alabileceğinizin bir örneğidir. Sorularınız veya önerileriniz varsa, aşağıdaki yorumlar bölümünde yorum bırakmaktan çekinmeyin! Büyük duyuruları, yararlı ipuçlarını veya divi freebie’yi asla kaçırmayacak şekilde e -posta bültenimize ve YouTube kanalımıza abone olduğunuzdan emin olun!
