Loncat ke Konten Utama

Cara mengubah warna menu antara halaman Divi

Divi: tema WordPress termudah untuk digunakan

Divi: Tema WordPress terbaik sepanjang masa!

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

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 tutorial ini, saya akan menunjukkan kepada Anda bagaimana menggunakan pembangun Divi untuk menyesuaikan blog Anda, khususnya 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.

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]

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.

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

Buat Toko Online Anda dengan mudah

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

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.

Buat blog Anda dengan mudah dengan SiteGround

SiteGround memungkinkan Anda membuat blog WordPress hanya dengan beberapa klik. Nama domain gratis, hosting aman, SSL, transfer, dan banyak lagi ... [Direkomendasikan]

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 harap ini akan memungkinkan Anda untuk menyesuaikan menu di blog WordPress Anda.

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.

Tema WordPress Keren yang saya temukan
Dan ada lebih banyak tema dan model 50 000 untuk dipilih!

Kembali ke atas
35 saham
saham26
menciak2
Register7
Ada apa