Cara Mendesain Formulir Masuk Sebaris untuk Header Global Kustom di Divi

Membuat formulir masuk sebaris untuk tajuk Anda dapat menjadi dorongan luar biasa untuk pengalaman pengguna. Mereka sempurna untuk situs keanggotaan dan toko online karena sangat memudahkan pengguna untuk masuk kapan saja atau di halaman situs mana pun. Dalam tutorial ini, kami akan menunjukkan kepada Anda cara mendesain formulir login sebaris untuk pengguna tajuk khusus Divi Theme Builder. Untuk melakukan ini, kita akan membuat tajuk global responsif sederhana dan kemudian merancang formulir masuk sebaris yang ringkas di kanan atas tajuk menggunakan Modul Masuk Divi. Pembuatannya memang memerlukan sedikit CSS khusus, tetapi setelah semuanya siap, akan mudah untuk menyesuaikan formulir login sebaris agar sesuai dengan desain header apa pun dengan mudah menggunakan opsi desain bawaan Divi.

Mari kita mulai!

Sneak Peek

Berikut ini sekilas tentang header kustom dengan formulir login inline yang akan kita buat dalam tutorial ini.

Dan berikut adalah form login inline pada tampilan tablet dan ponsel.

Berikut adalah pesan dan link “log out” yang akan muncul saat pengguna login.

Unduh Tata Letak Header Formulir Masuk Sebaris GRATIS

Untuk mengetahui tata letak dari tutorial ini, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah. Untuk mendapatkan akses ke unduhan, Anda harus berlangganan daftar email Divi Daily kami dengan menggunakan formulir di bawah ini. Sebagai pelanggan baru, Anda akan menerima lebih banyak kebaikan Divi dan paket Tata Letak Divi gratis setiap hari Senin! Jika Anda sudah ada dalam daftar, cukup masukkan alamat email Anda di bawah ini dan klik unduh. Anda tidak akan berlangganan atau menerima email tambahan.

Unduh File

Unduh Gratis

Bergabunglah dengan Divi Newsletter dan kami akan mengirimkan email kepada Anda salinan Paket Tata Letak Halaman Arahan Divi terbaik, ditambah banyak sumber daya, tip, dan trik Divi yang luar biasa dan gratis. Ikuti dan Anda akan menjadi master Divi dalam waktu singkat. Jika Anda sudah berlangganan cukup ketik alamat email Anda di bawah ini dan klik unduh untuk mengakses paket tata letak.

UNDUH

Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan dapatkan akses ke paket tata letak Divi mingguan gratis!

Untuk mengimpor tata letak ke halaman Anda, cukup ekstrak file zip dan tambahkan salah satu file json ke Divi Theme Builder menggunakan opsi Theme Builder Portability.

Langsung saja ke tutorialnya ya?

Apa yang Anda Butuhkan untuk Memulai

Jika belum, instal dan aktifkan Tema Divi. Cukup banyak yang Anda butuhkan untuk memulai. Kami akan membuat tata letak templat tajuk baru dari awal dengan Divi Theme Builder.

Menambahkan Header Global Baru

Agar semuanya berjalan lancar, kita harus membuat Header Global baru untuk situs web kita. Untuk melakukan ini, buka Dasbor WordPress dan arahkan ke Divi > Theme Builder.

Pada Default Website Template, klik “Add Global Header” dan kemudian “Build Global Header”.

Kemudian pilih opsi untuk Membangun Dari Awal.

Merancang Header Global Divi dengan Formulir Login Sebaris

Menyesuaikan Bagian

Dari editor Tata Letak Header Global, Anda akan dapat membuat tajuk khusus untuk situs Anda sepenuhnya dari awal. Untuk memulai, buka pengaturan untuk bagian reguler dan perbarui yang berikut:

• Warna Kiri Gradien Latar Belakang:
• Warna Kanan Gradien Latar Belakang:
• Arah Gradien: 48 derajat
• Padding: 10px atas, 10px bawah, 20px kiri, 20px kanan

Untuk membuat header kustom kita lebih responsif, kita akan menambahkan CSS kustom berikut ke Elemen Utama bagian.

display:flex;
justify-content:center;
align-items:center;

Menambahkan Logo Header ke Baris Pertama

Sekarang bagian sudah siap, kita dapat menambahkan baris pertama.

Menambahkan baris

Tambahkan baris satu kolom ke bagian.

Tambahkan Modul Gambar dengan Gambar Logo

Di baris satu kolom, tambahkan modul gambar. Ini akan menjadi tempat kita menambahkan logo untuk header.

Perbarui Gambar Modul Gambar dan Margin

Perbarui pengaturan gambar sebagai berikut:

• Gambar: [tambahkan logo (sekitar 64px kali 64px)]

• Margin: 20px kanan

Perbarui Pengaturan Baris

Sebelum kita melangkah lebih jauh, buka pengaturan untuk baris dan perbarui yang berikut:

• Gunakan Lebar Talang Kustom: YA
• Lebar Talang: 1
• Lebar: 25%
• Penjajaran Baris: kiri
• Padding: 0px atas, 0px bawah

Menambahkan Formulir Login Sebaris ke Baris Kedua

Menambahkan baris

Sekarang setelah baris pertama siap digunakan, Anda akan melihat di editor bahwa baris pertama akan mengambil 25% dari bagian di sebelah kiri. Ini pada dasarnya akan menjadi baris yang ditunjuk untuk logo header kita. Kita perlu membuat baris bagian untuk formulir dan menu login sebaris di sisi kanan.

Tambahkan baris kedua dengan struktur satu kolom ke bagian.

Tambahkan Formulir Masuk

Di dalam baris satu kolom, tambahkan modul login.

Hapus Konten Default

Di bawah pengaturan login, hapus judul tiruan dan konten isi.

Tambahkan Formulir Masuk Kelas Kustom dan CSS

Sebelum kita terlalu jauh dalam mendesain formulir login sebaris, pertama-tama mari kita tambahkan kelas CSS dan CSS khusus ke modul login. Ini akan memungkinkan kita untuk mendapatkan struktur inline dasar dari formulir sebelum kita menempatkan sentuhan desain akhir pada formulir dengan opsi bawaan Divi.

Di bawah Tab Tingkat Lanjut, tambahkan Kelas CSS berikut:

• Kelas CSS: header-login-form

Tambahkan CSS Kustom berikut ke kotak CSS Deskripsi Login:

margin-bottom: 0px !important

Selanjutnya tambahkan Custom CSS berikut ke kotak Login Form CSS:

width: 100%;

Tambahkan CSS Kustom berikut ke kotak CSS Bidang Masuk:

padding: 5px 4% !important

Tambahkan CSS Kustom ke Pengaturan Tata Letak Header

Karena kami memiliki Kelas CSS khusus yang ditambahkan ke modul formulir masuk, kami dapat menambahkan CSS khusus kami yang hanya akan menargetkan formulir masuk khusus ini.

Buka pengaturan tata letak header dan tambahkan CSS Kustom 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 tampilan tombol inline (horizontal), menyembunyikan "lupa kata sandi Anda?" link, dan tambahkan sedikit margin di antara bidang.

Pengaturan Baris

Sebelum kita memberikan sentuhan terakhir pada form login inline, mari kita perbarui pengaturan baris sebagai berikut:

• Gunakan Lebar Talang Kustom: YA
• Lebar Talang: 1
• Penjajaran Baris: kanan
• Padding: 0px atas, 0px bawah

Pengaturan Desain Formulir Masuk

Sekarang kita siap untuk memperbarui pengaturan form login. Buka pengaturan modul formulir masuk dan perbarui yang berikut:

• Gunakan Warna Latar Belakang: TIDAK

Bidang dan Teks Tautan

• Latar Belakang Bidang: Warna: rgba(255,255,255,0.2)
• Warna Teks Bidang: #ffffff
• Font Bidang: Lato
• Ukuran Teks Bidang: 14px
• Perataan Teks: kanan
• Font Tautan: Lato
• Gaya Font Tautan: Garis Bawah
• Warna Teks Tautan: #ff3190

Desain Tombol

• Ukuran Teks Tombol: 15px
• Warna Latar Tombol: #ff3190
• Lebar Perbatasan Tombol: 0px
• Font Tombol: Lato
• Tombol Padding: 2px atas, 2px bawah
• Margin: bawah 15px
• Padding: 0px atas, 0px bawah, 0px kiri, 0px kanan

Menambahkan Menu ke Baris Kedua

Modul Menu

Dengan formulir login sebaris kami, kami dapat menambahkan menu langsung di bawahnya.

Tambahkan modul menu di bawah modul formulir login.

Pengaturan Modul Menu

Perbarui pengaturan menu sebagai berikut:

• Warna Latar Belakang: rgba(0,0,0,0)
• Font Menu: Lato
• Berat Font Menu: Tebal
• Warna Teks Menu: #ffffff
• Ukuran Teks Menu: 16px
• Perataan Teks: kanan
• Warna Latar Menu Dropdown: #ffffff
• Warna Garis Menu Dropdown: rgba(0,0,0,0)
• Warna Teks Menu Dropdown: #000000
• Warna Latar Menu Seluler: #ffffff
• Warna Teks Menu Seluler: #000000
• Warna Ikon Keranjang Belanja: #ffffff
• Warna Ikon Pencarian: #ffffff
• Warna Ikon Menu Hamburger: #ffffff

Menyimpan Header Formulir Login Sebaris

Pastikan untuk menyimpan tata letak sebelum Anda keluar dari editor tata letak header.

Kemudian simpan Pengaturan Pembuat Tema juga.

Hasil Akhir

Itu dia!

Sekarang mari kita lihat hasil akhirnya. Untuk melihat hasil akhir, cukup kunjungi halaman di situs web Anda.

Berikut adalah header pada tampilan desktop.

Berikut adalah header form login inline pada tampilan tablet.

Dan berikut adalah form login inline pada tampilan ponsel. Perhatikan juga menu ponsel.

Dan inilah yang akan dilihat pengguna setelah masuk.

Pikiran Akhir

Header Global kustom dengan formulir login sebaris ini pasti akan berguna untuk situs keanggotaan atau toko online mana pun. Hanya dengan sedikit CSS kustom, kami dapat mengubah modul login Divi menjadi formulir login inline yang elegan yang akan ditempatkan dengan baik di dalam header situs web mana pun. Mudah-mudahan ini akan berguna untuk proyek Anda berikutnya.

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!