Ayo Bikin Website fokus dalam pembuatan artikel dan tutorial tentang WordPress.
Semua artikel dibuat dengan sistematis, dikelompokkan secara terstruktur dan jumlahnya masif.

Kadence Element Hooks adalah salah satu fitur dari Kadence Pro. Dengan adanya fitur ini Anda dapat membuat elemen menggunakan editor Gutenberg dan menampilkannya di berbagai lokasi website.

Jika Anda masih bingung, Anda bisa lihat contoh dari Kadence Element Hooks pada bagian About Us yang ada di bawah judul artikel ini.

Dengan menggunakan fitur ini Anda juga bisa menampilkan element yang dibuat hanya pada halaman tertentu. Masih dengan contoh yang sama, element About Us yang ada di bawah judul diseting hanya muncul di artikel ini.

Yuk, langsung saja pelajari bagaimana menggunakan Kadence Element Hooks untuk mendapatkan kustomisasi yang tak terbatas di website Anda.

Install Kadence Theme Pro

Untuk bisa menggunakan Kadence Element Hooks, Anda harus menginstall plugin Kadence Pro. Plugin ini adalah addon untuk Kadence Theme. Dan plugin ini berbayar. Tapi harga yang dibayarkan sepadan dengan semua tambahan fitur yang diberikan.

Salah satu, atau bisa juga dibilang fitur terbaik Kadence Pro adalah Kadence Element Hooks ini.

Setelah Anda membeli dan mendapatkan file installer plugin dalam format zip, Anda bisa langsung menginstallnya.

Karena plugin ini tidak ada di plugin direktori WordPress maka Anda harus upload plugin tersebut secara manual. Tapi tenang saja, caranya cukup mudah kok.

1. Login ke WordPress Dashboard

Login dengan menggunakan alamat www.domain-anda.com/wp-admin atau www.domain-anda.com/wp-login.php.

2. Upload Plugins

  • Setelah Anda masuk ke dalam dashboard, klik menu Plugins yang ada di samping kiri.
  • Klik Add New yang ada pada menu sebelah kiri atau tombol Add New.
  • Klik tombol Upload Plugin.

3. Install dan Aktifkan Plugin

  • Pilih file plugin dalam bentuk .zip dari komputer Anda.
  • Klik Install Now.
  • Klik tombol Activate Plugin untuk mengaktifkan plugin yang baru saja Anda install.

Jika anda ingin tau lebih detil, Ayo Bikin Website mempunyai panduan lengkap cara menginstall plugin secara manual.

Aktifkan Kadence Elements

Setelah Kadence Pro aktif, klik menu AppearanceKadence. Di halaman ini Anda akan melihat semua addon pro. Pastikan tombol pada bagian Hooked Elements berwarna biru. Jika tidak berwarna biru klik pada tombol tersebut untuk membuat fitur tersebut aktif.

Kadence Hooked Elements Toggle

Jika Hooked Elements sudah diaktifkan, Anda akan mendapatkan satu menu tambahan di bawah AppearanceKadence, yaitu menu Elements.

Kadence Element Hooks

Kadence Element Type

Sebelum melanjutkan tutorial dan mulai membuat element ada baiknya Anda mengetahui jenis-jenis element yang ada di Kadence.

Ada tiga jenis atau tipe element yang ada di Kadence Pro, yaitu:

  1. Default Kadence Element
  2. Fixed Kadence Element
  3. Code Kadence Element

1. Default Kadence Element

Saat Anda memilih tipe Default, Anda akan diarahkan ke Gutenberg atau block editor. Ya, dengan tipe ini Anda bisa menggunakan Gutenberg editor untuk membuat element yang akan ditampilkan di area yang Anda inginkan.

Untuk tutorial ini, Anda akan menggunakan tipe Default untuk membuat element About Us yang hanya akan ditampilkan di post ini. Atau jika mau Anda bisa menampilkannya di semua postingan.

2. Fixed Kadence Element

Jika element tipe Fixed yang Anda pilih, Anda akan diarahkan menuju halaman yang sama dengan tipe Default. Yaitu halaman Gutenberg editor. Yang membedakan dengan tipe Default opsi penempatan element.

Fixed Kadence Element fitur tambahan yang sangat powerful di Kadence Hooked Elements. Anda mendapatkan element yang bisa dibuat dengan block editor plus Anda bisa menempatkannya fixed di area tertentu. Posisi element tersebut akan tetap berada disitu meskipun Anda scroll halaman website.

Berikut ini adalah penempatan element untuk tipe Fixed:

  • Fixed On Top
  • Fixed Above Transparent Header
  • Fixed Top After Scroll
  • Fixed Bottom After Scroll (no space below footer)
  • Fixed Bottom After Scroll
  • Fixed On Bottom
  • Fixed Bottom (no space below footer)

3. Code Kadence Element

Jika Anda memilih tipe Code, Anda akan mendapatkan halaman yang sedikit berbeda dengan dua tipe sebelumnya. Anda akan diarahkan ke sebuah halaman dimana Anda bisa memasukkan kode HTML.

Code Element

Penggunaan Kadence Element Hooks

Sekarang saatnya kita masuk ke menu utama yaitu tutorial penggunaan Kadence Element Hooks. Seperti sudah kami jelaskan di atas, pada tutorial ini Anda akan mempelajari cara menggunakan Kadence Element Hooks untuk membuat informasi tentang website (About Us) agar tampil di bawah judul setiap postingan atau postingan tertentu.

Step 1: Pilih Tipe Element

Masuk ke halaman Kadence Elements dengan klik pada menu Appearance > Kadence > Elements yang ada pada bagian sidebar WordPress dashboard.

Kadence Element Hooks

Buat element baru dengan klik pada tombol Add New.

Add New Element

Pilih tipe element Default.

Kadence Element Type

Buat element yang Anda inginkan. Pada contoh tutorial ini digunakan contoh informasi tentang Ayo Bikin Website. Berikut contoh element yang dibuat.

Contoh Element

Step 2: Atur Placement Settings

Setelah element yang Anda buat jadi, Anda bisa mengatur dimana Anda mau element tersebut tampil di website.

Element Settings

Caranya adalah dengan klik tombol Element Settings yang ada di bagian pojok kanan atas halaman seperti terlihat pada gambar di atas. Setelah Anda klik akan muncul berbagai pengaturan yang bisa Anda lakukan. Yang pertama adalah pengaturan penempatan element atau Placement Settings. Ada cukup banyak posisi yang bisa dipilih untuk menampilkan element. Untuk melihat semua posisi Anda bisa klik dropdown berikut:

  • Body
    • Before Site Wrapper
    • After Site Wrapper
  • Header
    • Before Header
    • After Header
    • Replace Header
  • Content Wrap
    • Before All Content
    • After All Content
  • Above Content Hero Title
    • Above Title Content
  • Content and Sidebar
    • Before Content
    • After Content
    • Before Sidebar
    • Replace Sidebar
    • After Sidebar
  • Single Inner Content
    • Before Inner Content
    • Before Inner Title Area
    • Before Inner Title
    • After Inner Title
    • After Inner Title Area
    • Before Entry Content
    • After Entry Content
    • After Inner Content
  • Inside The Content
    • Before First Heading Tag
    • After First Heading Tag
    • After First Paragraph
    • After Second Paragraph
    • After Third Paragraph
    • After Fourth Paragraph
  • Comments
    • Before Comments
    • Before Comments List
    • After Comments List
    • After Comments
  • Archive Inner Content
    • Before Archive Inner Title
    • After Archive Inner Title
  • Footer
    • Before Footer
    • After Footer
    • Replace Footer
  • 404 Page
    • Before 404 Page Content
    • After 404 Page Content
    • Replace 404 Page Content
  • Mobile Menu Off Canvas Area
    • Before Mobile Off Canvas Content
    • After Mobile Off Canvas Content
  • Header Account Login Modal
    • Left of Login Form
    • Before Login Form
    • After Login Form
    • Right of Login Form
    • Replace Login Modal
  • Custom
    • Custom Hook

Seperti yang terlihat pada list di atas, ada banyak sekali posisi penempatan yang bisa dipilih. Selain itu Anda bahkan bisa menggunakan element untuk replace header, replace sidebar, replace footer, replace 404 page content, yang artinya Anda bahkan bisa membuat element menjadi sebuah header atau bahkan mengganti isi dari halaman 404 (halaman tidak ditemukan).

Anda bebas untuk memilih placement ini sesuai dengan kebutuhan. Tetapi untuk contoh ini, element akan diletakkan sebelum isi konten.

Placement Setting

Step 3: Atur Display Settings

Dengan pengaturan Display Settings, Anda bisa mengatur untuk menampilkan element secara kondisional, dimana Anda bisa mengatur element untuk tampil di semua website, atau kategori tertentu atau hanya pada satu postingan spesifik saja.

  • General
    • Entire Site
    • Front Page
    • Blog Page
    • Search Results
    • Not Found (404)
    • All Singular
    • All Archives
    • Author Archives
    • Date Archives
    • Paged
  • Posts
    • Single Posts
    • Category Archives
    • Tag Archives
  • Pages
    • Single Pages

Jika Anda kombinasikan Placement dan Display Settings, Anda bisa membuat element untuk header, footer, bahkan sidebar yang berbeda untuk setiap kategori, tag, atau penulis. Betapa banyak kustomisasi yang bisa Anda dapatkan dengan mengombinasikan keduanya. Kadence Element Hooks memang benar-benar powerful.

Mari kita lanjutkan tutorial Kadence Element Hooks ini. Coba Anda lihat gambar di bawah ini, setingan seperti gambar tersebut berarti element akan ditampilkan di setiap single post atau konten/artikel yang Anda buat melalui menu post.

Perbedaan Post dan Page

Display Setting

Anda bisa membatasi element untuk tampil di kategori atau tag tertentu dari pilhan yang ada di Select Post By. Opsi yang disediakan adalah:

  • Group jika Anda ingin membatasi pada kategori atau tag tertentu,
  • Author jika Anda ingin element tampil pada postingan yang dibuat penulis tertentu, atau
  • Individually jika Anda ingin element hanya tampil di salah satu postingan.

Step 4: Atur User Settings

Setingan selanjutnya adalah User Setting. Dengan setingan ini Anda bisa menentukan siapa yang bisa element yang Anda buat. Anda bisa membuat element terlihat hanya untuk user yang login atau semua pengunjung website bisa melihat element tersebut.

  • Basic
    • All Users
    • Logged out Users
    • Logged in Users
  • Specific Role
    • Administrator
    • Editor
    • Author
    • Contributor
    • Subscriber

Jika Anda mempunyai website yang mengharuskan pembaca berlangganan maka fitur ini sangat bisa memaksimalkan website Anda. Anda bisa memberikan konten ekslusif untuk member tertentu atau menampilkan iklan untuk pengunjung yang belum menjadi member. Cukup menarik bukan.

Step 5: Pengaturan Opsional

Ada dua pengaturan lagi yang disediakan untuk kustomisasi Kadence Element Hooks, yaitu Device Settings dan Expires Settings.

  • Device Settings digunakan untuk mengatur di device apa saja element akan ditampilkan. Anda bisa memilih desktop, tablet, atau ponsel. Jika Anda tidak mengaturnya, element akan ditampilkan di semua device.
  • Expires Settings digunakan untuk mengatur sampai kapan element akan ditampilkan, ini sangat cocok digunakan jika Anda ingin menampilkan promo yang akan berakhir pada suatu tanggal tertentu. Ini akan meminimalisir Anda lupa untuk menghapus postingan setelah waktu promo berakhir.

Step 6: Publish Element

Setelah selesai semua pengaturan, saatnya Anda publish element yang Anda buat dan lihat hasilnya.

Kesimpulan

Kadence Element Hooks adalah fitur paling powerful yang ada di Kadence Pro. Anda bisa membuat element dan menampilkannya sesuai dengan keinginan. Dengan begitu banyaknya kustomisasi yang ditawarkan Anda bisa membuat element yang bahkan sebelumnya tidak Anda bayangkan.

Hasil akhir dari tutorial ini adalah sebagai berikut:

Result

Semoga tutorial ini bisa membantu Anda membuat kustomisasi website dengan Kadence Element Hooks. Jika Anda mengalami kesulitan dengan penggunaan Kadence Element Hooks jangan ragu menghubungi kami di kolom komentar.

Artikel Terkait

Leave a Reply

Your email address will not be published. Required fields are marked *