Cara Mendesian Page dengan Elementor
Persiapan
- Sebelum mengikuti tutorial ini, pastikan pembaca sudah membuat page dan page dalam mode edit with elementor, seperti yang terlihat pada gambar dibawah ini, apabila belum, pembaca dapat mengikuti tahapan-tahapan yang ada pada tulisan ini:
- Silahkan ubah page layout menjadi Elementor Canvas, pembaca dapat mengikuti tahapannya disini. Sehingga tampilannya menjadi seperti ini:
Perencanaan
- Dalam membuat sebuah web page (halaman web), yang perlu diperhatikan adalah membuat sketsa awal dari page tersebut, sketsa meliputi layoutnya seperti apa, kontennya apa saja, dll, berikut adalah contoh sketsa dari tutorial ini.
- Selanjutnya pembaca harus menentukan layout yang dipakai seperti apa, dilihat dari gambar diatas, maka terdapat dua section (bagian) bagian ke-1 (atas) layoutnya terdiri dari 1 kolom, sedangkan bagian ke-2 layoutnya terdiri atas dua kolom yang sama besar. Berikut adalah ilustrasinya:
- Setelah itu, konten, pembaca mencocokan konten yang ada pada desain dengan konten yang disediakan oleh elementor (widget), berikut adalah contohnya:
- Sampai pada tahap ini, pembaca sudah siap untuk membuat sebuah page.
Desain dengan Elementor
Menambahkan Section (Bagian)- Klik pada tombol "+" berwarna merah,
- Lalu akan muncul pilihan kolom, ada 10 kolom yang tersedia, silahkan pilih jumlah kolom yang sesuai
- Sesuai dengan desain awal, kita akan membuat 2 section, section ke-1 terdiri dari 1 kolom, dan section ke-2 terdiri dari 2 kolom yang sama besar, lalu hasilnya akan menjadi seperti ini
- Silahkan pilih elemen/konten/widget dari elementor tool bagian widget, lalu drag (tarik) ke kolom yang sesuai dengan desain.
- Ulangi langkah ini, sampai desain layout mirip dengan desain perencanaan.
- Silahkan edit elemen, apakah itu menambahkan gambar (caranya sama dengan cara mengubah background menjadi gambar, tutorial dapat dibaca disini), mengedit tulisan, dan mengganti gambar icon dengan icon yang bersesuaian.
- Caranya silahkan klik pada elemen/konten/widget yang akan di edit, lalu lihat elementor tool, disana terdapat tiga menu, yaitu content, style, dan advance.
- Untuk mengedit content silahkan pilih tab content, untuk mengedit gaya (warna, background) silahkan pilih tab style.
Hasil Akhir
- Berikut adalah hasil akhir dari desain page dengan elementor
- Klik tombol Publish untuk mempublikasikan page.
Demikian tutorial cara mendesain page dengan elementor, semoga bermanfaat, terima kasih.
0 Response to "Cara Mendesian Page dengan Elementor"
Post a Comment