Divi'de Form Alanlarına Kayan Etiketler Nasıl Eklenir

Divi'de form alanları için kayan etiketler eklemek, herhangi bir Divi formunun tasarımını ve UX'ini ince ama güçlü bir şekilde artırabilir. Herhangi bir web sitesi formu (yalnızca Divi değil) genellikle bir tür giriş alanı ve bu giriş alanı için bir etiket içerir. Örneğin, bir form, metni (veya adı) girebileceğiniz bir ad için bir metin giriş alanına ve bu alanın giriş kutusu için bir etikete (yani “Ad”) sahip olabilir. Bu etiket, form stiline bağlı olarak görünür veya gizli olabilir. Bir etikete ek olarak, giriş alanları, kullanıcı bir giriş değeri girene kadar görünür kalan giriş alanı içinde bir tür geçici etiket görevi gören bir yer tutucu sözde öğe de içerebilir. Divi'de varsayılan tasarım etiket öğesini gizler ve yalnızca yer tutucu metni gösterir. Divi formuna kayan bir etiket eklemek, tasarımcıların "yalnızca yer tutucu" form stilinin şık hissini korumalarına ve ayrıca kullanıcı bir değer eklediğinde etiketi alanın üzerinde göstermelerine (veya yüzdürmelerine) olanak tanır.

Bu öğreticide, bir Divi e-posta seçeneği formuna kayan etiketleri nasıl ekleyeceğinizi göstereceğiz. Bunu yapmak için, e-posta seçeneği formunu tasarlamak için Divi oluşturucuyu kullanacağız. Ardından, bir kullanıcı alana odaklandığında bu gizli etiketleri görüntülemek için bazı özel CSS ve JQuery ekleyeceğiz.

Başlayalım!

Gizlice Bakış

İşte bu eğitimde oluşturacağımız tasarıma hızlı bir bakış.

Düzeni ÜCRETSİZ İndirin

Bu eğitimdeki tasarımlara el koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekecek. İndirmeye erişmek için aşağıdaki formu kullanarak Divi Daily e-posta listemize abone olmanız gerekir. Yeni bir abone olarak, her Pazartesi daha da fazla Divi iyiliği ve ücretsiz bir Divi Düzen paketi alacaksınız! Zaten listedeyseniz, aşağıya e-posta adresinizi girin ve indir'i tıklayın. "Yeniden abone olmayacaksınız" veya fazladan e-posta almayacaksınız.

Dosyaları İndirin

Ücretsiz İndir

Divi Bültenine katılın ve size nihai Divi Açılış Sayfası Düzen Paketinin bir kopyasını ve ayrıca tonlarca başka şaşırtıcı ve ücretsiz Divi kaynağı, ipucu ve püf noktası e-posta ile gönderelim. Takip edin ve kısa sürede bir Divi ustası olacaksınız. Zaten aboneyseniz, e-posta adresinizi aşağıya yazın ve düzen paketine erişmek için indir'i tıklayın.

İNDİRMEK

Başarıyla abone oldunuz. Aboneliğinizi onaylamak ve haftalık ücretsiz Divi düzen paketlerine erişmek için lütfen e-posta adresinizi kontrol edin!

https://youtu.be/j1m14XFztdc

Youtube Kanalımıza Abone Olun

Bölüm düzenini Divi Kitaplığınıza aktarmak için Divi Kitaplığına gidin.

İçe Aktar düğmesini tıklayın.

Taşınabilirlik açılır penceresinde, içe aktarma sekmesini seçin ve bilgisayarınızdan indirme dosyasını seçin.

Ardından içe aktar düğmesini tıklayın.

Tamamlandığında, bölüm düzeni Divi Builder'da mevcut olacaktır.

Hadi öğreticiye geçelim, olur mu?

Başlamak için Gerekenler

Başlamak için aşağıdakileri yapmanız gerekir:

1. Henüz yapmadıysanız Divi Temasını kurun ve etkinleştirin.
2. WordPress'te yeni bir sayfa oluşturun ve sayfayı ön uçta düzenlemek için Divi Builder'ı kullanın (görsel oluşturucu).
3. “Sıfırdan Oluştur” seçeneğini seçin.

Bundan sonra Divi'de tasarlamaya başlamak için boş bir tuvaliniz olacak.

Divi'de Form Alanlarına Kayan Etiketler Ekleme

E-posta Tercih Formunu Oluşturma

Divi Builder'daki varsayılan bölüme tek sütunlu bir satır ekleyin.

Sütuna bir E-posta İsteği formu ekleyin.

E-posta Optin Ayarları modunu açın. İçerik sekmesi altında başlık metnini güncelleyin ve gövde metnini silin.

E-posta hesabı servis sağlayıcınızı bağladığınızdan emin olun. Aksi takdirde, e-posta seçeneği canlı bir sayfada görünmeyecektir.

Ardından, e-posta seçeneğine aşağıdaki arka plan rengini ekleyin:

• Arka Plan Rengi: #1f4b74

Tasarım sekmesi altında formun düzenini güncelleyin:

• Düzen: Gövde Üstte, Form Altta

Ardından alan stillerini aşağıdaki gibi güncelleyin:

• 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, alan kenarlığı stillerini güncelleyin:

• Alanlar Yuvarlatılmış Köşeler: 0px
• Alanlar Alt Kenar Genişliği: 2px
• Alanlar Alt Kenarlık Rengi: #ffffff

Başlık yazı tipi stillerini de güncelleyelim:

• Başlık Yazı Tipi Ağırlığı: Kalın
• Başlık Yazı Tipi Stili: TT
• Başlık Metni Hizalama: Orta

Şimdi devam edelim ve düğmeyi şekillendirelim.

• Düğme için Özel Stilleri Kullan: EVET
• Düğme Metin Rengi: #1f4b74
• 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

Son tasarım özelleştirmemiz için forma bir max-width ve padding ekleyelim:

• Maksimum Genişlik: 500 piksel
• Dolgu: %5 üst, %5 alt, %3 sol %3 sağ

Son olarak, bir sonraki adımda CSS ve JQuery kodumuzla hedefleyebilmemiz için modüle bir CSS Sınıfı eklememiz gerekiyor.

Özel Kodu Ekleme

Özel CSS ve JQuery eklemek için e-posta katılım formu modülünün altına bir kod modülü ekleyin.

CSS

Kod içeriği kutusuna, CSS'yi gerekli stil etiketlerine sardığınızdan emin olarak aşağıdaki CSS'yi yapıştırı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 ease-in-out;
  transition: all 0.4s ease-in-out;
  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;
}
.et_pb_module.et-float-labels form p .input:focus::-moz-placeholder {
  color: transparent !important;
}
.et_pb_module.et-float-labels form p .input:focus:-moz-placeholder {
  color: transparent !important;
}
.et_pb_module.et-float-labels form p .input:focus:-ms-input-placeholder {
  color: transparent !important;
}
.et_pb_module.et-float-labels form p .input:focus::placeholder {
  color: transparent !important;
}

JQuery

Bitiş stili etiketinin altına aşağıdaki JQuery'yi yapıştırın ve gerekli komut dosyası etiketleriyle sarın.

jQuery(document).ready(function ($) {
  var $floatLabelInput = $(".et-float-labels .input");
  $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");
    }
  });
});

Kodu Kırmak

CSS hakkında

İlk olarak, alanları hedefler ve onlara göreli bir konum veririz, böylece etiket öğesine alan (veya p öğesi) içinde mutlak bir konum verebiliriz.

.et-float-labels p {
  position: relative !important;
}

Daha sonra, etiket metnini yerleştirme metniyle örtüşecek şekilde yerleştiren diğer stiller ile formdaki etiket öğesini ve mutlak konumu veririz. display:block, etiketin gösterilmeye hazır olması için varsayılan display:hidden özelliğini geçersiz kılar. Sonra görünürlük gizlenerek gizleriz.

.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 ease-in-out;
  transition: all 0.4s ease-in-out;
  z-index: 0;
}

Ardından, JQeury tarafından kontrol edilen “aktif” sınıfı aldığında etiketi yukarı doğru bir slayt animasyonu ile gösterir, ölçeklendirir ve çeviririz(taşırız).

.et-float-labels .et_pb_contact_form_label.active {
  visibility: visible;
  opacity: 0.6;
  top:0;
  transform: translateY(-100%) scale(0.9);
}

CSS'nin geri kalanı, yer tutucuyu bir geçişle gizlemekle ilgilidir. Bunu yapmak için çok sayıda satır vardır, çünkü her tarayıcı yer tutucu sözde öğesini hedeflemek için farklı önekler gerektirir. Ancak fikir basit – yer tutucunun rengini şeffaf olarak değiştirin.

.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;
}
.et_pb_module.et-float-labels form p .input:focus::-moz-placeholder {
  color: transparent !important;
}
.et_pb_module.et-float-labels form p .input:focus:-moz-placeholder {
  color: transparent !important;
}
.et_pb_module.et-float-labels form p .input:focus:-ms-input-placeholder {
  color: transparent !important;
}
.et_pb_module.et-float-labels form p .input:focus::placeholder {
  color: transparent !important;
}

JQuery hakkında

İlk olarak, her form alanında girdi öğesi olarak $floatLabelInput değişkenini tanımlarız.

  var $floatLabelInput = $(".et-float-labels .input");

Ardından, girdi öğesi odaktayken etiket öğesine (giriş öğesinin önceki kardeşi) bir sınıf (“etkin”) ekleme işlevine sahip odak olay işleyicisini kullanırız. "Aktif" sınıf etikete eklendiğinde, etiket gösterilir, ölçeklenir ve karşılık gelen CSS ile girişin üzerindeki yerine taşınır.

  $floatLabelInput.on("focus", function (e) {
    $(e.target).prev().addClass("active");
    e.stopPropagation();
  });

Son olarak, "aktif" sınıfın etikette ne zaman tutulacağını belirleyen bir işleve sahip blur olay işleyicisini kullanıyoruz. Girişin bir değeri yoksa, giriş alanı odakta olmadığında bile etkin kalacaktır. Bir değeri yoksa, sınıf kaldırılır ve alanın varsayılan durumu döner.

  $floatLabelInput.on("blur", function (e) {
    if (!$(e.target).val()) {
      $(e.target).prev().removeClass("active");
    } else {
      $(e.target).prev().addClass("active");
    }
  });

"Odaklanma" ve "bulanıklaştırma" olay işleyicilerini ("tıklama" yerine) kullanarak sınıf ekleme ve kaldırma, kullanıcının yalnızca bir klavye kullanarak gezinirken bile (yani alanlar arasında gezinmek için sekmeye basarak) efekti görmesine olanak tanır.

Son sonuç

İşte bir Divi e-posta seçeneği formundaki form alanlarındaki kayan etiketlerimizin nihai sonucu.

Son düşünceler

Divi formuna kayan etiketler eklemek o kadar da zor değil. E-posta seçeneği formunu (veya herhangi bir Divi formunu) tasarlamak şaşırtıcı derecede kolaydır. Ancak, kayan etiketler eklerken, kayan etiket için doğru miktarda alan bırakmak üzere form alanlarının boyutunu ve aralığını özelleştirmeyi unutmayın. Bundan sonra, kullanıcı alana odaklandığında yer tutucuyu etkili bir şekilde gizlemek veya göstermek için özel CSS kullanıyoruz. Her tarayıcı, yer tutucu sözde öğesini hedeflemek için farklı önekler gerektirdiğinden, bunları doğru yapmak önemlidir. Eklediğimiz JQuery, gerektiğinde onu görünüme kaydıracak olan etiket öğesine bir sınıf ekler ve kaldırır. Sonuç olarak, kullanıcı deneyimine katkıda bulunan sağlam bir mikro etkileşimdir.

Aynı işlemi diğer Divi formlarında da (oturum açma veya iletişim formu gibi) kullanmaktan çekinmeyin. Özel kodu eklemeden önce forma özel sınıfı eklemeyi unutmayın. Bundan sonra, bu kayan etiketler için yeterli alana sahip olduğundan emin olmak için form alanlarının tasarım ayarlarını değiştirmeniz gerekebilir.

Yorumlarda sizden haber bekliyorum.

Şerefe!