ev borcu WordPress sitesi
Tam Ekran, Şeffaf veya Tam Genişlikli Bloom Opt-in Formları Nasıl Oluşturulur
Bugünün eğitiminde, web sitenize katılım formları eklemenize yardımcı olan bir eklenti olan Bloom ile tam ekran, şeffaf ve tam genişlikte katılım formlarını nasıl oluşturacağınızı göstereceğiz. İki örnek katılım formu tasarlama ve ayarlama sürecinde size adım adım rehberlik edeceğiz. Bu gönderiyi dikkatli bir şekilde takip ederek, şeffaf katılım formlarını kendiniz oluşturabilecek ve Bloom eklentisinin yüklü olduğu herhangi bir web sitesinde kullanabileceksiniz – ister kendi web siteniz ister bir müşteriniz olsun.
Web sitenizde bir veya birden fazla katılım formuna sahip olmak, yalnızca ziyaretçilerinizle iletişim halinde kalmanıza değil, aynı zamanda onlarla etkileşim kurmanıza da yardımcı olan bir şeydir. Getirdiği sonuç odaklı verilerden dolayı günümüzde opt-in formu olmayan bir web sitesine rastlamak zor. Ziyaretçilerinizin e-posta adresini doğru zamanda ve yerde kazanarak, onları tanımaya ve onları sadık müşteriler ve/veya ziyaretçiler haline getirmeye bir adım daha yaklaşacaksınız.
Ancak, standart katılım formlarından uzaklaşmayı tercih ederseniz, bunun yerine tam ekran, şeffaf veya tam genişlikte katılım formunu tercih edebilirsiniz. Size önceden iki örneği göstereceğiz.
örnek 1
Örnek 2
Bloom ile Tam Ekran ve Şeffaf Katılım Formu Oluşturma: İpuçları
Bloom eklentisi, katılım formlarınızı şekillendirmek ve hem siz hem de ziyaretçileriniz için en iyi şekilde hedef kitlenizi çekmek için çeşitli olanaklar sunar. Bloom'un sunduğu mevcut katılım şablonlarına ek olarak, özelleştirilmiş tasarımlar oluşturmayı kolaylaştıran yerleşik seçenekler de vardır. Daha gelişmiş sonuçlar elde etmek için özel CSS kodu da ekleyebilirsiniz.
Ancak, CSS kodu aracılığıyla tasarımda bazı ayarlamalar yapmaya çalışırken, bazı şeyleri göz önünde bulundurmanız gerekir, böylece işleri yoluna koymak için zaman kaybetmezsiniz.
Önce Katılım Formunu Etkinleştirin
Katılım formunuzu tasarlarken, Tasarım sekmenizin üst kısmında bir önizleme düğmesi bulunur. Bu, tasarlarken yaptığınız sonuçları önizlemenize yardımcı olur. Yerleşik tasarım değişiklikleri önizlemede de otomatik olarak değişse de, bu CSS kodu için sayılmaz. Tasarım sekmenizdeki Özel CSS alanınız aracılığıyla belirli değişiklikler yapıyorsanız, bu değişikliklerden bazıları önizleme formu için geçerli olmayabilir, ancak web sitenizdeki katılım formu için geçerli olabilir.
Bu nedenle, önce katılım formunu etkinleştirmeniz ve sayfalarınızdan birine uygulanmasını sağlamanız gerekir. Siz hala üzerinde çalışırken, ziyaretçilerinizin katılım formuyla karşılaşmadığından emin olmak için, ziyaretçilerinizle paylaşmadığınız yeni bir sayfada önizleyebilirsiniz.
(Veya elbette bir hazırlık/test sitesinde.)
Yeni bir sayfa oluşturarak ve ona bir ad vererek başlayın. O sayfaya hiçbir şey koymanız gerekmez; sadece var olması gerekiyor. Katılım formunuzu tasarlarken Görüntü Ayarları sekmesine gidin. Sonucu her kontrol etmek istediğinizde katılım formunu beklemek zorunda kalmamak için gecikme süresini 1 saniyeye ayarlayın.
Bu sekmeyi aşağı kaydırın ve 'Ekran Açık' seçeneğiyle karşılaştığınızda 'Sayfa'yı seçin. 'Sayfa'yı seçtiğinizde, web sitenizde etkin olan sayfaların bir listesini göreceksiniz. Yakın zamanda oluşturduğunuz sayfayı seçin. Katılım formunu yalnızca o sayfada görüntülediğinizden emin olun.
Aktif Formunuza Göre Değişiklikleri Yapın
CSS koduyla yaptığınız değişiklikler tüm katılım formları için geçerli değildir; bunlar yalnızca özellikle üzerinde çalıştığınız katılım formu için geçerlidir. Bu yüzden ihtiyacımız olan bazı sınıflar benzersiz olacak.
Bu gönderide daha sonra, yeniden oluşturduğumuz örnekler için bunu nasıl yapacağınızı göstereceğiz.
İlk Örneği Oluşturmaya Başlayın
Size nasıl yeniden oluşturulacağını gösterdiğimiz ilk örnek, yukarıdaki yazdırma ekranındaki örnektir. Katılım formunun tam ekran olarak göründüğünü görebilirsiniz. Öyle görünse de biz sadece şeffaf bir kayıt formu oluşturduk ve arka plan renklerini değiştirdik.
Katılım Formunu Ekleyin
WordPress panonuza giderek web sitenize yeni bir katılım formu ekleyerek başlayalım > Bloom > Sağ köşedeki 'Yeni Seçenek'e tıklayın > 'Açılır'ı seçin.
Formunuz için bir ad yazın ve Kurulum sekmesinde e-posta sağlayıcınızı seçin. Bu yapıldığında, Tasarım sekmesine gidebilirsiniz. Bu yazıda odaklanacağımız ana sekme bu. Sağlanan şablonlardan birini seçin ve devam edin. Yaptığımız örnekler için sıradaki ilki seçiyoruz.
Tasarım Ayarları
Tasarım sekmesinde herhangi bir değişiklik yapmadan formu önizlediğinizde, aşağıdaki katılım formunun görüntülendiğini göreceksiniz:
Sonucun nasıl görüneceğinden oldukça farklı görünüyor, ancak katılım formunun temelinin aynı olduğunu da fark edebilirsiniz.
Katılım Başlığı ve Mesajı
Şimdi, katılım formumuzu yukarıda size gösterdiğimiz örneğe benzetmek için, Tasarım sekmesindeki Optin Başlığı ve Optin Mesajının standart tasarım ayarlarında aşağıdaki değişiklikleri yaparak başlayın:
- Metin Rengi: #FFFFFF
- Metin Stili: Kalın
- Metin Yönü: Merkez
Görüntü Ayarları ve Optin Stili
Aynı sekmeyi aşağı kaydırın ve Görüntü Ayarları, Optin Stili ve Kenarlık Stili için aşağıdaki ayarlamaları yapın:
- Görüntü Yönü: Görüntü Yok
- Arka Plan Rengi: Açık
- Başlık Yazı Tipi: Lato
- Gövde Yazı Tipi: Lato
- Metin Rengi: Koyu Metin
- Köşe Stili: Kare Köşeler
- Kenarlık Yönü: Üst + Alt Kenarlık
- Kenar Rengi: #FFFFFF
- Kenarlık Stili: Kesikli Kenarlık
Kenar Stili, Form Kurulumu ve Form Stili
Aşağı kaydırmaya devam edin ve Form Kurulumu ve Form Stilinde de aşağıdaki değişiklikleri yapın:
- Form Yönü: Form Altta
- İsim Alan(lar): İsim Alan Yok
- E-posta Metni: E-posta
- Buton Metni: ABONE OLUN!
- Form Alanı Yönlendirmesi: Yığılmış Form Alanları
- Form Alanı Köşe Stili: Yuvarlak Köşeler
- Form Metni Rengi: Açık Metin
- Form Arka Plan Rengi: Açık
- Düğme Rengi: #6a18a0
- Düğme Metin Rengi: Açık
Form Kenar Stili
Katılım formunda yapmanız gereken son manuel değişiklik, bu durumda düz bir çizgi olan form kenar stilini seçmektir. 
Özel CSS
Son olarak, her şeyi yerine oturtmak için formda bazı CSS değişiklikleri yapmamız gerekiyor. Aşağıdaki kod satırlarını kopyalayıp Özel CSS alanına yapıştırın:
.et_bloom .et_bloom_popup:after{
background: -webkit-linear-gradient(rgba(129, 83, 177, 0.98) 50%, rgba(177,194,233,0.80) 50%) !important;
background: -o-linear-gradient(rgba(129, 83, 177, 0.98) 50%, rgba(177,194,233,0.80) 50%) !important;
background: -moz-linear-gradient(rgba(129, 83, 177, 0.98) 50%, rgba(177,194,233,0.80) 50%) !important;
background: linear-gradient(rgba(129, 83, 177, 0.98) 50%, rgba(177,194,233,0.80) 50%) !important; }
.et_bloom .et_bloom_form_container {
background-color: none !important;
background: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
-webkit-box-shadow: none !important;
}
.et_bloom .et_bloom_form_container .et_bloom_form_content
{ background-color: none !important;
background: none !important;
}
.et_bloom .et_bloom_form_container .et_bloom_form_header .et_bloom_header_text_dark {
background: none !important;
}
.et_bloom .et_bloom_form_container.et_bloom_form_right {
background-color: none !important;
background: none !important;
}
.et_bloom .et_bloom_optin_6 .et_bloom_form_container .et_bloom_form_header {
background-color: none !important;
background: none !important;
}
.et_bloom .et_bloom_optin_6 .et_bloom_form_container h2 {
font-size: 50px !important;
text-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 {
font-size: 30px !important;
text-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 input {
text-align: center !important;
color: #FFFFFF !important;
}
.et_bloom .et_bloom_bottom_stacked p.et_bloom_popup_input {
width: 50% !important;
margin-left: 25%;
}
.et_bloom .et_bloom_form_container.et_bloom_rounded button {
width: 50% !important;
margin-left: 25%;
}
.et_bloom .et_bloom_form_container .et_bloom_form_content {
padding: 0 0 40px 0 !important;
}
Kodu Kendi Bloom Katılım Formunuza Göre Değiştirin
Sizinle paylaştığımız kodda üç ayar yapmanız gerekecek. Bazı CSS sınıfları yalnızca bir katılım formu için geçerlidir, bu nedenle hangi katılım formu üzerinde çalıştığımızı bilmemiz gerekir. Yapmanız gereken tek şey, bir sayıyı üç kez değiştirmek:
Yukarıdaki yazdırma ekranında vurgulanan bölümün sonundaki sayı 6'dır çünkü sıradaki 6. sayıdır:
Bu nedenle, form listenizde hangi konuma sahip olduğuna bağlı olarak, sayıyı ayarlamanız gerekir.
Son sonuç
Katılım formunuzu şimdi önizlerseniz, tüm değişikliklerin yapıldığını ve katılım formunuzun şöyle göründüğünü fark edeceksiniz:
Görüntü ayarları
Artık Görüntü ayarlarına gidebilir ve Bloom katılım formunuzu ayarlamak için gerekli değişiklikleri yapabilirsiniz. Bu gönderi yalnızca bu katılım formlarının tasarım kısmını ele alacağından daha derin ayrıntılara girmeyeceğiz.
İkinci Örneği Oluşturmaya Başlayın
Size göstereceğimiz sonraki örnek tam ekran değil, tam genişliktir. Sonuca nasıl ulaşabileceğimizi göstermek için önceki örnektekiyle aynı katılım formunu kullanacağız, ancak bu formda bazı küçük değişiklikler yapacağız ve farklı CSS kodları ekleyeceğiz.
Tasarım Ayarları
Yerleşik Tasarım Ayarlarında farklı şekilde yapmamız gereken yalnızca üç şey var. Unutma; önceki örnekte oluşturduğumuz katılım formunu kullanıyoruz. Bahsedeceğimiz üç şeyin dışında, ilk örnektekiyle aynı yerleşik ayarlar geçerlidir. Yapmanız gereken ilk şey, Sınır Yönünü 'Sınır Yok' olarak ayarlamaktır.
Aşağı kaydırın ve Form Metni Rengi için 'Koyu Metin'i seçin ve Düğme Rengi olarak '#724501'i kullanın.
Özel CSS
Son olarak, Özel CSS kutusuna bazı CSS kod satırları eklememiz gerekecek:
@media only screen and (min-width: 981px){
.et_bloom .et_bloom_popup:after{
margin-top: 12% !important;
height: 50% !important;
background: url("");
border-top: 3px solid #b29470 !important; border-bottom: 3px solid #b29470 !important;
box-shadow: 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 {
right: -250px !important;
top: -20% !important;
}}
@media only screen and (max-width: 981px){
.et_bloom .et_bloom_popup:after{
background: url("");
} }
.et_bloom .et_bloom_form_container .et_bloom_popup_input {
background: #FFFFFF !important;
}
.et_bloom .et_bloom_form_container {
background-color: none !important;
background: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
-webkit-box-shadow: none !important;
}
.et_bloom .et_bloom_form_container .et_bloom_form_content {
background-color: none !important;
background: none !important;
}
.et_bloom .et_bloom_form_container .et_bloom_form_header .et_bloom_header_text_dark {
background: none !important;
}
.et_bloom .et_bloom_form_container.et_bloom_form_right {
background-color: none !important;
background: none !important;
}
.et_bloom .et_bloom_optin_6 .et_bloom_form_container .et_bloom_form_header {
background-color: none !important;
background: none !important;
}
.et_bloom .et_bloom_optin_6 .et_bloom_form_container h2 {
font-size: 50px !important;
text-shadow: -1px -1px 1px rgba(114,69,1,0.5), 2px 2px 1px rgba(114,69,1,0.5);
}
.et_bloom .et_bloom_optin_6 .et_bloom_form_container p {
font-size: 30px !important;
text-shadow: -1px -1px 1px rgba(114,69,1,0.5), 2px 2px 1px rgba(114,69,1,0.5);
}
.et_bloom .et_bloom_form_container.et_bloom_form_text_dark .et_bloom_form_content input {
text-align: center !important;
color: #FFFFFF !important;
}
.et_bloom .et_bloom_bottom_stacked p.et_bloom_popup_input {
width: 50% !important; margin-left: 25%;
}
.et_bloom .et_bloom_form_container.et_bloom_rounded button {
width: 50% !important;
margin-left: 25%;
}
.et_bloom .et_bloom_form_container .et_bloom_form_content {
padding: 0 0 40px 0 !important;
}
Arka Plan Resimlerini Değiştir
Yapmanız gereken son şey, wp-content klasörünüzdeki veya başka bir yerde bulunan URL'lerden biri tarafından kullanılan arka plan resimlerini değiştirmek. Aşağıdaki yazdırma ekranında işaretlenen ilk URL, masaüstü için, ikincisi ise tablet ve telefon için geçerlidir.
Son sonuç
Ve işin bitti! İkinci katılım formunuz şimdi şöyle görünmelidir:
Son düşünceler
Bloom ile kullanıcılarınızın etkileşimde bulunacağı güzel katılım formları oluşturmak için sahip olduğunuz olanaklar sonsuzdur. Bu gönderide nasıl yapacağınızı gösterdiklerimiz, ne kadar yaratıcı olabileceğinizin sadece bir örneği. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne yorum bırakmaktan çekinmeyin!
Büyük bir duyuruyu, faydalı ipucunu veya Divi freebie'sini asla kaçırmamak için e-posta bültenimize ve YouTube kanalımıza abone olmayı unutmayın!