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ış.
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ı.
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.
Ardından, Sıfırdan oluştur seçeneğini seçin.
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
Ö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;
İ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.
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.
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)]
- Kenar boşluğu: 20 piksel sağ
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
Ç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.
Bir giriş formu ekleyin
Bir sütun satırına bir giriş modülü ekleyin.
Varsayılan içeriği kaldır
Giriş ayarları altında, sahte başlığı ve gövde içeriğini silin.
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
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.
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
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
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
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
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.
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
Giriş formunun başlığını kaydetme
Başlık Düzeni Düzenleyicisinden çıkmadan önce düzeni kaydettiğinizden emin olun.
Ardından tema üreteci ayarlarını da 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.
İşte tablet ekranındaki çevrimiçi giriş formunun başlığı.
Ve işte telefon ekranındaki çevrimiçi giriş formu. Ayrıca mobil menüye de dikkat edin.
Ve bu, kullanıcının oturum açtığında göreceği şeydir.
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!