Cara membuat landing page dengan elementor

Posted on

Sudah memiliki situs web belum? Ingin memiliki website namun anggaran terbatas? Tidak memiliki kemampuan dalam pemrograman juga? Diam! Anda dapat langsung membaca Tutorial Cara Membuat deh Website Untuk Pemula. Anda dapat membuat website benar-benar dari awal dengan menggunakan DomaiNesia Deploy Instan lega.

 

Untuk Anda pengguna WordPress, terima kasih! Karena WordPress memiliki plugin khusus untuk membantu Anda dalam membangun sebuah website. Anda dapat membangun sebuah halaman arahan, homepage, blog, website portofolio serta pengenalan produk menggunakan situs Elementor. Cukup drag dan drop saja tanpa coding! Ingin tahu cara membuat halaman arahan dengan elementor? Mari kita periksa panduan berikut.

Untuk anda yang ingin memperoleh paket premium dari elementor , bisa memesan nya disini ” jual elementor pro

Apa itu Elementor?


Elementor adalah salah satu visual halaman pembangun plugin pada WordPress. Dikutip dari Elementor, halaman builder akan memudahkan pengguna dalam membuat halaman tampilan web depan. Anda tidak perlu membuat tampilan awal pada bahasa pemrograman. Segera, drag dan bagian tetes apa yang diinginkan. Misalnya, Anda ingin membagi situs menjadi 3 kolom, membuat galeri foto, membuat sidebar, membuat progress bar dan sebagainya.

 

Elementor dikembangkan pada tahun 2014 oleh Yoni Luksenberg dan Ariel Klikstein. Elementor dikenalkan ke publik pada 1 Juni 2016 dan hingga saat ini telah diinstal oleh sekitar 1 juta pengguna WordPress di seluruh dunia. Terdapat 2 versi elementor yaitu elementor versi gratis dan berbayar. Kamu dapat menemukan Elementor Page Builder di bagian plugins WordPress.

Apa Kelebihan Elementor?

Dikutip dari Elementor, adapun kelebihan elementor dalam membangun sebuah website yaitu:

  • Lebih cepat, mudah dan fleksibel
  • Mobile friendly
  • Open Source
  • Termasuk Responsive Website
  • Dikembangkan dengan script yang profesional
  • Cocok digunakan untuk pemula
  • Drag and drop tanpa koding
  • Ramah SEO (Search Engine Optimization)
  • Dapat melakukan custom CSS untuk kolom, widget dan section
  • Memiliki lebih dari 400 icon yang dapat digunakan
  • Memiliki lebih dari 800 beragam Google Font
  • Dapat melakukan resize kolom
  • Dapat mengatur kolom dan posisi konten yang ada
  • Mengatur padding dan margin
  • Memiliki banyak elemen yang dapat digunakan

Cara Membuat Landing Page dengan Elementor

Nah, pada panduan kali ini akan dijelaskan step by step tentang cara membuat landing page dengan elementor. Mengapa landing page? Karena landing page adalah satu halaman website untuk keperluan tertentu. Jadi, kamu bisa membuat landing page website dengan mudah tanpa harus koding manual. Nah, adapun cara membuat landing page dengan elementor yaitu:

1. Login WordPress

Pastikan kamu bisa melakukan login WordPress. Untuk melakukan login WordPress, silahkan buka namadomain/wp-admin di web browser. Lalu masukkan username dan password.

cara mengganti tema wordpress

2. Memilih Plugins Elementor Page Builder

Nah sekarang saatnya memilih plugins Elementor. Untuk melakukan instalasi plugin elementor, silakan pilih menu Plugins kemudian klik Add New.

cara membuat landing page dengan elementor
Lalu pada bagian kolom search silakan tulis “elementor”. Kemudian pilih muncul Elementor Page Builder dan klik Install Now.

cara membuat landing page dengan elementor

Setelah proses instalasi selesai, jangan lupa klik Activate untuk mengaktifkan plugin elementor.

cara membuat landing page dengan elementor
Tunggu sebentar maka Plugin Elementor Page Builder segera aktif. Silakan klik Create Your First Page jika belum membuat halaman landing page. Namun, kami sarankan untuk membuat halaman landing page di WordPress terlebih dahulu. Silakan baca Cara Membuat Landing Page di WordPress.

3. Membuat Landing Page dengan Elementor

Pada step sebelumnya, kami sarankan untuk membuat halaman landing page terlebih dahulu. Jika sudah, silakan langsung saja klik Menu Pages dan klik halaman yang kamu tunjuk sebagai halaman landing page. Terdapat tombol Edit with Elementor. Silakan klik tombol tersebut untuk membuat landing page dengan elementor.

cara membuat landing page dengan elementor

Tunggu sebentar hingga muncul tampilan seperti gambar berikut,

cara membuat landing page dengan elementor

dapat dilihat bahwa pada bagian kiri tampak beberapa elemen dari Plugin Elementor Page Builder. Elemen-elemen tersebut dapat kamu drag and drop langsung ke halaman website lho. Kamu hanya perlu klik, tarik lalu letakkan ke kolom yang diinginkan.

Pertama-tama, silakan klik tombol “+” untuk memilih kolom yang diinginkan untuk tampilan website.

cara membuat landing page dengan elementor

Silakan pilih kolom yang kamu inginkan untuk pembagian tampilan website.

cara membuat landing page dengan elementor

4. Memilih Elemen Untuk Landing Page

Nah setelah memilih kolom, sekarang saatnya membuat landing page yang kamu inginkan. Pastikan kamu harus melakukan desain landing page terlebih dahulu ya agar tidak bingung. Kamu dapat memasukkan Heading, image, carousel, Google Maps, Icon, Image Box, Icon Box, Image Gallery, Image Carousel, Progress Bar, Testimonial dan sebagainya. Tinggal bagaimana kreativitas kamu ya!
Sebagai contoh, pada panduan ini akan dibuat landing page dengan salah satu tampilannya seperti gambar berikut:

cara membuat landing page dengan elementor
Terdapat beberapa elemen yang akan diletakkan dalam website. Yaitu, Progress Bar, Text Editor serta Icon Box. Bagaimana caranya?

  • Pilih kolom sesuai keinginan
    cara membuat landing page dengan elementor
  • Lakukan drag and drop elemen dari Elementor ke kolom yang telah dibuat.

    Text Editor

    Seperti contoh, kali ini akan dibuat Text Editor. Maka silakan drag elemen “Text Editor” ke kolom bagian kiri.
    cara membuat landing page dengan elementorKamu bisa mengubah tampilan text editor pada bagian kiri. Kamu bisa ubah konten text editor pada bagian tab Content. Jika ingin mengubah warna huruf, silakan klik tab Style. Jika ingin menambahkan background dan custom css silakan tab Advanced. Jangan lupa klik Update untuk menyimpan hasil editing!
    cara membuat landing page dengan elementor

    Progress Bar

    Kemudian, akan dibuat tampilan progress. Silakan klik “+” pada kolom lalu drag elemen “Progress Bar” ke kolom bagian kanan.

    cara membuat landing page dengan elementor

    Kamu bisa ubah judul, tulisan serta ukuran progress bar pada bagian tab Content. Jika ingin mengubah warna, silakan klik tab Style. Jika ingin menambahkan background dan custom css silakan tab Advanced. Jangan lupa klik Update untuk menyimpan hasil editing!

    cara membuat landing page dengan elementor

    Icon Box

    Sekarang saatnya berpindah ke kolom dibawahnya. Pada contoh, akan dibuat tulisan lengkap dengan iconnya. Elemen tersebut diberi nama Icon Box. Silakan klik “+” pada kolom lalu drag elemen “Icon Box” ke tiap kolom.

    cara membuat landing page dengan elementor

    Kamu bisa ubah judul, icon, posisi icon, deskripsi, tulisan serta link pada bagian tab Content. Jika ingin mengubah warna, hover, spasi dan ukuran silakan klik tab Style. Jika ingin menambahkan background, pengaturan margin, pengaturan padding dan custom css silakan tab Advanced. Jangan lupa klik Update untuk menyimpan hasil editing!

    cara membuat landing page dengan elementor

5. Landing Page Telah Jadi!

Silakan sesuaikan landing page dengan desain yang kamu buat di awal. Semua tergantung kreativitas dan landing page yang diinginkan ya! Drag and drop elemen yang kamu mau tanpa perlu koding! Panduan cara membuat landing page dengan elementor telah selesai dan berhasil kamu ikuti dengan baik

Leave a Reply

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