Elementor Tips & Trick

Kali ini saya mau bahas sedikit tentang elementor dan cara kerja saya menggunakan elementor
kira-kira berikut listnya :
  1. Pengenalan Elementor dasar
    a) Tips membuat page dengan Elementor
    b) Pengaturan dasar element Elementor (content, style, & advance) 
  2. Proses pembuatan template dari Awal
    a) Tentukan tema
    b) Tentukan section
    c) Wireframe
    d) Tentukan Stye (Typography, Collor, & style)
    e) Create page Elementor berdasarkan wireframe dan style yang telah ditentukan.
    f) Input dummy content (image & text)
    g) Setting mobile responsive
    h) Optimize image 
  3. Export dan Import template pada Elementor
  4. Kesulitan yang dihadapi dan cara menanggulanginya

1) Pengenalan Elementor dasar

A. Tips pertama kali membuat page dengan Elementor

Beberapa theme wordpress ada yang secara default menampilkan Header & breadcrumb ketika kita membuat page baru. Ketika kita ingin membuat halaman dengan elementor biasanya Header dan Breadcrumb tidak perlu ditampilkan. Maka kita harus menyeting header & breadcrumb agar tidak tampil.
Selanjutnya kita set template di Page attribute ke “Elementor Full Width” atau “Page Builder (Full Width)”. Pada contoh kali ini saya menggunakan theme laris manis sebagai contoh. Ini adalah settingan page pada theme laris manis:

Untuk penggunan elementor basic, team tokopress sudah menyiapkan tutorialnya, silakan akses disini https://help.tokopress.id/category/292-elementor-basic

B. Pengaturan dasar Elementor Widget

Elementor mempunyai widget-widget seperti text, image, section, button dan masih banyak lagi. Widget-widget tersebut adalah komponen untuk membuat sebuah halaman website.
Lihat apa saja Elementor widget yang sudah disiapkan oleh tokopressid https://help.tokopress.id/category/230-elementor-widgets.
Setiap widget di elementor mempunyai 3 tab pengaturan yaitu, pengaturan content, style, dan advance. Screeshootnya bisa dilihat disini:

Ketiga tab ini akan selalu kita jumpai ketika kita membuat sebuah halaman website menggunakan Elementor.
Saya akan menjelaskan secara singkat  fungsi dari ke 3 tab tersebut.
- Tab content berfungsi untuk mengatur konten atau isi yang ada pada sebuah widget.
- Tab style berfungsi untuk mengatur apapun yang berhubungan dengan style sebuah widget, seperti warna, ukuran font, jenis font, dan lain sebagainya.
- Tab advance, tab ini adalah pengaturan lanjutan dari sebuah widget. Diantaranya dapat mengatur margin, padding, motion effects bahkan bisa menginputkan custom CSS bagi anda yang mengerti bahasa CSS.

2. PROSES PEMBUATAN TEMPLATE DARI AWAL

Saya akan share step by step bagaimana biasanya saya membuat template untuk TokopressID. Setiap desainer punya cara yang berbeda-beda.
Cara yang saya lakukan bisa berbeda dengan desainer lainnya. Saya cuma mau share kepada teman-teman disini, bagaimana saya merancang sebuah template. Ok langsung saja yang pertama adalah:

A. Tentukan Kategori

Pertama kali yang dilakukan adalah menentukan kategori. Ada bermacam-macam kategori untuk website, bisa fashion, makanan, olahraga dan masih banyak lagi.
Untuk membantu menentukannya, salah satu cara yang biasa saya lakukan adalah melihat kategori template website di marketplace,  seperti di contohnya di themeforest.net, disana ada banyak template dengan berbagai kategori. Pilihlah salah satu kategori.

B. Tentukan Section yang akan ditampilkan

Dalam sebuah halaman website terdiri dari beberapa section atau bagian.
Section pada sebuah website terdiri dari beberapa element. Pada gambar ini mungkin lebih bisa menjelaskan apa itu section

Saya mengambil contoh template fashion pria tokopressid, pada template tersebut terdiri dari section Hero, section kategori produk, section produk, call to action dan seterusnya.
Sekarang pertanyaannya Bagaimana cara menentukan kombinasi section?
Untuk mencari referensi, salah satu cara yang biasa saya lakukan melihat desain website di situs-situs seperti:
Bisa juga mencari referensi di marketplace template website  atau melihat web yang sudah jadi.
Saya biasanya mengumpulkan 3 sampai 5 referensi. Setelah itu saya akan membuat list, section apa saja yang ada di referensi yang sudah saya kumpulkan itu. Setelah itu buat kombinasi dari kumpulan list tersebut.

C. Wireframe

Setelah mempunyai list section yang akan ditampilkan, langkah selanjutnya adalah membuat wireframe atau mungkin bisa disebut juga sketsa website. Wireframe berfungsi sebagai guide untuk membuat layout di Elementor nantinya. Saya biasanya lebih suka membuat wireframe di kertas, karena lebih bebas tidak terpatok pada tool. contoh wireframe yang saya sketsa sendiri: