Loncat ke Konten Utama

Cara mengubah warna menu antara halaman Divi

Apakah Anda mencari tema dan plugin WordPress terbaik?

Unduh plugin terbaik dan tema WordPress di Envato dan buat situs web Anda dengan mudah. Sudah lebih dari 49.720.000 unduhan. [EKSKLUSIF]

Membuat situs Anda menonjol dari kerumunan terkadang lebih mudah diucapkan daripada dilakukan. Untungnya, Anda dapat mengambil diri Anda sendiri untuk melakukan sedikit do-it-yourself dengan menambahkan sentuhan personalisasi kreatif yang akan membuat blog Anda menonjol dari yang lain.

dalam hal ini Tutoriel, Saya akan menunjukkan kepada Anda cara menggunakan pembuatnya Divi untuk menyesuaikan blog Anda, dan terutama area CSS.

Ini adalah wilayah yang saya bicarakan:

Artinya, setiap perubahan yang kami terapkan di sini hanya akan efektif pada halaman yang sedang kami edit. Ini adalah fitur yang sangat menarik dan bermanfaat!

Berikut adalah hasil akhir yang akan kita dapatkan di akhir tutorial ini. Warna latar belakang menu navigasi yang berubah tergantung pada halaman yang Anda kunjungi. Sebagai opsi tambahan Anda akan melihat bahwa ikon juga berubah warna.

Saya pertama kali akan menunjukkan bagaimana menerapkan warna latar belakang pada menu. Kemudian secara terpisah saya akan menunjukkan cara membuat ikon sosial sesuai.

Jika Anda belum membaca tutorial kami presentasi dari tema WordPress Divi, Saya mengundang Anda untuk melakukannya.

Mari kita mulai!

Terapkan warna ke berbagai menu

Pertama, saya menggunakan format header default. Jika Anda menggunakan format lain, tutorial ini harus tetap efektif karena Divi generic "divs" ID sama untuk semua format (# utama-header), sejauh yang saya tahu. Jika Anda memiliki masalah dengan format lain.

Divi: Tema WordPress terbaik sepanjang masa!

lebih 554.000 unduhan, Divi adalah tema WordPress paling populer di dunia. Sudah lengkap, mudah digunakan dan dilengkapi dengan lebih dari 62 template gratis. [Direkomendasikan]

Kami harus memastikan bahwa tautan ada di bagian bawah. Warna yang saya pilih, yang akan Anda temukan di Coolors.co jika Anda ingin menggunakannya, berada di sisi yang paling gelap, jadi saya harus membuat tautan teks memiliki warna terang. Saya memilih warna putih.

Saya menggunakan rgba (255,255,255,0.6) yang akan menjadi warna tautan dan berwarna putih gelap sebagai warna tautan aktif (untuk efek visual yang diinginkan)

Lalu pergi ke halaman di mana Anda ingin menerapkan perubahan pertama (Anda akan melihat menu link di tempat). Klik pada ikon di "3 lines" dan kotak opsi akan muncul.

Sekarang, tambahkan CSS berikut di kotak ini:

# Tangan-header {background: #474f61; }

Anda harus memiliki sesuatu yang mirip dengan ini, jangan lupa untuk mengubah kode heksadesimal dari warna pilihan Anda:

Klik pada Simpan dan perbarui Dan ini akan berlaku untuk menu utama, semua dalam satu baris kode.

Buat Toko Online Anda dengan mudah

Unduh WooCommerce gratis, plugin e-commerce terbaik untuk menjual produk fisik dan digital Anda di WordPress. [GRATIS]

Sekarang Anda hanya perlu menambahkan kode yang sama untuk semua halaman Anda dan mengubah kode hex setiap waktu.

Ikon Jaringan Sosial (Opsional)

Untuk bagian ini, kita akan memodifikasi kode yang telah kita lakukan, kemudian menambahkan beberapa kode pada tingkat CSS dari situs, dan saya akan menjelaskan mengapa beberapa CSS harus ditambahkan di setiap halaman dan mengapa beberapa tidak boleh menjadi.

Jadi pertama-tama Anda harus memastikan bahwa Anda telah mengatur tautan sosial Anda. Pergi ke " Pilihan Divi> Tema Umum Dan tambahkan URL Anda ke halaman media sosial Anda.

Kemudian masuk ke pengaturan Anda di bilah menu sub dan mengatur warna latar belakang dan teks. Saya memilih "putih" sebagai warna teks karena saya akan menambahkan latar belakang berwarna ke setiap ikon sosial agar sesuai dengan warna menu baru, sehingga ikon itu dapat muncul.

Pergi ke " Header & Navigasi> Elemen header Dan periksa kotaknya Tampilkan ikon sosial ".

Apakah Anda ingat bagaimana kami menambahkan CSS di setiap halaman? Kami akan kembali dan mengedit apa yang kami tulis sebelumnya. Gantilah apa yang Anda miliki di sana dengan CSS berikut, atau jika Anda mengenali apa yang berbeda, Anda cukup menambahkan kode tambahan.

# Tangan-header, # .Dan top-header-sosial-icon {background: #474f61; }

Kode ini akan memungkinkan situs kami untuk tidak hanya mengubah warna latar belakang untuk menu di halaman ini, tetapi juga latar belakang ikon sosial kami. Kami baru saja menambahkan elemen lain ke dalam campuran. Anda harus memiliki sesuatu yang terlihat seperti ini:

Anda mungkin perlu memeriksa bahwa warna hex benar di setiap halaman.

CSS Umum

Kode berikut akan ada di " Opsi tema> Kotak CSS Atau dalam file gaya tema anak.

# Top-header-sosial-ikon .dan li {margin-left: 5px; } # .Dan atas-header-sosial-icon {padding: 4px; margin-bottom: 8px; width: 30px; height: 30px; border-radius: 50%; line-height: 24px; }

Anda mungkin bertanya-tanya mengapa ini tidak berjalan dengan baik di kotak CSS halaman. Alasannya adalah bahwa bagian kode khusus ini mempengaruhi semua elemen yang ditargetkan sehingga tidak efisien untuk menempatkan kode yang sama di banyak tempat. Hanya warna latar belakang yang berubah per halaman, tetapi kode ini tidak berubah per halaman. Ini hanya praktik terbaik untuk menghindari penambahan berat ke situs Anda.

Itu saja untuk tutorial ini, saya berharap ini akan memungkinkan Anda untuk menyesuaikan menu pada Anda blog WordPress.

Tutorial Divi lainnya

Artikel ini berisi komentar 2
  1. Halo,

    Bagaimana Anda mengubah warna teks di header utama? Memiliki latar belakang (pada header utama saya) transparan, warna font yang saya pilih (pada header utama saya, yang menunjukkan topik saya yang berbeda) melalui antarmuka penyesuaian divi adalah hitam. Namun saya ingin warnanya menjadi putih di beberapa halaman karena foto di bawah ini terlalu gelap.

    Komentar faire?

    Merci par avance,

Tinggalkan komentar

Alamat email Anda tidak akan dipublikasikan. Bidang yang harus diisi ditandai *

Situs ini menggunakan Akismet untuk mengurangi yang tidak diinginkan. Pelajari lebih lanjut tentang bagaimana data komentar Anda digunakan.

Kembali ke atas
35 saham
saham26
menciak2
Register7
Ada apa