Apakah Anda ingin membuat bentuk login popup di Divi dengan tombol login / logout?
Pembuatan file bentuk masuk munculan di Divi dapat menjadi cara yang efektif untuk meningkatkan desain situs Anda dan pengalaman pengguna masuk/keluar.
Idenya adalah untuk menciptakan a bentuk login yang ditampilkan dalam pop-up setiap kali pengguna mengklik tombol login di header halaman.
Ini lebih nyaman daripada mengarahkan pengguna ke halaman login khusus.
Dalam tutorial ini, kita akan membuat formulir login pop-up dengan tombol login dan logout khusus di Divi.
Dengan menggunakan modul Divi Login dan beberapa modul Tombol, kami akan menciptakan pengalaman masuk popup yang mulus di front-end dengan memungkinkan pengguna untuk masuk dan keluar tanpa dialihkan ke halaman lain.
Mari kita mulai!
penelitian
Berikut sekilas desain yang akan kita buat dalam tutorial ini.
Perhatikan bagaimana tombol login dan tombol logout berubah masing-masing. Dan, begitu pengguna masuk, mereka tetap berada di halaman saat ini.
Selain itu, formulir masuk pop-up menampilkan konten "peringatan" yang berbeda setiap kali pengguna mencoba keluar.
Apa yang Anda butuhkan untuk memulai
Meskipun Anda dapat menambahkan formulir login pop-up dan tombol login/logout kustom ke header kustom mana pun, kami akan menggunakan header yang sudah dibuat sebelumnya untuk mempercepat proses dan memulai desain dengan cepat.
Impor templat tajuk "Paket Tata Letak Crowdfunding" ke pembuat Divi
Untuk memulai, unduh Header dan Footer Paket Tata Letak Divi Crowdfunding gratis . Untuk melakukannya, buka posting blog .
Kemudian masukkan email Anda untuk mengunduh file zip.
Setelah itu, unzip file tersebut sehingga siap untuk diimpor.
Untuk mengimpor file ke editor tema, ikuti langkah-langkah berikut:
- Buka Divi > Pembuat Tema.
- Klik pada ikon portabilitas.
- Di jendela pop-up Portabilitas, pilih tab impor.
- Pilih file unzip yang diunduh sebelumnya untuk diimpor.
- Cliquer sur Impor Pembuat Tema Divi template.
- Klik ikon edit untuk mengedit header yang diimpor.
Membuat formulir login popup di Divi
Bagian 1: Membuat Tombol Masuk dan Keluar
Setelah di Editor Tata Letak Header Global, buka tampilan lapisan sehingga Anda dapat dengan mudah melihat semua elemen.
Di baris atas bagian header, hapus modul Ikuti Media Sosial di sebelah tombol Login di kolom 3.
Baca juga: Divi: Perbandingan berbagai jenis gradien
Membuat tombol login
Untuk membuat tombol login kami, buka pengaturan modul Tombol di kolom 3 baris atas.
Perbarui item berikut di bawah tab desain:
- Ikon Tombol: ikon kunci (lihat tangkapan layar)
- Penempatan Ikon Tombol: Kanan
- Hanya Tampilkan Ikon Saat Arahkan ke Tombol: TIDAK
- Padding: 0,5em (Atas dan Bawah), 2em (Kiri), 0,7em (Kanan)
Di bawah tab Advanced, tetapkan tombol dua kelas CSS khusus sebagai berikut:
- Kelas CSS: et-toggle-popup et-popup-login-button
Pembuatan tombol logout
Untuk membuat tombol logout kita, duplikat tombol login yang ada di kolom 3.
Untuk membantu membedakan kedua tombol tersebut, Anda bisa mengupdate label masing-masing. Selanjutnya buka pengaturan modul Duplicate Button di kolom 3.
Ubah teks tombol untuk membaca "Logout".
Perbarui item berikut di bawah tab desain:
- Ikon Tombol: ikon buka kunci (lihat tangkapan layar)
Di bawah tab Advanced, perbarui tombol Kelas CSS sebagai berikut:
- Kelas CSS: et-toggle-popup et-popup-logout-button
Kelas pertama akan tetap sama tetapi kelas kedua akan berbeda.
Bagian 2: Membuat Bagian Popup
Setelah tombol selesai, kami siap membuat bagian popup yang akan berfungsi sebagai popup kami yang berisi bentuk koneksi.
Di bawah bagian header, tambahkan bagian reguler baru.
Kemudian masukkan baris satu kolom di dalam bagian.
Pengaturan bagian
Sebelum memperbarui baris, buka pengaturan bagian.
Di bawah tab Konten, beri bagian warna latar belakang putih:
- Latar belakang: #ffffff
Di bawah tab Mendesain, perbarui berikut ini:
- Lebar: 100%
- Lebar Maks: 800 piksel (Desktop), 80% (Tablet), 100% (Ponsel)
- Perataan Bagian: Tengah
- Tinggi: otomatis (Desktop dan Tablet), 100% (Telepon)
- Tinggi Maks: 100%
- Padding: 0px (Atas dan Bawah)
- Sudut Bulat: 10px
- Bayangan Kotak: lihat tangkapan layar
- Posisi Vertikal Bayangan Kotak: 0px
- Kekuatan Kabur: 100 piksel
- Kekuatan Sebaran: 50px
Di bawah tab Advanced, perbarui berikut ini:
Tambahkan kelas CSS khusus.
- Kelas CSS: et-popup-login
Tambahkan cuplikan CSS khusus ke elemen utama:
overscroll-behavior: contain;Perbarui opsi Visibilitas dan Posisi.
- Luapan Horisontal: Tersembunyi
- Overflow Vertikal: otomatis
- Posisi: Tetap
- Lokasi: Pusat Pusat
- Indeks Z: 999999
Pengaturan saluran
Dengan pengaturan bagian di tempat, buka pengaturan baris dan perbarui pengaturan desain berikut:
- Gunakan Lebar Talang Kustom: YA
- Lebar Talang: 1
- Lebar: 100%
- Lebar Maks: 100%
- Padding: 0px (Atas), 5vh (Bawah)
Bagian 3: Membuat ikon popup tutup
Untuk membuat ikon tutup popup yang akan menutup/menyembunyikan popup saat diklik, kita akan menggunakan modul Blurb.
Tambahkan modul Blurb baru ke baris.
Buka pengaturan modul dan hapus judul dan teks isi.
Kemudian tambahkan ikon sebagai berikut:
- Gunakan Ikon : YA
- Ikon: ikon "x" (lihat tangkapan layar)
Di bawah tab Mendesain, perbarui berikut ini:
- Warna Ikon: #004e43
- Penjajaran Gambar/Ikon: terpusat
- Gunakan Ukuran Font Ikon: YA
- Ukuran Font Ikon: 50px
- Lebar: 50px
- Modul penyelarasan: kanan
- Tinggi: 50px
Di bawah tab Advanced, tambahkan kelas CSS ke modul Blurb sebagai berikut:
- Kelas CSS: et-toggle-popup
Bagian 4: Membuat Formulir Login “Masuk” dan “Keluar”
Agar memiliki konten dan desain yang berbeda untuk formulir masuk saat masuk dan keluar, kami akan membuat dua modul formulir masuk yang berbeda.
Yang pertama adalah form login yang akan ditampilkan setiap kali user “log out”. Yang kedua adalah form login yang akan ditampilkan setiap kali pengguna “login”.
Pembuatan formulir "Logged Out"
Untuk membuat formulir login “Logged Out”, tambahkan modul Login baru di bawah ikon modul Blurb di dalam baris.
Buka pengaturan modul dan ubah pengaturan berikut:
tab konten
- Redirect Ke Halaman Saat Ini: YA
- Gunakan Warna Latar Belakang: TIDAK
tab desain
- Warna Latar Belakang Bidang: rgba (0,78,67,0.05)
- Warna Latar Fokus Bidang: rgba (0,78,67,0,15)
- Perataan Teks: Terpusat
- Warna Teks: Gelap
- Judul Font: Poppins
- Judul Font Berat: semi-tebal
- Warna Teks: #000000
- Judul Baris Tinggi: 1,3 em
- Font Tubuh: Work Sans
Untuk memperbarui gaya tombol, salin gaya tombol dari tombol masuk yang kita buat ke kolom ketiga di baris bagian Header.
Kemudian tempel gaya tombol ke grup opsi tombol di pengaturan koneksi di bawah tab Desain.
Selanjutnya, perbarui gaya tombol untuk formulir login sebagai berikut:
- Tombol
- Warna Teks: #ffffff
- Latar belakang: #004e43
- Latar Belakang (Arahkan Arahkan kursor): #00683c
- Lebar Perbatasan: 0 piksel
- Padding: 15px (Atas dan Bawah)
Selanjutnya, perbarui opsi ukuran sebagai berikut:
- Lebar: 100%
- Lebar Maks: 80% (Desktop), 90% (Tablet), 95% (Ponsel)
- Modul Keselarasan: Pusat
Tab Lanjutan
Di bawah tab Advanced, perbarui kelas CSS dan CSS khusus sebagai berikut:
- Kelas CSS: formulir et-logout
CSS khusus untuk deskripsi koneksi:
width: 100% !important;
float: none !important;CSS khusus untuk formulir masuk:
width: 100% !important;
padding: 0px !important;Ini akan memastikan bahwa modul Login mencakup lebar baris/kolom penuh, bahkan di desktop.
Pembuatan formulir "Masuk"
Sekarang setelah versi "Logged Out" dari formulir selesai, kita perlu membuat versi "Logged In" yang akan memiliki konten dan gaya berbeda untuk memaksimalkan pengalaman pengguna.
Untuk membuat form login "Logged Out", duplikat form login yang ada.
Selanjutnya, perbarui label untuk masing-masing bentuk sambungan masing-masing.
Buka pengaturan duplikat (formulir "Logged In") dan tambahkan judul situs sebagai konten dinamis ke judul modul formulir login.
Kemudian buka pengaturan konten dinamis judul situs dan perbarui konten sebelum dan sesudah sebagai berikut:
- Sebelum: “Anda mencoba keluar dari Tema Elegan”
- Setelah: ". "
Ini akan membuat pemberitahuan dinamis yang bagus untuk pengguna yang mencoba keluar dari situs.
Kemudian tambahkan header H3 berikut ke badan:
<h3>Are you sure?</h3>
Jika Anda pernah melihat isi modul Login saat login, Anda tahu bahwa ada pesan pribadi yang menyertakan tautan "log out" yang dipersonalisasi. Untuk membuat tautan ini terlihat seperti tombol, kita perlu menyesuaikan pengaturan font/teks dari tautan isi sebagai berikut:
- Pilih tab Link di bawah opsi Teks Tubuh.
- Font Tautan: Work Sans
- Berat Huruf Tautan: Semi Tebal
- Gaya Huruf: TT
- Perataan Teks Tautan: terpusat
- Warna Teks Tautan: #ffffff
CATATAN: Anda tidak akan dapat melihat pratinjau hasil ini sampai Anda melihat formulir di halaman langsung.
Di bawah tab Advanced, perbarui kelas CSS dan CSS khusus sebagai berikut:
- Kelas CSS: et-login-in-form
CSS khusus untuk formulir masuk:
display:none;
Bagian 5: Tambahkan kode khusus
Untuk menambahkan CSS dan JQuery khusus yang diperlukan untuk fungsionalitas formulir login pop-up, buat modul Kode baru di bawah modul Login terakhir.
CSS
Buka pengaturan modul Kode dan rekatkan CSS berikut ke dalam kotak kode, pastikan untuk membungkus CSS dalam tag gaya yang diperlukan.
/* 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;
}Perhatikan bahwa CSS menggunakan kelas "terhubung" yang dibangun di WordPress untuk menyembunyikan/menampilkan tombol login/logout yang sesuai dan bentuk Pesan login “Masuk”/”Keluar” setiap kali pengguna masuk atau keluar.
JQuery
Di bawah tag gaya akhir, tempelkan JQuery berikut dan pastikan untuk membungkus kode dalam tag skrip yang diperlukan.
(function ($) {
$(document).ready(function () {
$(".et-toggle-popup").click(function (e) {
e.preventDefault();
$(".et-popup-login").fadeToggle(500);
});
});
})(jQuery);Cuplikan ini hanya mengaktifkan bagian popup setiap kali pengguna mengklik salah satu dari tiga item dengan kelas " dan-toggle-popup (tombol masuk dan keluar ditambah ikon presentasi "x").
Lihat juga: Divi: Cara Menggunakan Pengaturan Topeng Latar Belakang dan Opsi Transformasi Pola
Selesai!
Jangan lupa untuk menyimpan perubahan yang Anda buat pada template di pembuat tema. Setelah disimpan, Anda dapat melihat hasilnya di halaman langsung.
Hasil akhir
Berikut adalah hasil akhir di komputer, tablet, dan ponsel.
Perhatikan bagaimana tombol login dan tombol logout berubah. Dan, setelah pengguna masuk, pengguna tetap berada di halaman saat ini.
Selain itu, formulir masuk popup menampilkan konten "peringatan" yang berbeda setiap kali pengguna mencoba keluar.
Unduh DIVI sekarang!!!
Kesimpulan.
Semoga dengan membuat formulir masuk sembulan dan tombol masuk/keluar khusus ini akan memberi Anda wawasan tentang cara menggunakan formulir masuk Divi secara kreatif.
Jangan ragu untuk menyesuaikan desain dan konten dari setiap formulir login (atau tombol) untuk menciptakan pengalaman login yang unik di situs web Anda sendiri.
Kami juga berharap tutorial ini akan menginspirasi Anda untuk proyek Divi Anda berikutnya. Jika Anda memiliki masalah atau saran, temukan kami di bagian komentar untuk mendiskusikannya.
Anda juga dapat berkonsultasi sumber daya kita, jika Anda membutuhkan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda.
Jangan ragu untuk juga berkonsultasi dengan panduan kami di Pembuatan blog WordPress atau yang di Divi: tema WordPress terbaik sepanjang masa.
Namun sementara itu, bagikan artikel ini di berbagai jejaring sosial Anda.
...
