Divi Formu Doldururken Öğelere CSS Odak Durumu Stili Nasıl Eklenir

Çoğu web sitesinin ana hedeflerinden biri form teslimidir. Şirketler bu şekilde satış fırsatları, e-posta aboneleri ve daha fazlasını elde eder. Etkili web tasarımı, form gönderimini ziyaretçiler için daha ilgi çekici hale getirebilir ve katılımı artırmanın bir yolu, hatta daha da fazlası, "doldurma" işlemi sırasında formlara ek stil eklemektir. Bunu yapmak için, CSS'deki odak durumunun gücünden yararlanabiliriz. Aslında Divi, Divi'nin form modüllerinde yerleşik olarak bulunan form alanları için odak stili seçeneklerine sahiptir (İletişim, E-posta Optin, vb.), bu nedenle odak durumunda bu form alanlarını biçimlendirmek için harici CSS'ye güvenmeniz gerekmez.

Bu öğreticide, bir ziyaretçi Divi formundaki bir alanı tıklattığında birden çok öğenin stilini değiştirmenin heyecan verici bir yolunu tanıtacağız. Odaklanan belirli alan için Divi'nin yerleşik odak stillerini eklemekle kalmayacak, aynı zamanda alanı çevreleyen öğelerin stilini de değiştirebileceksiniz. Bu, ince animasyonlar ve tasarım ile form gönderiminin kullanıcı arayüzünü geliştirmenize olanak tanır.

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.

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.

:focus-in CSS Pseudo-Class'ı kullanma

Divi, odak durumunda bir form alanını biçimlendirmek için zaten yerleşik seçeneklere sahip olduğundan, bu öğretici, bu odak stilini diğer öğelere de genişletmekle ilgilidir. Ek odak durumu stilini elde etmek için Divi Builder'ı ve :focus sözde sınıfını kullanan birkaç özel CSS parçacığını kullanacağız.

Endişelenme, göründüğü kadar karmaşık değil.

Odak ve Odak Arasındaki Fark

:odak

:hover'a benzer şekilde, CSS'deki :focus sözde sınıfı, bir öğe odak durumundayken stil uygulamak için kullanılır. Odak durumu genellikle bir formdaki giriş alanı gibi bir öğeye tıklanarak tetiklenir. Örneğin, bir kullanıcı bir form alanını tıkladığında, alan için odak durumunu etkinleştirir. Bu, CSS'de o alanın stilini hedeflemek için :focus psuedo sınıfını kullanmanıza olanak tanır.

:odak-içeride

:focus sözde sınıfı, odak durumundaki öğenin stilini hedefler (veya temsil eder). Ancak, :focus-in psödo sınıfı bunu bir adım daha ileri götürür. :focus-within sözde sınıfı, odaktaki öğenin ve ayrıca odakta bir öğe içeren herhangi bir öğenin stilini hedefler. Bu, odaktaki öğenin herhangi bir üst öğesini hedefleyebileceğiniz ve öğe odaktayken bu stilleri uygulayabileceğiniz anlamına gelir. Başka bir deyişle, bir form alanının içine tıklayabilir ve form alanı arka plan rengini değiştirebilir ( :focus kullanarak) ve aynı anda form alanının ana bölüm arka plan rengini değiştirmeyi kullanabilirim ( :focus-within kullanarak).

Divi Formu Doldururken Öğelere Odak Durumu Stili Ekleme

Artık :focus ve :focus'un nasıl çalıştığına dair biraz bilgi sahibi olduğumuza göre, bu eğitimde birlikte bazı odak durumu stilleri ekleyerek test edelim.

Hazır Düzen Ekle

Başlamak için, bu eğitimin tasarımını hızlı bir şekilde başlatmak için Seyahat Blogu İletişim sayfası hazır düzenini ekleyin ve örneğimiz olarak kullanıma hazır bir iletişim formu alın. Bunu yapmak için, oluşturucu ayarları menüsünden kitaplıktan yükle simgesine tıklayın. Önceden hazırlanmış düzenler sekmesi altında, Seyahat Blogu Düzen Paketi'ne tıklayın ve ardından iletişim sayfası düzenini seçin. Ardından 'Bu Düzeni Kullan' düğmesini tıklayın.

İletişim Formu Ayarlarını Güncelle

İletişim sayfası düzeninde, iletişim formu modülünün ayarlarını açın ve başlığı “İletişime Geçin” metni ile güncelleyin.

Alan Odak Stili

Tasarım sekmesi altında alan odak stilini aşağıdaki gibi güncelleyin:

• Alan Odak Arkaplan Rengi: rgba(255,107,90,0.15)
• Alanlar Odak Metni Rengi: #000000

Bu, gerçek alanın odak durumunu şekillendirecektir (Divi Builder ayarlarına uygun bir şekilde yerel bir seçenek).

İletişim Formu CSS Sınıfı

Ardından, gelişmiş sekmenin altındaki iletişim formuna aşağıdaki gibi özel bir CSS ekleyin:

• CSS Sınıfı: bölme-form-odak

Bu, bir form alanına odaklanıldığında form stillerini hedeflemek için kullandığımız sınıf olacaktır.

Sütun Ayarlarını Güncelle

Ardından, iletişim formunun üst sütununun ayarlarını açın.

Dolgu malzemesi

• Dolgu: %5 üst, %5 alt, %3 sol, %3 sağ

Sütun CSS Sınıfı

Gelişmiş sekmesi altında, sütuna aşağıdaki CSS Sınıfını verin:

• CSS Sınıfı: bölme-sütun-odak

Bu, form alanına (bir alt öğe) odaklanıldığında sütun stillerini hedeflemek için kullandığımız sınıf olacaktır.

Bölüm CSS Sınıfı Ekle

Bir form alanına (ayrıca bölümün bir alt öğesi) odaklanıldığında bölüm stillerini hedeflemek üzere CSS'yi kullanmak için, iletişim formunu içeren bölümün ayarlarını açın ve aşağıdaki CSS Sınıfını ekleyin:

• CSS Sınıfı: bölme-bölüm-odak

Kod Modülüyle Özel CSS Ekleme

Daha önce tartışıldığı gibi, form alanına odaklanıldığında diğer Divi öğelerine stil vermek için :focus CSS sözde sınıfını kullanacağız. Biçimlendireceğimiz öğelere (form, sütun ve bölüm), CSS'mizde onları hedeflemek için kullanabileceğimiz özel bir sınıf zaten verildi ("böl-form-odak", "böl-sütun-odak" , "böl-bölüm-odak").

Şimdi tek yapmamız gereken CSS kodumuzu eklemek. Bunu yapmak için iletişim formu modülünün altına bir kod modülü ekleyin.

Ardından aşağıdaki kodu kod içeriği alanına yapıştırın:

Kodu gerekli stil etiketleriyle sardığınızdan emin olun.

  /*add smooth transitions for focus state styles*/
  .divi-form-focus, .divi-column-focus, .divi-section-focus, .divi-form-focus h2 {
    transition: all 300ms
  }
  
  /*style form module h2 heading in form focus state*/
  .divi-form-focus:focus-within h2 {
    font-size: 14px !important;
    color: #888888;
  }
  
  /*style parent column in form focus state*/
  .divi-column-focus:focus-within {
		background: #ffffff;
    transform: scale(1.2);
    box-shadow: 0 0 30px rgba(0,0,0,0.2);
  }
  
  /*style parent section in form focus state*/
  .divi-section-focus:focus-within {
    background: rgba(255,107,90,0.15);
  }
 

Öğenin CSS sınıfına (yani, "divi-column-form") sahip olan CSS parçacıklarının her birinin, form alanına odaklanıldığında o öğe sınıfının stilini temsil etmek için :focus- in'de sözde sınıfa sahip olduğuna dikkat edin. Bir pasaj, formun odak durumunda formun h2'sini (veya başlığını) stillendirir. Bir snippet, formun odak durumundaki üst sütuna stil verir. Ve bir snippet, formun odak durumunda üst bölümü stillendirir.

Son sonuç

İşte nihai sonuç. Formu doldururken farklı öğelerin stili nasıl değiştirdiğine dikkat edin.

Son düşünceler

Divi'de bir form doldururken öğelere CSS odak stilleri eklemek, kullanıcının form gönderme deneyimini gerçekten artırabilir. Anahtar, form odak durumundayken stil vermek istediğiniz öğelere eklediğiniz özel sınıflarla birlikte :focus-in sözde sınıfını kullanmaktır. Bu, sayfaya eklenen minimum özel CSS ile yapılabilir ve kendi özel CSS'nizi eklemeye aşinaysanız, olasılıklar çok fazladır.

Yorumlarda sizden haber bekliyorum.

Şerefe!