5 Fitur Tersembunyi Elementor untuk Website Lebih Menawan

Elementor telah menjadi favorit para desainer web karena kemudahannya dalam membangun website tanpa perlu coding. Namun, tahukah kamu bahwa masih banyak fitur tersembunyi Elementor yang dapat membuat website kamu semakin menawan? 

Dalam artikel ini, kita akan mengungkap 5 trik rahasia Elementor yang akan membawa desain website kamu ke level berikutnya.

Fitur-fitur Elementor dan Cara Menggunakannya

#1: Dynamic Content

Fitur Dynamic Content for Elementor ini adalah opsi untuk menampilkan elemen dan/atau sesi berbeda berdasarkan kondisi untuk mendukung pengalaman pengguna. Dengan fitur ini, kamu bisa memasukkan informasi dinamis, seperti judul atau tanggal posting ke dalam desain website mereka. 

Selain untuk teks, dynamic content juga dapat digunakan untuk elemen klasik seperti gambar, video, kontrol angka dinamis, dan custom field keys. 

Dynamic Content for Elementor ini biasanya sangat berguna untuk website WooComerce karena memungkinkan mereka menampilkan produk atau promosi yang relevan. 

Cara Menggunakan Dynamic Content

Untuk memanfaatkan dynamic content, kamu memerlukan Elementor Pro yang menyertakan fitur Dynamic Tag. Berikut cara memulainya:

1. Aktifkan Dynamic Tag: pada editor Elementor, pilih widget tempat kamu ingin menggunakan dynamic content. Cari ikon dynamic tag di samping bidang yang ingin kamu buat dinamis (misalnya, teks, gambar, URL). 
2. Pilih Source kamu: Klik ikon dynamic tag dan pilih dynamic content source kamu. Pilihannya meliputi Post Title, Post Custom Columns, Writer Info, dan banyak lagi.
3. Sesuaikan Konten kamu: Setelah memilih sumber dinamis, kamu dapat menyesuaikan bagaimana konten tersebut ditampilkan. Misalnya, jika kamu menggunakan kolom kustom, kamu dapat memformat output agar sesuai dengan gaya website kamu. 

#2: Motion Effects

Fitur Motion Effects dari Elementor ini adalah alat canggih yang memungkinkan kamu menambahkan animasi dan efek interaktif ke elemen halaman web tanpa harus melakukan coding. 

Efek ini membuat website kamu lebih menarik secara visual, membantu menarik perhatian pengunjung, dan menciptakan pengalaman pengguna yang berkesan. 

Beberapa animasi yang bisa kamu dapatkan jika menggunakan Motion Effects yaitu: Entrance, Hover, Scroll, Sticky, Mouse-track, dan Custom Cursor. 

Cara Menggunakan Motion Effects

Menambahkan motion effects pada website WordPress kamu sangat mudah. kamu dapat melakukannya langsung di editor Elementor. Berikut panduan singkatnya:

1. Pilih Elemen: Pilih widget atau bagian yang ingin kamu animasikan.
2. Navigasi ke Pengaturan Lanjutan: Di panel Elementor, buka tab Advance.
3. Aktifkan Motion Effects: Perluas bagian Motion Effects. Di sini, kamu akan menemukan opsi untuk efek gulir, animasi masuk, dan banyak lagi.
4. Sesuaikan Efek kamu: Sesuaikan pengaturan agar sesuai dengan desain kamu. kamu dapat mengontrol kecepatan, arah, dan pemicu animasi. 

Misalnya, kamu dapat mengatur elemen agar memudar saat pengguna menggulir ke bawah halaman atau membuat tombol memantul saat mengarahkan kursor.

#3: Global Widget

Fitur Global Widget pada Elementor ini berfungsi untuk membantu pengguna membuat, menyimpan dan menggunakan kembali widget di seluruh halaman atau website tanpa perlu konfigurasi ulang berkali-kali. 

Artinya, setiap perubahan yang diterapkan pada satu instance akan otomatis diperbarui di semua tempat widget tersebut digunakan. Ini meningkatkan efisiensi dalam pengembangan web, memudahkan pengelolaan konten, dan konsistensi visual yang lebih baik. 

Cara Menggunakan Global Widget

Berikut ini cara membuat dan mengelola Global 

• Membuat Global Widget Elementor seperti biasa di halaman editor Elementor. Setelah dipilih, letakkan widget di halaman kamu dan tambahkan konten yang diinginkan, lalu tat sesuai keinginan kamu. 
• Simpan Widget sebagai Global. Setelah konten widget kamu selesai dibuat, langkah selanjutnya menyimpan widget. Caranya: Klik kanan pada widget, lalu klik ‘Save as Global’ pada menu drop-down. 
• Setelah itu, kamu akan melihat Popup yang meminta kamu memberi nama konten widget. Setelah mengetik nama, klik simpan, dan selesai. 
• Menambahkan Global Widget Elementor ke Website kamu. Untuk melakukannya, ada tiga cara yang bisa dilakukan: 
  • Menambahkan Global Widget dari Elementor Page Builder.
  • Menambahkan Global Widget dari panel widget. (Halaman Non-Elementor)
  • Menambahkan Global Widget dengan kode pendek. (Halaman Non-Elementor)
• Setelah tahu cara membuat dan menambahkan Global Widget Elementor, kamu kini bisa melakukan perubahan konten pada global widget. 

Hal ini bisa dilakukan pada menu kontrol pengeditan untuk global widget, dengan dua opsi yang tersedia, yaitu:

• Edit global widget – Edit
• Hapus tautan dari global widget – Unlink
• Menghapus Global Widget Elementor.  Terkadang kamu ingin menghapus global widget. Untuk melakukannya, ikut cara berikut: Elementor → Templates → Global Widget, lalu klik Trash di bawah nama global widget kamu. 

#4: Themes Builder

Fitur Theme Builder pada Elementor ini dianggap sebagai game changer untuk siapapun yang ingin mengkustomisasi desain website WordPress tanpa coding. Theme Builder ini membantu kamu mendesain custom header, footers, template single post, arsip halaman dan lainnya. 

Cara Menggunakan Theme Builder

Sebelum menggunakan Theme Builder untuk mendesain website WordPress, kamu perlu tahu tiga cara mengakses Theme Builder berikut:

• Cara 1: Pergi ke WordPress admin menu, kemudian navigasikan ke Elementor → Theme Builder 
• Cara 2: Dari dalam layar Editor Elementor halaman atau postingan mana pun, klik hamburger menu di sudut kiri atas Widget Panel, lalu pilih Them Builder di tab Settings. 
• Cara 3: Dapatkan akses cepat ke Theme Builder di layar manapun dengan menggunakan shortcut keyboard. Di Mac, klik CMD+SHIFT+E untuk masuk ke Theme Builder. Di Windows, klik CTRL+SHIFT+E untuk masuk ke Theme Builder. 

Setelah itu, kamu bisa langsung menggunakan fitur-fitur yang ada pada Theme Builder, dengan panduan berikut ini:

1. Memilih Jenis Template: Pilih jenis template yang ingin kamu buat atau bagian web yang ingin ditambahkan, seperti Header, Footer, Single Post, atau Archive. 

Kamu juga bisa menambahkan Site Part dengan mengimpor template dari pihak ketiga, caranya:

• Klik Import Icon di bagian kanan atas Theme Builder
• Drag dan drop atau pilih file .JSON atau .ZIP yang memuat template yang ingin kamu impor. 
• Template kini sudah ditambahkan ke dashboard Site Part kamu. 

2. Mendesain Template kamu: Selanjutnya, kamu bisa melakukan perubahan atau editing. Klik label Site Part di bagian sidebar. Perintah ini akan membuat dashboard berisi detail Site Part. 
3. Klik Edit di sudut kanan atas pada halaman Site Part yang ingin kamu ubah. Selanjutnya, halaman editor Elementor. 

Pada bagian ini, kamu bisa melakukan edit kondisi Site Park yang sudah ada, ekspor Site Part, hapus Site Part, dan ganti nama Site Part. 

4. Publikasikan Template: Setelah puas dengan desain kamu, klik tombol Publish. kamu akan diminta untuk menetapkan ketentuan di mana template ini akan diterapkan (misalnya, semua posting, kategori tertentu, halaman tertentu).

#5: Custom CSS

Salah satu fitur terbaik Elementor sebagai WordPress Page Builder yang jarang diketahui adalah adanya Custom CSS. Kamu bisa menambahkan kustomisasi CSS ini untuk menambahkan fungsionalitas dan membuat desain website yang lebih unik. 

Custom CSS ini tidak hanya berguna untuk menyesuaikan tampilan dan, ttapi juga menciptakan tampilan yang konsisten di seluruh website. Menggunakan Custom CSS juga dapat membantu kamu mengurangi kode yang perlu dimuat sehingga kecepatan dan kinerja website jadi lebih optimal. 

Cara Menggunakan Custom CSS

Berikut ini cara kamu dapat menyempurnakan desain kamu dengan Custom CSS:

1. Pilih Elemen: Pilih widget, kolom, atau bagian yang ingin kamu tambahkan gaya dan nuansa baru

2. Navigasi ke Advance Settings: Di panel Elementor, buka tab Advance.

3. Buka Custom CSS: Gulir ke bawah ke bagian Custom CSS. Terdapat empat cara untuk menambahkan CSS Kustom  di Elementor, yaitu:

• Menambahkan Custom CSS dengan Widget HTML Elementor
  • Pilih halaman tempat kamu ingin menambahkan Custom CSS dan buka editor Elementor
  • Tarik dan letakkan widget HTML ke halaman
  • Klik Widget HTML pada halaman untuk membuka editor di sebelah kiri
  • Pada editor HTML, buka tab Advance dan gulir ke bawah ke tab Custom CSS
  • Tambahkan kode Custom CSS kamu di area teks yang disediakan
  • Simpan perubahan dan pratinjau halaman kamu untuk melihat perubahannya
• Menambahkan Custom CSS dengan Theme Customizer
  • Navigasikan ke Appearance → Customize dari dashboard WordPress kamu. 
  • Letakkan opsi Additional CSS di dalam Theme Customizer. Ini akan membuka text editor di mana kamu  dapat menambahkan kode custom CSS. 
  • Kamu bisa menambahkan kode Custom CSS langsung ke bidang text editor. Kamu juga bisa menghapus komentar pengganti dan menambahkan kode CSS kamu. 
  • Setelah kode CSS ditambahkan, kamu dapat melihat pratinjau perubahan secara langsung. 
• Menambahkan Custom CSS dengan Elementor Pro
  • Buka Elementor Editor dan pilih template atau widget yang ingin kamu sesuaikan. 
  • Pilih tab Advance pada panel Settings. 
  • Gulir ke bawah ke bagian Custom CSS dan klik ikon pena untuk membuka editor
  • Tambahkan kode Custom CSS kamu ke ditor dan klik tombol Save. 
• Menambahkan Custom CSS dengan The Plus Addons for Elementor
  • Buka editor Elementor dan pilih wadah yang ingin kamu tambahkan Custom CSS.
  • Navigasi ke tab Advance pada panel pengeditan.
  • Gulir ke bawah ke tab Plus Ekstras dan buka.
  • Di bagian CSS Kustom, kamu dapat menambahkan kode Custom CSS kamu.
  • Setelah menambahkan kode Custom CSS,, klik tombol Save untuk menyimpan perubahan kamu. 

Penutup

Elementor saat ini dianggap sebagai salah satu WordPress Page Builder yang tangguh, tapi beberapa fiturnya belum diketahui oleh para penggunanya. Dengan memanfaatkan dynamic content, motion effects, global widget, theme builder, dan custom CSS, kamu bisa membuat website yang lebih personal, menarik dan profesional. 

Masih kesulitan memaksimalkan potensi fitur-fitur Elementor? Dengan jasa pembuatan website dari IDwebhost, kamu bisa mendapatkan website yang tidak hanya indah secara visual, tetapi juga optimal untuk SEO dan performa. 

Tim kami akan membantu kamu mengimplementasikan fitur-fitur tersembunyi Elementor dan menyesuaikannya dengan kebutuhan bisnis kamu.