Cara menggunakan add html code elementor

How to use piece of my HTML code directly in Elementor?

HTML widget lets you add any HTML codes directly into your Elementor’s layout. 

This widget enables you to see output of your code directly into Elementor and while you’re editing a page. 
You can also add a custom JS to your layout by using the HTML element and wrapping the code into <script> tag.

In order to add your HTML codes as an HTML widget in Elementor:

1. Add a new page or edit an existing one.

2. Click on Edit with Elementor button.

3. From the left dashboard, search for the HTML widget.

4. Drag and drop the HTML element to your page.

5. A new dashboard on the left will open.

6. Insert your HTML code or custom javascript code directly into HTML Code box. 

7. Edit the settings and Update the page.

If you wish to Inject your data with a visual tool instead of coding, use Growmatik Personalizer.

Jika dahulu membuat website adalah hal yang paling sulit, karena jika ingin membuat website sendiri Anda harus mempelajari beberapa bahasa pemrograman, belajar cara membuat database dan hal teknis lainnya, berbeda dengan sekarang.

Semenjak adanya WordPress dan page builder seperti Elementor cara membuat website menjadi lebih mudah dan Anda tidak perlu mempelajari bahasa pemrograman untuk membuat website Anda sendiri.

Bahkan dengan menggunakan Elementor WordPress, Anda dapat dengan mudah membuat user interface website menjadi lebih indah dan cantik. Elementor memberikan Anda keleluasaan dalam merancang tampilan website Anda menjadi lebih oke.

Namun sekarang pertanyaannya, apakah Anda tahu bagaimana cara menggunakan Elementor di WordPress? Jika Anda belum mengetahuinya, tenang saja karena dalam artikel ini akan membahas tentang elementor secara lengkap.

Daftar Isi

Apa itu Elementor?

Elementor adalah page builder dengan konsep editor drag-and-drop yang bisa Anda gunakan di CMS WordPress.

Jadi Elementor ini hanya bisa digunakan di platform CMS WordPres, tidak bisa digunakan di platform CMS laina apalagi framework seperti Codeigniter dan lain sebagainya.

Jika Anda pengguna CMS WordPress maka Elementor bisa membantu Anda merancang website dengan cara termudah dan cepat.

Menggunakan Elementor tidak perlu memiliki pengetahuan CSS maupun HTML tingkat lanjut, karena proses membuat halaman website cukup dengan cara drag-and-drop.

Elementor sangat membantu sekali dalam merancang desain untuk seluruh halaman yang ada di website. Misalnya, Anda bisa merancang desain halaman untuk penjualan, promosi dan bahkan Anda bisa merancang form registrasi sendiri.

Bagi seorang pemula bisa memilih salah satu dari 100+ template pra desain yang disediakan Elementor untuk digunakan sesuai kebutuhan.

Jika Anda sudah mulai mengerti cara menggunakannya, Elementor bisa Anda gunakan untuk membuat berbagai macam halaman yang simple & elegan. Misalnya saja seperti halaman elementor landing page, company profile, dan portofolio.

Kelebihan dan Kekurangan Elementor

Setelah Anda memiliki gambaran tentang apa itu Elementor, sekarang kita dalami kelebihan dan kekurangan dari plugin Elementor. Apa aja? Mari kita simak sama-sama!

Kelebihan

Kami menemukan kurang lebih ada 4 kelebihan utama dari page builder Elementor, berikut di antaranya:

Mudah Dalam Penggunaan

Elementor mudah digunakan, terutama untuk Anda yang tidak paham tentang cara membuat kode CSS, PHP, maupun HTML.

Setelah Anda masuk ke halaman Editor Elementor, Anda bisa dengan mudah merancang desain dengan menggunakan template bawaan di library template Elementor. Atau jika Anda memiliki konsep desain sendiri, Anda tinggal drag and drop untuk membuat desainnya.

Fungsionalitas

Elementor mengemas dengan banyak fungsi di dalamnya yang terdiri dari fitur dasar dan fitur lanjutan. Hal ini memungkinkan penggunanya untuk lebih dapat mengoptimalkan loading website dengan menghemat penggunaan  plugin..

Jadi intinya Elementor adalah plugin berkualitas yang bisa membantu Anda mengurangi plugin tambahan, bisa dibilang elementor adalah tools desain all-in-one yang powerful.

Personalisasi yang Mudah

Anda bisa dengan mudah menyesuaikan tampilan/desain halaman website. Apakah Anda pernah ketika membangun sebuah website dibuat frustasi karena selalu ada batasan di tema yang pernah Anda gunakan? 

Hal itu tidak akan didapati lagi jika Anda menggunakan Elementorkarena Anda memegang kendali penuh atas desain dan layout sesuai dengan keinginan Anda.

Kemampuan Integrasi

Elementor bisa Anda integrasikan dengan plugin lainnya seperti Yoast SEO, plugin media sosial dan masih banyak plugin lainnya.

Kekurangan

Tidak ada tools yang sempurna, sebagus apapun sebuah tools pastinya ada beberapa kekurangan yang mengitarinya dan hal-hal tersebut perlu menjadi pertimbangan kita sebagai penggunanya. Berikut adalah beberapa kekurangan dalam penggunaan Elementor, di antarany:

Kecepatan Website Menurun

Elementor bisa mempengaruhi kecepatan website jika memuat terlalu banyak gambar ketika Anda merancang desain halaman website. Tapi ini tergantung pada kebutuhan, jika Anda tidak mementingkan fungsionalitas maka Elementor bisa Anda ganti dengan plugin lainnya dan begitu juga sebaliknya.

Tips dari kami jika Anda mementingkan fungsionalitas dan kecepatan website adalah dengan menggunakan hosting terbaik serta tidak terlalu menampilkan banyak gambar di halaman ketika menggunakan Elementor.

Fitur Penting hanya Tersedia di Versi Pro

Ada banyak fitur yang sebenarnya penting dalam sebuah desain halaman seperti elemen Post. Bahkan untuk mengintegrasikan dengan Mailchimp, Confirmation Email, Hubspot dan beberapa layanan lainnya hanya tersedia di Elementor versi Pro.

Biaya untuk Menggunakan Elementor

Sebenarnya plugin Elementor tersedia secara gratis, serta bisa Anda temukan di WordPress.org. Akan tetapi, Elementor WordPress juga tersedia versi pro dengan fitur dan kemampuan yang lebih canggih dibandingkan versi gratis. Dana yang harus Anda persiapkan untuk membeli Elementor pro adalah sebesar $49 dan hanya bisa digunakan di satu website saja.

Perbedaan lebih lengkap antara Elementor versi gratis dengan versi berbayar adalah sebagai berikut:

Elementor Free Version

Sebenarnya hanya dengan menggunakan versi gratis Anda sudah bisa merancang desain website yang keren dan user-friendly, karena sudah mendapatkan akses ke editor visual drag-and-drop dengan beragam pilihan widget yang bisa digunakan sesuai dengan kebutuhan.

Tapi jika Anda menggunakan yang versi gratis, Anda hanya bisa melakukan desain dasar saja. Fitur lanjutan seperti slider, post, portfolio, form, login, price list, price table dan masih banyak lagi tidak bisa Anda tambahkan ke desain jika menggunakan versi gratisan.

Pilihan widget dan template pra desain juga terbatas, maka dari itu untuk bisa mendapatkan pilihan template dan widget yang lebih beragam Elementor Pro adalah solusinya!

Elementor Pro Version

Elementor Pro memiliki fitur yang lebih lengkap dibandingkan versi yang gratisnya. Akses ke fitur-fitur baru yang ada di Elementor bisa Anda dapatkan jika menggunakan Elementor Pro.

Berikut adalah fitur yang ada di Elementor Pro yang tidak bisa Anda nikmati dari Elementor versi gratis:

• 50+ Widget Pro: memiliki 50 elemen Pro dengan fungsi premium yang akan menawarkan lebih banyak pilihan penyesuaian dan desain.
• Popup Builder: membantu Anda membuat pop-up dari semua jenis pop-up, bentuk, dan gaya yang bisa Anda sesuaikan.
• Motion Effects, Including Parallax & Mouse Effects: menambah keindahan website dan bisa membuat pengunjung website betah berlama-lama berada di website Anda.
• VIP Support: menjadikan Anda sebagai prioritas utama ketika membutuhkan bantuan tim technical support Elementor.
• Popular Marketing Integrations: Anda bisa dengan mudah mengintegrasikan berbagai tools favorit Anda seperti media sosial hingga email marketing.
• WooCommerce Builder + Over 15 Shop Widgets: Untuk membuat website WooCommerce terbaik dan Anda bisa menyesuaikan sendiri setiap halaman toko untuk mendorong penjualan.

Jika Anda masih pemula, Anda dapat menggunakan Elementor versi yang gratis terlebih dahulu dan jika memang perlu fitur tambahan maka Anda bisa menggunakan Elementor versi Pro.

Nah, sekarang yuk kita masuk ke pembahasan berikutnya yaitu memasang Elementor di WordPress.

Cara Memasang Elementor di WordPress

Anda bisa langsung memasang Elementor dari halaman admin/dashboard WordPress, caranya ikuti langkah-langkah dibawah ini:

Langkah 1: Klik plugin > Add New.

Langkah 2: Cari “Elementor” di kolom pencarian yang telah disediakan dan klik tombol install now.

Langkah 3: Setelah proses instalasi selesai, klik tombol Activate untuk mengaktifkan plugin.

Selesai, sekarang plugin Elementor telah aktif dan sudah bisa Anda gunakan.

Setelah plugin Elementor aktif, tombol Edit With Elementor sudah ada di bagian editor postingan maupun halaman.

Diatas adalah langkah untuk instal Elementor versi gratis, Jika Anda ingin menambahkan Elementor Pro untuk bisa mengakses fitur canggih yang ada di dalamnya. Maka terlebih dahulu, Anda harus membeli Elementor Pro dan lakukan instalasi seperti biasa.

Cara Menggunakan Elementor di WordPress

Setelah Anda memasang dan mengaktifkan plugin Elementor, sekarang yuk sama-sama kita pelajari cara menggunakan Elementor untuk membuat desain pertama di situs website Anda.

Membuat Halaman Elementor Berdasarkan Template Bawaan

Langkah 1: Buat postingan atau halaman seperti biasa.

Langkah 2: Klik tombol Edit With Elementor untuk membuka halaman editor Elementor.

Nah sekarang sudah terbuka halaman editor Elementor dan disana juga Anda bisa melihat pratinjau yang berada di sebelah kanan. Yuk kita lanjutkan ke langkah berikutnya!

Langkah 3: Klik icon Library untuk menggunakan template yang siap pakai, misal dalam artikel ini kami mencontohkan memilih template Landing Page – Hotel.

Catatan: Jika dalam library template terdapat tulisan Pro, itu artinya template tersebut hanya bisa digunakan di Elementor versi Pro.

Langkah 4: Jika pertama kali Anda menggunakan Elementor, akan muncul halaman Connect to template library dan klik tombol GET STARTED. Namun jika tidak ada halam ini bisa langsung ke langkah 8.

Langkah 5: Halaman login Elementor akan terbuka, Jika Anda sudah pernah membuat akun tinggal masukan username dan password. Tapi jika belum klik tulisan Create an Account.

Langkah 6: Masukan email aktif dan password Anda di kolom yang telah disediakan.

Langkah 7: Klik tombol Connect.

Jika telah berhasil dihubungkan maka akan diarahkan kembali ke halaman editor Elementor dan secara otomatis template terpasang.

Langkah 8: Selesai, sekarang Anda sudah siap mengedit template tersebut sesuai dengan kebutuhan. Anda bisa menghapus beberapa bagian tertentu yang dinilai kurang diperlukan.

Di bagian side panel yang kami tandai dengan kotak, Anda bisa menambahkan fitur lainnya untuk tampilan desain website.

Intinya di halaman tersebut Anda bisa mengubah isi dari template bawaan. Anda juga bisa menambahkan elemen lainnya yang menurut Anda perlu ditambahkan.

Setelah Anda melakukan beberapa penyesuaian, saatnya menyimpan desain tersebut dengan klik Save Draft.

Cara lainnya adalah dengan klik menu Save as Template. Nah dengan cara ini Anda tidak perlu membuat desain yang sama untuk halaman lainnya.

Membuat Halaman Elementor Dari Nol

Cara lain yang bisa Anda gunakan untuk membuat desain website di Elementor selain menggunakan template bawaan yaitu dengan membuat template Anda sendiri dari awal, Langkah-langkahnya adalah sebagai berikut:

Langkah 1: Klik tombol plus (+) yang berada di sebelah kiri.

Langkah 2: Pilih structure halaman, kurang lebih ada 12 pilihan structure halaman. Dalam artikel ini kami memilih struktur kolom satu.

Berikut adalah tampilan dari kolom tersebut:

Dilanjutkan dengan memilih struktur dengan kolom dua (sebelah kanan lebih kecil).

Langkah 3: Di dalam kolom section tersebut Anda bisa menambahkan beberapa elemen di library, sebagai contoh kami akan membuat halaman blog sederhana dengan menggunakan Elementor. Jadi elemen yang dibutuhkan adalah heading, text editor, sidebar dan post.

elemen heading dan text editor:

elemen sidebar:

elemen recent post:

Catatan: Elemen post bawaan Elementor tidak tersedia jika menggunakan versi gratis, jadi alternatifnya dalam artikel ini menggunakan Recent post bawaan WordPress.

Masukkan elemen tersebut ke dalam kolom section dengan cara klik dan drag elemen tersebut sebagai contoh elemen Heading di drag dan lakukan dengan cara yang sama untuk elemen lainnya.

Langkah 4: Setelah semua elemen dimasukan ke kolom seperti cara diatas, sekarang waktunya setting elemen sidebar agar tampilan sidebar di widget WordPress bisa ditampilkan. Caranya klik kanan di elemen sidebar tersebut dan klik menu edit sidebar.

Langkah 5: Ganti choose sidebar di combo box dengan Sidebar.

Selesai, Jangan lupa untuk simpan hasilnya dengan klik tombol Save Draft/Save as Template atau bisa langsung klik Publish.

Setelah Anda melakukan beberapa penyesuaian pada elemen yang digunakan, kurang lebih hasilnya akan seperti ini:

Jika Anda menggunakan versi Elementor Pro, tampilan Recent Post akan lebih bagus.

Rancang Tampilan Web Versi Anda Sekarang Juga!

Mudah bukan dalam membuat tampilan website menjadi lebih menarik? Dengan menggunakan Elementor memang termasuk cara termudah dalam membuat website dengan tampilan yang baik dan unik, semudah cara mengganti permalink di WordPress.

Hal penting lainnya adalah menggunakan tema dan hosting terbaik dalam hal kecepatan loading terutama dalam menunjang kecepatan website menjadi lebih optimal.

Jika berbicara mengenai performa dan kecepatan server hosting, Anda bisa mempercayakan kepada Exabytes Indonesia.

Dengan layanan yang ada di Exabytes, Anda bisa memilih mau menggunakan cPanel hosting atau Plesk? Semua sesuai kebutuhan Anda.

Layanan kami juga didukung dengan technical support terbaik yang kapanpun Anda memerlukannya kami siap. Pilih layanan paket hosting Anda sekarang!