Pembuatan file bentuk Login sebaris untuk tajuk Anda dapat menjadi dorongan luar biasa bagi pengalaman pengguna. Mereka sempurna untuk situs keanggotaan dan toko online karena memungkinkan pengguna untuk masuk kapan saja dan di halaman mana pun di situs.
Dalam tutorial ini, kami akan menunjukkan cara mendesain a bentuk online menggunakan header khusus di Divi Theme Builder. Untuk melakukan hal ini, kita akan membuat header global responsif sederhana dan kemudian merancang a bentuk login online ringkas di kanan atas header menggunakan modul login Divi. Pembuatannya memerlukan sedikit kode CSS khusus, tetapi setelah semuanya siap, formulir login online akan mudah disesuaikan agar mudah disesuaikan dengan desain header apa pun menggunakan opsi desain layanan terintegrasi Divi.
Ikhtisar hasil
Berikut ini ikhtisar singkat tentang tajuk khusus dengan formulir login online yang akan kita buat dalam tutorial ini.
Dan berikut adalah formulir login online di layar tablet dan ponsel.
Berikut adalah pesan dan link logout yang akan ditampilkan saat pengguna login.
Apa yang Anda butuhkan untuk memulai
Jika Anda belum melakukannya, instal dan aktifkan tema Divi . Cukup banyak yang Anda butuhkan untuk memulai. Kami akan membuat tata letak template tajuk baru dari awal dengan Divi Theme Builder.
Menambahkan header global baru
Untuk menjalankannya, kita perlu membuat tajuk global baru untuk situs jaringan. Untuk melakukan ini, buka dasbor WordPress dan navigasikan ke Divi > Theme Builder.
Di templat situs web secara default, klik "Tambahkan Header Global" dan kemudian "Buat Header Global".
Kemudian pilih opsi Bangun dari awal.
Rancang tajuk global Divi dengan formulir login online
Kustomisasi bagian
Dari Editor Tata Letak Header Global, Anda akan dapat membuat tajuk khusus situs Anda sepenuhnya. Untuk memulai, buka pengaturan bagian biasa dan perbarui yang berikut ini:
- Gradien latar belakang warna kiri:
- Gradien latar belakang kanan:
- Arah gradien: 48 derajat
- Padding: 10 piksel di bagian atas, 10 piksel di bagian bawah, 20 piksel di sebelah kiri, 20 piksel di sebelah kanan
Untuk membuat tajuk khusus kami lebih responsif, kami akan menambahkan CSS khusus 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 satu baris
Tambahkan baris ke kolom di bagian.
Tambahkan modul gambar dengan gambar logo
Di baris kolom tunggal, tambahkan modul gambar. Di sinilah kita akan menambahkan logo untuk header.
Perbarui Gambar dan Margin Modul Gambar
Perbarui pengaturan gambar sebagai berikut:
- Gambar: [tambah logo (sekitar 64 piksel kali 64 piksel)]
- Margin: 20px benar
Perbarui parameter garis
Sebelum melangkah lebih jauh, buka pengaturan baris dan perbarui yang berikut:
- Gunakan lebar selokan khusus: YA
- Lebar selokan: 1
- Lebar: 25%
- Penjajaran baris: kiri
- Padding: 0px tinggi, 0px rendah
Menambahkan formulir login online ke baris kedua
Tambahkan satu baris
Sekarang baris pertama sudah siap, Anda akan melihat di editor bahwa baris pertama akan menempati 25% dari bagian kiri. Ini pada dasarnya akan menjadi garis yang ditunjuk untuk logo tajuk kami. Kita perlu membuat garis bagian untuk formulir dan menu login online di sisi kanan.
Tambahkan baris kedua dengan struktur ke kolom di bagian tersebut.
Tambahkan formulir login
Di baris kolom, tambahkan modul login.
Hapus konten default
Di bawah pengaturan login, hapus judul dan isi tubuh palsu.
Tambahkan formulir login dan kelas CSS khusus
Sebelum kita melangkah terlalu jauh dalam mendesain formulir login online, mari tambahkan kelas CSS dan CSS khusus ke modul login terlebih dahulu. Ini akan memungkinkan kami untuk menyiapkan struktur online dasar formulir sebelum memberikan sentuhan desain akhir pada formulir dengan opsi bawaan Divi.
Pada tab Advanced, tambahkan kelas CSS berikut:
- Kelas CSS: header-login-form
Tambahkan custom CSS berikut di area deskripsi deskripsi koneksi:
margin-bottom: 0px !important
Kemudian tambahkan custom CSS berikut di area CSS dari form login:
width: 100%;
Tambahkan CSS khusus berikut ke kotak CSS Bidang Koneksi:
padding: 5px 4% !important
Tambahkan CSS khusus ke pengaturan tata letak tajuk
Karena kami memiliki kelas CSS khusus kami ditambahkan ke modul formulir masuk, kami dapat menambahkan CSS khusus kami yang hanya akan menargetkan formulir login khusus ini.
Buka pengaturan tata letak header 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 membuat kolom login dan tombol muncul sebaris (horizontal), menyembunyikan link "Lupa sandi Anda?". »Dan tambahkan margin kecil di antara bidang.
Pengaturan saluran
Sebelum meletakkan sentuhan akhir pada formulir login online, mari perbarui parameter garis sebagai berikut:
- Gunakan lebar selokan khusus: YA
- Lebar selokan: 1
- Penjajaran garis: lurus
- Padding: 0px tinggi, 0px rendah
Pengaturan desain untuk formulir login
Kami sekarang siap untuk memperbarui pengaturan formulir login. Buka pengaturan modul formulir login dan perbarui yang berikut ini:
- Gunakan warna latar belakang: TIDAK
Bidang dan tautan teks
- Latar belakang bidang: Warna: rgba (255,255,255,0.2)
- Warna teks bidang: #ffffff
- Polisi lapangan: Lato
- Ukuran teks bidang: 14px
- Perataan teks: kanan
- Fon tautan: Lato
- Link Font Style: Bergaris Bawah
- Tautan warna teks: # ff3190
Desain tombol
- Ukuran teks tombol: 15px
- Warna Latar Tombol: # ff3190
- Lebar batas tombol: 0px
- Fon tombol: Lato
- Tombol padding: 2px di bagian atas, 2px di bagian bawah
- Margin: 15px rendah
- Padding: 0px di atas, 0px di bawah, 0px di kiri, 0px di kanan
Menambahkan menu ke baris kedua
Modul menu
Dengan form login online kami, kami dapat menambahkan menu langsung di bawah ini.
Tambahkan modul menu di bawah modul formulir masuk.
Pengaturan modul menu
Perbarui pengaturan menu sebagai berikut:
- Warna latar: rgba (0,0,0,0)
- Fon menu: Lato
- Berat font menu: tebal
- Warna teks menu: #ffffff
- Ukuran teks menu: 16px
- Perataan teks: kanan
- Warna latar belakang menu drop-down: #ffffff
- Warna garis pada menu 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 Tata Letak Header.
Kemudian juga menyimpan pengaturan generator tema.
Hasil akhir
Itu dia!
Sekarang mari kita lihat hasil akhirnya. Untuk melihat hasil akhir, cukup kunjungi halaman Anda situs jaringan.
Berikut adalah header di layar desktop.
Berikut adalah tajuk formulir login online di layar tablet.
Dan berikut adalah formulir login online di layar ponsel. Perhatikan juga menu ponsel.
Dan inilah yang akan dilihat pengguna saat masuk.
final pikiran
Header global khusus dengan formulir login online ini pasti akan berguna untuk situs keanggotaan atau toko online mana pun. Hanya dengan sedikit CSS khusus, kami dapat mengubah modul login Divi menjadi formulir login online elegan yang akan terlihat bagus di header mana pun. situs jaringan. Saya harap ini bermanfaat untuk proyek Anda berikutnya.
Saya menunggu kabar dari Anda di komentar.
Untuk kesehatanmu!
