Cara Menambahkan Formulir Masuk Dropdown ke Header Divi Anda

Jika Anda sedang membangun situs web keanggotaan, memikirkan pengalaman login sangat diperlukan. Tentu, Anda dapat mengizinkan pengunjung untuk menggunakan halaman login WordPress default, tetapi Anda juga dapat mempermudah mereka dengan memasukkan formulir login di header Anda. Dalam hal ini, Anda ingin memicu formulir login saat diklik sehingga Anda dapat menghemat ruang di header. Itulah tepatnya yang akan kami tunjukkan kepada Anda dalam tutorial Divi hari ini. Kami akan membuat header global dari awal dan kami akan menyertakan formulir login dropdown. Anda juga dapat mengunduh file JSON secara gratis!

Mari kita lakukan.

Pratinjau

Sebelum kita masuk ke tutorial, mari kita lihat sekilas hasilnya di berbagai ukuran layar.

Desktop

Seluler

Unduh Template Header Global GRATIS

Untuk mendapatkan template tajuk global gratis, 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 ulang" 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!

1. Buat Template Header Global Baru

Pergi ke Divi Theme Builder

Mulailah dengan membuka Divi Theme Builder di bagian belakang situs WordPress Anda. Sesampai di sana, klik "Tambahkan Header Global".

Tambahkan Tajuk Global Baru

Menu tarik-turun akan muncul. Untuk mulai membangun dari awal, lanjutkan dengan memilih “Build Global Header”.

2. Bangun Desain Tajuk

Tambahkan Bagian #1

Gambar latar belakang

Begitu berada di dalam editor template, Anda akan melihat bagian di sana. Buka pengaturan bagian dan unggah gambar latar belakang atau gunakan warna latar belakang.

Jarak

Pindah ke tab desain bagian dan ubah padding atas dan bawah berikutnya.

• Padding Atas: 10px
• Padding Bawah: 10px

Tambahkan Baris ke Bagian

Struktur Kolom

Lanjutkan dengan menambahkan baris baru menggunakan struktur kolom berikut:

Perekat

Tanpa menambahkan modul, buka pengaturan baris dan ubah pengaturan ukuran sebagai berikut:

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Samakan Tinggi Kolom: Ya
• Lebar:
  • Desktop: 80%
  • Tablet & Telepon: 95%
• Lebar Maks: 2580px

Jarak

Ubah nilai padding berikutnya.

• Padding Atas: 0px
• Padding Bawah: 0px
• Padding Kiri: 1%
• Padding Kanan: 1%

Elemen Utama CSS

Untuk menyelaraskan kolom secara vertikal secara otomatis, kami akan menambahkan baris kode CSS berikut ke elemen utama baris di tab lanjutan:

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

Tambahkan Modul Ikuti Media Sosial ke Kolom 1

Tambahkan Jejaring Sosial

Saatnya menambah modul, dimulai dengan Modul Ikuti Media Sosial di kolom 1. Tambahkan jejaring sosial pilihan Anda.

Ubah Warna Latar Belakang Setiap Jejaring Sosial Secara Individual

Kemudian, ubah warna latar belakang setiap jejaring sosial satu per satu menjadi putih.

• Warna Latar Belakang: #ffffff

Pengaturan Ikon

Kembali ke pengaturan modul umum dan ubah warna ikon di tab desain.

• Warna Ikon: #141414

Berbatasan

Terapkan beberapa pengaturan sudut membulat di pengaturan perbatasan berikutnya.

• Semua Sudut: 100px

Tambahkan Modul Tombol ke Kolom 2

Tambahkan Salinan

Di kolom 2, satu-satunya modul yang kita butuhkan adalah Modul Tombol. Tambahkan beberapa salinan pilihan Anda.

Penjajaran Tombol

Ubah perataan modul berikutnya.

• Penjajaran Tombol: Kanan

Pengaturan Tombol

Kemudian, gaya tombol.

• Gunakan Gaya Kustom Untuk Tombol: Ya
• Ukuran Teks Tombol: 12px
• Warna Teks Tombol: #ffffff
• Warna Latar Tombol: #ff4700
• Lebar Batas Tombol: 0px
• Radius Perbatasan Tombol: 0px
• Jarak Huruf Tombol: 2px

• Font Tombol: Prata
• Gaya Font Tombol: Huruf Besar

Jarak

Dan selesaikan pengaturan tombol dengan menerapkan nilai padding berikut ke pengaturan spasi:

• Padding Atas: 16px
• Padding Bawah: 16px
• Padding Kiri: 24px
• Padding Kanan: 24px

Tambahkan Bagian #2

Warna latar belakang

Tambahkan bagian lain tepat di bawah yang sebelumnya dan gunakan warna latar belakang berikut untuk itu:

• Warna Latar Belakang: #fff4ef

Jarak

Hapus semua padding atas dan bawah default di tab desain berikutnya.

• Padding Atas: 0px
• Padding Bawah: 0px

Tambahkan Baris #1

Struktur Kolom

Lanjutkan dengan menambahkan baris baru menggunakan struktur kolom berikut:

Perekat

Tanpa menambahkan modul, buka pengaturan baris dan ubah pengaturan ukuran sebagai berikut:

• Samakan Tinggi Kolom: Ya
• Lebar:
  • Desktop: 80%
  • Tablet & Telepon: 95%
• Lebar Maks: 2580px

Jarak

Ubah juga nilai padding dalam pengaturan spasi.

• Padding Atas: 5px
• Padding Bawah: 5px
• Padding Kiri: 2%
• Padding Kanan: 2%

Pengaturan Kolom 2

Warna latar belakang

Kemudian, buka pengaturan kolom 2 dan terapkan warna latar belakang hanya pada tablet dan ponsel.

• Desktop: /
• Tablet & Telepon: #f2e8e3

Jarak

Kami menambahkan beberapa bantalan atas dan bawah pada ukuran layar yang lebih kecil juga.

• Bantalan Atas:
  • Tablet & Telepon: 25px
• Bantalan Bawah:
  • Tablet & Telepon: 25px

Tambahkan Modul Menu ke Kolom 1

Pilih Menu

Selanjutnya, kita akan menambahkan Modul Menu ke baris. Pilih menu pilihan Anda.

Unggah Logo

Unggah logo ke Modul Menu Anda.

Hapus Warna Latar Belakang

Kemudian, hapus warna latar belakang menu.

Pengaturan Teks Menu

Pindah ke tab desain modul dan gaya teks menu sebagai berikut:

• Font Menu: Prata
• Warna Teks Menu: #111821
• Ukuran Teks Menu: 18px
• Tinggi Baris Menu: 1.4em
• Perataan Teks: Kanan

Pengaturan Menu Dropdown

Ubah juga pengaturan menu tarik-turun.

• Warna Latar Menu Dropdown: #fff4ef
• Warna Garis Menu Dropdown: #191919
• Warna Teks Menu Dropdown: #191919
• Warna Latar Menu Seluler: #fff4ef
• Warna Teks Menu Seluler: #191919

Pengaturan Ikon

Kemudian, ubah warna ikon di pengaturan ikon.

• Warna Ikon Keranjang Belanja: #191919
• Warna Ikon Pencarian: #191919
• Warna Ikon Menu Hamburger: #191919

Perekat

Dan selesaikan pengaturan modul dengan menerapkan pengaturan ukuran berikut:

• Logo Lebar Maks: 50px
• Lebar: 100%

3. Tambahkan Formulir Masuk Dropdown & Fungsi Klik

Tambahkan Modul Blurb ke Kolom 2

Tambahkan judul

Sekarang setelah fondasi header kita dibuat, kita dapat fokus pada pembuatan pemicu dan formulir dropdown login. Hal pertama yang kita perlukan adalah Modul Blurb di kolom 2 baris kita. Di sini, kami akan menambahkan judul.

Pilih Ikon

Selanjutnya, kita akan memilih ikon.

Pengaturan Ikon

Pindah ke tab desain modul dan ubah pengaturan ikon sebagai berikut:

• Warna Ikon: #ffffff
• Ikon Lingkaran: Ya
• Warna Lingkaran: #ff4700
• Penempatan Gambar/Ikon: Kiri

Pengaturan Teks Judul

Kemudian, gaya teks judul.

• Judul Font: Lato
• Judul Font Berat: Berat
• Judul Font Style: Huruf Besar
• Ukuran Teks Judul: 12px
• Spasi Huruf Judul: 3px

Animasi

Kami juga menghapus animasi default modul ini di pengaturan animasi.

• Gambar/Ikon Animasi: Tanpa Animasi

Blurb Judul CSS

Dan kami akan menambahkan beberapa margin atas ke judul uraian di tab lanjutan.

margin-top: 10px;

Posisi

Last but not least, kami akan memposisikan ulang modul di pengaturan posisi.

• Posisi: Absolut
• Lokasi: Pusat

Tambahkan Baris #2 ke Bagian #2

Struktur Kolom

Untuk menambahkan form login, kita akan menggunakan baris baru di bawah baris sebelumnya, dengan struktur kolom berikut:

Perekat

Tanpa menambahkan modul, buka pengaturan baris dan ubah pengaturan ukuran sebagai berikut:

• Samakan Tinggi Kolom: Ya
• Lebar Maks: 2580px

Jarak

Ubah nilai padding juga.

• Padding Atas: 0px
• Padding Bawah: 0px
• Padding Kiri: 2%
• Padding Kanan: 2%

Tambahkan Modul Masuk ke Kolom 2

Hapus Konten

Tambahkan Modul Login ke kolom 2. Pastikan kotak konten kosong.

Warna latar belakang

Ubah warna latar belakang berikutnya.

• Warna Latar Belakang: #ff4700

Pengaturan Bidang

Pindah ke tab desain dan gaya bidang.

• Warna Latar Belakang Bidang: rgba(0,0,0,0)
• Warna Teks Bidang: rgba(255.255.255,0.73)
• Bidang Kiri Padding: 0px
• Bidang Kanan Padding: 0px
• Font Bidang: Lato
• Ukuran Teks Bidang: 16px

• Tinggi Garis Bidang: 1.8em
• Semua Sudut: 0px
• Lebar Batas Bawah Bidang: 1px
• Warna Batas Bawah Bidang: #ffffff

Pengaturan Tombol

Kemudian, ubah pengaturan tombol sebagai berikut:

• Gunakan Gaya Kustom Untuk Tombol: Ya
• Ukuran Teks Tombol: 12px
• Warna Teks Tombol: #ffffff
• Warna Latar Tombol: #141414
• Lebar Batas Tombol: 0px
• Radius Perbatasan Tombol: 0px
• Jarak Huruf Tombol: 2px
• Font Tombol: Prata

• Gaya Font Tombol: Huruf Besar
• Padding Atas Tombol: 16px
• Tombol Bawah Padding: 16px

Perekat

Pastikan lebarnya juga "100%".

• Lebar: 100%

Tombol Masuk CSS

Terapkan beberapa margin atas ke kotak CSS tombol login di tab lanjutan.

margin-top: 30px;

Posisi

Dan reposisi modul sesuai:

• Posisi: Absolut
• Lokasi: Kanan Atas
• Offset Vertikal: 1px

Tambahkan ID CSS ke Modul Blurb di Baris #1

Sekarang kita memiliki semua elemen yang kita butuhkan, kita dapat fokus pada fungsi klik. Pertama, buka Modul Blurb dan tambahkan ID CSS berikut:

• ID CSS: divi-login-toggle

Tambahkan ID CSS ke Modul Login di Baris #2

Buka Modul Login selanjutnya dan terapkan ID CSS berikut:

• ID CSS: divi-login-form

Tambahkan Modul Kode Di Bawah Modul Login

Kemudian, tambahkan Modul Kode tepat di bawah Modul Login.

Tambahkan Gaya & Tag Skrip

Untuk membuat fungsi klik, kita akan menggunakan beberapa kode CSS dan JQuery. Untuk mempersiapkan kode tersebut, kita akan menambahkan tag gaya (untuk kode CSS) dan tag skrip (untuk kode JQuery).

Masukkan Kode CSS Antara Tag Gaya

Tempatkan baris kode CSS berikut di antara tag gaya:

#divi-login-toggle {
cursor: pointer;    
}

#divi-login-form {
margin-top: -20px;
visibility: hidden;
opacity: 0;
  
-webkit-transition: all 0.2s ease !important;
-moz-transition: all 0.2s ease !important;
-o-transition: all 0.2s ease !important;
transition: all 0.2s ease !important;
}
  
.show-login-form {
visibility: visible !important;
margin-top: 0px !important;
opacity: 1 !important;
}

Sisipkan JQuery Antara Tag Skrip

Dan kode berikut di antara tag skrip:

jQuery(document).ready(function($){

var loginForm =  $('#divi-login-form');

$('#divi-login-toggle').click(function() {

loginForm.toggleClass('show-login-form');

});
});

4. Simpan Perubahan Pembuat Tema Divi

Sekarang setelah semuanya siap, satu-satunya yang tersisa untuk dilakukan adalah menyimpan semua perubahan Divi Theme Builder dan melihat hasilnya!

Pratinjau

Sekarang setelah kita melalui semua langkah, mari kita lihat hasil akhir di berbagai ukuran layar.

Desktop

Seluler

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda cara berkreasi dengan tajuk Anda saat membuat situs web keanggotaan. Lebih khusus lagi, kami telah menunjukkan kepada Anda cara memasukkan formulir login dropdown yang memungkinkan pengunjung Anda masuk ke akun mereka tanpa harus membuka halaman login WordPress. Anda juga dapat mengunduh file JSON template header secara gratis! Jika Anda memiliki pertanyaan atau saran, jangan ragu untuk meninggalkan komentar di bagian komentar di bawah.

Jika Anda ingin mempelajari lebih lanjut tentang Divi dan mendapatkan lebih banyak gratisan Divi, pastikan Anda berlangganan buletin email dan saluran YouTube kami sehingga Anda akan selalu menjadi salah satu orang pertama yang mengetahui dan mendapatkan manfaat dari konten gratis ini.