Genellikle dergilerde veya blog web sitelerinde bülten formlarının varlığını fark ederiz. Çeşitli göz alıcı tasarımların formları her zaman ilgimizi çekiyor. Ayrıca yaratıcı bir şekilde tasarlanmış formlar, kullanıcı deneyimi üzerinde olumlu bir etki yaratma alanında oldukça aktiftir. Formlarda, kullanıcılara ne tür bir değer girmeleri gerektiğini bildiren yer tutucular bulunur. Öyleyse, yer tutucu ve giriş alanlarının adını aynı ayarlasak ve biri o alanın bilgisini eklemeye çalıştığında yer tutucuyu görünmez yapsak ve ilk etapta görünmeyen etiket adını ortaya çıkarsa nasıl olurdu.
Kulağa biraz karmaşık mı geliyor? Endişelenmeyin, Bugün size Divi'de formun yer tutucularının kayan ve verileri girerken en üste çıkacağı bir form tasarlamayı göstereceğiz. Hadi hadi bakalım.
Ön izleme
Bugünkü formumuzun nasıl görüneceğine hızlıca bir göz atın.
Bülten Formunun Tasarlanması
E-posta Optin Form Oluşturma
Formu eklemek istediğiniz sayfayı Divi oluşturucu ile açın. bölüme gidin ve tek sütunlu bir satır ekleyin.
Harika Web Siteleri Oluşturun
En iyi ücretsiz sayfa oluşturucu Elementor ile
Şimdi başla
Şimdi sütuna bir E-posta seçeneği form modülü ekleyin.
E-posta tercih modülü için ayarları açın. İçerik sekmesinden metinleri değiştirin.
E-posta sağlama ile bağlamayı unutmayın. Bağlantı olmadan, form canlı bir sayfada görünmeyecektir.
Ardından, forma hoş bir göz yatıştırıcı rengi ekleyin.
- Arka Plan Rengi: #8B80F9
Tasarım sekmesinden lütfen form düzenini güncelleyin.
- Düzen: Gövde Üstte, Form Altta
Şimdi, alan özelliklerini buna göre değiştirin.
- Alanlar Arka Plan Rengi: şeffaf
- Alan Metin Rengi: #ffffff
- Alan Marjı: 1.5em üst
- Alan Doldurma: 0,5em üst, 0,5em alt, 1em sol, 1em sağ
- Alanlar Metin Boyutu: 1.2em
- Alanlar Çizgi Yüksekliği: 2em
Ardından, kenarlık stilini değiştireceğiz.
- Alanlar Yuvarlatılmış Köşeler: 0px
- Alanlar Alt Kenar Genişliği: 2px
- Alanlar Alt Kenarlık Rengi: #ffffff
Şimdi Başlık yazı tipi stillerini değiştirin:
- Başlık Yazı Tipi Ağırlığı: Kalın
- Başlık Yazı Tipi Stili: TT
- Başlık Metni Hizalama: Orta
Şimdi düğmede değişiklik yapın.
- Düğme için Özel Stilleri Kullan: EVET
- Düğme Metin Rengi: #8B80F9
- Düğme Arka Plan Rengi: #ffffff
- Düğme harf aralığı: 0.1em
- Düğme Yazı Ağırlığı: Kalın
- Düğme Yazı Tipi Stili: TT
Şimdi forma bir max-width ve padding ekleyelim. Tasarımımızın son ayarıdır.
- Maksimum Genişlik: 500 piksel
- Dolgu: %5 üst, %5 alt, %3 sol %3 sağ
Son olarak tasarımımıza CSS ve JQuery kodunu ekleyeceğimiz kodlama bölümümüzde onu hedefleyebilmemiz için tasarımımıza bir CSS sınıfı ekleyeceğiz.
- CSS Sınıfı: et-float etiketleri
Özel Kod Ekleme
Tasarımın altına CSS ve JQuery kodunu ekleyeceğimiz bir kod modülü ekleyin.
CSS Kodu
Şimdi aşağıda yazan kodu kopyalayın ve kod modülüne yapıştırın. Kodu Stil etiketinin içinde tutmayı unutmayın.
.et-float-labels p {
position: relative !important;
}
.et-float-labels .et_pb_contact_form_label {
display: block !important;
visibility: hidden;
opacity: 0;
position: absolute;
top: 1em;
padding: 0 1em;
transform: translateY(0%);
transform-origin: left;
color: #ffffff;
font-size: 1.2em;
-webkit-transition: all 0.4s;
transition: all 0.4s;
z-index: 0;
}
.et-float-labels .et_pb_contact_form_label.active {
visibility: visible;
opacity: 0.6;
top:0;
transform: translateY(-100%) scale(0.9);
}
.et_pb_module.et-float-labels form p .input::-webkit-input-placeholder {
-webkit-transition: all 0.4s;
transition: all 0.4s;
}
.et_pb_module.et-float-labels form p .input::-moz-placeholder {
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.et_pb_module.et-float-labels form p .input:-ms-input-placeholder {
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.et_pb_module.et-float-labels form p .input:-moz-placeholder {
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.et_pb_module.et-float-labels form p .input::placeholder {
transition: all 0.4s ease-in-out;
}
.et_pb_module.et-float-labels form p .input:focus::-webkit-input-placeholder {
color: transparent !important;
transform: translateY(0%);
transform-origin: left;
}
.et_pb_module.et-float-labels form p .input:focus::-moz-placeholder {
color: transparent !important;
transform: translateY(0%);
transform-origin: left;
}
.et_pb_module.et-float-labels form p .input:focus:-moz-placeholder {
color: transparent !important;
transform: translateY(0%);
transform-origin: left;
}
.et_pb_module.et-float-labels form p .input:focus:-ms-input-placeholder {
color: transparent !important;
transform: translateY(0%);
transform-origin: left;
}
.et_pb_module.et-float-labels form p .input:focus::placeholder {
color: transparent !important;
transform: translateY(0%);
transform-origin: left;
}
JQuery Kodu
Şimdi, Script etiketi ekleyin ve aşağıdaki JQuery kodunu içine yapıştırın.
jQuery(document).ready(function ($) {
var $floatLabelInput = $(".et-float-labels .input");
var $floatLabelField = $(".et-float-labels p");
$floatLabelInput.on("focus", function (e) {
$(e.target).prev().addClass("active");
e.stopPropagation();
});
$floatLabelInput.on("blur", function (e) {
if (!$(e.target).val()) {
$(e.target).prev().removeClass("active");
} else {
$(e.target).prev().addClass("active");
}
});
});
Son Görünüm
İşte son tasarımımız şuna benziyor.
Sonuç
Böylece, Divi'de yaratıcı bir bülten formuna sahip olmanın çok kolay olduğunu görüyorsunuz ve kayan etiketler e-posta katılım formunu çok kısa sürede yapabilirsiniz. Tasarımı ihtiyacınıza göre özelleştirdiğinizden emin olun. Etiketleri yüzdürmek için özel kodlar çok önemlidir, bu nedenle bunları etiketlerin içine dikkatlice yerleştirin. Umarım bu tasarımı beğenirsiniz ve beğenirseniz Divi seven arkadaşlarınızla paylaşın. Bunun gibi daha fazla Divi öğreticisi almak için güncellemelerimize abone olun.
