Perlu membuat tajuk global dengan bentuk koneksi di DIVI?
Pembuatan file bentuk login di header Anda bisa menjadi dorongan besar untuk pengalaman pengguna.
Mereka ideal untuk situs web berlangganan dan toko online karena memungkinkan pengguna untuk masuk kapan saja di halaman mana pun situs web.
Dalam tutorial ini, kami akan menunjukkan cara mendesain a bentuk login online untuk pengguna pada header khusus. Mari kita mulai!
penelitian
Berikut adalah preview cepat dari custom header dengan login form yang akan kita buat dalam tutorial ini.
Berikut adalah pesan dan link "log out" yang akan ditampilkan saat pengguna login.
Menambahkan header global baru
Untuk menjalankannya, kita perlu membuat tajuk global baru untuk situs jaringan. Untuk melakukannya, buka dasbor WordPress dan arahkan ke Divi > Theme Builder.
Di templat situs web secara default, klik "Add Global Header", lalu klik "Build Global Header".
Desain tajuk global Divi dengan formulir masuk horizontal
Sesuaikan bagian
Dari editor Tata Letak Header Global, Anda dapat membuat header yang dipersonalisasi situs web Memulai dari nol. Untuk memulai, buka pengaturan di bagian normal dan perbarui yang berikut ini:
- Warna gradien latar belakang kiri:
- Warna gradien latar belakang kanan:
- Arah gradien: 48 derajat
- Margin Dalam: 10px Atas, 10px Bawah, 20px Kiri, 20px Kanan
Untuk membuat header kita lebih responsif, kita akan menambahkan CSS kustom berikut ke elemen bagian utama.
display:flex;
justify-content:center;
align-items:center;
Tambahkan logo tajuk ke baris pertama
Sekarang bagian sudah siap, kita bisa menambahkan baris pertama.
Tambahkan baris
Tambahkan baris ke kolom di bagian.
Tambahkan modul Gambar dengan gambar logo
Di baris satu kolom, tambahkan modul Gambar. Ini akan menjadi tempat kita menambahkan logo header.
Perbarui Gambar dan Margin Modul Gambar
Perbarui pengaturan gambar sebagai berikut:
- Gambar: [tambahkan logo (sekitar 64 x 64 piksel)]
- Margin: 20px kanan
Perbarui parameter garis
Sebelum melangkah lebih jauh, buka pengaturan baris dan perbarui yang berikut:
- Gunakan lebar selokan khusus: YA
- Jarak kolom: 1
- Lebar maksimum: 25%
- Penjajaran: kiri
- Margin Internal: 0px Atas, 0px Bawah
Menambahkan formulir login horizontal ke baris kedua
Tambahkan baris
Sekarang baris pertama sudah siap, Anda akan melihat di editor bahwa baris pertama akan mengambil 25% dari bagian kiri. Ini pada dasarnya akan menjadi garis yang ditunjuk untuk logo header kita. Kita perlu membuat baris bagian untuk formulir login dan menu di sisi kanan.
Tambahkan baris kedua dengan struktur ke kolom di bagian tersebut.
Tambahkan formulir login
Di dalam baris satu kolom, tambahkan modul 'Connect'.
Hapus konten default
Di bawah pengaturan modul Login, hapus judul palsu dan konten isi.
Tambahkan kelas khusus untuk formulir masuk dan CSS
Sebelum kita melangkah terlalu jauh dalam mendesain form login, pertama-tama kita tambahkan class CSS dan custom CSS ke modul Login. Ini akan mengatur struktur online dasar formulir sebelum memberikan sentuhan akhir pada desain formulir dengan opsi bawaan Divi.
Lihat juga panduan kami di Cara membuat menu samping geser dan responsif di DIVI
Di bawah tab Advanced, tambahkan kelas CSS berikut:
- Kelas CSS: header-login-form
Tambahkan CSS khusus berikut ke kotak CSS deskripsi koneksi:
margin-bottom: 0px !important
Kemudian tambahkan CSS khusus berikut di area CSS formulir login:
width: 100%;Tambahkan CSS khusus berikut ke area CSS Bidang Masuk:
padding: 5px 4% !important
Tambahkan CSS khusus ke pengaturan tata letak tajuk
Karena kami menambahkan kelas CSS khusus kami ke modul formulir masuk, kami dapat menambahkan CSS khusus kami yang hanya akan menargetkan formulir masuk tertentu itu.
Baca juga tutorial kami di Cara membuat halaman blog dengan modul Blog dengan DIVI
Buka pengaturan tata letak tajuk dan tambahkan CSS khusus berikut:
.header-login-form .et_pb_login_form form {
display: flex;
justify-content: flex-end;
align-items: center;
}
.header-login-form .et_pb_login_form .et_pb_contact_form_field {
padding-bottom: 0px;
margin-right: 5px;
}
.header-login-form .et_pb_forgot_password {
display:none;
}CSS ini akan menyebabkan kolom dan tombol login ditampilkan sebaris (horizontal), pesan "Lupa kata sandi Anda?" akan disembunyikan, dan margin kecil di antara bidang akan ditambahkan.
Pengaturan saluran
Sebelum kita memberikan sentuhan akhir pada form login, mari kita update parameter baris sebagai berikut:
- Gunakan Lebar Talang Kustom: YA
- Jarak kolom: 1
- Penjajaran: Kanan
- Margin Internal: 0px Atas, 0px Bawah
Pengaturan desain untuk formulir login
Kami sekarang siap untuk memperbarui pengaturan formulir login. Buka pengaturan modul Connect dan perbarui yang berikut ini:
- Gunakan warna latar belakang: TIDAK
Bidang dan tautan teks
- Bidang Warna Latar Belakang: rgba(255,255,255,0.2)
- Bidang Warna Teks: #ffffff
- Font Bidang: Lato
- Bidang Ukuran Teks: 14px
- Perataan teks: kanan
Desain tombol
- Gunakan gaya khusus untuk Tombol: TIDAK
- Ukuran Teks Tombol: 15px
- Tombol latar belakang: #ff3190
- Tombol lebar batas: 0 piksel
- Font Tombol: Lato
- Tombol Margin: Atas 2px, Bawah 2px
- Tombol Padding: Bawah 15px
- Margin Dalam: 0px Atas, 0px Bawah, 0px Kiri, 0px Kanan
Menambahkan menu ke baris kedua
modul menu
Dengan formulir login kami di tempat, kami dapat menambahkan menu langsung di bawah ini.
Tambahkan modul Menu di bawah modul Login.
Pengaturan modul menu
Perbarui pengaturan menu sebagai berikut:
- Latar belakang: rgba(0,0,0,0)
- Menu Font: Lato
- Menu Cahaya Lembut: Tebal
- Warna teks menu: #ffffff
- Ukuran Teks Menu: 16px
- Perataan teks: kanan
- Warna latar belakang menu tarik-turun: #ffffff
- Warna baris tarik-turun: rgba(0,0,0,0)
- Warna teks menu tarik-turun: #000000
- Warna latar belakang menu seluler: #ffffff
- Warna teks menu seluler: #000000
- Warna ikon keranjang: #ffffff
- Warna ikon pencarian: #ffffff
- Warna Ikon Menu Hamburger: #ffffff
Menyimpan header formulir login
Pastikan untuk menyimpan tata letak sebelum keluar dari editor header.
Selanjutnya, simpan juga pengaturan Theme Builder.
Hasil akhir
Selesai!
Sekarang mari kita lihat hasil akhirnya. Untuk melihat hasil akhirnya, yang harus Anda lakukan adalah mengunjungi halaman di situs web Anda.
Dan inilah yang akan dilihat pengguna saat masuk.
Unduh DIVI Sekarang!!!
Kesimpulan
Header global khusus dengan formulir login ini pasti akan berguna untuk situs web berlangganan atau toko online mana pun.
Hanya dengan sedikit CSS khusus, kami dapat mengubah modul Login Divi menjadi formulir login elegan yang akan sangat cocok dengan header situs web mana pun.
Semoga bermanfaat untuk project selanjutnya. Jika Anda memiliki masalah atau saran, temukan kami di bagian komentar untuk mendiskusikannya.
Namun, Anda juga bisa berkonsultasi sumber daya kita, jika Anda memerlukan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda, dengan membaca 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.
...
