Panduan Utama untuk Penyesuai Tema Divi

Penyesuai Tema Divi adalah alat yang ampuh dan nyaman untuk membuat penyesuaian pada Tema Divi. Seperti Visual Builder, Divi Theme Customizer memungkinkan kustomisasi front-end visual dan perubahan desain yang menghilangkan permainan tebak-tebakan dari proses kustomisasi. Jika digunakan secara efisien, alat ini dapat menjadi penghemat waktu dan permulaan yang baik untuk proyek-proyek masa depan.

Posting hari ini dimaksudkan untuk membantu Anda lebih memahami cara kerja Penyesuai Tema sehingga Anda dapat menggunakannya untuk meningkatkan produktivitas untuk proyek mendatang. Saya mencakup hampir semua opsi yang tersedia di Penyesuai Tema dengan penekanan pada opsi yang khusus untuk Divi. Di satu sisi, posting ini berfungsi sebagai bagian dokumentasi yang menawarkan beberapa penjelasan mendalam dan tip desain di sepanjang jalan. Saya juga akan menunjukkan cara mengekspor pengaturan Customizer untuk digunakan pada proyek Anda berikutnya.

Kami memiliki banyak hal untuk dibahas, jadi mari kita mulai dari awal.

Dibangun dengan WordPress dalam Pikiran

Penyesuai tema diperkenalkan di WordPress 3.4. Fitur nyaman ini memungkinkan pengguna WordPress untuk melihat pratinjau perubahan yang mereka buat pada tema mereka secara real time dan kemudian menyimpan perubahan tersebut dalam satu klik. Apa yang digunakan untuk mengambil banyak jendela dan penyegaran yang tak terhitung jumlahnya, sekarang dapat dilakukan dengan cepat dalam satu jendela browser.

Berikut adalah contoh opsi Theme Customizer pada tema TwentySeventeen:

Seperti yang Anda lihat, banyak fitur WordPress yang dulu berada di halaman berbeda di backend WordPress (Identitas Situs, Menu, Widget, dll…) sekarang dapat diakses di penyesuai front-end ini di satu tempat.

Di sisi lain, Divi Theme Customizer dibangun sebagai versi yang disempurnakan dari Theme Customizer ini dengan semua jenis opsi khusus Divi. Bagi pengguna, ini membuat proses penyesuaian Divi jauh lebih mudah. Dan fakta bahwa Anda benar-benar dapat melihat penyesuaian saat mengedit (secara bersamaan) menjadikannya alat desain yang nyaman.

Divi Theme Customizer masih memiliki banyak opsi Customizer WordPress standar, tetapi juga memiliki lebih banyak lagi.

Seperti yang Anda lihat, ada lebih banyak pengaturan yang telah ditambahkan ke Divi Theme Customizer. Sekarang mari kita mulai menjelajahi ini secara lebih mendalam.

Pengaturan Umum

Ketika Anda mulai menyesuaikan tema Anda, saya pikir yang terbaik adalah memulai dari atas dengan Pengaturan Umum dan turun ke bawah.

Identitas Situs

Bagian ini tidak unik untuk Divi. Ini adalah tempat yang nyaman untuk mengubah judul situs dan tagline untuk situs Anda. Anda juga dapat memasukkan ikon situs yang digunakan untuk browser dan aplikasi, berbeda dengan ikon favicon yang dapat Anda tambahkan di Opsi Tema Divi.

pengaturan tampilan

Pengaturan tata letak memungkinkan Anda untuk menyesuaikan kerangka tema Anda dengan menentukan berapa banyak ruang antara bagian dan baris dan berapa lebar maksimum bagian konten utama Anda nantinya.

AKTIFKAN LAYOUT KOTAK

Di sini Anda dapat mengubah situs Anda menjadi tata letak kotak yang membingkai konten situs Anda dan memperlihatkan latar belakang yang dapat disesuaikan.

LEBAR KONTEN SITUS WEB

Di sinilah Anda dapat mengatur lebar maksimum bagian konten Anda. Karena konten Anda berada pada tata letak responsif, itu akan menyesuaikan dengan ukuran yang lebih kecil tetapi tidak akan meluas lebih lebar dari lebar maksimum yang ditetapkan di sini.

Default diatur ke 1080px. Ini adalah lebar yang baik untuk sebagian besar laptop dan desktop standar.

LEBAR SALURAN WEBSITE

Lebar selokan sesuai dengan jumlah ruang horizontal (margin) antara kolom di setiap baris.

Nilai opsional untuk lebar talang berkisar dari 1 hingga 4.

1 mewakili margin nol antara kolom.
2 mewakili margin kanan 3% antara kolom.
3 mewakili margin kanan 5,5% di antara kolom.
4 mewakili margin kanan 8% antar kolom.

GUNAKAN LEBAR SIDEBAR KUSTOM

Ini menetapkan lebar bilah sisi default untuk tema Anda. Ini berlaku untuk semua halaman di tema Anda yang memiliki bilah sisi dan tidak dibuat menggunakan Divi Builder.

BAGIAN DAN TINGGI BARIS

Opsi ini menyesuaikan jumlah spasi vertikal (padding atas dan bawah) untuk setiap bagian dan baris.

Secara default, padding bagian adalah 50px di bagian atas dan bawah . Untuk Baris, padding default adalah 30px di bagian atas dan bawah . Namun, dengan mengubah padding bagian atau baris menggunakan Customizer, nilai padding berubah menjadi persentase yang sesuai dengan angka pada pilihan dial pada penyesuai tema.

Misalnya, "0" mewakili 0% bantalan atas dan bawah, "1" mewakili 1% bantalan atas dan bawah, "2" mewakili 2%, dan seterusnya. Persentase padding didasarkan pada lebar wadah (bagian atau baris). Jadi jika lebar sebenarnya dari bagian adalah 1080px dan Anda telah mengatur tinggi bagian menjadi 1, ini berarti Anda akan memiliki…

1080px x 0,01 = 10.8px

… Padding 10.8px di bagian atas dan bawah.

Pilihannya berkisar dari 0 hingga 10 sehingga Anda dapat memiliki padding sebanyak 10%.

WARNA AKSEN TEMA

Sebelum Anda mulai mengubah warna untuk elemen Anda yang lain, Anda harus mengubahnya terlebih dahulu . Setelah Anda mengubahnya, simpan & publikasikan pengaturan Anda dan segarkan halaman Anda. Sekarang Warna Aksen Tema yang diperbarui seharusnya telah mengisi elemen lain secara otomatis.

Memperbarui Warna Aksen Tema juga akan memperbarui yang berikut:

• Warna Tautan Tubuh
• Warna Tajuk Widget
• Warna Peluru Widget
• Ikon Sosial Footer Arahkan warna
• Warna default untuk ikon
• Menu Footer Warna Tautan Aktif
• Warna latar belakang menu sekunder
• Warna latar Slide In dan Fullscreen Header Style
• Ikon Menu Hamburger untuk warna menu seluler
• Warna Tautan Aktif Menu Utama
• Warna Garis Menu Dropdown
• Warna Latar Menu Sekunder
• Warna Latar Belakang Menu Dropdown Sekunder
• Warna Latar Menu Sekunder
• Warna Tautan Menu Utama Aktif
• Menu Footer Warna Tautan Aktif

Tipografi

Ini adalah salah satu aspek terpenting dari situs web Anda yang cenderung diabaikan oleh pengguna dan pengembang. Jangan membuat kesalahan dengan mengabaikan opsi ini. Mendapatkan detail ini dengan benar dapat membuat perbedaan besar. Meluangkan waktu untuk mengatur tipografi default untuk tema Anda juga dapat menghemat waktu Anda dalam jangka panjang karena Anda tidak perlu melakukan penyesuaian di tingkat modul.

UKURAN TEKS TUBUH

Ini mengubah teks isi default untuk tema Anda. Ukuran default adalah 14px.

Tip Desain: Tampaknya 14px agak terlalu kecil untuk ukuran teks isi standar. Anda benar-benar tidak boleh kurang dari 16px untuk ukuran font tubuh tingkat dasar Anda. Kami yang berusia hampir 40 tahun ke atas akan berterima kasih. Bahkan sebagian besar browser menggunakan 16px sebagai ukuran font standar tingkat dasar.

TINGGI GARIS TUBUH

Tinggi baris dari setiap baris teks individu.

Tip Desain : Tinggi garis diukur dengan nilai panjang “em”. Default Divi adalah 1.7em untuk teks isi. Nilai em ini lebih baik daripada nilai piksel (px) karena didasarkan pada ukuran font elemen saat ini dan karenanya diskalakan dengan nilai inline induk (atau dalam kasus kami, ukuran font saat ini). Nilai "1.7em" pada dasarnya mewakili 1,7 kali ukuran font saat ini. Jadi jika ukuran font Anda saat ini adalah 16px, tinggi garis akan menjadi 27.2px. Ini memberi Anda 5,6 piksel ruang ekstra di bagian atas dan 5,6 piksel di bagian bawah. Ini tampaknya menjadi awal yang baik (spasi di antara baris salinan) untuk keterbacaan.

UKURAN TEKS KEPALA

Divi memungkinkan Anda untuk mengatur ukuran teks Header h1 default Anda di sini. Ini mempengaruhi elemen Divi seperti judul Modul Header Lebar Penuh. Jika Anda ingin menyesuaikan ukuran level header lainnya (h2, h3, dll…), maka saya sarankan untuk menambahkannya di CSS Tambahan (ini akan dibahas nanti dalam posting).

Tip Desain: Dalam kebanyakan kasus, Anda hanya akan memiliki satu tajuk per halaman, jadi buatlah itu diperhitungkan. Anggap saja sebagai judul di sampul buku. Ini adalah hal pertama yang diperhatikan seseorang. Dan, bertentangan dengan slogan populer, orang masih menilai buku dari sampulnya, terutama dalam hal ini.

Nilai default untuk ukuran teks Header adalah 30px. Ini adalah ukuran aman yang baik untuk memulai. Terutama karena beberapa berita utama akan membutuhkan salinan yang lebih panjang. Namun, saya cenderung memilih ukuran header yang lebih besar untuk mengakomodasi ukuran tampilan monitor yang semakin besar. Plus, sebagian besar klien membutuhkan situs web dengan judul sederhana dan pendek seperti "Tentang kami" dan "Hubungi Kami" yang terlihat lebih baik dengan ukuran font yang lebih besar. Saya suka mengatur header h1 saya ke setidaknya 48px .

SPASI SURAT KEPALA

Penspasian huruf menyesuaikan spasi horizontal antar huruf. Nilai Spasi Huruf Header mempengaruhi semua level header (h1, h2, h3, h4, h5, h6), blockquotes, dan judul slide.

Tip Desain: Ini adalah teknik desain yang baik untuk mengurangi spasi huruf untuk teks yang lebih besar dan meningkatkan spasi huruf untuk teks yang lebih kecil . Dalam hal header, teks yang lebih besar dengan bobot font yang lebih besar (tebal) dapat terlihat lebih baik dengan pengurangan spasi huruf -1px.

Namun, jika Anda meletakkan header yang sama dalam huruf besar, Anda mungkin menemukan bahwa meningkatkan spasi huruf menjadi 1-2px akan terlihat lebih baik.

TINGGI GARIS KEPALA

Sama seperti nilai spasi huruf, nilai tinggi baris header mempengaruhi semua level header (h1, h2, h3, h4, h5, h6), blockquotes, dan judul slide. Karena ukuran font yang lebih besar, 1em adalah pengaturan default. Saya pikir ketinggian garis di suatu tempat antara 1em dan 1.3em terlihat bagus, terutama ketika header menuju dua baris atau lebih.

GAYA FONT KEPALA

Gunakan opsi ini untuk mengubah gaya font header Anda.

FONT HEADER DAN BODY

Font default di Divi adalah Open Sans , tetapi Divi Theme Customizer memiliki hampir seratus font untuk dipilih! Manfaatkan font bawaan ini dan uji mana yang paling cocok untuk tema Anda.

Tip Desain: Untuk inspirasi untuk pasangan font, Anda dapat melihat fontpair.co yang membantu untuk memasangkan Google Font bersama-sama. Divi tidak akan mendukung semua font ini di luar kotak, tetapi Anda dapat melakukan pencarian untuk font yang didukung Divi untuk melihat pasangan yang bekerja sama dengan baik.

WARNA TAUTAN TUBUH

Warna tautan tubuh diwarisi oleh warna aksen tema Anda. Tetapi Anda selalu dapat mengubahnya di sini.

Tip Desain: Jika mau, Anda dapat menambahkan atribut garis bawah untuk semua tautan tubuh Anda menggunakan CSS Tambahan (lihat akhir posting).

WARNA TEKS TUBUH

Di sini Anda dapat mengubah warna teks tubuh Anda. Blog Populer seperti New York Times dan Smashing Magazine menggunakan #333333 untuk warna teks tubuh mereka. Ini cenderung membaca lebih baik pada latar belakang putih menurut saya.

WARNA TEKS KEPALA

Di sini Anda dapat mengubah warna header Anda. Jika Anda tetap menggunakan warna hitam, saya akan sedikit lebih gelap daripada teks isi untuk membuatnya sedikit menonjol. Sesuatu seperti #121212 akan berhasil.

Latar belakang

Opsi ini mengatur latar belakang untuk tema Anda. Untuk Tema Divi, opsi ini benar-benar hanya berlaku untuk tata letak kotak . Warna latar belakang default adalah putih (#ffffff) kecuali jika Anda mengubahnya di sini. Anda juga dapat menambahkan gambar latar belakang jika Anda mau.

Itu saja untuk Pengaturan Tata Letak. Setelah Anda memiliki tata letak, Anda dapat mulai melihat elemen yang lebih spesifik.

Tajuk & Navigasi

Header dan menu navigasi mungkin merupakan elemen terpenting pada tema Anda. Bagian ini memiliki banyak opsi untuk membuat hampir semua jenis header yang Anda inginkan.

Format Tajuk

Gaya Tajuk

Empat gaya tajuk dapat memberikan tampilan baru pada situs web Anda hanya dengan satu klik. Gaya ini termasuk Centered, Centered In-line Logo, Slide-in, dan Fullscreen.

Anda juga dapat menambahkan navigasi vertikal ke situs Anda yang dapat menjadi fitur unik. Dan, Anda dapat memilih untuk menyembunyikan navigasi hingga Anda menggulir. Ini akan berguna untuk situs satu halaman yang ingin menyorot lebih banyak konten di paro atas tanpa gangguan bilah navigasi.

Bilah Menu Utama

Bilah menu Utama Anda adalah menu utama di dalam header situs web Anda. Anda dapat sepenuhnya menyesuaikan tampilan menu utama Anda.

Tip Desain: Anda benar-benar perlu tahu apa tautan menu Anda sebelum Anda mulai menyempurnakan menu dengan Divi Theme Customizer. Jangan lupa Anda akan menata menu responsif jadi luangkan waktu untuk memastikan menu terlihat bagus di semua ukuran layar. Anda dapat melakukannya dengan mengeklik ikon perangkat di bagian bawah penyesuai atau hanya dengan menyesuaikan ukuran peramban Anda. Jika Anda tertarik, Anda dapat mengetahui cara memperbaiki navigasi responsif Anda di sini.

Buat Lebar Penuh

Ini memperluas menu dengan lebar penuh jendela browser.

Sembunyikan Gambar Logo

Jika mau, di sini Anda dapat sepenuhnya menyembunyikan gambar logo dari menu Anda.

Tinggi Menu

Di sini Anda dapat mengubah ketinggian menu menjadi apa pun yang Anda inginkan. Meskipun demikian, berhati-hatilah untuk tidak membuat tinggi menu Anda terlalu besar karena Anda dapat membuang real estat yang berharga pada menu alih-alih konten beranda Anda.

Tinggi Maks Logo

Di sini Anda dapat menambah atau mengurangi persentase lebar maksimum logo Anda untuk membuatnya lebih besar atau lebih kecil.

Ukuran Teks, Spasi Huruf, Font, Gaya Font, Warna Teks, Warna Tautan Aktif

Opsi ini memungkinkan Anda untuk menyesuaikan tautan menu dengan cara apa pun yang Anda inginkan.

Warna latar belakang

Ini memungkinkan Anda untuk mengubah warna latar belakang menu utama Anda.

Tip Desain: Jika Anda menggunakan warna semi transparan (atau benar-benar transparan) untuk header Anda, Divi akan secara otomatis menutupi header di atas bagian di bawahnya tanpa terlihat. Ini menciptakan efek yang cukup keren. Misalnya, ini adalah gaya tajuk terpusat dengan latar belakang transparan dan tajuk lebar penuh langsung di bawahnya. Perhatikan bagaimana Divi secara otomatis menyesuaikan gambar latar belakang agar pas di belakang header:

Pengaturan Menu Dropdown

Menu tarik-turun Anda tidak harus mewarisi gaya menu utama. Di sini Anda dapat membuat desain unik untuk menu dropdown Anda. Anda bahkan dapat menambahkan animasi khusus saat menampilkan menu tarik-turun.

Bilah Menu Sekunder

Di sini Anda dapat menyesuaikan bilah menu sekunder menggunakan opsi yang disediakan.

Saat diaktifkan, bilah menu sekunder berada di atas bilah menu utama di bagian paling atas browser Anda. Itu dapat menampung elemen tambahan termasuk alamat email, tautan media sosial, dan menu sekunder.

Secara default, menu sekunder akan tetap tersembunyi kecuali Anda masuk ke menu sekunder atau menambahkan elemen di bawah bagian Elemen Header. Anda mungkin perlu menyimpan dan menyegarkan penyesuai tema untuk melihat menu.

Pengaturan Navigasi Tetap

Navigasi Tetap mengacu pada status menu yang "diperbaiki" atau terjebak di bagian atas jendela browser saat pengguna menggulir halaman ke bawah. Secara default, navigasi tetap menyusut tingginya untuk menyediakan area pandang yang lebih besar untuk menampilkan konten situs.

Tip Desain: Anda juga dapat mengatur Warna Latar Menu Utama Tetap ke warna semi transparan untuk mengungkapkan beberapa konten di baliknya. Ini membuatnya lebih tidak mengganggu tetapi masih dapat diakses.

Elemen Tajuk

Elemen header adalah elemen tambahan yang dapat Anda tambahkan ke header. Elemen-elemen ini termasuk ikon sosial, ikon pencarian, nomor telepon, dan email. Selain ikon pencarian, semua elemen ini akan ditampilkan di menu sekunder.

Ikon Sosial

Secara default Divi menampilkan ikon untuk Facebook, Twitter, Google+, dan RSS. Anda dapat mengedit profil ini di Opsi Tema Divi.

catatan kaki

Secara default, bagian footer disembunyikan kecuali diisi oleh konten. Juga, footer tidak boleh disamakan dengan Bilah Bawah yang ditampilkan di bagian paling bawah situs secara default dan menyertakan kredit footer dan ikon sosial.

Tata Letak

Di sini Anda dapat memilih antara 5 tata letak untuk bagian footer Anda.

Anda juga dapat mengatur warna latar belakang footer yang diatur ke #222222 secara default.

Tip Desain: Bagian ini akan ditampilkan di semua halaman situs Anda (kecuali jika Anda memilih templat halaman kosong). Oleh karena itu, masuk akal untuk membuat warnanya lebih netral sehingga cocok dengan semua halaman situs Anda.

Widget

Jika Anda menambahkan widget ke Bagian Footer, Anda dapat mengatur tampilan widget tersebut di sini.

Widget tidak unik untuk Divi. Ini dibangun di wordpress dan dapat ditemukan di dasbor wordpress di bawah Appearance > Widgets . Di sana Anda dapat melihat empat Area Footer tempat Anda dapat menambahkan widget. Widget apa pun yang Anda tambahkan ke bagian ini akan ditampilkan di area footer Anda.

Namun, Anda juga dapat mengakses area widget tanpa harus meninggalkan penyesuai tema (salah satu hal favorit saya tentangnya).

Elemen Catatan Kaki

Di sini Anda dapat memilih untuk menampilkan ikon sosial Anda di bilah bawah seperti di menu sekunder.

Menu Catatan Kaki

Jika Anda memiliki menu footer, Anda dapat menatanya di sini.

Bilah Bawah

Bilah bawah berada di bagian paling bawah situs web Anda dan menampilkan kredit footer dan ikon sosial Anda secara default. Di sini Anda dapat menyesuaikan gaya elemen ini termasuk mengubah ukuran dan warna font ikon sosial.

Edit Kredit Footer

Anda juga dapat mengganti kredit footer default dengan html apa pun yang Anda inginkan di dalam kotak ini.

Tombol

Bagian ini mengontrol gaya tombol default yang Anda inginkan.

Gaya Tombol

Di sini Anda dapat menyesuaikan gaya tombol untuk tema Anda. Saya tidak akan membahas secara rinci setiap opsi di sini. Anda dapat melihat dokumentasi kami di modul tombol untuk info lebih lanjut tentang cara menata tombol.

Warna teks

Jika Anda perhatikan, secara default, warna tombol diwarisi oleh set Warna Aksen Tema di Pengaturan Umum. Ini hanya untuk modul yang teksnya disetel ke "gelap". Dan tombolnya berwarna putih ketika teks modul disetel ke "terang". Namun, segera setelah Anda menyetel warna teks khusus untuk tombol Anda, warna ini disetel untuk versi teks gelap dan terang dalam modul tertentu.

Tip Desain: Biarkan Warna Aksen Tema Anda mengatur warna teks tombol Anda sehingga Anda dapat mempertahankan kemampuan untuk menambahkan versi gelap dan terang dari tombol Anda di Modul Anda.

Gaya Arahkan Tombol

Di sinilah Anda dapat menyesuaikan gaya status hover tombol Anda.

Penting bagi pengguna untuk memahami bahwa apa yang akan mereka klik sebenarnya adalah sebuah tombol. Menambahkan efek hover memperkuat ini di dalam pikiran dan mendorong mereka untuk berinteraksi. Menjadi default Divi menambahkan latar belakang terang dan menjiwai ikon panah ke kanan. Namun, Anda dapat mengubahnya menjadi apa pun yang Anda inginkan.

Tip Desain: Apakah Anda mengubah latar belakang ke warna yang lebih gelap atau lebih terang tidak sepenting hanya memastikan bahwa tombol berubah dalam beberapa cara. Anda juga dapat menambah jarak huruf atau menyesuaikan radius batas untuk memberikan efek unik pada tombol Anda saat mengarahkan kursor.

Blog

Pos

Bagian ini mengubah gaya konten header postingan dalam satu postingan. Ini tidak mengubah tampilan kutipan blog Anda di halaman blog atau modul blog Anda. Terkadang tajuk posting blog Anda perlu terlihat berbeda dari tajuk di bagian lain situs Anda. Di sinilah Anda akan membuat penyesuaian itu.

Jika Anda memilih untuk menggunakan Modul Post Header, opsi ini tidak akan efektif.

Gaya Seluler

Saya suka bagian ini. Di sini Anda dapat menyesuaikan tampilan situs Anda di perangkat seluler dan melihat hasilnya secara real time.

Gaya Tablet dan Telepon

Anda dapat memilih Tablet atau Telepon dan jendela di sebelah kanan Penyesuai akan menyesuaikan secara otomatis untuk menunjukkan tampilan halaman pada perangkat. Kemudian seperti yang kami lakukan di Pengaturan Umum di bawah Tata Letak, Anda dapat menyesuaikan Tinggi Bagian, Tinggi Baris, Ukuran Teks Badan, dan Ukuran Teks Header.

Tip Desain #1: Satu penyesuaian yang saya suka buat untuk tata letak telepon adalah mengatur Tinggi Baris ke "0". Ini menciptakan aliran konten yang lebih baik saat menggulir di ponsel karena menghilangkan jarak antar baris.

Tip Desain #2: Temukan skala font yang sesuai untuk situs Anda. Ini yang bagus yang ingin saya ikuti untuk tajuk saya:

Desktop: 48px

Tablet: 40px

Telepon: 32px

Menu Seluler

Jangan abaikan ini atau Anda mungkin ketinggalan membuat tajuk yang benar-benar unik untuk menu seluler Anda. Anda dapat Menyembunyikan logo hanya di perangkat seluler dan mengubah warna latar belakang dan teks.

Skema Warna

Ini bisa nyaman untuk solusi cepat. Tapi saya tidak menyarankan menggunakan skema warna jika Anda berencana untuk mengubah beberapa warna ini nanti di penyesuai tema. Setelah disetel, warna ini tidak dapat diganti di Customizer karena CSS yang dihasilkan berisi aturan !important.

Menurut pendapat saya, yang terbaik adalah membiarkan set ini ke default.

Menu dan Widget

Anda tidak lagi harus membabi buta mengedit menu atau widget di dashboard wordpress. Sekarang Anda dapat menambahkan dan menyesuaikan item ini dan melihatnya menjadi nyata di halaman Anda secara real time. Saya suka kenyamanannya!

Halaman Depan Statis

Secara default, WordPress menampilkan posting terbaru Anda di halaman depan (homepage). Anda dapat mengubah ini menjadi halaman statis apa pun yang Anda inginkan di bagian ini. Dan Anda juga dapat menentukan Halaman Posting Anda (atau halaman blog).

Saya tidak tahu ini sampai menulis posting ini, tetapi Anda sebenarnya dapat menggunakan halaman baru dari dalam Penyesuai Tema untuk berfungsi sebagai Halaman Depan atau Halaman Blog Anda tanpa harus meninggalkan penyesuai.

CSS tambahan

Bagian CSS Tambahan menawarkan peluang besar untuk memberikan sentuhan akhir pada pengaturan tema Anda. Perubahan gaya apa pun yang tidak dapat dikontrol oleh Penyesuai Tema Divi, Anda dapat melakukannya di sini dengan beberapa CSS khusus. Karena Customizer memungkinkan Anda untuk melihat perubahan CSS secara real time, Anda dapat membuat penyesuaian yang diperlukan untuk tema Anda jauh lebih mudah daripada bolak-balik pada stylesheet eksternal.

Contoh CSS Tambahan

Contoh #1: Sesuaikan Ukuran Semua Header

Salah satu contoh bagus dari CSS tambahan adalah penataan untuk tag header Anda yang tersisa. Divi memungkinkan Anda untuk menyesuaikan pengaturan untuk font heading Anda, tetapi itu hanya untuk header h1 Anda. Anda dapat menggunakan kotak CSS tambahan untuk memasukkan kustomisasi tag header lainnya (h2, h3, h4, dll…). Saya suka menggunakan skala berikut: 16, 18, 21, 24, 36, 48.

h2 {
	font-size: 36px;
}

h3 {
	font-size: 24px;
}

h4 {
	font-size: 21px;
}

h5 {
	font-size: 18px;
}

h6 {
	font-size: 16px;
}

Contoh #2: Cocokkan Padding Paragraf Bawah dengan Tinggi Garis Tubuh

Jika Anda mengatur tinggi baris teks isi ke 1.7em, Anda mungkin juga ingin mengatur nilai yang sama ke padding bawah Anda di antara paragraf untuk menjaga grid baseline dan ritme vertikal yang konsisten. Dengan kata lain, jarak antar paragraf sama dengan tinggi garis. Untuk melakukan ini, Anda cukup menambahkan yang berikut:

p { padding-bottom: 1.7em}

Karena nilai panjang em didasarkan pada ukuran font induk, jika Anda mengubah ukuran font dasar menjadi sesuatu yang lain di penyesuai tema, nilai 1.7em akan menyesuaikan.

Contoh #3: Tambahkan Atribut Garis Bawah ke Tautan Anda

Tambahkan atribut garis bawah ke tautan tubuh.

a {
    text-decoration: underline;
}

Mengekspor dan Mengimpor Pengaturan Penyesuai Divi untuk Proyek Anda Berikutnya

Penyesuai Tema Divi memiliki opsi portabilitas yang memungkinkan pengguna untuk mengekspor atau mengimpor Pengaturan Penyesuai. Ini memberikan peluang besar bagi pengembang untuk membuat semacam templat pengaturan penyesuai untuk digunakan pada proyek masa depan mereka.

Pertama, saya sarankan meluangkan waktu untuk mencari tahu penyesuaian apa yang cenderung Anda buat saat membangun situs web. Setelah Anda mengidentifikasi pengaturan tersebut, Anda dapat memasukkan penyesuaian tersebut ke dalam Divi Theme Customizer dan kemudian mengekspor pengaturan tersebut sehingga Anda dapat memulai proyek berikutnya. Mengapa terus melakukan hal yang sama berulang-ulang ketika Anda sudah bisa melakukannya? Plus, ini akan membantu memastikan Anda tidak melewatkan penyesuaian penting apa pun.

Untuk mengekspor pengaturan Anda, klik ikon portabilitas di bagian atas Penyesuai Tema Divi.

Beri Anda nama file ekspor dan klik tombol "Ekspor Pengaturan Penyesuai Divi"

Sekarang Anda dapat menggunakan file .json ini di masa mendatang dengan mengklik ikon portabilitas yang sama di Penyesuai Tema Divi dan memilih Impor alih-alih ekspor. Kemudian yang perlu Anda lakukan adalah mengunggah file .json dan klik "Impor Pengaturan Penyesuai Divi".

Dan itu saja.

Apa yang Termasuk dalam Pengaturan Penyesuai Divi?

Pengaturan penyesuai pada dasarnya mencakup semua yang ada di 7 bagian pertama.

1. Pengaturan Umum
2. Tajuk & Navigasi
3. catatan kaki
4. Tombol
5. Blog
6. Gaya Seluler
7. Skema Warna

4 bagian terakhir khusus untuk WordPress dan tidak akan dibawa ke Instalasi Divi lainnya. Bagian-bagian ini meliputi:

1. Menu
2. Widget
3. Halaman Depan Statis
4. CSS tambahan

Penting untuk dicatat bahwa CSS Tambahan tidak terbawa. Anda mungkin mengandalkan pengaturan tersebut untuk memberi Anda peningkatan penghematan waktu pada build berikutnya. Jika demikian, saya sarankan untuk membuat tema anak dengan CSS itu sehingga Anda dapat menambahkannya dengan Pengaturan Penyesuai pada proyek Anda berikutnya.

Bagaimana Gaya Penyesuai Divi Disimpan

Untuk Divi Customizer (bersama dengan Divi Options dan Divi Builder), Divi menyajikan sumber daya CSS statis yang dapat di-cache oleh browser untuk mengurangi waktu buka halaman. Ini berarti gaya tidak dicetak pada halaman tetapi disimpan dalam file CSS statis yang terpisah. Setiap kali Anda menyimpan Pengaturan Penyesuai, file CSS statis diperbarui. Ini termasuk CSS tambahan yang telah Anda tambahkan juga.

Pikiran Penutup

Divi Theme Customizer hadir dengan beberapa opsi yang cukup kuat dan proses penyesuaiannya nyaman dan menyenangkan untuk digunakan. Dan mendapatkan pemahaman yang lebih dalam tentang apa yang dapat dilakukan opsi ini pasti akan meningkatkan cara Anda membangun situs web dengan Divi. Jika Anda belum melakukannya, luangkan waktu untuk menjelajahi pengaturan dasar optimal Anda untuk sebuah proyek, hubungkan ke Customizer, dan buat file ekspor. Anda akan terkejut dengan dorongan (dan kepercayaan diri) yang akan diberikan saat memulai proyek baru.

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!