Stackable: plugin yang membuka blok Anda

Apakah Anda ingat tahun 80-an? Kedatangan gelombang baru, munculnya potongan rambut belanak, kesuksesan Cyndi Lauper, Michael Jackson, Madonna, Prince, Whitney Houston, Duran Duran dan sebagainya. Di tahun 80-an, itu juga ledakan video game, dan rilis game di mana kita sangat dekat dengan jentikan jempol: Tetris.

Permainan ini, dengan prinsip sederhana, terdiri dari menyusun balok-balok berbagai bentuk sambil mengoptimalkan ruang yang tersedia.

Konsepnya dapat diringkas dalam satu baris: “Tetris sangat cocok dengan definisi permainan terbaik: satu menit untuk mempelajarinya, seumur hidup untuk menguasainya” , seperti yang dikatakan jurnalis Bill Kunkel (alias The Game Doctor).

Pernyataan yang dapat diterapkan ke banyak program, seperti WordPress.

Berbicara tentang WordPress, jika saya menyebut Tetris, itu karena plugin yang akan saya bahas hari ini bernama Stackable. Dan untuk alasan yang baik, plugin ini menambahkan blok Gutenberg baru untuk bersarang di situs WordPress Anda .

Siap untuk ujian baru ini? Sesuai target Anda, bersiaplah, pergi!

Awalnya ditulis pada Juli 2021, artikel ini diperbarui pada November 2021 dengan Stackable versi 3.0.5 gratis dan premium.

Proyek WordPress terbaik Anda membutuhkan host terbaik!

WPMarmite merekomendasikan Bluehost: kinerja hebat, dukungan hebat. Semua yang Anda butuhkan untuk awal yang baik.

Coba Bluehost

Apa itu Stackable?

“Mendukung desain web generasi berikutnya”. Ini adalah misi Stackable di situs resminya, di mana plugin mendefinisikan dirinya sebagai "pengalaman membangun halaman baru untuk Gutenberg". Tidak kurang!

Harus dikatakan bahwa di direktori WordPress, plugin blok memiliki lebih dari 40.000 instalasi aktif dan peringkat bagus 4,9 dari 5 bintang, disertai dengan serangkaian sambutan hangat.

Jika Anda sudah mencari blok Gutenberg baru , Anda mungkin sudah menemukan plugin seperti Ultimate Addons untuk Gutenberg, Qubely, Getwid atau Coblocks.

Kami membicarakannya di artikel kami tentang add-on untuk meningkatkan kekuatan Gutenberg. Misi mereka sederhana: untuk mendiversifikasi jangkauan blok Gutenberg yang tersedia di editor konten.

Stackable juga merupakan plugin yang dirancang untuk Gutenberg, yang membawa banyak sekali blok, dari klasik yang hebat (tajuk, galeri, ajakan bertindak) hingga yang lebih eksotis (kutipan, tabel harga, timer, testimonial, dll.).
Blok ini siap digunakan dan dapat disesuaikan.

Jadi, Anda mungkin berpikir, apa gunanya menginstal Stackable? Mereka hanya blok di antara blok lainnya. Nah, Gutenberg menyediakan banyak blok yang berguna, tetapi dengan Stackable, kemungkinannya berlipat ganda.

Selain itu, Anda memiliki akses ke fitur penyesuaian yang lebih canggih daripada yang ditawarkan secara asli dengan Gutenberg, seperti: menyesuaikan tata letak elemen di dalam blok, mengatur jarak, mengubah latar belakang, menambahkan efek melayang, dll.

Ada dua versi Stackable:

• Versi gratis tersedia di direktori WordPress.

• Versi berbayar tersedia dari situs resmi plugin, mulai dari $49 untuk digunakan di satu situs.

Seperti yang dapat Anda bayangkan, yang kedua memberikan akses ke lebih banyak blok dan memungkinkan untuk menyesuaikannya dengan lebih halus.

Untuk pengujian ini, kami fokus pada versi Premium.

Pengaturan yang dapat ditumpuk

Untuk mulai mengonfigurasi Stackable, instal dan aktifkan plugin. Lalu buka Pengaturan> Dapat Ditumpuk.

Pada antarmukanya, Anda akan memiliki akses ke pengaturan berikut:

• Ikon Font Awesome Pro (premium): untuk mengintegrasikan kit Font Awesome Pro ke Stackable.
• Pengaturan Editor: memungkinkan Anda untuk mengontrol fitur tertentu dari editor Stackable. Misalnya, Anda dapat menonaktifkan Perpustakaan Desain, mengatur lebar blok tertentu, menutup panel editor yang tidak Anda gunakan, dan menautkan kolom agar mengalami perubahan yang sama.
• Manajer peran (premium): untuk memberikan atau memblokir akses ke editor blok ke beberapa peran pengguna dan membiarkan mereka hanya mengedit konten. Catatan: manajemen ini berfungsi di semua blok , bukan hanya yang disertakan dengan Stackable.
• Bidang Kustom (premium): fitur ini memungkinkan Anda membuat bidang khusus yang dapat Anda tambahkan secara dinamis ke konten Anda dari editor. Untuk melakukannya, buka bagian Bidang administrasi WordPress Anda, klik "Tambah Baru", tentukan jenis bidang (Teks, Nomor, Tanggal, Waktu atau URL) dan nama.

Kemudian klik "Simpan Bidang", masukkan nilai untuk bidang Anda dan klik "Simpan perubahan" untuk menyimpannya.

Untuk mengintegrasikannya ke dalam konten Anda, tempatkan kursor di tempat Anda ingin nilai bidang Anda muncul dan klik ikon database (itu sesuai dengan Bidang Dinamis).

Pilih "Situs" sebagai "Sumber Dinamis", lalu bidang yang baru Anda buat (muncul di bawah "Bidang Kustom yang Dapat Ditumpuk"), dan terakhir klik "Terapkan". Itu dia!

Itu semua baik dan bagus, tapi mengapa kita melakukan semua ini? Berkat keajaiban konten dinamis, segera setelah saya memperbaruinya, alamat email saya akan diperbarui secara otomatis di setiap tempat di situs saya di mana bidang kustom terintegrasi.

• Breakpoint responsif: dimungkinkan untuk mengubah lebar layar dari mana situs Anda akan dilihat dalam mode Tablet atau Seluler, dan dengan demikian menampilkan pengaturan yang telah Anda tetapkan untuk perangkat ini.
• Pengaturan global: dua fitur tersedia untuk mengatasi kemungkinan ketidaksesuaian dengan tema yang ada di situs Anda. Anda dapat memasukkan pemilih area konten tema Anda, dan memaksa penggunaan font Stackable sehingga font tersebut mengambil alih tema Anda.

Seperti Elementor, Stackable memiliki pengaturan global: warna dan tipografi yang berlaku untuk halaman yang dibuat dengan Elementor. Tetapi dengan Stackable, Anda memiliki kemungkinan untuk menentukan pengaturan ini untuk semua blok yang membentuk situs Anda .

• Aktifkan & Nonaktifkan Blokir: jika Anda tidak memerlukan beberapa blok, Anda dapat menonaktifkannya agar tidak muncul dalam daftar blok yang tersedia.
• Pengaturan pengoptimalan (premium): memungkinkan Anda memuat file JavaScript dan CSS hanya di postingan yang berisi blok Stackable, bukan di seluruh situs. Tujuan dari fitur ini adalah untuk meningkatkan kinerja situs Anda. Fitur ini hanya berlaku untuk blok versi 2 karena sudah berlaku untuk blok plugin terbaru (dari versi 3).

Bagaimana cara menggunakan Stackable ?

Kit dan blok

Stackable digunakan langsung dari editor WordPress. Untuk melakukannya, buat atau buka halaman atau postingan, lalu pilih Perpustakaan Desain di bagian atas postingan Anda.

Perpustakaan Desain berisi Kit dan Kategori UI. Apa itu?

Padahal, kedua bagian ini mengandung unsur yang sama, tetapi dikategorikan berbeda. Kit UI mengumpulkan blok yang tersedia oleh panduan gaya dan Kategori mengelompokkannya berdasarkan jenis blok: header, testimonial, ajakan bertindak, dll., yang dapat ditemukan di semua panduan gaya yang tersedia.

Kategori dan Kit UI adalah dua cara berbeda untuk menemukan blok yang tepat untuk Anda.

Setiap blok dilengkapi dengan desain yang siap pakai dan dapat disesuaikan. Kita akan melihat bagaimana menyesuaikannya di bagian selanjutnya.

Untuk menemukan blok yang Anda butuhkan, Anda juga dapat menggunakan bilah pencarian yang Anda inginkan. Empat ikon di kanan atas jendela memungkinkan Anda untuk menyegarkan hasil pencarian dan mengubah ukuran thumbnail untuk mendapatkan tampilan yang lebih akurat atau lebih besar dari blok yang berbeda.

Bagaimana cara mengintegrasikan blok Stackable dalam sebuah pos

Anda juga dapat mengklik ikon “+” seperti yang Anda lakukan untuk menambahkan blok apa pun, dan Anda akan dengan mudah mengenali blok plugin Stackable, karena dihiasi dengan gradien ungu-oranye.

Dengan mengklik tombol "Jelajahi Semua", Anda dapat mengakses semua blok Gutenberg yang Anda inginkan. Blok Stackable hadir di bagian "Teks" dan "Tampilan", dan semuanya dikelompokkan dalam bagian "Stackable" eponymous, yang juga memberikan akses ke Perpustakaan Desain.

Semua jalur ini mengarah ke Roma ke blok Stackable, ya, tetapi jalur Perpustakaan Desain yang memberikan akses ke desain yang dibuat sebelumnya.

Ambil blok Testimonial ini, misalnya, yang memiliki format minimal, teks pengisi, dan tidak ada gambar contoh:

Dan lihat blok Testimonial lainnya, ditambahkan dari Design Library (blok Prime Testimonial 2 ):

Setelah Anda menemukan kecocokan yang sempurna, klik item yang diinginkan untuk menyematkannya langsung ke postingan Anda. Anda kemudian dapat mengatur ulang elemen pada halaman, seperti blok Gutenberg, dan menyesuaikannya.

Menyesuaikan Stackable

Untuk menyesuaikan blok Stackable, buka bagian "blokir" di sisi kanan posting Anda, di mana Anda akan menemukan banyak opsi, diklasifikasikan dalam tiga kategori: Block , Style dan Advanced .

Menemukan yang Anda minati bisa jadi membosankan karena ada begitu banyak pilihan, tetapi Anda juga dapat menemukannya hanya dengan mengklik dua kali pada elemen blok yang ingin Anda ubah. Anda kemudian akan dibawa ke pengaturan untuk blok itu dalam satu klik.

Opsi penyesuaian yang berbeda dikelompokkan ke dalam tiga tab:

• Blok : ini adalah tempat Anda dapat menyesuaikan tata letak berbagai elemen yang membentuk blok Anda, menambahkan batas dan bayangan dan bertindak di latar belakang, mengatur jarak dan perataan teks.

Anda juga dapat menyesuaikan jarak antar elemen di blok Anda dengan mengarahkan kursor ke atasnya dan kemudian menggunakan pegangan di bagian bawah elemen. Anda bahkan dapat melihat jumlah piksel yang memisahkannya dari tetangganya. Sangat berguna!

• Gaya : memungkinkan Anda untuk mengelola kolom dan bertindak berdasarkan tipografi, warna, tombol, dan pemisah. Ini lebih tidak terduga, tetapi Anda juga dapat menambahkan judul dan deskripsi ke blok Anda.
• Lanjutan : di sini Anda memiliki akses ke fitur-fitur canggih seperti tag HTML yang terkait dengan blok dan pengelolaan responsif (kemungkinan untuk menyembunyikan blok di komputer, tablet, atau ponsel). Anda dapat menyesuaikan margin blok, dan perataan konten, tetapi juga bersenang-senang menambahkan animasi atau efek transisi ke elemen Anda (namun, lakukan dengan mudah).
  Lapisan gula pada kue untuk penggemar CSS adalah kemampuan untuk memodifikasi CSS blok secara langsung di antarmuka ini, di sebelah blok, dan dengan pratinjau perubahan secara real time.
  Terakhir, tampilan bersyarat memungkinkan Anda untuk menampilkan elemen hanya bila kondisi yang telah Anda tetapkan sebelumnya terpenuhi.

Bergabunglah dengan pelanggan WPMarmite

Dapatkan posting WPMarmite terakhir (dan juga sumber daya eksklusif).

BERLANGGANAN SEKARANG

Jika Anda tidak sepenuhnya puas dengan desain blok, Anda memiliki kemungkinan untuk mengubah banyak parameter untuk menyesuaikannya dengan keinginan Anda.

Misalnya, saya senang dapat dengan mudah menambahkan efek ke hover elemen atau elemen induk (menerapkan latar belakang ke blok induk untuk memanfaatkan fitur terakhir ini), atau dengan mudah mengubah margin setiap elemen blok .

Lebih baik lagi: Anda dapat memilih margin yang berbeda di ponsel dan tablet! Jadi Anda dapat dengan mudah mengubah aspek responsif situs Anda. Untuk melakukan ini, pertama-tama klik ikon desktop (komputer) untuk menampilkan ikon perangkat lain.

Pilihan bagus lainnya adalah menambahkan pemisah di bagian atas atau bawah elemen, seperti dengan Elementor. Anda tentu saja dapat menyesuaikan tampilan pemisah ini, dan bahkan menambahkan satu atau dua lapisan yang lebih terang di versi Premium.

Berikut penampakan bagian bawah burger yang menggugah selera ini:

Saat Anda mengarahkan kursor ke namanya, beberapa pengaturan berubah menjadi ungu dan kursor Anda berubah menjadi tanda tanya. Jika Anda tidak tahu apa itu, klik untuk melihat animasi yang akan membantu Anda memahami untuk apa mereka. Cukup berguna untuk menemukan jalan di sekitar semua opsi ini.

Adaptasi apa untuk tema dan plugin?

Adaptasi dengan tema

Menurut dokumentasi resmi, "Stackable harus bekerja dengan tema apa pun", selama tema yang Anda miliki di situs Anda dioptimalkan untuk Gutenberg.

Berbicara tentang tema, saya menyebutkannya di awal posting ini: ada tema internal , yang dirancang untuk bekerja dengan editor Gutenberg dan plugin Stackable. Ini gratis dan tersedia di direktori resmi WordPress. Dengan itu, kompatibilitas dijamin, singkatnya.

Itu dalam warna plugin dengan nama yang sama, jadi saya harap Anda tidak keberatan dengan warna pink permen.

Unduh tema Stackable:

Adaptasi ke plugin

Dokumentasi Stackable memastikan bahwa itu kompatibel dengan pembuat halaman elemen (tautan aff). Namun berhati-hatilah, Anda tidak akan dapat menggunakan blok Stackable di editor pembuat halaman.

Ini sebenarnya cara yang sama seperti untuk blok Gutenberg, Anda tidak dapat menggunakannya di editor Elementor, Anda harus membuat pilihan: buat halaman Anda dengan Elementor atau dengan editor WordPress.

Situs web resmi Stackable juga mengklaim bahwa bloknya kompatibel dengan plugin apa pun , sehingga Anda dapat menggunakannya dengan pustaka blok lain tanpa masalah.

Bangun situs web Anda dengan Elementor

Rancang tampilan dan nuansa situs web WordPress Anda dengan mudah dengan pembuat halaman terkenal. Coba Elementor

Coba Elementor

Dokumentasi dan dukungan

Jika Anda mengalami kesulitan saat menggunakan Stackable, Anda dapat merujuk ke dokumentasi resmi kapan saja.

Anda akan menemukan di sana:

• Bagian yang didedikasikan untuk memulai dengan plugin.
• Bagian pemecahan masalah.
• Detail harga dan lisensi.
• Panduan yang ditargetkan.
• Sebuah FAQ.
• Dan sumber daya lainnya.

Anda juga dapat menemukan dokumentasi ini di Settings > Stackable, Documentation tab.

Jika terjadi gangguan teknis, tim yang bertanggung jawab atas plugin memberi pengguna daftar masalah yang sering ditemui, serta solusi untuk memperbaikinya.

Jika Anda masih buntu, Anda dapat menghubungi dukungan Stackable, atau bergabung dengan grup Facebook mereka untuk mendapatkan jawaban atas pertanyaan Anda.

Mengenai dukungan, tim Stackable dapat membantu Anda jika Anda mengirimkan permintaan Anda melalui formulir kontak di tab Hubungi Kami di Pengaturan > Stackable, atau ke alamat email [email protected] .

Apa nilai untuk uang?

Versi premium secara alami lebih murah hati dalam berbagai blok yang ditawarkan. Pilihan kustomisasi juga lebih banyak.

Untuk blok Feature misalnya, ada 2 pilihan layout di versi gratis (Basic dan Plain ), dibandingkan 13 di versi Premium.

Dalam versi Premium, ada juga parameter yang kurang lebih menarik, tergantung pada penggunaan Stackable Anda, seperti integrasi dengan Font Awesome Pro dan Role Manager serta kemungkinan untuk memodifikasi blok apa pun di CSS.

Untuk menggunakan fitur terakhir ini, buka bagian Advanced , lalu Custom CSS . Nyaman: perubahan Anda ditampilkan secara real time.

Versi Premium juga memberikan akses ke satu tahun dukungan dan pembaruan .

Menggunakan Stackable atau pembuat halaman: itulah pertanyaannya

Itu saja, kami telah membahas fitur dan pengaturan Stackable bersama-sama. Sekarang Anda memiliki gagasan yang lebih jelas tentang apa yang dimiliki plugin blok.

Jika Anda penggemar pembuat halaman, atau telah mempelajarinya dari dekat, Anda mungkin bertanya-tanya: mengapa menggunakan Stackable daripada pembuat halaman?

Karena opsi yang ditawarkan oleh Stackable dan Elementor versi gratis misalnya sebanding. Dan untuk alasan yang baik, Stackable mendekati pengalaman desain dengan pembuat halaman , seperti yang diklaim di situs resminya: “Punya kepercayaan diri untuk dengan mudah membangun situs web tercepat menggunakan pengalaman pembuatan halaman baru untuk Gutenberg” .

Dan dengan hadirnya Full Site Editing, yang akan memungkinkan untuk bertindak pada semua elemen antarmuka situs (dan tidak hanya konten postingan), Stackable mungkin akan semakin dekat. Meskipun demikian, Stackable memiliki keuntungan digunakan langsung di editor konten WordPress , yang menyederhanakan pengalaman desain dibandingkan dengan pembuat halaman saat ini.

Di sisi lain, Elementor versi pro menawarkan widget dan fitur yang jauh lebih canggih. Karena kedua plugin harganya sama untuk penggunaan satu situs ($49), kami sarankan Anda beralih ke pembuat halaman raksasa sebagai gantinya.

Pendapat terakhir kami tentang Stackable

Secara keseluruhan, kita dapat mengatakan bahwa Stackable adalah plugin yang agak intuitif yang menawarkan desain modern dan estetis.

Stackable adalah untuk setiap pembuat situs yang ingin memiliki blok lebih lanjut untuk menyesuaikan desain situs mereka , tanpa perlu menyentuh baris kode apa pun (tetapi memiliki kemungkinan, jika mereka menguasai CSS, untuk menempatkan blok sesuai keinginan mereka).

Namun, haruskah Anda menggunakannya atau langsung membuka pembuat halaman yang lebih canggih seperti Elementor?

Memang, dengan Stackable kami mendekati pengalaman desain pembuat halaman langsung di editor WordPress. Bisa dikatakan bahwa ini adalah awal dari tujuan akhir Project Gutenberg, yaitu menjadi “site builder” yang sesungguhnya.

Namun, kami belum sampai di sana. Untuk saat ini, Stackable akan membantu Anda membuat postingan dengan cara yang sama seperti Elementor versi gratis, tanpa manajemen template apa pun (Stackable memungkinkan Anda memuat desain yang sudah jadi, tetapi tidak menyimpannya sendiri).

Jika Anda suka bekerja dengan editor WordPress dan blok yang disediakan oleh Stackable cukup untuk proyek Anda, lakukanlah! Menggunakan Elementor tidak akan diperlukan.

Namun, jika Anda memerlukan fitur yang lebih canggih atau perlu mendesain situs dari awal (maksud saya menyesuaikan semua templat halaman), Elementor (tautan aff) atau salah satu pesaingnya akan sangat diperlukan.

Dan jika Anda salah satu pengguna yang telah tergoda oleh Elementor, Stackable mungkin tidak akan menjadi hit besar. Lagi pula, Anda punya kebiasaan sendiri, jadi tidak ada alasan nyata untuk mengubahnya.

Jika Anda tertarik dengan versi Pro dari Stackable, jangan ragu untuk melihat demo yang tersedia dan menelusuri versi gratisnya, untuk memastikan bahwa blok dan opsi sesuai dengan keinginan Anda.

Unduh plugin Stackable:

Dan Anda, apakah Anda sudah menggunakannya? Apakah artikel ini membuat Anda ingin menggunakannya? Bagikan pemikiran Anda di komentar.