Divi Başlığınıza Açılır Giriş Formu Nasıl Eklenir

Bir üyelik web sitesi kuruyorsanız, oturum açma deneyimi üzerinde düşünmek son derece gereklidir. Elbette, ziyaretçilerin varsayılan WordPress giriş sayfasını kullanmasına izin verebilirsiniz, ancak başlığınıza bir giriş formu ekleyerek ziyaretçilerin işini kolaylaştırabilirsiniz. Bu durumda, başlığınızda yer kazanmak için tıklamayla oturum açma formunu tetiklemek isteyeceksiniz. Bugünün Divi eğitiminde size tam olarak bunu göstereceğiz. Sıfırdan global bir başlık oluşturacağız ve bir açılır giriş formu ekleyeceğiz. JSON dosyasını da ücretsiz olarak indirebileceksiniz!

Hadi hadi bakalım.

Ön izleme

Eğiticiye dalmadan önce, farklı ekran boyutlarındaki sonuca hızlıca bir göz atalım.

masaüstü

Mobil

ÜCRETSİZ Global Başlık Şablonunu İndirin

Ücretsiz genel başlık şablonuna el 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!

1. Yeni Genel Başlık Şablonu Oluşturun

Divi Theme Builder'a gidin

WordPress web sitenizin arka ucundaki Divi Theme Builder'a giderek başlayın. Bir kez orada, “Global Başlık Ekle” ye tıklayın.

Yeni Genel Başlık Ekle

Bir açılır menü görünecektir. Sıfırdan oluşturmaya başlamak için “Global Başlık Oluştur” öğesini seçerek devam edin.

2. Başlık Tasarımı Oluşturun

1. Bölüm Ekle

Arka plan görüntüsü

Şablon düzenleyicinin içine girdikten sonra, orada zaten bir bölüm göreceksiniz. Bölüm ayarlarını açın ve bir arka plan resmi yükleyin veya bir arka plan rengi kullanın.

aralık

Bölümün tasarım sekmesine gidin ve sonraki üst ve alt dolguyu değiştirin.

• Üst Dolgu: 10px
• Alt Dolgu: 10px

Bölüme Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin:

boyutlandırma

Henüz modül eklemeden satır ayarlarını açın ve boyutlandırma ayarlarını aşağıdaki gibi değiştirin:

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Sütun Yüksekliklerini Eşitle: Evet
• Genişlik:
  • Masaüstü: %80
  • Tablet & Telefon: %95
• Maksimum Genişlik: 2580 piksel

aralık

Sonraki dolgu değerlerini değiştirin.

• Üst Dolgu: 0px
• Alt Dolgu: 0px
• Sol Dolgu: %1
• Sağ Dolgu: %1

Ana Eleman CSS

Sütunları dikey olarak otomatik olarak hizalamak için, gelişmiş sekmesinde satırın ana öğesine aşağıdaki CSS kodu satırlarını ekleyeceğiz:

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

Sosyal Medya Takip Modülünü Sütun 1'e Ekleyin

Sosyal Ağlar Ekle

1. sütundaki Sosyal Medya Takip Modülü ile başlayarak modül ekleme zamanı. İstediğiniz sosyal ağları ekleyin.

Her Sosyal Ağın Arka Plan Rengini Tek Tek Değiştirin

Ardından, her bir sosyal ağın arka plan rengini ayrı ayrı beyaz olarak değiştirin.

• Arka Plan Rengi: #ffffff

Simge Ayarları

Genel modül ayarlarına geri dönün ve tasarım sekmesindeki simge rengini değiştirin.

• Simge Rengi: #141414

Sınır

Sonraki kenarlık ayarlarında bazı yuvarlak köşe ayarları uygulayın.

• Tüm Köşeler: 100 piksel

2. Sütun'a Düğme Modülü Ekle

Kopya Ekle

2. sütunda ihtiyacımız olan tek modül bir Düğme Modülüdür. Seçtiğiniz bir kopyayı ekleyin.

Düğme Hizalama

Daha sonra modülün hizalamasını değiştirin.

• Düğme Hizalama: Sağ

Düğme Ayarları

Ardından, düğmeye stil verin.

• Düğme İçin Özel Stiller Kullan: Evet
• Düğme Metin Boyutu: 12px
• Düğme Metin Rengi: #ffffff
• Düğme Arka Plan Rengi: #ff4700
• Düğme Kenar Genişliği: 0px
• Düğme Sınır Yarıçapı: 0px
• Düğme Harf Aralığı: 2px

• Düğme Yazı Tipi: Prata
• Düğme Yazı Tipi Stili: Büyük Harf

aralık

Ve boşluk ayarlarına aşağıdaki dolgu değerlerini uygulayarak düğme ayarlarını tamamlayın:

• Üst Dolgu: 16px
• Alt Dolgu: 16px
• Sol Dolgu: 24px
• Sağ Dolgu: 24px

2. Bölüm Ekle

Arka plan rengi

Bir öncekinin hemen altına başka bir bölüm ekleyin ve bunun için aşağıdaki arka plan rengini kullanın:

• Arka Plan Rengi: #fff4ef

aralık

Sonraki tasarım sekmesinde tüm varsayılan üst ve alt dolguyu kaldırın.

• Üst Dolgu: 0px
• Alt Dolgu: 0px

1. Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin:

boyutlandırma

Henüz modül eklemeden satır ayarlarını açın ve boyutlandırma ayarlarını aşağıdaki gibi değiştirin:

• Sütun Yüksekliklerini Eşitle: Evet
• Genişlik:
  • Masaüstü: %80
  • Tablet & Telefon: %95
• Maksimum Genişlik: 2580 piksel

aralık

Boşluk ayarlarındaki dolgu değerlerini de değiştirin.

• Üst Dolgu: 5px
• Alt Dolgu: 5px
• Sol Dolgu: %2
• Sağ Dolgu: %2

Sütun 2 Ayarları

Arka plan rengi

Ardından, sütun 2 ayarlarını açın ve yalnızca tablet ve telefonda bir arka plan rengi uygulayın.

• Masaüstü: /
• Tablet ve Telefon: #f2e8e3

aralık

Daha küçük ekran boyutlarına da bazı üst ve alt dolgular ekliyoruz.

• Üst Dolgu:
  • Tablet ve Telefon: 25px
• Alt Dolgu:
  • Tablet ve Telefon: 25px

Sütun 1'e Menü Modülü Ekle

Seçim Menüsü

Ardından, satıra bir Menü Modülü ekleyeceğiz. İstediğiniz bir menü seçin.

Logo Yükle

Menü Modülünüze bir logo yükleyin.

Arka Plan Rengini Kaldır

Ardından menünün arka plan rengini kaldırın.

Menü Metin Ayarları

Modülün tasarım sekmesine gidin ve menü metnini aşağıdaki gibi biçimlendirin:

• Menü Yazı Tipi: Prata
• Menü Metin Rengi: #111821
• Menü Metin Boyutu: 18px
• Menü Satır Yüksekliği: 1.4em
• Metin Hizalama: Sağ

Açılır Menü Ayarları

Açılır menü ayarlarını da değiştirin.

• Açılır Menü Arka Plan Rengi: #fff4ef
• Açılır Menü Satır Rengi: #191919
• Açılır Menü Metin Rengi: #191919
• Mobil Menü Arka Plan Rengi: #fff4ef
• Mobil Menü Metin Rengi: #191919

Simge Ayarları

Ardından, simgeler ayarlarında simge renklerini değiştirin.

• Alışveriş Sepeti Simgesi Rengi: #191919
• Arama Simgesi Rengi: #191919
• Hamburger Menü Simgesi Rengi: #191919

boyutlandırma

Ve aşağıdaki boyutlandırma ayarlarını uygulayarak modül ayarlarını tamamlayın:

• Logo Maksimum Genişliği: 50px
• Genişlik: %100

3. Açılır Giriş Formu Ekleyin ve İşlevselliğe Tıklayın

Sütun 2'ye Blurb Modülü Ekle

Başlık ekle

Başlığımızın temeli oluşturulduğuna göre, artık oturum açma tetikleyicisini ve formunu oluşturmaya odaklanabiliriz. İhtiyacımız olan ilk şey, satırımızın 2. sütununda bir Blurb Modülü. Burada bir başlık ekleyeceğiz.

Simge Seç

Ardından, bir simge seçeceğiz.

Simge Ayarları

Modülün tasarım sekmesine gidin ve simge ayarlarını aşağıdaki gibi değiştirin:

• Simge Rengi: #ffffff
• Daire Simgesi: Evet
• Daire Rengi: #ff4700
• Resim/Simge Yerleşimi: Sol

Başlık Metni Ayarları

Ardından, başlık metnine stil verin.

• Başlık Yazı Tipi: Lato
• Başlık Yazı Tipi Ağırlığı: Ağır
• Başlık Yazı Tipi Stili: Büyük Harf
• Başlık Metin Boyutu: 12px
• Başlık Harf Aralığı: 3px

Animasyon

Ayrıca, bu modülün varsayılan animasyonunu animasyon ayarlarında kaldırıyoruz.

• Resim/Simge Animasyonu: Animasyon Yok

Bulanık Başlık CSS

Ve gelişmiş sekmesindeki tanıtım yazısı başlığına bir miktar üst kenar boşluğu ekleyeceğiz.

margin-top: 10px;

Konum

Son olarak, konum ayarlarında modülü yeniden konumlandıracağız.

• Pozisyon: Mutlak
• Yer: Merkez

2. Satırı 2. Bölüme Ekleyin

Sütun Yapısı

Giriş formunu eklemek için, öncekinin altında aşağıdaki sütun yapısına sahip yeni bir satır kullanacağız:

boyutlandırma

Henüz modül eklemeden satır ayarlarını açın ve boyutlandırma ayarlarını aşağıdaki gibi değiştirin:

• Sütun Yüksekliklerini Eşitle: Evet
• Maksimum Genişlik: 2580 piksel

aralık

Dolgu değerlerini de değiştirin.

• Üst Dolgu: 0px
• Alt Dolgu: 0px
• Sol Dolgu: %2
• Sağ Dolgu: %2

Sütun 2'ye Giriş Modülü Ekle

İçeriği Kaldır

2. sütuna bir Oturum Açma Modülü ekleyin. İçerik kutularının boş olduğundan emin olun.

Arka plan rengi

Sonraki arka plan rengini değiştirin.

• Arka Plan Rengi: #ff4700

Alan Ayarları

Tasarım sekmesine gidin ve alanları biçimlendirin.

• Alanlar Arka Plan Rengi: rgba(0,0,0,0)
• Alanlar Metin Rengi: rgba(255,255,255,0.73)
• Alanlar Sol Doldurma: 0px
• Alanlar Sağ Doldurma: 0px
• Alan Yazı Tipi: Lato
• Alanlar Metin Boyutu: 16px

• Alanlar Çizgi Yüksekliği: 1.8em
• Tüm Köşeler: 0px
• Alanlar Alt Kenar Genişliği: 1px
• Alanlar Alt Kenarlık Rengi: #ffffff

Düğme Ayarları

Ardından, düğme ayarlarını aşağıdaki gibi değiştirin:

• Düğme İçin Özel Stiller Kullan: Evet
• Düğme Metin Boyutu: 12px
• Düğme Metin Rengi: #ffffff
• Düğme Arka Plan Rengi: #141414
• Düğme Kenar Genişliği: 0px
• Düğme Sınır Yarıçapı: 0px
• Düğme Harf Aralığı: 2px
• Düğme Yazı Tipi: Prata

• Düğme Yazı Tipi Stili: Büyük Harf
• Düğme Üst Dolgusu: 16px
• Düğme Alt Dolgusu: 16px

boyutlandırma

Genişliğin de "%100" olduğundan emin olun.

• Genişlik: %100

Giriş Düğmesi CSS

Gelişmiş sekmesindeki oturum açma düğmesi CSS kutusuna bir miktar üst kenar boşluğu uygulayın.

margin-top: 30px;

Konum

Ve modülü buna göre yeniden konumlandırın:

• Pozisyon: Mutlak
• Konum: Sağ Üst
• Dikey Ofset: 1px

Satır 1'deki Blurb Modülüne CSS Kimliği ekleyin

Artık ihtiyacımız olan tüm öğelere sahip olduğumuza göre, tıklama işlevine odaklanabiliriz. İlk olarak, Blurb Modülünü açın ve aşağıdaki CSS kimliğini ekleyin:

• CSS Kimliği: bölme-oturum açma-değiştirme

2. Satırdaki Giriş Modülüne CSS Kimliği ekleyin

Daha sonra Oturum Açma Modülünü açın ve aşağıdaki CSS kimliğini uygulayın:

• CSS kimliği: divi-login-form

Giriş Modülünün Altına Kod Modülü Ekleyin

Ardından, Giriş Modülünün hemen altına bir Kod Modülü ekleyin.

Stil ve Komut Dosyası Etiketleri Ekle

Tıklama işlevini oluşturmak için biraz CSS ve JQuery kodu kullanacağız. Bu koda hazırlanmak için stil etiketleri (CSS kodu için) ve komut dosyası etiketleri (JQuery kodu için) ekleyeceğiz.

Stil Etiketleri Arasına CSS Kodu Ekle

Aşağıdaki CSS kod satırlarını stil etiketleri arasına yerleştirin:

#divi-login-toggle {
cursor: pointer;    
}

#divi-login-form {
margin-top: -20px;
visibility: hidden;
opacity: 0;
  
-webkit-transition: all 0.2s ease !important;
-moz-transition: all 0.2s ease !important;
-o-transition: all 0.2s ease !important;
transition: all 0.2s ease !important;
}
  
.show-login-form {
visibility: visible !important;
margin-top: 0px !important;
opacity: 1 !important;
}

Komut Dosyası Etiketleri Arasına JQuery Ekle

Ve komut dosyası etiketleri arasında aşağıdaki kod:

jQuery(document).ready(function($){

var loginForm =  $('#divi-login-form');

$('#divi-login-toggle').click(function() {

loginForm.toggleClass('show-login-form');

});
});

4. Divi Tema Oluşturucu Değişikliklerini Kaydet

Artık her şey yerli yerinde olduğuna göre, geriye kalan tek şey tüm Divi Theme Builder değişikliklerini kaydetmek ve sonucu görüntülemek!

Ön izleme

Artık tüm adımların üzerinden geçtik, şimdi farklı ekran boyutlarındaki sonuca son bir göz atalım.

masaüstü

Mobil

Son düşünceler

Bu gönderide, bir üyelik web sitesi oluştururken başlığınızla nasıl yaratıcı olunacağını gösterdik. Daha spesifik olarak, ziyaretçilerinizin WordPress giriş sayfasına gitmek zorunda kalmadan hesaplarına giriş yapmalarını sağlayan bir açılır giriş formunu nasıl ekleyeceğinizi gösterdik. Başlık şablonu JSON dosyasını da ücretsiz olarak indirebildiniz! Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne yorum bırakmaktan çekinmeyin.

Divi hakkında daha fazla bilgi edinmek ve daha fazla ücretsiz Divi almak istiyorsanız, e-posta bültenimize ve YouTube kanalımıza abone olduğunuzdan emin olun, böylece her zaman bu ücretsiz içeriği bilen ve bu ücretsiz içerikten yararlanan ilk kişilerden biri olursunuz.