Sorotan Plugin Divi: Integrasi Toolset Divi

Diterbitkan: 2021-01-24

Toolset adalah plugin WordPress yang menambahkan jenis posting kustom, bidang, taksonomi, dan hubungan posting yang dapat digunakan di mana saja di situs web Anda. Elemen-elemen ini biasanya ditempatkan di dalam konten Anda dengan kode pendek atau blok Gutenberg, tetapi Toolset sekarang terintegrasi secara native dengan Divi dengan modul Tampilan Toolset. Pada artikel ini, kita akan melihat bagaimana Toolset terintegrasi dengan Divi dan melihat apa yang dapat dilakukannya.

Tampilan Toolset

Tampilan Toolset

Toolset terintegrasi dengan Divi dengan memungkinkan Divi menampilkan Tampilan Toolset dengan mudah. Tampilan Toolset dibuat dengan blok di editor Gutenberg, di dalam halaman, posting, atau template. Buka daftar blok, gulir ke bawah ke Toolset, dan tambahkan View Block dari daftar blok.

Tampilan Toolset

Anda kemudian dapat memilih untuk membuat Tampilan baru atau menggunakan Tampilan yang sudah ada.

Tampilan Toolset

Membuat Tampilan baru memungkinkan Anda memilih elemen Tampilan dan gaya loop (yang merupakan tata letak, atau bagaimana hasilnya akan ditampilkan). Tampilan dapat menampilkan semua hasil, dengan pagination, dengan penyortiran front-end, sebagai penggeser, menggunakan pencarian khusus, dll. Anda dapat membuat pilihan ini di sini atau Anda dapat mengubahnya nanti.

Tampilan Toolset

Pilih konten yang akan ditampilkan di View.

Tampilan Toolset

Ini memungkinkan Anda membuat loop yang kemudian dapat Anda gunakan untuk menampilkan jenis posting. Dokumentasi memandu Anda melalui ini secara rinci. Tampilan dapat menampilkan konten seperti posting, taksonomi, dan pengguna, masing-masing dengan subset jenis posting. Ini termasuk jenis posting khusus yang dibuat dengan Toolset.

edit ke titik ini
__

Tampilan Toolset

Tampilan dibuat dan diedit menggunakan blok Toolset.

Modul Divi Toolset

Modul Divi Toolset

Toolset menambahkan modul ke Divi Builder yang disebut Toolset View. Modul ini menampilkan Tampilan Toolset apa pun yang Anda pilih dan dapat disesuaikan dengan pengaturan modul Divi standar.

Tab Konten

Tab Konten

Tab Konten menyertakan kotak dropdown di mana Anda dapat memilih Tampilan Toolset yang ingin Anda tampilkan. Ini juga mencakup tautan, pengaturan latar belakang, dan label admin. Saya telah memilih Tampilan yang disebut 3 Instruktur untuk beranda .

Desain Tampilan dibuat dalam pengaturan editor jenis posting Toolset. Saya telah menambahkan warna ke latar belakang menggunakan pengaturan Latar Belakang modul untuk membuatnya menonjol. Tampilan ditampilkan langsung di Divi Visual Builder menggunakan fitur yang telah Anda tetapkan saat membuatnya. Ini memudahkan untuk melihat cara menatanya dengan pengaturan Divi dan melihat bagaimana tampilannya di dalam tata letak Anda.

Tab Konten

Berikut Tampilan Toolset lainnya. Saya belum mengubah pengaturan latar belakang, sehingga Tampilan baru ditampilkan di atas latar belakang yang telah saya siapkan.

Tab Desain

Tab Desain

Tab Desain mencakup pengaturan untuk teks, teks modul, ukuran, spasi, batas, bayangan kotak, filter, transformasi, dan animasi. Ada cukup pengaturan untuk menata modul agar sesuai dengan desain Divi apa pun. Mari kita lihat yang khusus untuk modul ini.

Teks

Tab Desain

Opsi Teks menyesuaikan perataan dan bayangan untuk label dan deskripsi. Text Shadow mencakup pengaturan standar seperti panjang, kekuatan blur, dan warna. Saya telah mengatur perataan ke kanan dan menambahkan warna bayangan teks dalam contoh ini.

Teks Modul

Teks Modul

Pengaturan Teks Modul termasuk font, berat, gaya, perataan, warna, ukuran, spasi, tinggi, dan penyesuaian bayangan teks. Warna teks mempengaruhi label. Pengaturan lainnya memengaruhi label, tag, deskripsi, teks tombol, dan peringkat bintang.

Dalam contoh ini, saya telah membuat font semi-tebal, mengatur gaya font menjadi huruf besar semua, mengatur warna teks menjadi merah, meningkatkan ukuran font menjadi 16px, dan menurunkan tinggi garis menjadi 1.7em. Saya belum menyesuaikan batas, bayangan kotak, ukuran, spasi, filter, dll., tetapi pengaturan itu juga tersedia.

Toolset dengan Contoh Divi

Berikut adalah beberapa contoh penggunaan modul Tampilan Toolset dalam tata letak Divi. Saya akan menambahkan modul ke beberapa tata letak. Untuk yang lain, saya akan mengganti modul saat ini dengan modul Tampilan Toolset tunggal.

Menambahkan Modul Tampilan Toolset ke Halaman Arahan

Toolset dengan Contoh Divi

Berikut adalah tampilan Instructor View yang ditempatkan di dalam tata letak Halaman Arahan Yoga Studio. Itu ditempatkan di dalam bagian untuk memperkenalkan instruktur dan termasuk modul teks, modul Tampilan Toolset, modul orang, dan tombol. Ini adalah tampilan wireframe.

Toolset dengan Contoh Divi

Berikut tampilan dari frontend. Hasilnya adalah bagian yang bersih untuk instruktur. Modul Tampilan Toolset ditata agar sesuai dengan tata letak. Tampilan mencakup fitur pencarian dan pengurutan.

Toolset dengan Contoh Divi

Berikut adalah tangkapan layar yang diperbesar untuk menampilkan lebih banyak tata letak sehingga Anda dapat melihat seberapa baik kerjanya dengan desain.

Mengganti Beberapa Modul dengan Modul Tampilan Toolset Tunggal

Toolset dengan Contoh Divi

Contoh ini menggunakan halaman Tim Yoga Studio. Halaman asli menampilkan anggota tim menggunakan modul orang. Untuk yang satu ini, saya akan mengganti modul person dengan modul Tampilan Toolset tunggal. Sebagai perbandingan, contoh ini menunjukkan tampilan gambar rangka untuk tata letak asli.

Toolset dengan Contoh Divi

Begini tampilan tata letak asli di frontend. Saya akan membiarkan header, partner, dan footer tetap utuh, tetapi saya akan menyertakannya dalam gambar sehingga Anda dapat melihat seberapa baik integrasinya dengan desain Divi.

Toolset dengan Contoh Divi

Saya telah mengganti modul 6 orang dengan modul Tampilan Toolset tunggal.

Toolset dengan Contoh Divi

Halaman sekarang menampilkan lebih banyak orang (ini menunjukkan nomor yang ditetapkan di editor Toolset) dan termasuk pagination untuk melihat halaman kedua. Tentu saja, kemampuan untuk memilih Tampilan Toolset yang berbeda berarti kami memiliki lebih banyak opsi tentang bagaimana tampilannya. Mari kita lihat beberapa contoh lagi.

Toolset dengan Contoh Divi

Tampilan ini menunjukkan foto dan nama orang tersebut.

Toolset dengan Contoh Divi

Tampilan ini menghapus gambar dan menampilkan nama, judul, dan deskripsi. Masing-masing menyertakan bayangan kotak untuk menonjol dari latar belakang. Ini juga termasuk kotak pencarian.

Halaman Arsip

Toolset dengan Contoh Divi

Saya telah membuat halaman untuk menampilkan daftar artikel menggunakan elemen halaman Yoga Studio. Tata letak ini menggunakan modul Tampilan Toolset yang sama, tetapi saya telah memilih Tampilan yang berbeda.

Dimana untuk Membeli

Dimana untuk Membeli

Modul Divi Tampilan Toolset disertakan dalam plugin Blok Toolset. Plugin ini adalah ekstensi yang disertakan dengan Toolset dan menambahkan banyak blok ke editor Gutenberg dan satu modul ke Divi Builder yang disebut Toolset View. Saat Anda membeli Toolset, Anda memiliki akses gratis ke plugin Toolset Blocks.

Toolset tersedia dalam tiga pilihan berlangganan tahunan. Masing-masing mencakup pembaruan dan dukungan selama 1 tahun.

  • $69 – 1 situs
  • $149 – 3 situs
  • $299 – situs tak terbatas

Mengakhiri Pikiran

Itulah pandangan kami tentang integrasi Toolset Divi. Ini adalah integrasi yang menarik. Toolset adalah alat yang ampuh untuk WordPress, jadi mengintegrasikannya dengan Divi adalah langkah yang cerdas. Tampilan Toolset masih dibuat dalam editor Toolset, tetapi Anda sekarang dapat menampilkannya dalam konten Divi Anda tanpa harus menggunakan kode pendek. Ini memberi Anda akses ke opsi gaya Divi.

Beberapa fitur dan gaya disediakan untuk Tampilan dengan pengaturan di Toolset, tetapi modul Divi memiliki pengaturan yang cukup untuk menyesuaikan Tampilan agar sesuai dengan desain halaman Anda. Saya suka Anda dapat menyesuaikan modul dan memilih Tampilan yang berbeda tanpa membuat perubahan pada modul.

Toolset dan Divi bekerja sama dengan baik. Toolset memang memiliki kurva belajar, tetapi jika Anda dapat membuatnya dengan Tampilan Toolset, Anda dapat menampilkannya di tata letak Divi Anda.

Kami ingin mendengar dari Anda. Sudahkah Anda mencoba integrasi Divi Toolset? Beri tahu kami tentang pengalaman Anda di komentar.

Gambar Unggulan melalui Visual Generation / shutterstock.com