Cara Menghemat Ruang di Header Anda Menggunakan Ikon Toggle dengan Divi

Cara Anda mendesain tajuk menentukan nada untuk sisa situs web Anda. Itulah mengapa penting untuk memikirkan cara Anda menambahkan elemen dan interaksi. Tentu saja, Anda ingin menyertakan dasar-dasar seperti logo dan item menu, tetapi kemungkinan besar Anda juga ingin menyertakan beberapa ajakan bertindak lainnya. Namun, semakin banyak item yang Anda tambahkan ke tajuk Anda, tajuk itu akan semakin berlebihan. Jika Anda mencari cara yang bersih dan interaktif untuk menampilkan berbagai ajakan bertindak di header Anda, Anda akan menyukai tutorial ini. Hari ini, kami menunjukkan kepada Anda cara menghemat ruang di header Anda menggunakan ikon sakelar. 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. Bangun Struktur Tajuk

Buat Template Header Global Baru

Mulailah dengan membuka Divi Theme Builder dan mulai membuat header global atau kustom baru.

Tambahkan Bagian #1

Latar Belakang Gradien

Begitu berada di dalam editor template, Anda akan melihat sebuah bagian. Buka pengaturan bagian itu dan terapkan latar belakang gradien.

• Warna 1: #ffffff
• Warna 2: #eaeaea
• Tipe Gradien: Linier
• Arah Gradien: 90 derajat
• Posisi Awal: 50%
• Posisi Akhir: 50%

Jarak

Pindah ke tab desain bagian dan hapus semua padding atas dan bawah default.

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

Bayangan Kotak

Tambahkan bayangan kotak juga.

• Warna Bayangan: rgba (0,0,0,0.06)

Tambahkan Baris Baru

Struktur Kolom

Lanjutkan dengan menambahkan baris baru menggunakan struktur kolom berikut:

Perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris, lanjutkan ke tab desain dan ubah pengaturan ukuran sebagai berikut:

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Samakan Tinggi Kolom: Ya
• Lebar: 100%
• Lebar Maks: 100%
• Penjajaran Baris: Pusat

Jarak

Hapus semua padding atas dan bawah default berikutnya.

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

Elemen Utama CSS

Kemudian, buka tab lanjutan dan terapkan beberapa baris kode CSS khusus elemen utama di berbagai ukuran layar. Kode ini akan membantu kita memusatkan item secara vertikal di desktop.

Desktop:

display: flex;
place-items: center;

Tablet & Telepon:

display: block;

Pengaturan Kolom 1

Jarak

Kemudian, buka pengaturan kolom 1 dan terapkan beberapa padding kiri dan kanan.

• Padding Kiri: 5%
• Padding Kanan: 5%

Elemen Utama

Kami mengubah ukuran kolom kami di desktop dan mengembalikannya ke "100%" di tablet dan ponsel dengan menerapkan beberapa CSS khusus ke elemen utama kolom.

Desktop:

width: 88% !important

Tablet & Telepon:

width: 100% !important;

Pengaturan Kolom 2

Warna latar belakang

Selanjutnya, kita akan membuka pengaturan kolom 2 dan mengubah warna latar belakang menjadi putih.

• Warna Latar Belakang: #FFFFFF

Jarak

Kami akan menambahkan beberapa nilai padding responsif ke pengaturan spasi kolom ini juga.

• Bantalan Atas:
  • Desktop: 50px
  • Tablet & Telepon: 20px
• Lapisan Bawah
  • Desktop: 50px
  • Tablet & Telepon: 20px
• Padding Kiri: 1%
• Padding Kanan: 1%

Elemen Utama CSS

Kami juga akan mengubah ukuran kolom kedua di desktop. Kami mengembalikan ini ke "100%" pada ukuran layar yang lebih kecil.

Desktop:

display: flex;
place-items: center;
width: 12% !important;

Tablet & Telepon:

width: 100% !important;

Tambahkan Modul Menu ke Kolom 1

Pilih Menu

Saatnya menambah modul, dimulai dengan Modul Menu di kolom 1. Pilih menu pilihan Anda.

Unggah Logo

Unggah logo berikutnya.

Hapus Warna Latar Belakang

Kemudian, hapus warna latar belakang default.

Pengaturan Teks Menu

Pindah ke tab desain modul dan ubah pengaturan teks menu yang sesuai:

• Font Menu: Tampilan Playfair
• Font Teks Menu: Tampilan Playfair
• Warna Teks Menu: #000000
• Ukuran Teks Menu: 19px
• Tinggi Baris Menu: 1.4em
• Perataan Teks: Kanan

Pengaturan Menu Dropdown

Kemudian, ubah warna garis menu dropdown.

• Warna Garis Menu Dropdown: #ffffff

Pengaturan Ikon

Ubah warna ikon di pengaturan ikon juga.

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

Perekat

Dan selesaikan pengaturan modul dengan mengubah pengaturan ukuran sebagai berikut:

• Logo Lebar Maks: 200px
• Lebar: 100%
• Penyelarasan Modul: Pusat

Tambahkan Modul Blurb #1 ke Kolom 2

Biarkan Kotak Konten Kosong

Ke kolom kedua. Untuk membuat ikon sakelar, kami akan menggunakan Modul Blurb tanpa judul dan konten. Kita akan mulai dengan membuat ikon sakelar pertama dan kemudian menggunakan kembali modul untuk menambahkan dua ikon sakelar lainnya. Setelah Anda menambahkan Modul Blurb, pastikan kotak judul dan konten kosong.

Pilih Ikon

Selanjutnya, pilih ikon pilihan Anda.

Pengaturan Ikon

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

• Warna Ikon
  • Bawaan: #dbdbdb
  • Arahkan kursor: #000000
• Penempatan Ikon: Atas
• Penjajaran Ikon: Pusat
• Gunakan Ukuran Font Ikon: Ya
• Ukuran Font Ikon: 200%

Perekat

Ubah juga pengaturan ukuran.

• Lebar Konten: 100%
• Lebar: 32%

Elemen Utama & Gambar Blurb CSS

Dan selesaikan pengaturan modul dengan menambahkan dua baris kode CSS ke opsi CSS khusus di tab lanjutan Modul Blurb.

Elemen Utama:

display: inline-block;

Gambar kabur:

margin-bottom: 0px !important

Modul Blurb Klon Dua Kali

Setelah Anda menyelesaikan ikon sakelar Blurb Module pertama, Anda dapat mengkloningnya dua kali.

Ubah Ikon

Pastikan Anda mengubah ikon di setiap duplikat.

2. Tambahkan Item Toggle

Tambahkan Bagian #2

Perekat

Sekarang setelah kita mengatur dasar header kita, kita masih perlu menyertakan item toggle. Untuk melakukan itu, kami akan menambahkan bagian baru tepat di bawah yang sebelumnya. Buka pengaturan bagian dan pastikan tinggi bagian ini adalah "0px". Ini akan membantu kami mencegah bagian mengambil ruang apa pun dalam desain tajuk kami. Satu-satunya alasan kami membutuhkan bagian ini adalah untuk menunjukkan item toggle kami.

• Tinggi: 0px

Jarak

Pindah ke tab desain bagian dan hapus semua padding atas dan bawah default.

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

Tambahkan Baris Baru

Struktur Kolom

Lanjutkan dengan menambahkan baris baru menggunakan struktur kolom berikut:

Perekat

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

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Samakan Tinggi Kolom
• Lebar: 100%
• Lebar Maks: 100%

Jarak

Hapus semua padding atas dan bawah default berikutnya.

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

Posisi

Dan reposisi seluruh baris. Mengubah baris ini menjadi absolut akan membantu kita mencegah baris mengambil ruang apa pun dalam desain.

• Posisi: Absolut
• Lokasi: Pojok Kanan Atas

Tambahkan Modul Teks #1 ke Kolom 2

Tambahkan Nomor Telepon ke Kotak Konten

Saatnya menambahkan item sakelar! Pertama, kami akan menambahkan nomor telepon. Tambahkan Modul Teks baru ke kolom 2 dan masukkan nomor telepon di kotak konten.

Warna latar belakang

Tambahkan warna latar belakang hitam berikutnya.

• Warna Latar Belakang: #000000

Pengaturan Teks

Pindah ke tab desain modul dan ubah pengaturan teks yang sesuai:

• Font Teks: Tampilan Playfair
• Warna Teks: #ffffff
• Ukuran Teks: 27px
• Perataan Teks: Tengah

Perekat

Pastikan lebarnya juga 100%.

• Lebar: 100%

Jarak

Kemudian, tambahkan beberapa nilai padding kustom ke pengaturan spasi.

• Padding Atas: 10%
• Padding Bawah: 10%
• Padding Kiri: 2%
• Padding Kanan: 2%

Modul Teks Klon

Setelah Anda menyelesaikan modul teks item sakelar pertama, klon satu kali.

Ubah Konten ke Alamat Email

Ubah konten di kotak konten.

Tambahkan Modul Ikuti Media Sosial ke Kolom 2

Tambahkan Jejaring Sosial Pilihan

Kemudian, tambahkan Modul Ikuti Media Sosial ke kolom 2. Tambahkan jejaring sosial sebanyak yang Anda inginkan.

Ubah Warna Latar Belakang Setiap Jejaring Sosial menjadi Putih

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

• Warna Latar Belakang: #FFFFFF

Warna latar belakang

Kemudian, kembali ke pengaturan modul umum dan gunakan warna latar belakang hitam.

• Warna Latar Belakang: #000000

Penyelarasan

Pindah ke tab desain modul dan ubah perataan modul.

• Penyelarasan Modul: Pusat

Pengaturan Ikon

Ubah warna ikon di pengaturan ikon juga.

• Warna Ikon: #000000

Perekat

Kemudian, terapkan lebar "100%" ke pengaturan ukuran.

• Lebar: 100%

Jarak

Terapkan beberapa bantalan atas dan bawah kustom juga.

• Padding Atas: 10%
• Padding Bawah: 10%

Berbatasan

Dan selesaikan pengaturan modul dengan menambahkan beberapa sudut membulat ke pengaturan perbatasan.

• Semua Sudut: 100px

3. Tambahkan Fungsionalitas

Tambahkan ID CSS Berturut-turut ke Bagian Pertama Modul Blurb

Sekarang setelah semua elemen berada di tempatnya, kita dapat mulai menambahkan efek sakelar. Hal pertama yang harus Anda lakukan adalah membuka setiap Modul Blurb satu per satu dan menambahkan ID CSS secara berurutan.

• Blurb 1: header-cta-1
• Blurb 2: header-cta-2
• Blurb 3: header-cta-3

Tambahkan ID CSS Berturut-turut ke Toggle Items

Lakukan hal yang sama untuk modul item sakelar. Nomor di akhir ID CSS harus cocok dengan ID CSS yang Anda gunakan untuk ikon di langkah sebelumnya.

• Modul Teks 1: header-item-1
• Modul Teks 2: header-item-2
• Modul Ikuti Media Sosial: header-item-3

Tambahkan Posisi Absolut ke Semua Item Toggle

Dan putar masing-masing item toggle menjadi absolut satu per satu. Kami menyarankan Anda pergi ke mode wireframe untuk melakukan ini.

• Posisi: Absolut
• Lokasi: Kanan Atas

Tambahkan Modul Kode ke Kolom Pertama Bagian #1

Sekarang setelah semua ID CSS ada di tempatnya, kita dapat menambahkan kode untuk membuat fungsi klik berfungsi. Tambahkan Modul Kode baru tepat di bawah Modul Menu di kolom 1.

Masukkan Kode CSS

Tambahkan baris kode CSS berikut di antara tag gaya seperti yang Anda lihat di layar cetak di bawah ini :

[id*="header-cta"]{
cursor: pointer;
}
[id*="header-item"] {
visibility: hidden;
opacity: 0;

-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.show-item {
visibility: visible;
opacity: 1;
}
.highlight-icon{
color: #000 !important;
}

Masukkan Kode JQuery

Kami juga menambahkan beberapa kode JQuery khusus. Tambahkan kode di antara tag skrip seperti yang Anda lihat di layar cetak di bawah ini .

jQuery(function($){
$(document).ready(function(){
 
$('[id*="header-cta"]').click(function() {
 
var $selector = $(this).attr('id').replace('cta', 'item');
var $item = $('#' + $selector);
 
$item.toggleClass('show-item');
$('[id*="header-item"]').not($item).removeClass('show-item');

var $icon = $(this).find('.et-pb-icon');
var $allIcons = $('[id*="header-cta"]').find('.et-pb-icon');
  
$icon.toggleClass('highlight-icon');
$allIcons.not($icon).removeClass('highlight-icon');
  
});
 
});
});

4. Jadikan Header + Toggle Items Sticky

Jadikan Bagian #1 Lengket

Last but not least, Anda juga dapat mengubah header dan beralih item menjadi lengket. Untuk membuat hasil yang diinginkan, Anda harus memastikan kedua bagian lengket dan opsi "Offset Dari Elemen Lengket Sekitar" diaktifkan. Buat bagian pertama lengket.

• Posisi Lengket: Menempel ke Atas
• Batas Lengket Bawah: Tidak Ada
• Offset Dari Elemen Lengket Sekitarnya: Ya
• Default Transisi dan Gaya Lengket: Ya

Jadikan Bagian #2 Lengket

Dan lakukan hal yang sama untuk bagian 2. Selesai!

• Posisi Lengket: Menempel ke Atas
• Batas Lengket Bawah: Tidak Ada
• Offset Dari Elemen Lengket Sekitarnya: Ya
• Default Transisi dan Gaya Lengket: Ya

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 menggunakan ikon sakelar di dalam tajuk Anda. Segera setelah seseorang mengklik ikon, item sakelar muncul, yang membantu Anda menghemat banyak ruang dalam desain tajuk Anda. Pendekatan ini berfokus pada perilaku pengguna dan membantu Anda mencegah keharusan mendesain desain header yang berlebihan. Anda juga dapat mengunduh file JSON secara gratis! Jika Anda memiliki pertanyaan, 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.