Cara Sederhana dan Kreatif untuk Menampilkan Logo Perusahaan di Divi

Ada banyak alasan untuk menampilkan logo perusahaan di website Anda. Bagian "Unggulan Dalam" dari logo perusahaan dapat mempengaruhi calon investor atau mitra. Atau bagian "Sertakan Klien Kami" dapat membangun bukti sosial yang berharga dengan pengunjung. Tapi apa pun alasannya, penting untuk mengetahui cara menambahkan logo ini ke situs web Anda. Dalam tutorial ini, saya akan membahas tiga metode berbeda untuk menambahkan logo perusahaan ke situs web Anda dengan Divi. Saya bahkan akan menunjukkan cara menambahkan galeri logo ke Modul Divi apa pun!

Inilah yang akan dibahas dalam tutorial ini:

• Mempersiapkan Gambar Logo Anda
• Menggunakan Modul Galeri Divi untuk Menampilkan Logo dengan Seret dan Lepas Sederhana
• Menggunakan Galeri WordPress Sematkan untuk Menampilkan Logo
• Menggunakan Divi Builder untuk Membuat Tata Letak Kustom untuk Logo

Mari kita mulai!

Sneak Peek

Berikut adalah beberapa desain yang mungkin menggunakan teknik dalam tutorial ini.

Mempersiapkan Gambar Logo Anda

Saat mempersiapkan logo Anda untuk ditampilkan di situs web Anda, penting bagi Anda untuk meluangkan waktu untuk mengukur ukuran gambar Anda menggunakan editor foto sebelum Anda menambahkannya ke situs Anda. Ini akan menghemat sakit kepala Anda mencoba ukuran dan posisi logo Anda dengan lebar kustom, padding, atau margin. Percaya padaku. Anda tidak ingin pergi ke jalan itu jika tidak perlu.

Karena setiap logo memiliki ukuran yang unik, hampir tidak mungkin untuk membuat semuanya memiliki dimensi yang tepat. Di sinilah editor foto berguna. Misalnya, menggunakan Photoshop, Anda dapat membuat file baru dan mengatur dimensi dokumen ke ukuran apa pun yang Anda inginkan untuk semua gambar logo Anda (dalam hal ini 226px kali 100px).

Kemudian tambahkan gambar logo ke dokumen dan ubah ukuran dan posisikan gambar langsung di tengah. Pastikan itu adalah file gambar png dengan latar belakang transparan.

Kemudian ekspor gambar sebagai file png untuk menjaga latar belakang transparan.

Kemudian ulangi proses untuk sisa logo Anda.

Anda dapat mempertahankan warna asli logo atau menggunakan editor foto untuk mengubahnya menjadi warna apa pun yang Anda inginkan. Jika Anda berencana untuk menambahkan logo Anda menggunakan Divi (yaitu modul gambar atau galeri gambar), Anda selalu dapat menggunakan efek filter bawaan Divi untuk menyesuaikan warna juga.

Berlangganan Saluran Youtube Kami

#1 Menggunakan Modul Galeri Divi untuk Menampilkan Logo Perusahaan (seret dan lepas sederhana)

Metode pertama untuk menambahkan logo perusahaan ke situs Anda dengan Divi cukup mudah. Menggunakan fitur drag and drop Divi, Anda dapat menyeret semua logo perusahaan ke Divi Builder untuk langsung membuat dan galeri gambar untuk menampilkan logo Anda dalam kotak.

Untuk melakukan ini, buat halaman baru dan gunakan Divi Builder untuk membangun di ujung depan. Pilih opsi "Bangun dari Awal". Setelah pembuat Divi aktif dan berjalan, buka folder yang berisi semua gambar Anda dan pilih. Kemudian cukup seret ke jendela browser dengan Divi Builder.

Divi akan secara otomatis menambahkan gambar-gambar itu ke Modul Galeri baru dan membuka Pengaturan Galeri untuk memulai proses penyesuaian untuk Anda.

Karena saya menambahkan 8 gambar logo dan saya tidak ingin menampilkan judul, keterangan, atau paginasi apa pun, saya dapat memperbarui yang berikut:

Nomor Gambar: 8
Tampilkan Judul dan Keterangan: TIDAK
Tampilkan Pagination: TIDAK

Secara default, modul galeri akan menambahkan overlay hover dengan ikon untuk setiap gambar. Anda dapat menyesuaikan pengaturan overlay untuk warna ikon zoom, warna overlay hover, atau ikon hover.

Untuk menjaga semuanya tetap bersih dan sederhana, Anda dapat menghilangkan overlay hover dengan mengatur Zoom Icon Color dan Hover Overlay Color menjadi transparan.

Setelah itu, Anda dapat menjelajahi semua opsi desain untuk membuat desain unik untuk galeri foto Anda. Misalnya, Anda dapat menambahkan batas dengan bayangan kotak yang halus.

Lebar Batas Gambar: 1px
Warna Batas Gambar: #dddddd
Bayangan Kotak Gambar: lihat tangkapan layar

Berikut adalah bagaimana desain akhir akan terlihat pada ukuran browser yang berbeda.

Dan karena galeri ini dapat ditambahkan ke struktur kolom apa pun, Anda dapat dengan mudah membuat tata letak unik untuk logo perusahaan Anda. Berikut adalah contoh tata letak dua kolom dengan modul teks di sebelah kiri dan modul galeri gambar (dengan logo) di sebelah kanan. Saya menambahkan gradien latar belakang hanya untuk menunjukkan kepada Anda tampilan yang berbeda.

#2 Menggunakan Embed Galeri WordPress untuk Menampilkan Logo Perusahaan (dengan Modul Divi apa pun)

Anda juga dapat menambahkan logo perusahaan ke situs web Anda menggunakan kode pendek Galeri Gambar WordPress. Ini sangat mudah dilakukan dan sangat cocok untuk logo karena dalam banyak kasus, Anda tidak perlu menambahkan gaya khusus ke gambar. Apa yang hebat tentang metode ini adalah Anda dapat menggunakan hingga 9 kolom untuk logo Anda yang berskala dengan jendela browser Anda memungkinkan Anda untuk menjaga struktur kolom Anda di seluler juga.

Berikut adalah cara melakukannya.

Di Divi Builder, buat bagian baru dengan struktur kolom seperempat tiga perempat.

Katakanlah Anda ingin memiliki beberapa teks di sebelah kiri logo perusahaan Anda di galeri enam kolom. Pertama tambahkan modul teks di kolom kiri dan perbarui yang berikut:

Konten: “Seperti Ditampilkan Dalam”
Font Teks: Montserrat
Berat Font Teks: Tebal
Ukuran Teks Teks: 26px
Orientasi Teks: tengah

Sekarang tambahkan modul teks lain di kolom kanan. Di bawah tab konten, hapus konten tiruan yang saat ini ada dan klik tombol "Tambah Media" di bagian atas kotak editor konten.

Ini akan memunculkan popup Galeri Media. Selanjutnya klik tautan Buat Galeri di sebelah kiri popup. Kemudian pilih gambar logo yang ingin Anda sertakan di galeri (saya menggunakan delapan gambar untuk contoh ini). Klik tombol Buat Galeri.

Ini akan memunculkan halaman Edit Galeri di popup. Perbarui pengaturan Galeri di bilah sisi kanan sebagai berikut:

Tautan ke: Tidak ada
Kolom: 8 (ini harus sama dengan jumlah gambar di galeri sehingga tetap dalam satu baris)
Ukuran: Ukuran Penuh

Kemudian klik tombol Buat Galeri Baru.

Ini akan menyematkan kode pendek galeri yang diperlukan bawaan ke WordPress dan menampilkan galeri di dalam modul teks.

Sekarang buka pengaturan baris, dan perbarui yang berikut:

Jadikan Baris Ini Lebar Penuh: YA
Gunakan Lebar Talang Kustom: YA
Lebar Talang: 1
Samakan Tinggi Kolom: YA

Dengan pengaturan ini, Anda memiliki lebih banyak ruang bagi logo Anda untuk bernafas. Sekarang tinggal menyesuaikan teks di sebelah kiri agar sejajar secara vertikal dengan logo di sebelah kanan. Anda dapat menambahkan padding khusus yang diperlukan ke kolom kiri untuk mencapai ini, tetapi untuk menjamin kedua modul tetap berada di tengah secara vertikal, Anda dapat menambahkan CSS khusus berikut ke Elemen Utama di bawah tab Lanjutan Pengaturan Baris Anda.

align-items: center;

CSS ini berfungsi karena kami menyetel Equalize Column Heights ke YA, sehingga mengaktifkan properti "display:flex" untuk baris tersebut. Untuk info lebih lanjut tentang ini, lihat cara menyelaraskan konten secara vertikal di Divi.

Dan untuk menghilangkan batas abu-abu di sekitar gambar kita, kita perlu menambahkan potongan CSS berikut ke pengaturan halaman kita:

.gallery img {
border: none !important;
}

Berikut adalah desain akhir.

Ini dia dengan latar belakang hitam yang ditambahkan ke baris.

Di seluler, kolom tidak pecah pada ukuran layar apa pun. Gambar hanya skala ke ukuran yang lebih kecil. Aku akui. Delapan kolom mungkin terlalu banyak di smartphone karena gambar menjadi sangat kecil.

Sematkan Galeri Logo di Semua Modul Divi

Karena ini adalah sematan kode pendek, Anda dapat menambahkan galeri ini ke hampir semua Modul Divi yang membuka banyak kemungkinan berbeda.

Misalnya, Anda dapat menambahkan gambar logo di dalam sakelar, akordeon, atau bahkan modul tab.

Berikut adalah contoh tampilan ketika Anda menambahkan kode pendek galeri wordpress dari logo Anda ke dua tab yang berbeda.
Untuk contoh ini, saya memilih 6 logo dengan 3 kolom untuk setiap galeri.

Ini mungkin berguna untuk situs yang membutuhkan banyak logo.

#3 Menggunakan Divi Builder untuk Membuat Tata Letak Kustom untuk Logo Perusahaan

Jika Anda ingin sedikit lebih kreatif dengan tata letak logo perusahaan Anda, Anda dapat menggunakan Divi Builder untuk mendesain apa saja yang dapat Anda bayangkan. Elemen baris Divi mendukung tata letak kolom hingga 6 kolom yang lebih dari cukup untuk sebagian besar tata letak logo perusahaan. Saya suka tata letak 6 kolom dan 4 kolom terbaik untuk logo sebagian besar untuk cara mereka merespons di seluler.

Dalam desain berikut, saya akan menunjukkan kepada Anda beberapa tip tentang cara membawa tata letak logo perusahaan Anda ke tingkat berikutnya.

Pertama, mari kita mulai dengan membuat bagian baru dengan baris enam kolom.

Sebelum kita mulai menambahkan sesuatu ke kolom kita, buka pengaturan baris dan perbarui yang berikut:

Lebar Kustom: 90%
Lebar Talang: 1
Samakan Tinggi Kolom: YA

Padding Kustom: Atas 4vw, Bawah 4vw

Simpan Pengaturan.

Kemudian tambahkan modul gambar ke kolom pertama Anda dan kemudian pilih salah satu gambar logo Anda.

Kemudian lanjutkan dengan menambahkan gambar logo pada setiap kolom sebagai berikut:

Kolom 1: 1 logo
Kolom 2: 2 logo
Kolom 3: 3 logo
Kolom 4: 3 logo
Kolom 5: 2 logo
Kolom 6: 1 logo

Sekarang dengan pengaturan ini, Anda dapat menyesuaikan perataan vertikal menggunakan potongan CSS khusus. Jika Anda ingin memusatkan konten secara vertikal, Anda dapat menambahkan cuplikan CSS yang sama yang kami tambahkan untuk memusatkan teks secara vertikal di sebelah galeri logo di #2 di atas. Buka pengaturan baris dan tambahkan CSS berikut ke Elemen Utama.

align-items: center;

Seperti yang Anda lihat, ini menciptakan tata letak bulat untuk logo.

Tetapi untuk tata letak ini, saya akan menyelaraskan modul ke bagian bawah baris. Jadi, ganti cuplikan "align-items: center" dengan yang berikut:

align-items: flex-end;

Ini menyelaraskan semua modul ke bagian bawah baris yang akan bekerja dengan baik dengan bagian Pembagi yang akan kita tambahkan.

Sekarang kita siap untuk menyesuaikan bagian kita. Buka pengaturan bagian dan perbarui yang berikut ini:

Latar belakang: #2a3443

Gaya Pembagi Atas: lihat tangkapan layar
Warna Pembagi Atas: rgba(255,255,255,0.03)
Tinggi Pembagi Atas: 13vw
Balik Pembagi Atas: vertikal

Padding kustom: 0px atas, 0px bawah

Untuk heading kita, kita akan membuat bagian baru dan menempatkannya di atas bagian yang baru saja kita buat. Buat bagian reguler baru dengan struktur baris satu kolom.

Perbarui pengaturan bagian sebagai berikut:

Warna Latar Belakang: #2a3443

Gaya Pembagi Bawah: lihat tangkapan layar
Warna Pembagi Bawah: rgba (238.238.238.0.09)
Tinggi Pembagi Bawah: 13vw

Padding Kustom: 0px bawah

Sekarang simpan pengaturan Anda dan tambahkan Modul Teks ke baris dan perbarui yang berikut:

Untuk konten tambahkan berikut ini:

<h2>As Featured In</h2>

Judul 2 Font: Montserrat
Judul 2 Berat Font: Tebal
Judul 2 Perataan Teks: tengah
Judul 2 Warna Teks: #ffffff
Judul 2 Ukuran Teks: 32px

Margin khusus: 0px bawah

Terakhir, tambahkan modul gambar di bawah modul teks dengan logo perusahaan yang ingin Anda tampilkan di atas yang lain. Kemudian perbarui yang berikut ini:

Penjajaran Gambar: tengah
Margin Kustom: -75px

Lihat hasil akhirnya.

Pikiran Akhir

Membuat bagian di situs web Anda untuk logo perusahaan sebenarnya cukup sederhana. Setelah Anda memiliki gambar logo dengan ukuran yang tepat menggunakan editor foto, Divi dapat mengurus sisanya. Metode yang tercakup dalam tutorial ini harus memberikan semua yang Anda butuhkan untuk membuat tata letak yang ingin Anda capai dengan sedikit usaha. Dan dengan kekuatan Divi di sudut Anda, Anda harus bersenang-senang membuat beberapa tata letak unik Anda sendiri.

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!