Cara Membuat Sticky Block (Tetap) di Gutenberg Tanpa Kode

Apakah Anda mencari cara untuk membuat blok lengket di Gutenberg? 🤔

Baik Anda ingin membuat penafian afiliasi, menawarkan diskon, atau menarik perhatian pengunjung ke fitur penting produk Anda – blok permanen dapat membantu Anda mencapai tujuan ini.

Blok melekat, juga dikenal sebagai blok tetap, tetap terlihat di layar bahkan saat pengguna menggulir halaman ke bawah, memastikan bahwa konten yang ingin Anda soroti selalu ada dalam pandangan mereka.

👉 Berikut ini contoh yang sedang kita bicarakan – Anda dapat melihat bagaimana ikon sosial “terjebak” di posisinya bahkan saat pengguna menggulir:

Menambahkan blok tempel di Gutenberg memberikan pengalaman pengguna yang lancar dan menarik, memungkinkan Anda menyampaikan pesan secara efektif dan menarik minat audiens Anda.

Gutenberg tidak menawarkan blok lengket di luar kotak. Namun, ada alat pihak ketiga yang dapat Anda gunakan untuk menambahkan blok tempel ke postingan dan halaman Anda.

Dalam tutorial ini, kami akan menunjukkan cara menggunakan plugin Gutenberg populer yang disebut Otter Blocks untuk menambahkan blok tempel ke situs WordPress Anda.

Mari selami. 🤿

Bagaimana cara menambahkan blok lengket di Editor Gutenberg

Untuk menambahkan blok tempel di Editor Gutenberg, Anda perlu melakukan langkah-langkah berikut:

• Langkah 1: Instal dan aktifkan plugin Otter Blocks
• Langkah 2: Aktifkan alat Transform to Sticky untuk blok Anda
• Langkah 3: Ubah posisi blok lengket
• Langkah 4: Konfigurasikan offset
• Langkah 5: Aktifkan blok lengket di ponsel
• Langkah Opsional: Coba mode mengambang
• Langkah Opsional: Tentukan perilaku blok

Langkah 1: Instal dan aktifkan plugin Otter Blocks 🔌

Otter Blocks adalah plugin WordPress yang memperluas fungsionalitas Editor Gutenberg.

Ini menawarkan kumpulan blok penyusun halaman, fitur editor, dan templat untuk membantu meningkatkan desain dan fungsi situs web Anda.

Beberapa blok paling populer yang ditawarkan oleh Otter antara lain adalah tabel harga, testimonial, ikon sosial, peta, bilah kemajuan, animasi, hitung mundur, dan ulasan produk. Berikut daftar lengkap blok Otter.

Otter Blocks memiliki versi gratis dan premium (disebut Otter Pro).

Anda dapat menggunakan versi gratisnya untuk membuat blok tempel dasar di Gutenberg, sehingga Anda dapat mengikuti tutorial ini secara gratis.

Namun, untuk melakukan beberapa langkah yang kami bahas seperti menambahkan jarak antara blok dan layar, menghapus blok lengket di frontend, menampilkan blok lengket di ponsel, dll., Anda memerlukan plugin versi premium.

Otter Pro tersedia dengan biaya tahunan sebesar $49 untuk satu situs web. Anda dapat membelinya dari sini. Dan jika Anda ingin mencoba plugin ini sebelum menggunakannya, cobalah demo ini.

➡️ Untuk melanjutkan, instal Otter versi gratis atau premium. Dalam tutorial di bawah ini, kami akan mencoba mencatat kapan fitur tertentu memerlukan opsi premium.

Langkah 2: Aktifkan alat Transform to Sticky untuk blok Anda 🚧

Buka halaman atau postingan tempat Anda ingin menambahkan blok tempel di Editor Gutenberg.

Pilih blok yang ingin Anda jadikan tempel dan buka panel yang terletak di sisi kanan editor.

Di panel, navigasikan ke Blokir dan buka opsi Alat Blokir . Perluas Block Tools dengan memilih tanda plus .

Lalu pilih Transform to Sticky dari menu dropdown.

Opsi baru bernama Sticky akan muncul tepat di bawah Block Tools. Perluas itu dan buka Sticky To .

Di Sticky To, Anda dapat mengatur elemen yang ingin Anda tempelkan pada blok tersebut. Ada empat opsi:

1. Blok Tingkat Atas
2. Bagian
3. Blok Induk
4. Layar

Untuk memahami opsi ini dan mana yang sesuai dengan postingan tempel Anda, buka Ikhtisar Dokumen di Editor Gutenberg dan lihat blok di sekitar blok postingan tempel Anda.

Blok paling atas adalah blok Tingkat Atas. Dengan memilih Blok Tingkat Atas , Anda akan membuat blok lengket Anda tetap dengan blok paling atas . Dalam kasus kami, itu adalah blok Grup pada gambar di bawah.

Selanjutnya, memilih Bagian akan memastikan bahwa blok lengket dipasang pada blok Bagian, dan memilih Blok Induk akan membuat blok lengket dipasang pada blok tepat di atas blok lengket Anda .

Dalam kasus kami, blok Induk adalah blok Kolom Bagian. Lihat gambar di bawah ini.

Terakhir, memilih opsi Layar akan meminta editor untuk mengabaikan semua blok dan hanya menempelkan postingan di bagian atas layar pengguna .

Posisi blok lengket secara default diatur ke atas. Untuk mempelajari cara mengubah posisinya, lanjutkan ke langkah berikutnya.

Langkah 3: Ubah posisi blok lengket 🚩

Untuk mengubah posisi blok lengket, kembali ke panel kanan dan cari Posisi tepat di bawah opsi Stick To.

Anda dapat menempatkan blok lengket di bagian atas atau bawah layar. Posisi terbawah hanya tersedia untuk pengguna Otter Pro .

Berikut tampilan blok di salah satu situs demo kami:

Langkah 4: Konfigurasikan offset ⚙️

Setelah mengatur posisi blok tempel, coba pratinjau. Jika blok tampak terlalu jauh atau dekat layar, gunakan opsi Offset untuk menambah atau mengurangi jarak antara blok lengket dan layar.

Langkah 5: Aktifkan blok tempel di ponsel 📱

Secara default, blok tempel hanya muncul di desktop. Jika Anda ingin mengaktifkannya di seluler, cukup aktifkan opsi Aktifkan di seluler .

Omong-omong, hanya pengguna Otter Pro yang dapat mengakses opsi seluler .

Langkah Opsional: Coba mode mengambang 🏄

Blok tempel dapat diatur agar melayang di sepanjang layar saat pengguna menggulir halaman. Ini cara yang bagus untuk menarik perhatian pengguna dan mengarahkannya ke blok melekat.

Hanya pengguna Otter Pro yang dapat menggunakan mode float dan ini hanya dapat diterapkan pada blok tingkat atas yang dalam kasus kami adalah blok grup.

Segera setelah Anda mengaktifkan mode float, Anda akan diminta untuk menentukan lebar , sisi , dan offset sisi blok.

Lebar tentu saja mengacu pada lebar blok dan sisinya membantu Anda menentukan lokasi blok (kiri atau kanan) di layar. Offset mengacu pada jarak antara blok lengket dan sisi yang dipilih .

Kami menyarankan Anda melihat pratinjau halaman setelah mengonfigurasi mode mengambang dan melakukan penyesuaian yang diperlukan.

Langkah Opsional: Tentukan perilaku blok 👨🏽‍💼

Dengan menggunakan plugin Otter Block, Anda dapat membuat beberapa blok tempel di halaman yang sama. Terkadang blok-blok ini mungkin saling bertabrakan. Anda dapat menentukan bagaimana blok lengket akan merespons selama tabrakan menggunakan opsi Perilaku .

Anda dapat mengatur perilaku menjadi collaps , fade , atau stack .

Memilih keruntuhan akan mengatur balok-balok lengket dengan gerakan yang sama untuk runtuh satu sama lain ketika bertabrakan, seperti berikut:

Dan memilih fade akan mengatur blok menjadi fade atau menghilang satu ke blok lainnya .

Terakhir, memilih tumpukan akan menumpuk blok di atas blok lengket lainnya tempat blok tersebut bertabrakan, seperti yang ditunjukkan pada gif di bawah.

Baik fade maupun stack hanya tersedia untuk pengguna Otter Pro .

Itu dia. Anda sekarang telah menambahkan blok lengket di Gutenberg. 🤩

Buat blok tempel pertama Anda di Gutenberg 🧱

Menambahkan blok tetap atau lengket di Gutenberg adalah cara yang bagus untuk menarik perhatian pengunjung ke bagian penting situs WordPress Anda.

Karena Gutenberg tidak menawarkan blok tempel default, Anda perlu menggunakan plugin pihak ketiga untuk menambahkan fungsi ini ke situs Anda.

Meskipun ada beberapa plugin blok lengket di sana, Otter Blocks adalah plugin blok termudah dan paling ramah pengguna di luar sana.

Ini memiliki versi gratis dan premium. Versi gratisnya dapat digunakan untuk membuat blok lengket tetapi beberapa pengaturan lanjutan seperti memperbaiki blok di bagian bawah layar atau mengaktifkan blok di perangkat seluler, dapat dicapai dengan menggunakan plugin versi premium.

👉 Untuk mengaktifkan dan menjalankan blok lengket di halaman Anda menggunakan plugin Otter Blocks, Anda perlu mengikuti langkah-langkah di bawah ini:

Jika Anda memiliki pertanyaan tentang cara membuat blok tempel di Gutenberg, beri tahu kami di bagian komentar di bawah .