Divi'de Özel Genel Başlık için Satır İçi Giriş Formu Nasıl Tasarlanır

Başlığınız için bir satır içi giriş formu oluşturmak, kullanıcı deneyimi için harika bir destek olabilir. Üyelik siteleri ve çevrimiçi mağazalar için mükemmeldir çünkü kullanıcıların herhangi bir zamanda veya sitenin herhangi bir sayfasında oturum açmasını gerçekten kolaylaştırır. Bu öğreticide, özel bir başlık kullanıcısı Divi Theme Builder için bir satır içi oturum açma formunu nasıl tasarlayacağınızı göstereceğiz. Bunu yapmak için basit bir duyarlı global başlık oluşturacağız ve ardından Divi'nin Giriş Modülünü kullanarak başlığın sağ üst kısmında kompakt bir satır içi oturum açma formu tasarlayacağız. Derleme biraz özel CSS gerektirir, ancak her şey yerine oturduğunda, Divi'nin yerleşik tasarım seçeneklerini kullanarak herhangi bir başlık tasarımına kolayca uyacak şekilde satır içi oturum açma formunu özelleştirmek kolayca olacaktır.

Başlayalım!

Gizlice Bakış

İşte bu eğitimde oluşturacağımız satır içi giriş formuyla özel başlığa hızlı bir bakış.

Ve işte tablet ve telefon ekranındaki satır içi giriş formu.

İşte kullanıcılar oturum açtığında gösterilecek mesaj ve “çıkış” bağlantısı.

ÜCRETSİZ Satır İçi Giriş Formu Başlık Düzenini İndirin

Ellerinizi bu eğitimdeki düzene koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekir. İ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!

Düzeni sayfanıza aktarmak için, zip dosyasını çıkarın ve Theme Builder Taşınabilirlik seçeneğini kullanarak json dosyalarından birini Divi Theme Builder'a ekleyin.

Hadi öğreticiye geçelim mi?

Başlamak için Gerekenler

Henüz yapmadıysanız Divi Temasını kurun ve etkinleştirin. Başlamanız gereken hemen hemen hepsi bu. Divi Theme Builder ile sıfırdan yeni bir başlık şablonu düzeni oluşturacağız.

Yeni Global Başlık Ekleme

İşleri yoluna koymak için web sitemiz için yeni bir Global Başlık oluşturmalıyız. Bunu yapmak için WordPress Dashboard'a gidin ve Divi > Theme Builder'a gidin.

Varsayılan Web Sitesi Şablonunda, "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ı Satır İçi Giriş Formu ile Tasarlama

Bölümü Özelleştirme

Global Başlık Düzeni düzenleyicisini oluşturarak siteniz için özel başlığı tamamen sıfırdan oluşturabileceksiniz. Başlamak için normal bölümün ayarlarını açın ve aşağıdakileri güncelleyin:

• Arka Plan Gradyanı Sol Renk:
• Arka Plan Gradyanı Sağ Renk:
• Gradyan Yönü: 48deg
• Dolgu: 10 piksel üst, 10 piksel alt, 20 piksel sol, 20 piksel sağ

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

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

Başlık Logosunu İlk Satıra Ekleme

Artık bölüm hazır olduğuna göre ilk satırı ekleyebiliriz.

Satır ekle

Bölüme tek sütunlu bir satır ekleyin.

Logo Resmi ile Resim Modülü Ekle

Tek sütunlu satıra bir görüntü modülü ekleyin. Bu, başlık için logo eklediğimiz yer olacak.

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

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

• Resim: [logo ekle (yaklaşık 64px x 64px)]

• Kenar boşluğu: 20 piksel sağ

Satır Ayarlarını Güncelle

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

• Özel Oluk Genişliğini Kullan: EVET
• Oluk Genişliği: 1
• Genişlik: %25
• Satır Hizalama: sol
• Dolgu: 0 piksel üst, 0 piksel alt

İkinci Satıra Satır İçi Giriş Formunun Eklenmesi

Satır ekle

Artık ilk satır gitmeye hazır olduğuna göre, editörde ilk satırın soldaki bölümün %25'ini kaplayacağını fark edeceksiniz. Bu aslında başlığımızın logosu için belirlenmiş satır olacaktır. Sağ taraftaki satır içi giriş formu ve menü için bir bölüm satırı oluşturmamız gerekiyor.

Bölüme tek sütunlu bir yapıya sahip ikinci bir satır ekleyin.

Giriş Formu Ekle

Tek sütunlu satırın içine bir oturum açma modülü ekleyin.

Varsayılan İçeriği Sil

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

Giriş Formu Özel Sınıf ve CSS Ekle

Satır içi oturum açma formunun tasarımında fazla ilerlemeden önce, oturum açma modülüne özel CSS ve CSS sınıfını ekleyelim. Bu, Divi'nin yerleşik seçenekleriyle forma son tasarım rötuşlarını yapmadan önce formun temel satır içi yapısını yerine getirmemizi sağlayacaktır.

Gelişmiş Sekmesi altında aşağıdaki CSS Sınıfını ekleyin:

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

Oturum Açma Açıklaması CSS kutusuna aşağıdaki Özel CSS'yi ekleyin:

margin-bottom: 0px !important

Ardından, Giriş Formu CSS kutusuna aşağıdaki Özel CSS'yi ekleyin:

width: 100%;

Oturum Açma Alanları CSS kutusuna aşağıdaki Özel CSS'yi ekleyin:

padding: 5px 4% !important

Başlık Düzeni Ayarlarına Özel CSS Ekleme

Giriş formu modülüne özel CSS Sınıfımızı eklediğimiz için, yalnızca bu belirli giriş formunu hedefleyecek özel CSS'mizi 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, oturum açma alanlarını ve düğmeyi satır içi (yatay olarak) gösterecek, "şifrenizi mi unuttunuz?" bağlayın ve alanlar arasına biraz kenar boşluğu ekleyin.

Satır Ayarları

Inline login formuna son dokunuşları yapmadan önce satır ayarlarını aşağıdaki gibi güncelleyelim:

• Özel Oluk Genişliğini Kullan: EVET
• Oluk Genişliği: 1
• Satır Hizalama: sağ
• Dolgu: 0 piksel üst, 0 piksel alt

Giriş Formu Tasarım Ayarları

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

• Arka Plan Rengini Kullan: HAYIR

Alan ve Bağlantı Metni

• Alanlar Arkaplan: Renk: rgba(255,255,255,0.2)
• Alan Metin Rengi: #ffffff
• Alan Yazı Tipi: Lato
• Alanlar Metin Boyutu: 14px
• 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 Metin Boyutu: 15px
• Düğme Arka Plan Rengi: #ff3190
• Düğme Kenar genişliği: 0px
• Düğme Yazı Tipi: Lato
• Düğme Dolgusu: 2 piksel üst, 2 piksel alt
• Kenar boşluğu: 15 piksel alt
• Dolgu: 0 piksel üst, 0 piksel alt, 0 piksel sol, 0 piksel sağ

Menüyü İkinci Satıra Ekleme

Menü Modülü

Satır içi giriş formumuz yerindeyken, menüyü doğrudan altına 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ü Metin Rengi: #ffffff
• Menü Metin Boyutu: 16px
• Metin Hizalama: sağ
• Açılır Menü Arka Plan Rengi: #ffffff
• Açılır Menü Satır Rengi: rgba(0,0,0,0)
• Açılır Menü Metin Rengi: #000000
• Mobil Menü Arka Plan Rengi: #ffffff
• Mobil Menü Metin Rengi: #000000
• Alışveriş Sepeti Simge Rengi: #ffffff
• Arama Simgesi Rengi: #ffffff
• Hamburger Menü Simge Rengi: #ffffff

Satır İçi Giriş Formu Başlığını Kaydetme

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

Ardından Tema Oluşturucu Ayarlarını da kaydedin.

Nihai sonuçlar

Bu kadar!

Şimdi nihai sonucu kontrol edelim. Nihai sonucu görüntülemek için web sitenizdeki bir sayfayı ziyaret edin.

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

İşte tablet ekranındaki satır içi giriş formu başlığı.

Ve işte telefon ekranındaki satır içi giriş formu. Mobil menüye de dikkat edin.

Ve işte kullanıcının giriş yaptıktan sonra göreceği şey.

Son düşünceler

Satır içi giriş formuna sahip bu özel Global başlık, herhangi bir üyelik sitesi veya çevrimiçi mağaza için kesinlikle kullanışlı olacaktır. Sadece küçük bir özel CSS ile Divi'nin oturum açma modülünü herhangi bir web sitesinin başlığına güzel bir şekilde oturacak zarif bir satır içi oturum açma formuna dönüştürebildik. Umarım bu, bir sonraki projeniz için kullanışlı olacaktır.

Yorumlarda sizden haber bekliyorum.

Şerefe!