Membuat situs Anda menonjol dari yang lain terkadang lebih mudah diucapkan daripada dilakukan. Untungnya, Anda dapat terlibat dalam DIY dengan menambahkan sentuhan penyesuaian kreatif yang akan memastikan hal itu blog Anda menonjol dari yang lain.

Dalam tutorial ini, saya akan menunjukkan cara menggunakan pembuat Divi untuk menyesuaikan blog Anda, dan khususnya area CSS.

Ini adalah wilayah yang saya bicarakan:

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.

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.

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.

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.

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:

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 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.

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.

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 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:

Anda mungkin perlu memeriksa apakah warna heks benar di setiap halaman.

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 pada Anda blog WordPress.

[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]UNDUH TEMA DIVI [/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorial” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]UNDUH TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

Tutorial Divi lainnya

barang serupa

3 Komentar

coco pada 8 Januari 2020 pukul 22:13 malam

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
jawaban
Germain Jung pada 10 Oktober 2018 pukul 10:20

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,
jawaban
- Thierry Bertrand pada 10 Oktober 2018 pukul 16:32
  
  Halo Germain,
  
  Apakah Anda ingin menjadi putih di semua halaman atau hanya beberapa halaman?
  jawaban