Mengalihkan Logo Anda pada Header Tetap di Divi

Itu selalu merupakan ide bagus untuk membuat berbagai versi logo Anda dengan warna dan ukuran yang berbeda. Misalnya, Anda mungkin harus memiliki versi gelap dan terang dari logo Anda sehingga akan terlihat bagus pada warna latar belakang yang berbeda. Dan memiliki versi logo yang lebih kecil (kurang vertikal dan lebih horizontal) untuk area sempit situs web Anda. Salah satu tempat terbaik untuk menggunakan versi berbeda dari logo Anda adalah pada header tetap (atau lengket).

Dalam banyak kasus, tajuk tetap Anda akan membutuhkan gaya yang berbeda dari tajuk utama Anda. Jika Anda menyimpan logo yang sama, Anda terbatas dalam cara menata tajuk tetap Anda. Di sinilah memiliki logo kustom sangat berguna. Dengan logo terpisah yang disesuaikan khusus untuk header tetap, Anda dapat menatanya sesuka Anda. Ini memberi Anda kontrol lebih besar atas desain situs Anda.

Dalam posting ini saya akan menunjukkan kepada Anda bagaimana:

1. Ganti logo Anda dengan yang lain saat header tetap Anda aktif. (Ini dapat dilakukan dengan satu baris CSS)
2. Balikkan warna logo Anda pada header tetap Anda.
3. Tambahkan efek transisi yang keren saat mengganti logo Anda di header tetap.
4. Beralih dan pindahkan logo tajuk tengah Anda ke tata letak default (rata kiri) pada tajuk tetap Anda.

Mari kita mulai.

Sneak Peek

Berikut adalah sedikit mengintip dari apa yang akan kita capai dalam tutorial ini.

Inilah tampilan sakelar logo sederhana.

Berikut adalah logo switch dengan efek transisi.

Berikut adalah logo yang mengubah posisi dari gaya header tengah.

Pengaturan

Sebelum Anda melakukan hal lain, pastikan Anda menyelesaikan hal berikut:

1. Instal Divi versi terbaru.
2. Menerapkan Tema Anak Divi yang aktif. Jika Anda memerlukan bantuan dengan menyiapkan tema anak, itu tercakup dalam posting ini. Jika Anda membutuhkan bantuan tambahan. Silakan hubungi tim dukungan kami.
3. Buat dua versi logo Anda yang berukuran 200 × 131 dan tambahkan ke perpustakaan Media WordPress Anda. Satu logo akan digunakan untuk tajuk utama dan satu akan digunakan untuk tajuk tetap Anda. Jika bisa, buat versi header tetap dari logo lebih horizontal sehingga tidak akan tercoreng secara vertikal pada header tetap yang lebih kecil. Berikut adalah contoh logo header utama yang saya gunakan. Berikut adalah contoh logo header tetap saya. Perhatikan saya memotong teks untuk membuat logo yang lebih sederhana dan lebih horizontal yang cocok dengan baik pada header dengan ketinggian yang lebih rendah. Tidak mungkin ada orang yang dapat membaca teks itu dan merek masih diwakili.

   

4. Atur menu utama Anda dengan item menu.

Setelah Anda menyelesaikan langkah-langkah ini, Anda siap untuk memulai.

Mengalihkan Logo Anda pada Header Tetap di Divi

Berlangganan Saluran Youtube Kami

Mengganti Logo pada Header Tetap Anda menggunakan CSS

Sebelum kita masuk ke CSS khusus kita, mari kita atur pengaturan menu kita di dalam penyesuai tema. Dari backend situs WordPress Anda, buka Theme Customizer > Header & Navigation > Header Format dan pastikan Anda telah memilih gaya header default.

Kemudian kembali ke pengaturan Header & Navigation di Theme Customizer. Pilih Bilah Menu Utama dan perbarui yang berikut ini:

Tinggi Menu: 105
Tinggi Maks Logo: 80
Ukuran Teks: 20

Sekarang kembali ke Header & Navigasi. Pilih Pengaturan Navigasi Tetap dan perbarui yang berikut ini:

Tinggi Menu Tetap: 60
Ukuran Teks: 20

Anda dapat menambahkan sisa pengaturan Anda agar sesuai dengan desain situs Anda. Ketinggian menu dan logo mungkin perlu disesuaikan dengan kebutuhan Anda. Namun, saya sarankan Anda menyimpan pengaturan ini jika Anda ingin menambahkan efek transisi sehingga ukurannya akurat. Anda selalu dapat kembali dan mengubahnya nanti.

Masukkan Cuplikan CSS untuk Mengaktifkan Logo di Header Tetap

Salah satu cara paling sederhana untuk mengganti gambar logo Anda dengan yang lain di header tetap adalah dengan menggunakan properti CSS "konten". Jika Anda terbiasa dengan CSS, ini biasanya digunakan saat menambahkan konten ke elemen pseudo :before atau :after. Dalam hal ini kita akan menggunakannya untuk menyisipkan konten baru (gambar logo Anda) untuk menggantikan gambar logo saat ini.

Untuk melakukan ini, buka Penyesuai Tema > CSS Tambahan dan masukkan CSS berikut.

/*********************************
change logo for fixed header (quick and easy way)
**********************************/
.et-fixed-header #logo {
content: url(INSERT NEW LOGO IMAGE URL);
}

Sekarang ganti teks yang mengatakan "MASUKKAN GAMBAR LOGO BARU" dengan gambar logo Anda yang sebenarnya.

Untuk mendapatkan URL, buka perpustakaan media Anda dari Dasbor WordPress dan klik gambar yang ingin Anda tambahkan. Anda dapat menemukan URL di kanan atas layar yang muncul.

Itu dia. Solusi sederhana ini akan mengganti logo Anda dengan yang baru hanya ketika tajuk tetap aktif saat Anda menggulir ke seluruh halaman. Logo default akan kembali ketika Anda menggulir kembali ke bagian paling atas halaman.

Membalikkan Warna Logo Anda

Jika Anda hanya ingin menambahkan versi gelap atau terang dari logo yang sama pada header tetap, Anda mungkin menyukai solusi ini.

Menggunakan properti CSS terbalik, Anda dapat membalikkan warna logo Anda dengan beberapa baris CSS. Misalnya, jika logo Anda berwarna hitam, membalikkan warna logo akan mengubahnya menjadi putih. Dan jika logo berwarna putih, maka akan berubah menjadi hitam. Untuk menambahkan gaya ini ke logo Anda, buka Penyesuai Tema > CSS Tambahan dan tambahkan CSS berikut (pastikan Anda menghapus atau mengomentari CSS yang ditambahkan sebelumnya):

/*********************************
Invert Logo color on fixed header
*********************************/
.et-fixed-header #logo {
-webkit-filter: invert(100%);
filter: invert(100%);
}

Lihat hasilnya. Ini adalah logo hitam yang dibalik menjadi versi putih.

Menambahkan Efek Transisi Saat Mengganti Logo Anda di Header Tetap

Anda mungkin bertanya-tanya mengapa saya akan membahas cara lain (lebih kuat) untuk mengganti logo Anda pada header tetap. Alasan utamanya adalah agar kita dapat menambahkan efek transisi yang keren ke logo saat "bertransisi" ke header tetap. Untuk melakukan ini, kita membutuhkan kedua gambar logo di samping satu sama lain untuk penataan.

Menambahkan Logo Baru Anda ke File Header.php

Untuk menambahkan gambar logo lain ke header Anda, kita perlu menambahkannya ke file header.php. Menggunakan Klien FTP (seperti FileZilla), buka root file Divi Theme Anda dan buat salinan file header.php.

Tempelkan salinan file header.php ke root folder tema anak Anda.

Selanjutnya, menggunakan editor teks pilihan Anda, buka file header.php. Temukan kode html untuk tautan yang menyimpan gambar logo yang dibungkus div dengan kelas “logo_container”.

<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<img src="<?php echo esc_attr( $logo ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" id="logo" data-height-percentage="<?php echo esc_attr( et_get_option( 'logo_height', '54' ) ); ?>" />
</a>

Kami akan menambahkan potongan kode serupa untuk menampilkan gambar lain di header Anda. Salin dan tempel kode berikut langsung di bawahnya.

<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<img src="INSERT NEW LOGO IMAGE URL" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" id="logo" class="second-logo" data-height-percentage="<?php echo esc_attr( et_get_option( 'logo_height', '54' ) ); ?>" />
</a>

Perhatikan ini adalah salinan terbaru dari kode asli di atasnya dengan dua perbedaan. Pertama, ia memiliki URL sumber gambar baru yang perlu Anda tambahkan. Dan kedua, itu kelas yang disebut "logo kedua".

Dari dasbor WordPress Anda, buka perpustakaan media Anda dan dapatkan url untuk gambar logo baru yang ingin Anda tambahkan.

Kemudian kembali ke file header.php Anda. Temukan cuplikan kode yang baru saja Anda buat dan ganti teks yang bertuliskan "INSERT NEW LOGO IMAGE URL HERE" dengan URL gambar yang sebenarnya.

Simpan file header.php Anda.

Sekarang Anda memiliki dua logo yang akan ditampilkan berdampingan di situs Anda. Kemungkinan Anda tidak ingin membiarkannya seperti itu jadi mari tambahkan CSS Kustom yang diperlukan untuk membuat efek transisi kita.

Menambahkan Transisi Keren saat Logo Beralih di Header Tetap Anda

Buka Penyesuai Tema > CSS tambahan dan hapus (atau beri komentar) kode dari bagian sebelumnya dari posting ini (jika ada). Kemudian tambahkan CSS Kustom berikut:

@media all and (min-width: 980px){
/*********************************
show, hide, and transition logos for primary and fixed nav;
must have second logo in header.php file for this to work
**********************************/
#logo {
opacity:1;
display:inherit;
margin: 0 0 0 0;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
#logo.second-logo {
opacity:0;
margin: 0 0 -200px -130px;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.et-fixed-header #logo {
opacity: 0;
margin: -200px 0px 0 0px;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;

}
.et-fixed-header #logo.second-logo {
opacity:1;
margin: 0 0 0 -90px !important;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}

/*********************************
hides overflow on header container so logo doesn't show outsite header on transition
*********************************/
#main-header {
overflow: hidden;
}
}

Saya telah mengomentari kode CSS untuk memberi tahu Anda apa yang dilakukan kode tersebut. Singkatnya CSS mengurangi dan meningkatkan opacity dari masing-masing logo sambil memindahkannya ke luar header. Dengan demikian, Anda memiliki efek transisi yang cukup keren untuk logo Anda saat menuju ke header tetap Anda.

Mengubah Lokasi Logo Header Terpusat Anda ke Kiri untuk Header Tetap Anda

Jika Anda menyukai Gaya Header Terpusat untuk menampilkan header Anda, Anda mungkin ingin memeriksa lokasi logo tersebut pada header tetap Anda. Bagi saya, saya lebih suka memiliki gaya tajuk default (dengan logo rata kiri) di tajuk tetap saya. Alasan utamanya adalah karena memiliki logo di bagian atas navigasi saya cenderung membuat tajuk tetap agak terlalu tinggi saat menggulir untuk melihat halaman.

Untuk beralih dari logo tengah ke logo rata kiri, Anda dapat menambahkan CSS khusus berikut di kotak CSS Tambahan di Penyesuai Tema. Pertama tambahkan kode untuk mengganti logo dengan cara cepat dan mudah:

/*********************************
change logo for fixed header (quick and easy way)
**********************************/
.et-fixed-header #logo {
content: url(INSERT NEW LOGO IMAGE URL HERE);
}

Jangan lupa untuk menambahkan URL gambar logo Anda.

Kemudian tambahkan yang berikut untuk menyesuaikan penempatan logo:

@media all and (min-width: 980px){
/*********************************
change centered logo on centered header style to default layout when fixed header is active
*********************************/
.et_header_style_centered header#main-header.et-fixed-header .logo_container {
float: left;
width: 20%;
}

.et_header_style_centered #main-header.et-fixed-header div#et-top-navigation {
width: 80%;
float: right;
height: 70px;
line-height: 70px;
text-align: right;
}
.et-fixed-header #top-menu-nav {
float: none!important;
}

.et_fixed_nav #et-top-navigation {
-webkit-transition: none !important;
-moz-transition: none !important;
transition: none !important;
}
}

Catatan: Pastikan Anda menghapus CSS sebelumnya dari postingan ini yang akan bentrok.

Itu dia. Lihat hasilnya.

Dalam Penutupan

Sulit untuk tidak bangga dengan logo yang bagus. Jadi, jangan puas dengan versi kecil yang tidak memenuhi syarat atau, lebih buruk lagi, menyembunyikan logo Anda di header tetap Anda. Alihkan ke versi khusus dengan transisi mulus yang akan dihargai oleh klien Anda.

Akan datang

Secara default, Divi tidak menyertakan header tetap di ponsel. Tetapi menambahkan satu sangat sederhana. Dalam posting saya berikutnya, saya akan menunjukkan cara menambahkan header tetap khusus dengan logo berbeda di ponsel. Berikut sedikit bocoran.

Aku tak sabar untuk itu.

Jangan lupa untuk mengirim komentar Anda di bawah ini. Jika Anda memiliki masalah terkait pengaturan dan pengeditan file tema anak Anda, silakan hubungi tim dukungan kami.

Bersulang.