Mengoptimalkan Gambar Logo Situs Divi Anda dengan Preset Global
Diterbitkan: 2020-09-25Mengoptimalkan logo situs Anda di Divi adalah bagian penting dari desain situs web Anda. Tapi, itu tidak harus menjadi usaha yang misterius atau menakutkan. Faktanya, Divi membuatnya cukup sederhana dengan Divi Theme Builder dan semua opsi desain bawaan yang tersedia.
Dalam tutorial ini, kami akan menunjukkan cara mengoptimalkan logo Anda dengan ukuran, posisi, dan gaya yang tepat di Divi. Kemudian kami akan menunjukkan cara menyimpan desain tersebut sebagai preset global yang dapat Anda gunakan untuk pengembangan di masa mendatang.
Mari kita melompat!
Unduh Tata Letak Preset Gambar Logo GRATIS
Untuk mendapatkan desain 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 ulang" atau menerima email tambahan.
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.
Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan dapatkan akses ke paket tata letak Divi mingguan gratis!
Untuk menggunakan tata letak gambar logo ini pada header global Anda, Anda harus mengimpornya terlebih dahulu ke Divi Library sebagai berikut:
- Buka Divi > Perpustakaan Divi.
- Klik tombol impor/ekspor di bagian atas halaman.
- Pilih tab Impor di popup portabilitas
- Pilih Impor Preset
- Klik Tombol Impor
Lalu buka pembuat tema dan edit tajuk global. Tambahkan modul gambar di mana Anda ingin logo menjadi dan gunakan preset untuk menata dan menempatkan logo yang sesuai.
Ukuran Logo
Sebelum kita mengoptimalkan gambar logo dengan Divi, penting untuk mempertimbangkan untuk mengoptimalkan ukuran gambar logo sebelum mengunggahnya ke modul gambar. Anda tidak ingin mengunggah gambar logo 1920px kali 1080px ke situs Anda saat Anda berencana untuk menampilkan logo tersebut pada ukuran 100px kali 50px. Tentu, ada cara untuk mengubah ukuran gambar logo setelah itu (yaitu srcset dan plugin pengoptimalan gambar). Namun, ini bukan praktik terbaik karena ini dapat menyebabkan waktu pemuatan halaman menjadi lebih lambat. Dan, mari kita hadapi itu, logo Anda terlalu penting untuk diselesaikan dengan pintasan yang berantakan.
Berikut adalah daftar ukuran gambar logo yang umum untuk dipertimbangkan:
Untuk tata letak horizontal:
- 250 piksel x 150 piksel
- 350 piksel x 75 piksel
- 400 piksel x 100 piksel
Untuk tata letak vertikal (persegi):
- 160 piksel x 160 piksel (besar)
- 60 piksel x 60 piksel (kecil)
Anda mungkin memerlukan ukuran logo yang lebih besar dari yang Anda kira.
Biasanya membutuhkan logo yang lebih kecil di desktop dan logo yang lebih besar di tablet (atau bahkan ponsel). Di Divi, tata letak kolom Anda biasanya ditumpuk menjadi tata letak satu kolom pada layar tablet dan ponsel. Dan karena lebar browser tablet biasanya memiliki lebar maksimal 980px yang merupakan wadah yang jauh lebih besar untuk logo Anda daripada di desktop. Oleh karena itu, Anda mungkin perlu memilih ukuran logo yang lebih besar dan menyesuaikan tinggi atau lebar maksimum sesuai dengan perangkat. Jika Anda mengunggah logo yang lebih kecil dari yang Anda butuhkan di tablet, Anda tidak dapat menambah ukuran tanpa mengurangi kejernihan gambar. Singkatnya, pastikan logo sebesar ukuran tampilan terbesar di semua lebar browser.
Mengoptimalkan Ukuran dan Posisi Logo Situs Divi Anda dengan Preset Global
Mengedit Logo Header Global Anda
Untuk memulai, navigasikan ke Divi Theme Builder dengan masuk ke Divi > Theme Builder. Kemudian klik untuk membuat tajuk global baru di dalam templat situs web default.
Kemudian pilih opsi, "Bangun dari Awal".
Untuk tutorial ini, kita akan mengoptimalkan logo yang disertakan dengan header global kustom menggunakan Divi Theme Builder. Anda dipersilakan untuk mendesain header yang sudah ada atau mengimpor salah satu template header (dan footer) global yang sudah jadi dari blog kami. Untuk mempermudah, kita akan membuat tata letak header yang sangat sederhana dengan logo dan menu.
Tambahkan Tata Letak Baris dan Kolom
Di dalam Global Header Layout Editor, tambahkan seperempat baris kolom tiga perempat.
Di kolom kanan, tambahkan modul gambar hanya sebagai tempat dudukan untuk membantu kami memvisualisasikan penempatan logo di header.
Tambahkan Modul Gambar untuk Menampilkan Gambar Logo
Tambahkan modul gambar ke kolom kiri.
Menggunakan Modul Gambar untuk Logo
Untuk desain header yang lebih tradisional, Anda dapat memanfaatkan modul menu Divi untuk menampilkan logo Anda. Namun, dengan kemampuan konten dinamis Divi, Anda dapat menampilkan logo situs Anda menggunakan sejumlah modul Divi. Pada dasarnya, Anda dapat menampilkan logo Anda di mana pun Anda dapat menampilkan gambar di Divi. Misalnya, Anda dapat memilih untuk menampilkan logo situs pada gambar modul uraian atau bahkan sebagai gambar latar jika diinginkan. Untuk tutorial ini, kita akan berkonsentrasi menggunakan modul gambar untuk menampilkan logo situs. Ini memungkinkan logo menjadi elemen yang benar-benar terpisah (tidak terhubung dengan elemen lain dalam modul seperti modul menu atau modul uraian). Plus, modul gambar dibuat untuk menata gambar, yang memberi kita banyak pilihan desain tambahan untuk menata gambar logo kita. Lompat ke akhir artikel untuk mengetahui lebih lanjut tentang cara menambahkan logo situs sebagai gambar dinamis.
Karena kami akan menguji beberapa ukuran gambar logo yang berbeda, kami akan menempelkan gambar biasa untuk contoh kami alih-alih logo situs dinamis.
Contoh 1: Membangun Preset Global Logo Rata Kiri
Untuk contoh pertama ini, kita akan membuat preset sederhana untuk logo rata kiri yaitu 60px kali 60px.
Buka pengaturan modul gambar dan unggah gambar logo 60px kali 60px ke modul gambar.
Perbarui pengaturan desain gambar sebagai berikut:
- Penjajaran Gambar: Tengah
- Lebar Maks: 60px
- Penyelarasan Modul (desktop): Kiri
- Penyelarasan Modul (tablet dan ponsel): Tengah
Meskipun ini adalah desain untuk logo rata kiri, perataan gambar diatur ke tengah karena perataan gambar berbeda dengan perataan modul. Penjajaran gambar dipusatkan di dalam modul. Dan karena modul memiliki lebar maksimal 60px, perataan gambar benar-benar tidak masalah karena perataan modul sekarang akan menentukan perataan gambar logo.
Ini berguna jika Anda ingin menambahkan gambar latar belakang ke logo atau membuat wadahnya membulat. Pada dasarnya, ini membuat wadah gambar logo berukuran sama dengan gambar logo itu sendiri.
Perhatikan bahwa penyelarasan modul diubah ke tengah di tablet karena kolom akan ditumpuk di ponsel.
Buat Preset Baru Dari Gaya Saat Ini
Sekarang setelah desain logo selesai, Anda dapat membuat preset global untuk modul gambar dengan mengklik dropdown preset dan memilih "Create New Preset From Current Styles".
Berikan preset gambar logo nama yang unik. Dalam hal ini, kita dapat memberinya nama "Logo Left (60px x 60px)" untuk memberi tahu kita dengan tepat ukuran gambar yang akan digunakan dan bagaimana logo akan disejajarkan saat memilih untuk menggunakan preset.
Contoh 2: Membangun Preset Global Logo Rata Kanan
Untuk contoh berikut ini, kita akan membuat preset global logo rata kanan. Ini akan mudah dilakukan dengan desain dan preset kami saat ini. Cukup ubah tata letak kolom menjadi tiga perempat seperempat, pindahkan menu ke kolom kiri, dan pindahkan logo ke kolom kanan.
Buka pengaturan untuk modul gambar yang berisi preset gambar logo yang baru saja kita buat.
Kemudian perbarui pengaturan desain untuk mengubah perataan modul ke kanan.
Cukup sederhana. N0w klik dropdown preset dan buat preset baru dari gaya saat ini.
Beri nama preset "Logo Right (60px x 60px)".
Contoh 3: Membangun Preset Global Logo Terpusat
Untuk contoh berikut ini, kita akan membuat preset global logo terpusat. Karena ini adalah logo yang terpusat, kita dapat menggunakan logo yang lebih besar untuk contoh kita.
Pertama, ubah tata letak kolom menjadi struktur 0ne-fourth seperempat seperempat sehingga Anda memiliki kolom yang lebih besar di tengah untuk logo. Kemudian pindahkan logo ke kolom tengah
Unggah gambar logo baru berukuran 250px kali 150px.
Di bawah tab desain, perbarui yang berikut ini:
- Lebar Maks: 250px
- Penyelarasan Modul: Pusat
Kemudian tambahkan preset global baru dari gaya saat ini.
Dan beri nama “Logo Center (250px kali 150px).
Contoh 4: Membangun Preset Global Logo Besar Rata Kiri
Untuk contoh berikut ini, kita akan membuat preset untuk logo rata kiri yang lebih besar (400px kali 100px).
Karena logo akan memiliki lebar 400px, kami menginginkan struktur kolom yang akan memberi logo ruang yang dibutuhkan.
Mari kembali ke struktur dua kolom dengan logo di sebelah kiri dan menu di sebelah kanan. Namun, mari kita ubah strukturnya menjadi sepertiga dua pertiga.
Ini akan memberi kita kolom yang lebarnya kira-kira 320px jika kita mempertahankan lebar maksimum baris default 1080px.
Buka pengaturan modul gambar dan tambahkan gambar logo berukuran 400px kali 100px.
Di bawah tab desain, perbarui yang berikut ini:
- Lebar Maks: 400px
- Penyelarasan Modul (desktop): kiri
- Penyelarasan Modul (tablet): tengah
Seperti yang saya sebutkan, kolom memiliki lebar maksimal 320px yang berarti bahwa gambar logo tidak akan dapat menjangkau lebar penuhnya di desktop. Namun, itu akan dapat di tablet setelah kolom ditumpuk. Untuk alasan ini, kami ingin mengatur max-width gambar menjadi 400px.
Sekarang logonya sedikit lebih besar di tablet dan juga di tengah.
Kemudian tambahkan preset global baru dari gaya saat ini.
Beri nama "Logo Left (400px x 100px)" dan simpan preset.
Contoh 5: Membangun Logo Rata Kiri dengan Preset Global Efek Hover
Untuk contoh terakhir ini, kita akan menambahkan beberapa efek hover ke logo rata kiri dan menyimpannya sebagai preset global baru.
Biasanya, orang menautkan logo mereka ke beranda. Menambahkan efek hover dapat meningkatkan UX dengan membuat kemampuan kliknya lebih jelas.
Untuk contoh ini, kita akan menggunakan gambar logo 60px kali 60px dengan preset “Logo Left (60px kali 60px)”. Buka pengaturan gambar dan pilih preset dari daftar.
Sekarang kita dapat mengubah preset dengan beberapa gaya efek hover sebelum menyimpannya sebagai preset baru.
Perbarui berikut ini:
- Sudut Bulat: 50%
- Bayangan Kotak: lihat tangkapan layar
- Posisi Horizontal Bayangan Kotak: 0px
- Posisi Vertikal Bayangan Kotak: 0px (desktop) 5px (arahkan kursor)
- Warna Bayangan: #ac3cf7
Kemudian tambahkan rotasi transformasi berikut saat mengarahkan kursor:
- Transform Rotate Z Axis (arahkan kursor): 90deg
Kemudian buat preset baru dari gaya saat ini dan beri nama "Logo Left w/ Hover (60px x 60px)".
Inilah hasilnya.
Menambahkan Logo Situs Dinamis ke Modul Gambar
Untuk menambahkan logo situs Anda secara dinamis ke modul gambar, pertama-tama, Anda harus memastikan dan mengunggah logo situs di bawah Opsi Tema Divi.
Perhatikan ukuran logo yang Anda pilih.
Lalu buka modul gambar yang memiliki preset global Anda dan buka pengaturannya. Hapus gambar saat ini dan kemudian klik ikon konten dinamis. Dari tarik-turun, pilih Logo Situs.
Sekarang modul gambar Anda akan menarik logo situs Anda secara dinamis.
Jangan lupa untuk menambahkan tautan beranda dinamis ke logo juga.
Pikiran Akhir
Semoga tutorial ini akan membantu merampingkan proses penambahan logo ke header Divi Anda. Ini dimulai dengan mengoptimalkan ukuran gambar logo Anda bahkan sebelum Anda mengunggahnya ke tema Divi. Kemudian Anda dapat menggunakan pengaturan desain bawaan Divi untuk menyesuaikan ukuran dan posisi gambar untuk tata letak kolom yang berbeda dan perangkat yang berbeda.
Tentu saja, setiap situs web akan membutuhkan gaya uniknya sendiri, beberapa di antaranya akan keluar dari pedoman yang ditetapkan dalam contoh ini. Tetapi saya yakin bahwa dengan beberapa penyesuaian, Anda dapat membuat preset baru untuk tata letak unik apa pun dengan mudah!
Saya berharap untuk mendengar dari Anda di komentar.
Bersulang!