Divi'de Yaratıcı Bir Popup Giriş Formu Nasıl Tasarlanır

Güzel bir giriş formu, web sitenizin kullanıcı deneyimini artırmaya yardımcı olur. Bugünkü eğitimimizin fikri, ana sayfadaki giriş düğmesine tıkladığınızda açılan Divi Builder'ı kullanarak bir giriş formu oluşturmaktır. Çoğu zaman, giriş düğmesine tıkladığımızda, basit bir açılır form çok daha kullanışlı ve ferahlatıcı olduğunda, giriş sayfasına yönlendiriliyoruz. Bugün, yaratıcı bir açılır giriş formu tasarlamayı öğreneceğiz. Bunu Divi'nin login modülü ve bazı buton modülleri yardımıyla oluşturacağız. O halde bugünün eğitimine gecikmeden başlayalım.

Not: Yalnızca ön uç tasarımı ile çalışacağız. Örneğin birisi giriş yapmakta sorun yaşıyorsa, örneğin birinin şifresini sıfırlaması gerekiyorsa, geleneksel giriş sayfasına geçmemiz gerekiyor. Özel yapım oturum açma sayfalarına hayran olan kişiler için bu eğitim mükemmel bir seçimdir.

Ön izleme

İşte bugünün tasarım önizlemesi. Logout butonuna tıkladığımızda login formlarının görünmesine neden olduğunu ve logoout butonuna tıkladığımızda çıkıştan önce bir uyarı penceresinin geldiğini görebiliriz.

Giriş/Çıkış Düğmeleri ile Açılır Giriş Formu

Tasarıma başlamak için önce Divi'ye gitmeniz gerekir.

Harika Web Siteleri Oluşturun

En iyi ücretsiz sayfa oluşturucu Elementor ile

Şimdi başla

Şimdi Divi's Crowdfunding düzen paketleri üstbilgisini ve altbilgisini bu sayfadan indirmemiz gerekiyor. E-posta Kimliğinizi girin ve indir'i tıklayın.

Ardından tekrar indirmek için bir seçenek göreceksiniz ve tıklayın. Şimdi, indirme tamamlandıktan sonra dosyayı açın ve Divi oluşturucuya geri dönün ve taşınabilirlik seçeneğini tıklayın.

Şimdi aşağıda yazılı olan diğer prosedürü takip edin.

• Taşınabilirlik açılır penceresinden içe aktarma sekmesini seçin.
• İndirilen Json dosyasını sıkıştırılmamış klasörden yükleyin.
• İçe aktar düğmesini tıklayın.
• Ardından başlığın ayarlarını yapmak için düzenle'yi tıklayın.

Bölüm 1: Oturum Açma/Çıkış Düğmesi Oluşturma

İlk olarak, tüm öğeleri kolayca görebilmemiz için katmanları açın. Başlık bölümünün üst satırından sosyal medya modüllerini silin.

Giriş Düğmesi Oluşturma

Üst sıraların 4. sütununda zaten bir giriş düğmesi var. Değiştireceğiz.

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ş sekmesinden düğmeye iki özel CSS Sınıfı ekleyin:

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

Çıkış Düğmesi

Çıkış düğmemizi oluşturmak için 4. sütundaki mevcut Giriş düğmesini klonlayın. Ayrıca, daha fazla tanımlama için bunları etiketleyin.

Klonlanan düğme metnini "Çıkış" olarak değiştirin.

Tasarım sekmesinden düğme simgesini aşağıda belirtildiği gibi değiştirin.

Son olarak, gelişmiş sekmesinden CSS Sınıfını değiştirin.

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

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

Düğmeleri başarıyla oluşturduk. Hayır, form görevi görecek pop-up bölümünü tasarlayacağız. Bunu oluşturmak için başlık bölümünün altına normal bir bölüm ekleyin.

Bölüm Ekleme ve Ayarlar

Bölüme beyaz bir arka plan verelim.

• Arka Plan Rengi: #ffffff

Bölümün tasarım sekmesinde aşağıdaki ayarlamaları yapın.

• 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ölgesi Dikey Konumu: 0px
• Kutu Gölge Bulanıklığı Gücü: 100 piksel
• Kutu Gölge Yayılma Gücü: 50px

Gelişmiş sekmesinden bir CSS sınıfı ekleyelim.

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

Ardından ana öğeye aşağıdaki CSS kodunu ekleyin.

overscroll-behavior: contain;

Ardından, Görünürlük ve konum üzerinde bazı ayarlamalar yapın.

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

Satır Ekleme ve Ayarlar

Yeni bölüme tek sütunlu bir satır ekleyelim.

Satır ayarlarını açın ve aşağıdaki ayarlamaları yapın.

• Ö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

Bir açılır pencere kapatma simgesi oluşturmak için bir tanıtıcı modül kullanacağız.

Modül metinlerini ayarlardan silin ve aşağıdaki simgeyi ekleyin.

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

Tasarım sekmesinden aşağıdaki ayarları uygulayın.

• 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ş sekmesinden tanıtım yazısı modülüne bir CSS sınıfı ekleyin.

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

4. Bölüm: Form Oluşturma

Giriş formumuz, biri giriş yapmak için diğeri çıkış yapmak için olmak üzere iki tasarıma sahiptir. Yani iki farklı giriş formu modülü olacak. İlki, bir kullanıcı oturumu kapattığında ve oturum açması gerektiğinde görünür, diğeri ise kullanıcı oturum açtığında ve oturumu kapatmak istediğinde görünür. Kolay konsept, hadi işe geri dönelim.

Oturumu Kapatma Formu Oluşturma

Çıkış formumuzu oluşturmak için bir giriş modülü ekleyelim.

Şimdi form modülünün ayarlarını açın ve içerik sekmesinde değiştirin.

• 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

Şimdi katmanlardan başlık bölümüne geri dönelim. Ardından, 1. satırın 4. sütunundan için düğmesinden ayarları açın. Tasarım sekmesine gidin ve düğme seçeneğini açın. Ardından, üç nokta seçeneğine tıklayın ve "düğme stilini kopyala" seçeneğini seçin.

Şimdi yeni oluşturduğumuz giriş formuna yapıştırın.

Giriş formumuz için düğme stilini güncelleyeceğiz.

• Düğme İçin Özel Stilleri Kullan: EVET
• 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

Boyutlandırma ayarlarını da yükleyelim.

• Genişlik: %100
• Maksimum Genişlik: %80 (masaüstü), %90 (tablet), %95 (telefon)
• Modül Hizalaması: Merkez

Şimdi gelişmiş sekmeye geçin ve aşağıda yazıldığı gibi CSS sınıfını ve özel CSS'yi ekleyin.

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

Giriş açıklama kutusuna aşağıdaki kodu ekleyin.

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

Ardından bu kodu Giriş Formu kutusuna ekleyin.

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

Bu, giriş formunu böyle bir şey yapar.

“Oturum Açıldı” Formu Oluşturma

"Oturum Kapatıldı" formu ile işimiz bitti ve şimdi kullanıcı deneyimini genişletmek için farklı içeriklere sahip "Giriş Yap" formunu oluşturalım. Bunu yapmak için mevcut giriş formunu klonlayalım.

Şimdi, her form için adları güncelleyin. Ardından içerik sekmesi açık metin ayarından "Oturum Açıldı" formunu açın. Ardından başlık kutusundan sağ tarafta bir açılır menünüz olacak. Açın ve "Site Başlığı" nı seçin.

Dinamik site başlık ayarlarını açın ve aşağıdaki gibi güncelleyin.

• Önce: “Oturumu kapatmaya çalışıyorsunuz”
• Sonra: “. “

Şimdi açıklama ayarlarını tercihinize göre düzenleyin, ancak lütfen açıklamayı Başlık 3 olarak koyun.

Birçok web sitesi giriş formunda, "çıkış" bağlantısına eklenmiş özel bir mesaj gördük. Bunu oluşturmak için gelişmiş sekmeden gövde metni seçeneğini özelleştireceğiz.

• 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

Gelişmiş sekmeye gidin ve bir CSS sınıfı ve Özel CSS ekleyin.

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

Giriş Formu için Özel CSS:

display:none;

Bölüm 5: Özel Kodlar

Özel kodlar eklemek için bir kod modülü eklememiz gerekiyor. Son giriş modülünün altına bir kod modülü ekleyelim.

CSS Kodu

Stil Etiketleri içindeki modüle verilen CSS kodunu ekleyin.

/* 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;
}

JQuery Kodu

Şimdi aşağıdaki JQuery kodunu Script Etiketleri içindeki modüle atayın.

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

Tasarım Sonucu

Yani, işte tasarımımızın sonucu. Her şey yerinde ve mükemmel çalışıyor.

Son sözler

Bugün Divi'nin oturum açma modülüyle yaratıcı bir özel oturum açma formunun nasıl tasarlanacağını gördünüz. Bu şekilde, özel bir oturum açma panelinde web sitesi estetiğini eşleştirebilirsiniz. Umarım bu öğreticiyi faydalı bulursunuz ve eğer öyleyse, harika bir paylaşım olacak!