Cara Menggunakan Preset Global dengan Blok Tata Letak Divi untuk Merampingkan Desain Postingan Blog
Diterbitkan: 2020-08-19Membuat konten untuk blog Anda cukup sulit tanpa harus khawatir tentang desain. Itulah mengapa penting bagi situs Anda untuk memiliki elemen desain yang tersedia (atau telah dirancang sebelumnya) sehingga Anda dapat lebih fokus dalam membuat konten yang luar biasa. Tentu, tema anak WordPress tradisional dapat menangani ini, tetapi, dalam banyak kasus, Anda terjebak dengan desain yang tidak mudah diubah.
Dengan Divi, kami mendapatkan kontrol lebih besar atas pengalaman desain postingan blog. Preset global Divi memungkinkan Anda membuat desain seluruh situs (seperti tema anak) untuk elemen di seluruh situs Anda dengan kenyamanan tambahan untuk dapat mengubah desain sesuai keinginan Anda dengan beberapa klik. Plus, jika Anda terbiasa membuat konten di editor Blok WordPress default, Anda dapat memanfaatkan kekuatan Blok Tata Letak Divi untuk menarik elemen Preset Global tersebut dengan cepat di dalam konten posting. Ini akan memungkinkan Anda untuk menambahkan elemen desain baru dalam posting blog yang cocok dengan template dan bagian situs lainnya.
Dalam tutorial ini, kami akan menunjukkan kepada Anda bagaimana menggunakan preset global dengan blok Divi Layout untuk merampingkan proses mendesain posting blog. Untuk melakukan ini, kami akan menunjukkan cara menggunakan Preset Global untuk merancang konten posting blog baru dengan cepat dan efisien. Ini akan membantu menciptakan pengalaman blogging yang tidak membahayakan keseluruhan branding situs Anda.
Mari kita mulai!
Sneak Peek
Berikut ini sekilas desain yang akan kita buat dalam tutorial ini.
Tinjauan Singkat Preset Global
Keunggulan Divi adalah ia memberi Anda kendali penuh atas desain situs web Anda menggunakan berbagai pengaturan desain yang dapat Anda gunakan untuk menyesuaikan tampilan elemen atau modul apa pun.
Sistem Preset Divi yang baru memungkinkan Anda mendesain tampilan khusus untuk elemen Divi (seperti modul tombol) dan menyimpannya sebagai preset. Semua perubahan desain yang Anda buat disimpan dalam preset. Saat Anda menambahkan modul baru ke halaman Anda, Anda dapat menelusuri preset yang disimpan dan menerapkannya dengan cepat.
Setelah preset diterapkan, desain default modul dikendalikan oleh preset. Jika Anda memperbarui gaya preset, semua modul yang menggunakan preset itu juga diperbarui. Ini memungkinkan Anda untuk mengontrol desain seluruh situs web Anda menggunakan koleksi kecil preset yang disimpan. Plus, ini menghemat banyak waktu saat menambahkan modul baru ke halaman Anda, karena Anda tidak perlu mendesain setiap modul baru dari awal, tetapi dapat dengan cepat memilih tampilan dari perpustakaan Divi Presets Anda.
Panduan Gaya Preset Global
Panduan Gaya Preset Global (seperti yang akan kita gunakan dalam tutorial ini) dapat dibuat untuk memulai desain elemen saat mendesain situs web Anda. Panduan gaya ini berisi kumpulan modul dengan preset berbeda yang cocok dengan desain situs Anda. Memiliki preset yang tersedia di awal akan merampingkan proses desain dengan menghilangkan kerepotan memperbarui pengaturan desain untuk setiap modul baru. Kami bahkan memiliki kerangka panduan gaya bagi mereka yang ingin membangunnya sendiri.
Ikhtisar Singkat Blok Tata Letak Divi
Blok Tata Letak Divi memungkinkan pengguna untuk menambahkan Tata Letak Divi apa pun ke posting blog di dalam editor Gutenberg. Kami bahkan dapat mengubah Blok Tata Letak Divi menjadi blok yang dapat digunakan kembali di Gutenberg sama seperti blok WordPress lainnya. Ini membuka pintu untuk merampingkan beberapa desain Tata Letak Divi yang bermanfaat ke dalam aliran normal penulisan posting di Gutenberg.
Bagaimana Preset Global dan Blok Tata Letak Bekerja Bersama
Karena prasetel global adalah "global", gaya prasetel tersebut memengaruhi semua contoh prasetel di seluruh situs. Itu berarti Anda dapat menggunakan preset global saat mendesain elemen di editor blok tata letak dan preset tersebut juga akan diperbarui. Jadi, jika Anda ingin menambahkan CTA ke konten posting blog Anda menggunakan Divi Layout Block, Anda dapat membangun CTA dengan menambahkan modul dengan Global Presets seperti yang Anda lakukan pada halaman atau posting normal. Ini memungkinkan Anda untuk menambahkan elemen desain yang cocok dalam posting Anda dengan cepat dan efisien.
Menggunakan Preset Global dengan Blok Tata Letak Divi untuk Merampingkan Desain Postingan Blog
Mengunggah Panduan Gaya Preset Global
Untuk tutorial ini, kita akan memulai membuat Global Presets dengan menggunakan Global Presets Style Guide Layout untuk Web Agency Layout. Setelah mengunggah panduan gaya, kami akan memiliki beberapa Preset Global yang tersedia untuk digunakan saat menambahkan elemen desain ke posting blog menggunakan Blok Tata Letak Divi.
Untuk mengunduh Preset Global, buka entri blog. Gulir ke bawah ke bagian berjudul “Unduh Panduan Gaya Preset Global”. Kemudian masukkan alamat email Anda dan klik untuk menerima unduhan.
Setelah Anda mengunduh file zip ke komputer Anda, unzip file dan kembali ke Dasbor WordPress.
Untuk mengimpor file JSON panduan gaya ke Divi Library…
- arahkan ke Divi > Perpustakaan Divi.
- Klik tombol Impor & Ekspor.
- Di bawah Popup Portabilitas, pilih tab impor.
- Pilih file JSON panduan gaya global agensi web.
- Pastikan Anda memilih untuk Impor Preset.
- Kemudian klik tombol impor.
Sekarang semua preset global tersebut tersedia di Divi Builder.
Mengunggah Template Posting
Sekarang panduan gaya sudah ada, kita akan mendapatkan lompatan pada desain template posting blog dengan mengimpor template posting blog agensi web yang sudah cocok dengan elemen panduan gaya.
Untuk mengunduh template, buka entri blog, masukkan alamat email Anda, dan klik untuk mengunduh file.
Untuk mengimpor template postingan…
- arahkan ke Divi > Pembuat Tema.
- Kemudian klik ikon portabilitas.
- Di bawah modal portabilitas, pilih tab impor.
- Pilih file JSON templat posting yang Anda unduh.
- Kemudian klik tombol impor.
Menggunakan Preset untuk Memperbarui/Mendesain Template Posting
Setelah Anda memiliki template posting kustom, klik untuk mengedit template tubuh kustom. Di sana Anda dapat melihat desain template posting juga dan melakukan penyesuaian menggunakan preset global yang tersedia dari panduan gaya yang diimpor. Jika Anda sedang membangun template posting Anda sendiri dari awal, Anda bisa menggunakan preset global untuk membantu mencocokkan desain template posting dengan elemen lain di situs web. Misalnya, Anda dapat menggunakan preset “WALP – H1 – 1” pada judul posting sebagai berikut:
Atau Anda dapat menggunakan preset modul blurb “WALP – Blurb 2” pada blurb yang berisi info penulis dinamis.
Modul konten posting adalah area di mana konten posting blog Anda akan dibuat di halaman. Itulah mengapa penting untuk mencocokkan pengaturan desain modul konten posting dengan elemen teks lain yang digunakan di seluruh situs Anda.
Jika Anda sedang membangun template posting dari awal, Anda dapat menyalin dan menempelkan pengaturan teks dari berbagai modul teks melalui situs. Atau jika Anda telah membuat panduan gaya prasetel global untuk situs Anda sebelumnya, Anda dapat menyalin elemen desain dari modul tersebut di panduan gaya.
Misalnya, Anda dapat menyalin gaya teks judul untuk prasetel global yang dibuat untuk semua gaya teks dalam satu modul teks.
Kemudian lewati gaya teks heading tersebut ke dalam modul konten postingan untuk template postingan. Itu akan membantu memastikan semua judul yang digunakan untuk konten posting Anda akan cocok dengan gaya situs.
Yang penting di sini adalah Anda memiliki template posting yang sesuai dengan gaya situs Anda. Menggunakan preset global dapat sangat membantu proses itu jika Anda mendesain template dari awal.
Menggunakan Preset Global dengan Blok Tata Letak Divi
Setelah template dirancang, kami siap untuk mulai menggunakan preset global dengan blok Divi Layout untuk mendesain elemen konten posting tambahan menggunakan editor blok WordPress default.
Untuk melakukannya, edit (atau buat) posting blog. Kemudian pastikan Anda memiliki beberapa konten tiruan (seperti beberapa judul dan paragraf, dan gambar unggulan).
Saat ini, jika Anda melihat postingan di bagian depan, konten postingan akan ditampilkan di dalam template postingan dan konten (judul, teks isi, dll…) mewarisi gaya dari pengaturan modul konten postingan.
Modul konten posting hanya akan menangani gaya konten tekstual dasar. Jika Anda ingin menambahkan elemen tambahan di seluruh posting Anda menggunakan editor Blok WordPress default, gaya elemen tersebut perlu diubah melalui CSS khusus di tema anak. Itu kecuali Anda menggunakan Divi Layout Blocks.
Untuk menambahkan konten tambahan yang ingin Anda sesuaikan dengan templat dan situs posting Anda, Anda dapat menggunakan blok Tata Letak Divi. Ini akan memungkinkan Anda untuk menambahkan konten apa pun yang Anda inginkan dan menatanya menggunakan Divi Builder. Dan, karena kita juga dapat menggunakan preset global, kita dapat lebih merampingkan desain konten posting blog kita dengan cepat.
Desain #1: Membangun CTA Blog dengan Preset Global dan Blok Tata Letak Divi
Dalam contoh pertama ini, mari buat CTA blog khusus yang cocok dengan template postingan dan desain situs.
Untuk melakukan ini, tambahkan Blok Tata Letak Divi ke konten posting.
Kemudian klik Bangun Tata Letak Baru.
Ini akan membuka editor blok tata letak yang pada dasarnya adalah Divi Builder seperti biasa. Berikan bagian default baris satu kolom.
Buka Tata Letak Preset Global Anda di browser yang berbeda, pastikan Anda mengklik untuk membangun di bagian depan sehingga Anda dapat melihat elemennya. Dengan begitu Anda membuka Layout editor di satu browser dan panduan gaya terbuka di browser lainnya.
Jika Anda tidak memiliki panduan gaya, Anda dapat membuka tata letak halaman di situs Anda sehingga Anda dapat mengakses elemen desain apa pun yang ingin Anda bawa.
Salin Latar Belakang dari Panduan Gaya
Untuk CTA ini, kita akan menggunakan latar belakang biru tua dari panduan gaya. Buka pengaturan modul teks dan salin latar belakang.
Kemudian buka pengaturan bagian di editor tata letak dan lewati latar belakang ke bagian tersebut.
Tambahkan Modul Teks dengan Preset H3
Selanjutnya, tambahkan modul teks baru ke baris.
Kemudian buka pengaturan dan perbarui yang berikut:
Tambahkan judul H3 untuk CTA dengan menempelkan HTML berikut di badan:
<h3>Learn How One Client Increased Revenue by 500%</h3>
Buka dropdown Global Presents dan pilih preset untuk heading H3 (WALP – H3 – 1)
Perbarui Desain
Kemudian perbarui warna teks menjadi putih dan ratakan tengah.
Tambahkan Tombol dengan Preset Global
Di bawah modul teks, tambahkan tombol baru.
Kemudian perbarui teks tombol dan pilih salah satu desain tombol preset global. Untuk contoh ini, mari kita gunakan “WALP – Tombol 3”.
Simpan perubahan
Setelah selesai, klik Simpan & Keluar.
Sekarang Anda dapat melihat elemen yang ditampilkan di Editor Blok WordPress.
Desain #2: Membangun Kutipan Blog dengan Preset Global dan Blok Tata Letak Divi
Untuk elemen desain berikutnya, kita akan menambahkan kutipan ke posting blog.
Tambahkan Blok Tata Letak Divi
Untuk memulai, tambahkan Divi Layout Block di mana Anda ingin kutipan ditampilkan.
Kemudian klik Bangun Tata Letak Baru.
Salin dan Tempel Latar Belakang dari Panduan Gaya
Salin latar belakang biru tua dari panduan gaya.
Kemudian rekatkan ke bagian default editor tata letak.
Menambahkan baris
Selanjutnya, tambahkan baris satu kolom ke bagian tersebut.
Tambahkan Modul Testimonial dengan Preset
Kemudian tambahkan modul testimonial ke kolom. Kemudian pilih Global Preset “WALP – Testimonial 2”.
Ini akan memberi Anda awal yang baik pada desain kutipan untuk posting blog.
Perbarui desain
Di bawah tab desain, sesuaikan pengaturan desain sebagai berikut:
- Warna Ikon Kutipan:
- Berat Huruf Tubuh: Ringan
- Gaya Huruf Tubuh: miring
- Perataan Teks Tubuh: kiri
- Warna Teks Tubuh: #ffffff
- Font Penulis: Ubuntu
- Ukuran Teks Penulis: 16px
Tambahkan Preset Global Baru
Karena kami telah membuat perubahan signifikan pada preset testimonial ini, masuk akal untuk membuat yang baru pada saat ini untuk digunakan untuk kutipan posting di masa mendatang.
Untuk membuat yang baru, klik tombol "Buat Preset Baru dari Gaya Saat Ini". Kemudian beri nama preset baru ("kutipan posting blog") dan simpan. Prasetel global sekarang siap digunakan di masa mendatang.
Simpan tata letak dan Anda akan melihatnya di dalam konten posting.
Desain #1: Menambahkan Blurb ke Posting Blog dengan Preset Global dan Blok Tata Letak Divi
Untuk contoh berikut ini, kita akan menambahkan beberapa uraian ke postingan.
Tambahkan Blok Tata Letak Divi Baru
Tambahkan Blok Tata Letak Divi lainnya dan klik tombol Bangun Tata Letak Baru.
Di Layout Editor, tambahkan baris dua kolom ke tata letak.
Tambahkan Modul Blurb dengan Preset
Di kolom kiri, tambahkan modul uraian.
Tambahkan gambar ikon baru ke uraian. Kemudian buka dropdown preset dan pilih preset blurb “WALP – Blurb 4”.
Tambahkan Blurb Kedua
Kemudian salin uraian dan tempel ke kolom 2 dan perbarui gambar.
Simpan tata letak dan Anda akan melihatnya di konten posting.
Hasil Akhir
Sekarang buka pos di ujung depan untuk melihat hasil akhir.
Blok yang Dapat Digunakan Kembali dengan Preset Global
Jika Anda ingin memanfaatkan blok yang dapat digunakan kembali dengan blok tata letak Divi, ada baiknya mengetahui bahwa blok tersebut akan bekerja dengan preset global. Jadi, jika Anda ingin menyimpan CTA blog yang kami buat sebelumnya sebagai blok yang dapat digunakan kembali, Anda akan memiliki blok yang nyaman yang dapat Anda gunakan untuk menambahkan CTA saat membangun posting Anda. Dan, karena CTA menggunakan tombol dan teks dengan preset global, memperbarui preset global untuk elemen itu juga akan memperbarui elemen di blok yang dapat digunakan kembali.
Pikiran Akhir
Global Presets adalah salah satu alat desain kami yang paling kuat yang tersedia di Divi. Setelah Anda meluangkan waktu untuk menambahkan preset global ke modul yang Anda gunakan di seluruh situs, Anda benar-benar dapat memanfaatkan proses yang disederhanakan dalam merancang templat dan konten posting blog menggunakan blok tata letak.
Saya berharap untuk mendengar dari Anda di komentar.
Bersulang!