Divi: Giriş formuyla genel bir başlık nasıl oluşturulur

İle küresel başlık oluşturmanız gerekiyor formulaire DIVI'da bağlantı?

Bir yaratılışı formulaire Başlığınızda oturum açmak için büyük bir destek olabilir kullanıcı deneyimi.

Kullanıcıların herhangi bir zamanda herhangi bir sayfada oturum açmasına izin verdikleri için abonelik web siteleri ve çevrimiçi mağazalar için idealdirler. web sitesi.

Bu derste size nasıl tasarım yapacağınızı göstereceğiz. formulaire özel bir başlıktaki kullanıcılar için çevrimiçi oturum açma. Başlayalım!

anket

İşte bu eğitimde oluşturacağımız giriş formu ile özel başlığın hızlı önizlemesi.

DIVI'da giriş formuyla global başlık oluşturun

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

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.

Yatay giriş formu ile Divi global başlık tasarımı

Bölümü özelleştir

Global Başlık Düzeni düzenleyicisinden, kişiselleştirilmiş başlığınızı oluşturabilirsiniz. web sitesi Hiçbir şeyden başlamak. Başlamak için normal bölümdeki ayarları açın ve aşağıdakileri güncelleyin:

Sol arka plan degrade rengi:
Sağ arka plan degrade rengi:
Gradyan yönü: 48 derece

İç Kenar Boşluğu: 10px Üst, 10px Alt, 20px Sol, 20px Sağ

Başlığımızı daha duyarlı hale getirmek için ana bölüm öğesine aşağıdaki özel CSS'yi 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 görüntüsü içeren bir Görüntü modülü ekleyin

Tek sütunlu satıra bir Görüntü modülü ekleyin. Bu, başlık logosunu eklediğimiz yer olacak.

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

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

Resim: [logo ekleyin (yaklaşık 64 x 64 piksel)]

Kenar boşluğu: 20 piksel sağ

Satırın parametrelerini güncelle

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

Özel oluk genişliği kullanın: EVET
Sütun aralığı: 1
Maksimum genişlik: %25
hizalama: sol

İç Kenar Boşluğu: 0px Üst, 0px Alt

İkinci satıra yatay giriş formu eklendi

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ı fark edeceksiniz. Bu, temel olarak başlık logomuz için belirlenmiş satır olacaktır. Giriş formu ve sağ taraftaki menü 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

Tek sütunlu satırın içine bir 'Bağlan' modülü ekleyin.

Varsayılan içeriği kaldır

Giriş modülü ayarları altında, sahte başlık ve gövde içeriğini kaldırın.

Giriş formu ve CSS için özel sınıf ekleyin

Login formunu tasarlamada çok ileri gitmeden önce Login modülüne CSS sınıfını ve özel CSS'yi ekleyelim. Bu, Divi'nin yerleşik seçenekleriyle form tasarımına son rötuşları yapmadan önce formun temel çevrimiçi yapısını kuracaktır.

Rehberimize bakınız DIVI'da kayan ve duyarlı bir yan menü nasıl oluşturulur

Gelişmiş sekmesinin altına aşağıdaki CSS sınıfını ekleyin:

CSS sınıfı: başlık-oturum açma formu

Bağlantı açıklaması CSS kutusuna 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%;

Oturum Açma Alanları CSS alanına aşağıdaki özel CSS'yi ekleyin:

padding: 5px 4% !important

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

Giriş formu modülüne özel CSS sınıfımızı eklediğimiz için, yalnızca o belirli giriş formunu hedefleyecek özel CSS'mizi ekleyebiliriz.

Ayrıca bizim öğretici okuyun DIVI ile Blog modülü ile blog sayfası nasıl oluşturulur

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, oturum açma alanlarının ve düğmesinin satır içi (yatay olarak) "Şifrenizi mi unuttunuz?" mesajının görüntülenmesine neden olacaktır. gizlenecek ve alanlar arasına küçük bir kenar boşluğu eklenecektir.