Divi'de Giriş/Çıkış Düğmeleri ile Açılır Giriş Formu Nasıl Oluşturulur

Divi'de açılır bir giriş formu oluşturmak, sitenize giriş ve çıkış yapma tasarımını ve kullanıcı deneyimini geliştirmenin etkili bir yolu olabilir. Buradaki fikir, kullanıcı sayfanın başlığındaki bir oturum açma düğmesine her tıkladığında açılan bir kutuda görünen bir oturum açma formu oluşturmaktır. Bu, kullanıcıyı özel bir Giriş sayfasına yönlendirmekten daha uygundur. Ayrıca, web geliştiricilerinin, geleneksel WordPress oturum açma deneyimine ferahlatıcı bir alternatif olabilecek (en azından ilk ön uçta) özel bir oturum açma formu tasarımı oluşturmasına olanak tanır.

Bu eğitimde, Divi'de özel giriş ve çıkış düğmeleri ile bir açılır giriş formu oluşturacağız. Divi Oturum Açma Modülünü ve birkaç düğme modülünü kullanarak, kullanıcıların farklı 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.

Bu çözüm, ön uç oturum açma formu tasarımıyla sınırlıdır; bu, meydana gelen herhangi bir hatanın (veya kullanıcının bir parolayı sıfırlaması gerekiyorsa) "wp-login" adresinde bulunan geleneksel WordPress oturum açma formuna/sayfa tasarımına yönlendirileceği anlamına gelir. .php”. Ancak, bir eklenti kullanmak zorunda kalmadan ön uçta özel bir giriş tasarımı arayanlar için bu sizin için bir çözüm olabilir.

Başlayalım!

Gizlice Bakış

İş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ırlar. Ayrıca açılır oturum açma formu, kullanıcı oturumu kapatmaya çalıştığında farklı "uyarı" içeriği gösterir.

Şablonu ÜCRETSİZ olarak indirin

Bu eğitimdeki tasarımlara el atmak için önce aşağıdaki düğmeyi kullanarak dosyayı indirmeniz gerekecek. İ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.

ÜCRETSİZ Şablon Nasıl Yüklenir

Şablonu yüklemek için WordPress web sitenizin arka ucundaki Divi Tema Oluşturucu'ya gidin.

Ardından, sağ üst köşede iki oklu bir simge göreceksiniz. simgesine tıklayın.

İçe aktarma sekmesine gidin, bu gönderide indirebildiğiniz JSON dosyasını yükleyin ve 'Divi Tema Oluşturucu Şablonlarını İçe Aktar'a tıklayın.

Dosyayı yükledikten sonra, varsayılan web sitesi şablonunuzda yeni bir genel üstbilgi ve altbilgi göreceksiniz. Şablonun etkinleştirilmesini istediğiniz anda Divi Tema Oluşturucu değişikliklerini kaydedin.

Başlık şablonunun öğelerini değiştirmek için şablonu açarak başlayın.

Hadi öğreticiye geçelim, olur mu?

Başlamak için Gerekenler

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ıma hızlı bir başlangıç ​​yapmak için önceden hazırlanmış bir başlık kullanacağız.

Henüz yapmadıysanız Divi Temasını kurun ve etkinleştirin.

Crowdfunding Başlık Şablonunu Tema Oluşturucuya Aktarın

Başlamak için Divi's Crowdfunding Layout Pack'in ücretsiz üstbilgisini ve altbilgisini indirin. Bunu yapmak için blog gönderisine gidin.

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 oluşturucuya 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 indirilen sıkıştırılmamış dosyayı seçin.
5. İçe Aktar düğmesini tıklayın.
6. İçe aktarılan başlığı düzenlemek için düzenle simgesine tıklayın.

Divi'de Özel Giriş/Çıkış Düğmeleri ile Açılır Giriş Formu Oluşturma

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

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

Başlık bölümünün en üst satırında, 3. sütunda bulunan Login butonunun yanında bulunan sosyal medya takip modülünü silin.

Giriş Düğmesini Oluşturma

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

Tasarım sekmesi altında aşağıdakileri güncelleyin:

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

Gelişmiş sekmesi altında, düğmeye aşağıdaki gibi iki özel CSS Sınıfı verin:

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

Çıkış Düğmesini Oluşturma

Çı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ütun3'teki yinelenen düğme modülünün ayarlarını açın.

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

Tasarım sekmesi altında aşağıdakileri güncelleyin:

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

Gelişmiş sekmesi altında, 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, giriş formlarını içeren açılır penceremiz olarak hizmet edecek açılır pencere bölümünü oluşturmaya hazırız.

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.

İçerik sekmesi altında bölüme beyaz bir arka plan rengi verin:

• Arka Plan Rengi: #ffffff

Tasarım sekmesi altında aşağıdakileri güncelleyin:

• Genişlik: %100
• Maksimum Genişlik: 800 piksel (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: 0 piksel üst, 0 piksel alt

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

Gelişmiş sekmesi altında aşağıdakileri güncelleyin:

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

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

Ana Öğeye bir özel 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 Ayarları

Bölüm ayarları yapıldıktan sonra, satırın 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 Pencereyi Kapat Simgesini oluşturmak için bir tanıtım modülü kullanacağız.

Satıra yeni bir tanıtım yazısı modülü ekleyin.

Tanımlama modülü ayarını açın ve Başlık 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)

Tasarım sekmesi altında 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
• Modül Hizalaması: Sağ
• Yükseklik: 50 piksel

Gelişmiş sekmesi altında, tanıtım yazısına aşağıdaki gibi bir CSS sınıfı ekleyin:

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

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

Giriş ve çıkış yaparken 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ı "çıkış yaptığında" gösterilecek olan giriş formu olacaktır. İkincisi, kullanıcı "giriş yaptığında" gösterilecek olan giriş formu olacaktır.

“Oturum Kapatıldı” Formu Oluşturma

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

Oturum açma modülü ayarlarını açın ve aşağıdakileri güncelleyin:

İç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 Arkaplan Rengi: rgba(0,78,67,0.15)
• Metin Hizalama: Merkez
• Metin Rengi: Koyu

• Başlık Yazı Tipi: Poppins
• Başlık Yazı Tipi Ağırlığı: Yarı Kalın
• Başlık Metin Rengi: #000000
• Başlık Satırı Yüksekliği: 1.3em
• Gövde Yazı Tipi: İş Sans

Düğme stillerini güncellemek için Header bölümündeki satırın üçüncü sütununda oluşturduğumuz Login Button'ın buton stillerini kopyalayın.

Ardından, tasarım sekmesi altındaki Oturum Açma Ayarları'ndaki düğme seçenek 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
• Düğme Arka Plan Rengi: #004e43
• Düğme Arka Plan Rengi (fareyle üzerine gelin): #00683c
• Düğme Kenar Genişliği: 0px
• Düğme Dolgusu: 15 piksel üst, 15 piksel 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)
• Modül Hizalaması: Merkez

Gelişmiş sekme

Gelişmiş Sekmesi altında, CSS Sınıfını ve Özel CSS'yi aşağıdaki gibi güncelleyin:

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

Giriş 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 formu modülünün masaüstünde bile satırın/sütun genişliğini kapsamasını sağlayacaktır.

“Oturum Açıldı” Formunun Oluşturulması

Artık formun “Oturum Kapatıldı” versiyonu tamamlandığında, kullanıcı deneyimini en üst düzeye çıkarmak için farklı içerik ve stillere sahip olacak “Oturum Açıldı” versiyonunu 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 bir oturum açma formunun etiketini sırasıyla güncelleyin.

Kopya için ayarları açın ("Oturum Açıldı" formu) ve Site Başlığını dinamik içerik olarak oturum açma formu modülünün Başlığına ekleyin.

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

• Önce: “Oturumu 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>

Oturum açtığınızda oturum açma formu modülü içeriğini gördüyseniz, özel bir "çıkış" bağlantısı içeren özel bir mesaj olduğunu bilirsiniz. Bu bağlantıyı bir düğme gibi görünecek şekilde biçimlendirmek için gövde bağlantısı yazı tipi/metin ayarlarını aşağıdaki gibi özelleştirmemiz gerekir:

• Gövde metni seçeneklerinin altındaki bağlantı sekmesini seçin.
• Bağlantı Yazı Tipi: İş Sans
• Bağlantı Yazı Tipi Ağırlığı: Yarı Kalın
• Bağlantı Yazı Tipi Stili: TT
• Bağlantı Metni Hizalama: merkez
• Bağlantı Metni Rengi: #ffffff

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

Gelişmiş sekmesi altında, 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 Kodu Ekleme

Açılır oturum açma formunun işlevselliği için gereken özel CSS ve JQuery'yi eklemek için, son oturum açma formu 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 kutusuna 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;
}

Kullanıcı her oturum açtığında veya oturum açtığında ilgili oturum açma/oturum kapatma düğmelerini ve "oturum aç"/"oturum kapat" oturum açma formlarını gizlemek/göstermek için CSS'nin WordPress'te yerleşik olan "oturum açmış" sınıfını kullandığına dikkat edin. çıkış yapıldı.

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ı "et-toggle-popup" sınıfına sahip üç öğeden herhangi birini tıkladığında açılır bölümü değiştirir (oturum açma ve çıkış düğmeleri artı "x" tanıtım yazısı simgesi).

Bu kadar!

Şablonda yaptığınız değişiklikleri Tema Oluşturucu'ya kaydetmeyi unutmayın. Kaydedildikten sonra, sonuçları canlı bir sayfada görüntüleyebilirsiniz.

Son sonuç

İşte masaüstü, tablet ve telefondaki nihai sonuçlar.

Giriş düğmesinin ve çıkış düğmesinin nasıl değiştiğine dikkat edin. Ve kullanıcı oturum açtığında, kullanıcı geçerli sayfada kalır. Ayrıca, açılır oturum açma formu, kullanıcı oturumu kapatmaya çalıştığında farklı "uyarı" içeriği gösterir.

Son düşünceler

Umarım, bu açılır giriş formunu ve özel giriş/çıkış butonlarını oluşturmak, Divi'nin giriş formunu yaratıcı şekillerde nasıl kullanacağınız konusunda size biraz fikir verecektir. Kendi web sitenizde benzersiz bir oturum açma deneyimi yaratmak için her oturum açma formunun (veya düğmelerin) tasarımını ve içeriğini değiştirmekten çekinmeyin.

Yorumlarda sizden haber bekliyorum.

Şerefe!