Plugin Beaver Builder kami membantu Anda membangun situs web lengkap dengan template dan modul. Namun, mungkin ada saatnya Anda ingin menyesuaikan situs Anda lebih jauh. Dengan kode pendek Beaver Builder, Anda dapat menambahkan konten tambahan di dalam modul, header, footer, dan sidebar.

Dalam posting ini, kami akan memperkenalkan shortcode Beaver Builder dan menunjukkan cara memasukkannya ke dalam konten Anda. Kami juga akan menjelajahi beberapa contoh yang dapat menyempurnakan desain situs web Anda. Mari kita melompat!

Pengantar Shortcode Beaver Builder

Jika Anda pernah bekerja dengan situs WordPress sebelumnya, Anda mungkin sudah familiar dengan shortcode. Ini adalah potongan kecil kode yang menambahkan fungsionalitas ke situs Anda.

Daripada menulis semuanya dalam HTML menggunakan editor kode, Anda cukup memasukkan kode pendek ke halaman Anda. Ini akan memiliki slug atau ID yang sesuai dengan elemen Beaver Builder, seperti modul, baris, atau kolom. Anda juga dapat menggunakan kode pendek untuk posting, halaman, atau template tata letak.

Dalam contoh ini, kami menambahkan baris yang disimpan ke modul HTML:

Ketika kami mengklik Save , Beaver Builder secara otomatis mengubah kode pendek menjadi baris yang disimpan yang sesuai dengan:

Nanti di postingan, kami akan menunjukkan cara menambahkan kode pendek di editor. Untuk saat ini, mari kita bahas manfaat menggunakan shortcode Beaver Builder.

Kode pendek dapat berguna untuk menambahkan elemen visual ke area berbasis teks. Misalnya, Anda dapat membuat modul Harga dan menggunakan kode pendek untuk menambahkan foto produk. Dengan cara ini, Anda tidak perlu bekerja dengan dua modul individual (Harga dan Foto) karena keduanya akan digabungkan:

Kode pendek juga memungkinkan Anda untuk memasukkan elemen Beaver Builder ke dalam konten Anda saat bekerja dengan Editor Blok WordPress. Ini berarti Anda tidak perlu beralih ke editor Beaver Builder untuk menambahkan modul, baris, atau kolom.

Anda dapat menambahkan kode pendek ke modul Beaver Builder apa pun dengan bidang teks, termasuk:

• HTML
• Teks
• tajuk
• Memanggil
• ikon
• tab

Namun, mungkin tidak bijaksana untuk menambahkan terlalu banyak kode pendek. Ini dapat meningkatkan waktu pemuatan karena server harus meminta file CSS dan Javascript untuk setiap kode pendek. Sebaiknya gunakan paling banyak dua per halaman.

5 Contoh Shortcode Beaver Builder yang Bermanfaat

Ada banyak kasus penggunaan untuk kode pendek Beaver Builder. Mari kita lihat beberapa contoh bermanfaat.

1. Tombol Ajakan Bertindak di Tabel Harga

Katakanlah Anda memiliki tabel harga dengan beberapa opsi produk di halaman arahan atau halaman penjualan. Anda bisa membuat daftar harga dan mengarahkan pelanggan untuk check out dengan tombol di bagian bawah halaman. Namun, pengguna perlu menggulir ke bawah lebih jauh, yang berpotensi membahayakan Pengalaman Pengguna (UX).

Sebagai gantinya, Anda dapat membuat tombol Ajakan Bertindak (CTA) yang meminta pelanggan untuk membeli produk. Ini akan menautkan langsung ke halaman checkout sehingga pelanggan tidak perlu menavigasi lebih jauh. Kemudian, Anda dapat menambahkan tombol ini ke tabel harga Anda dengan kode pendek:

Ingatlah untuk menyesuaikan tombol CTA agar sesuai dengan merek visual Anda.

2. Formulir Kontak di Tab

Jika Anda memiliki situs bisnis, Anda dapat menambahkan beberapa tab ke bagian Tentang Anda. Dengan cara ini, pengguna dapat mempelajari lebih lanjut tentang perusahaan Anda tanpa harus menggulir halaman ke bawah.

Katakanlah Anda juga ingin calon pelanggan menghubungi Anda tentang layanan Anda segera setelah mereka selesai membaca. Pengguna sudah menghabiskan waktu untuk beralih antar tab Anda. Mengarahkan mereka ke tempat lain dapat memberi mereka beberapa detik ekstra untuk memikirkan kembali keputusan mereka untuk menjangkau.

Sebagai gantinya, Anda dapat menambahkan formulir kontak ke salah satu tab Anda, menggunakan kode pendek:

Semudah itu! Sekarang pelanggan dapat menghubungi Anda tanpa harus meninggalkan halaman.

3. Gambar Dalam Kotak Teks

Saat membuat halaman, Anda mungkin lebih suka menambahkan gambar dan teks ke satu modul. Meskipun Anda dapat menggunakan dua modul terpisah, konten akan dibagi dan Anda tidak akan dapat menempatkan gambar di tengah teks.

Menggabungkan teks dan gambar adalah cara yang efektif untuk menampilkan produk di toko online Anda. Misalnya, Anda dapat menambahkan gambar ke modul Kotak Harga Anda untuk menampilkan fitur produk yang berbeda:

Secara teoritis, Anda dapat menyusun tata letak yang sama ini dengan modul berbeda yang ditumpuk di atas satu sama lain. Namun, menggunakan shortcode gambar dapat mempercepat proses desain.

4. Modul Apa Saja di Editor Blok

Anda juga dapat menggunakan kode pendek Beaver Builder saat bekerja dengan Editor Blok. Ini bisa sangat berguna jika Anda menulis posting blog dan ingin menambahkan elemen interaktif ke artikel Anda.

Anda dapat dengan mudah memasukkan modul Beaver Builder ke halaman tanpa meninggalkan Editor Blok. Cukup masukkan blok Shortcode dan rekatkan kode Anda di dalam:

Setelah Anda mempublikasikan posting, kode pendek akan menampilkan konten di ujung depan:

Misalnya, Anda dapat menyisipkan modul Formulir Kontak. Anda juga dapat menambahkan Ajakan Bertindak yang mengarahkan pelanggan ke toko Anda, atau peta lokasi toko Anda yang disematkan.

5. Tanggal (Hanya Tema Berang-berang Builder)

Tema Beaver Builder kami hadir dengan kode pendek Tanggal khusus. Ini menampilkan tanggal saat ini di bagian mana pun dari halaman Anda, termasuk header, footer, dan sidebar:

Kode pendek ini bisa berguna jika Anda menjalankan situs web berita. Anda dapat menambahkan tanggal menggunakan salah satu kode pendek berikut:

Anda mungkin juga ingin menggunakan kode pendek ini di sebelah pesan hak cipta Anda di footer. Dengan cara ini, Anda dapat memastikan bahwa itu selalu up to date.

Cara Menambahkan Shortcode Dengan Beaver Builder (Dalam 2 Langkah)

Kami baru saja membahas beberapa skenario di mana kode pendek Beaver Builder dapat mempercepat dan menyederhanakan proses desain Anda. Sekarang, mari kita lihat cara menambahkannya ke situs Anda:

Langkah 1: Buat Kode Pendek Anda

Kode pendek tidak tersedia di situs web Anda. Anda harus menyimpan elemen Beaver Builder terlebih dahulu sebelum Anda dapat menyisipkannya sebagai kode pendek. Elemen-elemen ini mungkin termasuk:

• Modul
• Baris
• kolom
• Template

Misalnya, Anda ingin mendesain modul Formulir Kontak khusus. Anda dapat melakukan ini dengan menavigasi ke Beaver Builder > Saved Modules > Add New :

Anda kemudian akan diminta untuk memberi nama modul Anda dan memilih jenisnya:

Klik Tambah Modul Tersimpan . Pada halaman berikutnya, pilih Launch Beaver Builder untuk mengakses editor. Di sini, Anda dapat menyesuaikan formulir kontak sesuai keinginan Anda:

Saat Anda siap, pastikan untuk memublikasikan modul Anda. Sekarang akan muncul di halaman Modul Tersimpan Anda. Jika Anda menggunakan Beaver Builder versi terbaru, Anda akan dapat melihat kode pendek yang dibuat secara otomatis:

Jika Anda tidak dapat melihat kolom ShortCode , Anda harus membuat kode secara manual. Untuk melakukan ini, Anda memerlukan modul slug.

Jika Anda mengklik tombol Edit di bawah modul Anda, Anda seharusnya dapat melihat slug-nya. Jika Anda tidak dapat melihatnya, buka menu Opsi Layar dan centang kotak di sebelah Slug :

Sekarang Anda dapat menggunakan kode berikut untuk membuat kode pendek untuk modul ini:

 [fl_builder_insert_layout slug="my-post-slug"]

Ingatlah untuk mengganti "my-post-slug" dengan slug dari modul Beaver Builder Anda. Dalam contoh kita, itu akan terlihat seperti ini:

 [fl_builder_insert_layout slug="contact-form"]

Itu saja – Anda sekarang tahu cara membuat kode pendek untuk modul Beaver Builder.

Langkah 2: Masukkan Kode Pendek ke Halaman Anda

Langkah terakhir adalah menambahkan kode pendek ke halaman Anda. Dalam kebanyakan kasus, proses ini akan melibatkan menempelkan cuplikan di dalam bidang Teks dari sebuah modul.

Berikut contoh Tabel Harga kami dari sebelumnya. Seperti yang Anda lihat, kami telah menambahkan kode pendek untuk tombol CTA di kotak teks Fitur 5 :

Karena Beaver Builder menggunakan editor front-end, Anda akan dapat segera melihat modul yang Anda simpan. Dalam beberapa kasus (seperti saat menggunakan modul HTML), Anda mungkin perlu menyimpan perubahan sebelum kode pendek diubah menjadi elemen visual.

Kesimpulan

Kode pendek Beaver Builder memungkinkan Anda untuk dengan cepat menambahkan modul, baris, kolom, atau tata letak yang disimpan ke berbagai bagian halaman Anda. Anda dapat menggunakannya untuk mempercepat proses desain dan membuat halaman WordPress yang indah.

Untuk rekap, Anda dapat menggunakan shortcode Beaver Builder dengan mengikuti langkah-langkah sederhana ini:

1. Simpan elemen (modul, baris, kolom, atau tata letak) dan cari kode pendek atau siputnya.
2. Masukkan kode pendek ke dalam bidang teks dalam modul Beaver Builder atau blok Kode Pendek di Editor Blok.

Apakah Anda siap untuk mulai membuat halaman yang menakjubkan untuk situs Anda? Lihat daftar lengkap fitur ramah pengguna Beaver Builder!

PERTANYAAN-PERTANYAAN TERKAIT

Apakah Beaver Builder Menggunakan Shortcode?

Beaver Builder menyediakan kode pendek untuk elemen yang disimpan seperti modul, baris, kolom, dan templat. Anda kemudian dapat menambahkan cuplikan ini ke bidang dan modul berbasis teks. Ini dimungkinkan dalam editor front-end Beaver Builder dan Editor Blok WordPress. Selain itu, kode pendek memungkinkan Anda untuk menggunakan plugin favorit Anda yang lain bersama dengan Beaver Builder.

Apakah Anda Membutuhkan Tema Beaver Builder untuk Menggunakan Shortcode?

Anda tidak memerlukan tema Beaver Builder resmi untuk menggunakan kode pendek. Anda dapat membuat halaman dan menambahkan kode pendek dengan sebagian besar tema menggunakan plugin pembuat halaman. Namun, beberapa kode pendek, seperti kode pendek Tanggal, hanya berfungsi dengan tema Beaver Builder.

Apa Perbedaan Antara Beaver Builder dan Beaver Themer?

Beaver Builder adalah alat pembuatan halaman yang memungkinkan Anda mengedit area konten halaman dan posting menggunakan modul dan template. Sebaliknya, Beaver Themer adalah plugin add-on yang memungkinkan Anda mengedit area situs Anda yang biasanya dikontrol oleh tema Anda seperti header, footer, dan sidebar. Konten ini mencakup templat tema, bagian templat, dan kisi pos.