Loncat ke Konten Utama

Cara mengubah warna menu antara halaman Divi

Divi: tema WordPress termudah untuk digunakan

Divi: Tema WordPress terbaik sepanjang masa!

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

Terkadang membuat situs Anda menonjol dari kerumunan lebih mudah diucapkan daripada dilakukan. Untungnya, Anda bisa terjebak dalam bermain-main dengan menambahkan sentuhan kreatif personalisasi yang akan membuat blog Anda menonjol dari keramaian.

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:

Bagian pembuat css wordpress kustom

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

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.

Ikon yang mengubah warna divi

Pertama-tama saya akan menunjukkan bagaimana menerapkan warna latar belakang pada menu. Kemudian secara terpisah saya akan menunjukkan kepada Anda cara 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 header default. Jika Anda menggunakan format lain, tutorial ini tetap efektif karena ID umum "div" di Divi sama untuk semua format (# main-header), sejauh yang saya tahu. Jika Anda mengalami masalah dengan format lain.

Format tajuk Divi

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 perlu memastikan tautan muncul di bagian bawah. Warna yang saya pilih, yang akan Anda temukan di Coolors.co jika Anda ingin menggunakannya, ada di sisi yang lebih gelap, jadi saya harus membuat tautan teks menjadi warna terang. Saya memilih warna putih.

Personalisasi menu divi

Saya menggunakan rgba (255,255,255,0.6) yang akan menjadi warna link dan putih tua sebagai warna link 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 "3 baris" dan kotak pilihan akan muncul.

Pembuat WordPress divi

Sekarang tambahkan CSS berikut di kotak ini:

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

Anda harus memiliki sesuatu yang mirip dengan ini, jangan lupa untuk mengubah kode hex ke warna apa pun yang Anda inginkan:

Pengaturan divi kustomisasi warna

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 ini untuk semua halaman Anda dan mengubah kode hex setiap kali.

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.

Ikon divi sosial

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

Menyesuaikan menu sekunder

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

Elemen header wordpress Divi

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 kita untuk tidak hanya mengubah warna latar untuk menu di halaman ini, tetapi juga latar belakang ikon sosial kita. Kami baru saja menambahkan elemen lain ke dalam campuran. Anda harus memiliki sesuatu yang terlihat seperti berikut:

Editor tema divi kode css khusus

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.

Opsi tema bagian kustom divi css

# 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 transparan (di header utama saya), warna font yang saya pilih (di header utama saya, yang menampilkan bagian saya yang berbeda) melalui antarmuka kustomisasi divi berwarna hitam. Namun demikian, saya ingin menjadikannya 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