Bir yaratılışı formulaire Başlığınız için satır içi oturum açma, kullanıcı deneyimine muazzam bir destek olabilir. Üyelik siteleri ve çevrimiçi mağazalar için mükemmeldir çünkü kullanıcıların sitenin herhangi bir sayfasında ve istedikleri zaman oturum açmalarına olanak tanır. 

Bu eğitimde, size nasıl bir tasarım yapacağınızı göstereceğiz. formulaire Divi Theme Builder'da özel bir başlık kullanarak çevrimiçi. Bunu yapmak için basit, duyarlı bir global başlık oluşturacağız ve ardından bir formulaire Divi'nin oturum açma modülünü kullanarak başlığın sağ üst köşesindeki kompakt çevrimiçi oturum açma seçeneğini kullanın. Derleme biraz özel CSS kodu gerektirir, ancak her şey yerine oturduğunda, Divi'nin entegre hizmetleri tasarım seçeneklerini kullanarak çevrimiçi giriş formunu herhangi bir başlık tasarımıyla kolayca eşleşecek şekilde özelleştirmek kolay olacaktır.

Sonuca genel bakış

İşte bu eğiticide oluşturacağımız çevrimiçi oturum açma formu ile özel başlığa hızlı bir genel bakış.

Divi bağlantı formu

Ve işte tabletin ve telefonun ekranındaki çevrimiçi giriş formu.

İşte kullanıcılar oturum açtığında görüntülenecek oturum kapatma mesajı ve bağlantı.

çevrimiçi giriş formu

Başlamak için neye ihtiyacınız var?

Henüz yapmadıysanız Divi temasını yükleme ve etkinleştirme . Başlamak için ihtiyacınız olan hemen hemen hepsi bu. Divi Theme Builder ile sıfırdan yeni bir başlık şablonu düzeni oluşturacağız.

Yeni bir genel başlık ekleme

İşleri yoluna koymak için, bizim için yeni bir küresel başlık oluşturmamız gerekiyor. Site Web. Bunu yapmak için WordPress panosuna gidin ve Divi > Tema Oluşturucu'ya gidin.

Üzerinde web sitesi şablonu varsayılan olarak, "Global Başlık Ekle"yi ve ardından "Global Başlık Oluştur"u tıklayın.

Head global divi'nin oluşturulması

Ardından, Sıfırdan oluştur seçeneğini seçin.

Sıfırdan inşa etmek

Divi global başlığını çevrimiçi bir oturum açma formu ile tasarlayın

Bölüm özelleştirmesi

Global Header Layout Editor'dan sitenizin özel başlığını tamamen oluşturabileceksiniz. Başlamak için normal bölüm ayarlarını açın ve aşağıdakileri güncelleyin:

  • Sol renk arka plan gradyanı:
  • Sağ arka plan gradyanı:
  • Gradyan yönü: 48 derece
  • Dolgu: üstte 10 piksel, altta 10 piksel, solda 20 piksel, sağda 20 piksel
Head divi'de özelleştirin

Özel başlığımızı daha duyarlı hale getirmek için, aşağıdaki özel CSS'yi ana bölüm öğesine ekleyeceğiz.

display:flex;justify-content:center;align-items:center;

Css divi kodu ekle

İlk satıra başlık logosu ekleyin

Bölüm hazır olduğuna göre, ilk satırı ekleyebiliriz.

Satır ekle

Bölümdeki bir sütuna satır ekleyin.

Divi başlık sütunu ekle

Logo resmine sahip bir resim modülü ekleyin

Tek sütun satırına bir görüntü modülü ekleyin. Burası, başlık için logoyu ekleyeceğimiz yer olacaktır.

Divi modülü görüntüsü ekleyin

Görüntü ve Görüntü Modülü Kenar Boşluğunu Güncelle

Görüntü ayarlarını aşağıdaki şekilde güncelleyin:

  • Resim: [logo ekle (yaklaşık 64 piksel x 64 piksel)]
Görüntüyü ve divi kenar boşluğunu özelleştirin
  • Kenar boşluğu: 20 piksel sağ
Sağ kenar boşluğunu değiştir

Satır parametrelerini güncelleme

Daha ileri gitmeden önce, satır ayarlarını açın ve aşağıdakileri güncelleyin:

  • Özel bir oluk genişliği kullanın: EVET
  • Oluk genişliği: 1
  • Genişlik:% 25
  • Satır hizalama: sol
  • Dolgu: 0 piksel yüksek, 0 piksel düşük
Divi çizgisi parametrelerini değiştirin

Çevrimiçi giriş formunu ikinci satıra ekleme

Satır ekle

Artık ilk satır hazır olduğuna göre, editörde ilk satırın sol bölümün% 25'ini kaplayacağını göreceksiniz. Bu, temelde başlık logomuz için belirlenmiş satır olacaktır. Sağ tarafta form ve çevrimiçi giriş menüsü için bir bölüm satırı oluşturmamız gerekiyor.

Bölümdeki bir sütuna yapı içeren ikinci bir satır ekleyin.

Başa yeni bir divi sütunu ekleyin

Bir giriş formu ekleyin

Bir sütun satırına bir giriş modülü ekleyin.

Divi giriş formu ekleyin

Varsayılan içeriği kaldır

Giriş ayarları altında, sahte başlığı ve gövde içeriğini silin.

Varsayılan içeriği kaldırın

Bir giriş formu ve özel bir CSS sınıfı ekleyin

Çevrimiçi oturum açma formunu tasarlarken çok ileri gitmeden önce, özel CSS ve CSS sınıflarını önce oturum açma modülüne ekleyelim. Bu, Divi'nin yerleşik seçenekleriyle forma son tasarım dokunuşunu yapmadan önce formun temel çevrimiçi yapısını oluşturmamızı sağlayacaktır.

Gelişmiş sekmesinde, aşağıdaki CSS sınıfını ekleyin:

  • CSS sınıfı: header-login-form

Bağlantı açıklaması CSS alanına aşağıdaki özel CSS'yi ekleyin:

margin-bottom: 0px !important

Ardından, giriş formunun CSS alanına aşağıdaki özel CSS'yi ekleyin:

width: 100%;

Bağlantı Alanları CSS kutusuna aşağıdaki özel CSS'yi ekleyin:

padding: 5px 4% !important

Divi css kodunu özelleştirin

Başlık düzeni ayarlarına özel CSS ekleyin

Özel CSS sınıfımızı giriş formu modülüne eklediğimizden, yalnızca bu belirli giriş formunu hedefleyecek özel CSS ekleyebiliriz.

Başlık düzeni ayarını açın ve aşağıdaki özel CSS'yi ekleyin:

.header-login-form .et_pb_login_form form {display: flex;justify-content: flex-end;align-items: center;}.header-login-form .et_pb_login_form .et_pb_contact_form_field {padding-bottom: 0px;margin-right: 5px;}.header-login-form .et_pb_forgot_password {display:none;}

Bu CSS, giriş alanlarının ve düğmenin satır içinde (yatay olarak) görünmesini sağlayacak, "Şifrenizi mi unuttunuz?" Bağlantısını gizleyecektir. »Ve alanlar arasına küçük bir kenar boşluğu ekleyin.

Divi formunu özelleştirin

Satır Parametreleri

Çevrimiçi giriş formuna son rötuşları yapmadan önce, hat parametrelerini aşağıdaki gibi güncelleyelim:

  • Özel bir oluk genişliği kullanın: EVET
  • Oluk genişliği: 1
  • Çizgi hizalama: düz
  • Dolgu: 0 piksel yüksek, 0 piksel düşük
Özel kenarlıklar kullanın

Giriş formu için tasarım ayarları

Artık giriş formu ayarlarını güncellemeye hazırız. Giriş formu modülünün ayarlarını açın ve aşağıdakileri güncelleyin:

  • Arka plan rengini kullan: HAYIR
Arka plan rengi divi kullan
Alan ve bağlantı metni
  • Alan arka planı: Renk: rgba (255,255,255,0.2)
  • Alan metni rengi: #ffffff
  • Saha polisi: Lato
  • Alan metni boyutu: 14 piksel
  • Metin hizalama: sağ
  • Bağlantı yazı tipi: Lato
  • Bağlantı Yazı Tipi Stili: Altı Çizili
  • Bağlantı metni rengi: # ff3190
Renk modülü giriş formunu özelleştirin
Düğme tasarımı
  • Düğme metni boyutu: 15px
  • Düğme Arka Plan Rengi: # ff3190
  • Düğme kenarlığının genişliği: 0px
  • Düğme yazı tipi: Lato
  • Düğme dolgusu: üstte 2px, altta 2px
  • Kenar boşluğu: 15 piksel düşük
  • Dolgu: üstte 0px, altta 0px, solda 0px, sağda 0px
çevrimiçi giriş formu

Menüyü ikinci satıra ekleme

Menü modülü

Çevrimiçi giriş formumuz hazır olduğunda menüyü doğrudan aşağıya ekleyebiliriz.

Oturum açma formu modülünün altına bir menü modülü ekleyin.

Divi menü modülü ekle

Menü modülü ayarları

Menü ayarlarını aşağıdaki gibi güncelleyin:

  • Arka plan rengi: rgba (0,0,0,0)
  • Menü yazı tipi: Lato
  • Menü yazı tipi ağırlığı: kalın
  • Menü metni rengi: #ffffff
  • Menü metni boyutu: 16px
  • Metin hizalama: sağ
  • Açılır menü arka plan rengi: #ffffff
  • Açılır menüdeki çizginin rengi: rgba (0,0,0,0)
  • Açılır menünün metin rengi: # 000000
  • Mobil menü arka plan rengi: #ffffff
  • Mobil menü metin rengi: # 000000
  • Sepet Simgesi Rengi: #ffffff
  • Arama simgesi rengi: #ffffff
  • Hamburger menü simgesi rengi: #ffffff
Divi modül rengini özelleştir

Giriş formunun başlığını kaydetme

Başlık Düzeni Düzenleyicisinden çıkmadan önce düzeni kaydettiğinizden emin olun.

Divi kafa kapatma düğmesi

Ardından tema üreteci ayarlarını da kaydedin.

Değişiklikler divi oluşturma başlığını kaydedin

Nihai sonuçlar

Bu kadar!

Şimdi nihai sonucu görelim. Nihai sonucu görmek için web sayfanızın bir sayfasını ziyaret etmeniz yeterlidir. Site Web.

İşte masaüstü ekranındaki başlık.

Divi bağlantı forumu ile nihai sonuç menüsü

İşte tablet ekranındaki çevrimiçi giriş formunun başlığı.

çevrimiçi giriş formu

Ve işte telefon ekranındaki çevrimiçi giriş formu. Ayrıca mobil menüye de dikkat edin.

Telefonda önizleme

Ve bu, kullanıcının oturum açtığında göreceği şeydir.

Kullanıcı divi'ye giriş yaptığında ne görünür?

Son düşünceler

Çevrimiçi oturum açma formuna sahip bu özel küresel başlık, herhangi bir üyelik sitesi veya çevrimiçi mağaza için kesinlikle yararlı olacaktır. Sadece biraz özel CSS ile Divi'nin oturum açma modülünü, herhangi bir başlığın başlığında güzel görünecek şık bir çevrimiçi oturum açma formuna dönüştürmeyi başardık. Site Web. Umarım bu bir sonraki projeniz için faydalı olur.

Yorumlarda sizden haber almak için sabırsızlanıyorum.

Sağlığınıza!