Divi: Bir açılır giriş formu nasıl oluşturulur

oluşturmak ister misiniz? formulaire Divi'de oturum açma / oturumu kapatma düğmeleriyle açılır pencere girişi?

Bir yaratılışı formulaire açılır pencerede oturum aç Divi sitenizin tasarımını ve oturum açma/çıkış kullanıcı deneyimini iyileştirmenin etkili bir yolu olabilir. 

Fikir bir yaratmaktır formulaire kullanıcı sayfa başlığındaki oturum açma düğmesini her tıkladığında açılır pencerede görüntülenen oturum açma. 

Bu, kullanıcıyı özel bir giriş sayfasına yönlendirmekten daha uygundur.

Bu eğitimde, Divi'de özel oturum açma ve oturumu kapatma düğmeleriyle açılır bir oturum açma formu oluşturacağız. 

Divi Oturum Açma modülünü ve birkaç Düğme modülünü kullanarak, kullanıcıların başka bir sayfaya yönlendirilmeden oturum açmalarına ve oturumlarını kapatmalarına izin vererek, ön uçta sorunsuz bir açılır pencere oturum açma deneyimi yaratacağız.

Başlayalım!

anket

İşte bu eğitimde oluşturacağımız tasarıma hızlı bir bakış.

Oturum açma düğmesinin ve oturum kapatma düğmelerinin sırasıyla nasıl değiştiğine dikkat edin. Ve kullanıcı oturum açtıktan sonra geçerli sayfada kalır. 

Ek olarak, açılır oturum açma formu, kullanıcı her oturumu kapatmaya çalıştığında farklı "uyarı" içeriği görüntüler.

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

Bu açılır oturum açma formunu ve özel oturum açma/oturum kapatma düğmelerini herhangi bir özel başlığa ekleyebilseniz de, süreci hızlandırmak ve tasarımı hızlı bir şekilde başlatmak için önceden hazırlanmış bir başlık kullanacağız.

"Crowdfunding Layout Pack" başlık şablonunu Divi oluşturucuya aktarın

Başlamak için indirin Divi Crowdfunding Layout Pack Ücretsiz Üstbilgi ve Altbilgi . Bunu yapmak için şuraya gidin: blog yazısı .

Ardından zip dosyasını indirmek için e-postanızı girin.

Bundan sonra, içe aktarmaya hazır olması için dosyayı açın.

Dosyayı tema düzenleyiciye aktarmak için şu adımları izleyin:

1. Divi > Tema Oluşturucu'ya gidin.
2. Taşınabilirlik simgesine tıklayın.
3. Taşınabilirlik açılır penceresinde, içe aktarma sekmesini seçin.
4. İçe aktarmak için önceden indirilmiş sıkıştırılmamış dosyayı seçin.
5. Tıklayın Divi Theme Builder'ı İçe Aktar Şablonlar.
6. İçe aktarılan başlığı düzenlemek için düzenle simgesine tıklayın.

Divi'de açılır giriş formu oluşturma

Bölüm 1: Oturum Açma ve Oturum Kapatma Düğmeleri Oluşturma

Global Başlık Düzen Düzenleyicisine girdikten sonra, katman görünümü tüm öğeleri kolayca görebilmeniz için.

Başlık bölümünün üst satırında, modülü silin Sosyal Medya Takibi 3. sütundaki Giriş düğmesinin yanında.

Ayrıca Oku: Divi: Farklı gradyan türlerinin karşılaştırılması

Giriş düğmesinin oluşturulması

Giriş butonumuzu oluşturmak için, üst satırın 3. sütunundaki Düğme modülü ayarlarını açın.

Tasarım sekmesi altındaki aşağıdaki öğeleri güncelleyin:

• Düğme Simgesi: kilit simgesi (ekran görüntüsüne bakın)
• Düğme Simge Yerleşimi: Sağ
• Yalnızca Düğmenin Üzerine Geldiğinde Simgeyi Göster: HAYIR
• Dolgu: 0,5em(Üst ve Alt), 2em(Sol), 0,7em(Sağ)

Sekmenin altında gelişmiş, düğmeye aşağıdaki gibi iki özel CSS sınıfı atayın:

• CSS Sınıfı: et-toggle-popup et-popup-login-button

Çıkış butonunun oluşturulması

Çıkış düğmemizi oluşturmak için 3. sütundaki mevcut giriş düğmesini çoğaltın.

İki düğmeyi ayırt etmeye yardımcı olmak için her birinin etiketini sırasıyla güncelleyebilirsiniz. Ardından, sütun 3'te Çoğalt Düğmesi modülü ayarlarını açın.

Düğme metnini "Oturumu Kapat" olarak değiştirin.

Tasarım sekmesi altındaki aşağıdaki öğeleri güncelleyin:

• Düğme Simgesi: simgenin kilidini aç (ekran görüntüsüne bakın)

Sekmenin altında gelişmiş, CSS Sınıfları düğmesini aşağıdaki gibi güncelleyin:

• CSS Sınıfı: et-toggle-popup et-popup-logout-button

Birinci sınıf aynı kalacak ama ikinci sınıf farklı olacak.

Bölüm 2: Açılır Pencere Bölümünü Oluşturma

Düğmeler bittiğinde, açılır penceremizi içeren açılır penceremizi oluşturmaya hazırız. formlar bağlantı.

Başlık bölümünün altına yeni bir normal bölüm ekleyin.

Ardından, bölümün içine tek sütunlu bir satır ekleyin.

Bölüm ayarları

Satırı güncellemeden önce bölüm ayarlarını açın.

Sekmenin altında içerik, bölüme beyaz bir arka plan rengi verin:

• Arkaplan: #ffffff

Sekmenin altında Dizayn, aşağıdakileri güncelleyin:

• Genişlik: %100
• Maksimum Genişlik: 800px(Masaüstü), %80(Tablet), %100(Telefon)
• Bölüm Hizalama: Merkez
• Yükseklik: otomatik (Masaüstü ve Tablet), %100 (Telefon)
• Maksimum Yükseklik: %100
• Dolgu: 0px (Üst ve Alt)

• Yuvarlatılmış Köşeler: 10px
• Kutu Gölgesi: ekran görüntüsüne bakın
• Kutu Gölge Dikey Konumu: 0px
• Bulanıklık Gücü: 100 piksel
• Yayılma Gücü: 50px

Sekmenin altında gelişmiş, aşağıdakileri güncelleyin:

Özel bir CSS sınıfı ekleyin.

• CSS Sınıfı: et-pop-up-login

Ana öğeye özel bir CSS parçacığı ekleyin:

overscroll-behavior: contain;

Görünürlük ve Konum seçeneklerini güncelleyin.

• Yatay Taşma: Gizli
• Dikey Taşma: otomatik
• Pozisyon: Sabit
• Yer: Merkez Merkez
• Z İndeksi: 999999

Satır Parametreleri

Kesit ayarları yerindeyken, hat ayarlarını açın ve aşağıdaki tasarım ayarlarını güncelleyin:

• Özel Oluk Genişliğini Kullan: EVET
• Oluk Genişliği: 1
• Genişlik: %100
• Maksimum Genişlik: %100
• Dolgu: 0px(Üst), 5vh(Alt)

Bölüm 3: Açılır pencereyi kapat simgesini oluşturma

Tıklandığında açılır pencereyi kapatacak/gizleyecek açılır pencere kapatma simgesini oluşturmak için bir Blurb modülü kullanacağız.

Satıra yeni bir Blurb modülü ekleyin.

Modül ayarını açın ve başlığı ve gövde metnini silin.

Ardından simgeyi aşağıdaki gibi ekleyin:

• Simgeyi Kullan: EVET
• Simge: "x" simgesi (ekran görüntüsüne bakın)

Sekmenin altında Dizayn, aşağıdakileri güncelleyin:

• Simge Rengi: #004e43
• Görüntü/Simge Hizalama: ortalanmış
• Simge Yazı Tipi Boyutunu Kullan: EVET
• Simge Yazı Tipi Boyutu: 50px
• Genişlik: 50 piksel
• Hizalama modülü: sağ
• Yükseklik: 50 piksel

Sekmenin altında gelişmiş, Blurb modülüne aşağıdaki gibi bir CSS sınıfı ekleyin:

• CSS Sınıfı: et-toggle-pop-up

Bölüm 4: "Oturum Açıldı" ve "Oturum Kapatıldı" Oturum Açma Formlarının Oluşturulması

Giriş ve çıkışta giriş formu için farklı içerik ve tasarıma sahip olmak için iki farklı giriş formu modülü oluşturacağız. 

İlki, kullanıcı her "çıkış yaptığında" görüntülenecek olan oturum açma formu olacaktır. İkincisi, kullanıcı her "oturum açtığında" görüntülenecek olan oturum açma formu olacaktır.

“Oturum Kapatıldı” formunun oluşturulması

“Oturum Kapatıldı” oturum açma formu oluşturmak için satırın içindeki Blurb modülü simgesinin altına yeni bir Oturum Açma modülü ekleyin.

Modül ayarlarını açın ve aşağıdaki ayarları değiştirin:

İçerik sekmesi

• Geçerli Sayfaya Yönlendir: EVET
• Arka Plan Rengini Kullan: HAYIR

Tasarım sekmesi

• Alanlar Arka Plan Rengi: rgba(0,78,67,0.05)
• Alan Odak Arka Plan Rengi: rgba (0,78,67,0,15)
• Metin Hizalama: Ortalanmış
• Metin Rengi: Koyu

• Başlık Yazı Tipi: Poppins
• Başlık Yazı Tipi Ağırlığı: yarı kalın
• Metin Rengi: #000000
• Başlık Satır Yüksekliği: 1,3 em
• Gövde Yazı Tipi: İş Sans

Buton stillerini güncellemek için oluşturduğumuz login butonundan buton stillerini Header bölümünün satırındaki üçüncü sütuna kopyalayın.

Ardından, Tasarım sekmesi altındaki bağlantı ayarlarındaki düğme seçenekleri grubuna düğme stillerini yapıştırın.

Ardından, oturum açma formu için düğme stillerini aşağıdaki gibi güncelleyin:

• düğme
  • Metin Rengi: #ffffff
  • Arkaplan: #004e43
  • Arka Plan (Vurgulu): #00683c
  • Kenarlık Genişliği: 0 piksel
  • Dolgu: 15px (Üst ve Alt)

Ardından, boyutlandırma seçeneklerini aşağıdaki gibi güncelleyin:

• Genişlik: %100
• Maksimum Genişlik: %80(Masaüstü), %90(Tablet), %95(Telefon)
• Hizalama Modülü: Merkez

Gelişmiş sekme

Sekmenin altında gelişmiş, CSS sınıfını ve özel CSS'yi aşağıdaki gibi güncelleyin:

• CSS Sınıfı: oturumu kapatılmış form

Bağlantı açıklaması için özel CSS:

width: 100% !important;
float: none !important;

Giriş formu için özel CSS:

width: 100% !important;
padding: 0px !important;

Bu, Oturum Açma modülünün masaüstünde bile tam satır/sütun genişliğini kapsamasını sağlayacaktır.

"Giriş" formunun oluşturulması

Artık formun "Oturum Kapatıldı" sürümü tamamlandı, kullanıcı deneyimini en üst düzeye çıkarmak için farklı içerik ve stillere sahip olacak "Oturum Açıldı" sürümünü oluşturmamız gerekiyor.

"Oturum Kapatıldı" oturum açma formunu oluşturmak için mevcut oturum açma formunu çoğaltın.

Ardından, her biri için etiketi güncelleyin. formlar sırasıyla bağlantı.

Yinelenen ayarları ("Oturum Açıldı" formu) açın ve site başlığını oturum açma formu modülünün başlığına dinamik içerik olarak ekleyin.

Ardından site başlığı dinamik içerik ayarlarını açın ve önceki ve sonraki içeriği aşağıdaki gibi güncelleyin:

• Önce: “ Elegant Themes oturumunu kapatmaya çalışıyorsunuz”
• Sonrasında: ". " 

Bu, siteden çıkış yapmaya çalışan kullanıcılar için güzel bir dinamik bildirim oluşturacaktır.

Ardından gövdeye aşağıdaki H3 başlığını ekleyin:

<h3>Are you sure?</h3>

Giriş yaptığınızda Giriş modülünün içeriğini gördüyseniz, kişiselleştirilmiş bir "çıkış" bağlantısı içeren kişiselleştirilmiş bir mesaj olduğunu bilirsiniz. Bu bağlantının buton gibi görünmesi için gövde bağlantısının yazı tipi/metin ayarlarını aşağıdaki gibi özelleştirmemiz gerekiyor:

• Sekmeyi seçin Link seçenek altında Gövde metni.
• Bağlantı Yazı Tipi: İş Sans
• Bağlantı Yazı Tipi Ağırlığı: Yarı Kalın
• Yazı Tipi Stili: TT
• Bağlantı Metni Hizalama: ortalanmış
• Bağlantı Metni Rengi: #ffffff

NOT: Formu canlı bir sayfada görüntüleyene kadar bu sonuçları önizleyemezsiniz.

Sekmenin altında gelişmiş, CSS sınıfını ve özel CSS'yi aşağıdaki gibi güncelleyin:

• CSS Sınıfı: et-oturum açmış-form

Giriş formu için özel CSS:

display:none;

Bölüm 5: Özel kod ekleyin

Açılır oturum açma formu işlevi için gereken özel CSS ve JQuery'yi eklemek için, son Oturum Açma modülünün altında yeni bir Kod modülü oluşturun.

CSS

Kod modülü ayarlarını açın ve CSS'yi gerekli stil etiketlerine sardığınızdan emin olarak aşağıdaki CSS'yi kod alanına yapıştırın.

/* hide popup section */
.et-popup-login {
  display: none;
}
 
/* hide login button when logged in */
.logged-in .et-popup-login-button {
  display: none !important;
}
 
/* hide logout button when logged out */
.et-popup-logout-button {
  display: none !important;
}
 
/* show logout button when logged in */
.logged-in .et-popup-logout-button {
  display: inline-block !important;
}
 
/* hide logged out form when logged in */
.logged-in .et-logged-out-form {
  display: none !important;
}
 
/* hide logged in form when logged out */
.et-logged-in-form {
  display: none !important;
}
 
/* show logged in form when logged in */
.logged-in .et-logged-in-form {
  display: block !important;
}
 
/* style logout link within logged in form */
.et-logged-in-form a {
  display: block;
  padding: 15px 1em;
  border-radius: 8px;
  background: #004e43;
  max-width: 400px;
  margin: 20px auto 0px;
}
.et-toggle-popup {
  cursor: pointer;
}
 
/* show hidden elements in visual builder */
body.et-fb .et-popup-login,
body.et-fb .et-logged-out-form {
  display: block !important;
}
body.et-fb .et-popup-login-button {
  display: inline-block !important;
}

CSS'nin, ilgili giriş/çıkış düğmelerini ve formlar Kullanıcı her oturum açtığında veya oturumu kapattığında “Oturum Açıldı”/”Oturum Kapatıldı” oturum açma mesajı.

JQuery

Bitiş stili etiketinin altına, kodu gerekli komut dosyası etiketlerine sardığınızdan emin olarak aşağıdaki JQuery'yi yapıştırın.

(function ($) {
  $(document).ready(function () {
    $(".et-toggle-popup").click(function (e) {
      e.preventDefault();
      $(".et-popup-login").fadeToggle(500);
    });
  });
})(jQuery);

Bu snippet, kullanıcı "sınıfına sahip üç öğeden birine tıkladığında açılır pencereyi değiştirir" ve-aç/kapa-açılır penceresi (oturum açma ve kapatma düğmeleri artı sunum simgesi "x").

Ayrıca bakınız: Divi: Arka Plan Maskesi Ayarları ve Desen Dönüştürme Seçenekleri Nasıl Kullanılır

Tamamdır !

Şablonda yaptığınız değişiklikleri tema oluşturucuya kaydetmeyi unutmayın. Kaydedildikten sonra, sonuçları canlı bir sayfada görüntüleyebilirsiniz.

Nihai sonuç

İşte bilgisayar, tablet ve telefondaki nihai sonuçlar.

Oturum açma düğmesinin ve oturum kapatma düğmesinin nasıl değiştiğine dikkat edin. Ve kullanıcı oturum açtığında, kullanıcı geçerli sayfada kalır. 

Ek olarak, açılır oturum açma formu, kullanıcı her oturumu kapatmaya çalıştığında farklı "uyarı" içeriği görüntüler.

DIVI'yı şimdi indirin!!!

SONUÇ

Bu açılır giriş formunun ve özel giriş/çıkış düğmelerinin oluşturulması, Divi'nin giriş formunu yaratıcı bir şekilde nasıl kullanacağınız konusunda size biraz fikir verecektir. 

Kendi web sitenizde benzersiz bir oturum açma deneyimi oluşturmak için her bir oturum açma formunun (veya düğmesinin) tasarımını ve içeriğini ayarlamaktan çekinmeyin.

Ayrıca bu eğitimin bir sonraki Divi projeleriniz için size ilham vereceğini umuyoruz. Herhangi bir endişeniz veya öneriniz varsa, bizi yorumlar bölümü bunu tartışmak için.

Ayrıca danışabilirsiniz kaynaklarımızİnternet siteleri oluşturma projelerinizi yürütmek için daha fazla elemana ihtiyacınız varsa.

Rehberimize de danışmaktan çekinmeyin. WordPress blog oluşturma ya da Divi: Tüm zamanların en iyi WordPress teması.

Ama bu arada, bu yazıyı farklı sosyal ağlarda paylaş.

...