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 keramaian terkadang lebih mudah diucapkan daripada dilakukan. Untungnya, Anda dapat memainkan 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 fitur yang sangat menarik dan bermanfaat!

Ini adalah hasil akhir yang akan kita miliki 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.

Pertama-tama saya akan menunjukkan cara menerapkan warna latar belakang pada menu. Kemudian secara terpisah saya akan menunjukkan kepada Anda bagaimana membuat ikon sosial cocok.

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

Mari kita mulai!

Terapkan warna ke berbagai menu

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

Buat situs web Anda dengan Elementor dengan mudah

Elementor memungkinkan Anda untuk dengan mudah membuat desain situs web apa pun dengan tampilan profesional. Berhentilah membayar mahal untuk apa yang dapat Anda lakukan sendiri. [Gratis]

Kami harus memastikan bahwa tautannya ada di bawah. Warna yang saya pilih, yang akan Anda temukan di Coolors.co jika Anda ingin menggunakannya, berada di sisi yang lebih 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 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 "garis 3" dan sebuah kotak opsi akan muncul.

Sekarang, tambahkan CSS berikut dalam 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.

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]

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

Ikon Jejaring Sosial (Opsional)

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

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

Lalu pergi ke pengaturan Anda di bilah sub menu dan atur warna latar belakang dan teks. Saya memilih "putih" sebagai warna teks karena saya akan menambahkan latar belakang berwarna bulat untuk setiap ikon sosial agar sesuai dengan warna menu baru, sehingga ikon tersebut dapat muncul.

Pergi ke " Header & Navigasi> Elemen header Dan centang kotak " Tampilkan ikon sosial '.

Apakah Anda ingat bagaimana kami melanjutkan untuk menambahkan CSS di setiap halaman? Kami akan kembali dan mengedit apa yang kami tulis sebelumnya. Ganti 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 tidak hanya mengubah warna latar belakang untuk menu pada 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 apakah warna heks benar di setiap halaman.

Buat Toko Online Anda dengan mudah

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

CSS umum

Kode berikut akan berada 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 terjadi di kotak CSS halaman. Alasannya adalah bahwa bagian kode ini mempengaruhi semua elemen yang ditargetkan sehingga tidak efisien untuk menempatkan kode yang sama persis 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 bobot 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 3
  1. Halo,

    Terima kasih atas semua tutorial Anda.
    Apakah Anda tahu jika kami dapat menempatkan submenu divi (level kedua di bawah dropdown) di fill-width? yang mengambil lebar penuh halaman

  2. 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
22 saham
saham13
menciak2
Register7