Apakah Anda ingin menambahkan logo responsif ke modul Menu Fullwidth Anda? Divi sehingga menyesuaikan dengan tampilan di ponsel?
Tahukah Anda bahwa lebih dari 50% dari lalu lintas Internet berasal dari perangkat seluler? Ini berarti bahwa versi seluler Anda situs jaringan sangat penting dan bahkan mungkin menjadi cara utama seseorang mengunjungi halaman Anda.
Pastikan Anda situs jaringan responsif dan ramah seluler merupakan langkah penting dalam merancang a situs jaringan.
Dalam tutorial ini, kami akan menunjukkan cara menambahkan logo responsif ke modul Menu Fullwidth Anda menggunakan opsi responsif bawaan dari Divi.
Ini akan memungkinkan Anda untuk menambahkan logo yang lebih besar atau lebih kompleks yang akan muncul di layar yang lebih besar dan logo yang lebih kecil atau lebih sederhana yang akan muncul di layar yang lebih kecil.
Ayo mulai!
penelitian
Berikut preview dari apa yang akan kita rancang. Versi desktop situs web akan memiliki logo yang diperluas dengan teks tambahan, dan logo versi seluler hanya akan memiliki branding logo dasar.
Apa yang Anda butuhkan untuk memulai
Semua pertama, instal dan aktifkan tema Divi dan pastikan Anda memiliki versi terbaru Divi di situs web Anda. Selanjutnya, pastikan Anda memiliki setidaknya dua versi logo Anda: satu untuk tampilan desktop situs Anda dan satu lagi untuk tampilan seluler. Terakhir, unduh templatenya Template Header dan Footer untuk Paket Tata Letak Sekolah Menengah Divi.
Sekarang Anda siap untuk memulai!
Cara Menambahkan Logo Responsif ke Modul Header Fullwidth Anda di Divi
Buat modul Fullwidth Header
Baca juga: Divi: Cara menampilkan modul Fullwidth Header di layar penuh
Tambahkan bagian lebar penuh
Karena menu asli dibuat dengan modul menu standar, kita perlu memodifikasi tata letak untuk menambahkan modul Fullwidth Header.
Pertama, tambahkan bagian lebar penuh (Lebar penuh) ke tajuk global di bawah menu yang ada.
Di pengaturan bagian lebar penuh, navigasikan ke Advanced, Puis à Gulir Efek.
- Posisi Lengket: Tetap ke Atas
Selanjutnya, tambahkan warna latar belakang.
- Latar belakang: #f5f0eb
Tambahkan warna berbeda untuk latar belakang dalam status lengket.
- Latar Belakang (Lengket): #ffffff
Tambahkan modul Fullwidth Header
Sekarang mari tambahkan modul Fullwidth Header.
Buka pengaturan modul dan hapus latar belakang.
Untuk mereplikasi tampilan menu asli dengan mudah, kita dapat menggunakan fitur Copy Styles untuk menyalin beberapa pengaturan kustom.
Lihat juga: Divi: Cara mengubah gradien latar belakang saat melayang
Buka pengaturan menu beranda, lalu klik kanan pada Menu teks dan pilih Salin Gaya Teks Menu.
Setelah disalin, klik tiga titik pada modul Fullwidth Header, lalu pilih Gaya Teks Menu Sebelumnya.
Sekarang kita akan mengulangi langkah yang sama dengan pengaturan menu drop-down.
Ulangi sekali lagi untuk ikon.
Atur perataan teks ke kanan.
- Perataan Teks: kanan
Atur ketinggian maksimum logo di bawah MendesainKemudian Perekat.
- Tinggi Maks Logo: 50px
Tambahkan CSS berikut ke bagian menu tautan di bawah CSS Kustom.
padding-top: 0px;
padding-bottom: 5px;
padding-left: 0.3em;
padding-right: 1.3em;
Terakhir, sesuaikan bantalan atas dan bawah.
- Padding-Atas: 10px
- Padding-Bawah: 10px
Sekarang hapus bagian menu asli.
Tambahkan logo responsif
Sekarang kita akan menambahkan logo responsif. Untungnya, Divi mempermudah ini dengan opsi responsif bawaan.
Di bawah Konten, buka setelan logo dan unggah versi desktop logo Anda.
Pilih ikon mode seluler untuk menggunakan opsi responsif, lalu ganti logo seluler dengan logo responsif Anda.
Buat halaman baru dengan tata letak yang telah ditentukan
Untuk melihat menu lebar penuh dengan logo responsif beraksi, mari buat halaman baru dengan tata letak yang telah ditentukan dari perpustakaan Divi.
Untuk desain ini, kami akan menggunakan beranda sekolah menengah atas Paket tata letak SMA untuk mencocokkan header dan footer.
Tambahkan halaman baru ke situs web Anda dan beri judul, lalu pilih opsi Gunakan Divi Builder. Karena kami mengimpor tata letak header dan footer sebagai header dan footer global, gunakan tata letak default untuk halaman ini.
Kami akan menggunakan tata letak pra-dibuat dari perpustakaan Divi untuk contoh ini, jadi pilih Jelajahi Tata Letak.
Temukan dan pilih tata letak Halaman Utama Sekolah Menengah.
Sélectionnez Gunakan Tata Letak Ini untuk menambahkan tata letak ke halaman Anda.
Hasil akhir
Sekarang mari kita lihat desain akhir kita.
Unduh DIVI sekarang!!!
Kesimpulan
Memiliki situs web yang ramah seluler dan responsif lebih penting dari sebelumnya. Dan berkat opsi responsif bawaan Divi, membuatnya lebih mudah dari sebelumnya!
Dengan logo yang responsif, identitas merek Anda akan selalu jelas, berapa pun ukuran layarnya.
Kami harap tutorial ini akan menginspirasi Anda untuk proyek Divi Anda berikutnya. Jika Anda memiliki masalah atau saran, temukan kami di bagian komentar untuk mendiskusikannya.
Anda juga dapat 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.
...
