Knowledge Base

Magezon Page Builder Tutorial Video

Sebuah Tools yang membantu dalam melakukan penataan halaman website tanpa perlu menyentuh code. Block artikel, form, maupun konten social media seperti Instagram feed, Timeline Twitter, maupun video Youtube, merupakan contoh yang dapat dilakukan modifikasi dengan mudah melalui click, drag  drop. Magezon sebagai fitur di Swift bertujuan untuk memberi kemudahan bagi admin dalam membuat maupun memanage Konten CMS tanpa harus mempunyai keahlian coding.

Konfigurasi Mengaktifkan Magezon Page Builder

Di Magento, Magezon Page Builder dapat dikonfigurasikan dengan langkah sebagai berikut : 

1. Masuk pada Dashboard admin
   

2. Pilih Store > Configuration 
   

3. Pilih Magezon Extension > Magezon Pagebuilder
   

4. Expand pada General Setting
   

5. Set Yes pada Enable Magezon Pagebuilder. 
   

Selain enable config tersebut, juga tersedia pengaturan Enable pada masing-masing bagian. Seperti : CMS Page, Block, dan Product.

Elemen Page Builder Magezon

Page builder Magezon terdiri atas berbagai macam elemen yang dapat diaplikasikan. Secara umum, pengaplikasian Page Builder adalah pada CMS Page. Misalnya halaman  Homepage dan About Us. Selain itu, page builder juga dapat diaplikasikan di CMS Block, Product Description, Category Description dan Content Blog.

Berikut adalah daftar elemen elemen tersebut:

1. Row
   

Elemen yang digunakan untuk menambahkan 1 baris baru untuk suatu konten. Di Dalam Row dapat diisikan beberapa konten elemen yang juga terdapat pada page builder. Layout yang digunakan dapat berupa 1 atau lebih kolom yang bisa digunakan. 

Cara menggunakan Elemen Row

Elemen ini dapat dikonfigurasikan dengan langkah sebagai berikut :

1. Masuk pada Dashboard admin
   

2. Pilih Content > Pages
   

3. Pilih Page yang akan diatur dari yang sudah ada, atau dapat membuat page baru.
   

4. Untuk melakukan penambahan elemen pada page baru, Klik add New jika akan membuat page baru
   

Gambar 02. Tampilan Add New Page

• Isi kolom dengan informasi yang dibutuhkan
  

• Expand pada bagian Content
  

• Klik Add New Element icon + pada Magezon page builder
  

• Muncul Pop Up pilihan Elemen yang tersedia pada Magezon Page builder, Pilih Row.
  

• Klik pada Row Layout untuk menentukan jumlah Kolom yang akan digunakan.
  

5. Untuk melakukan edit halaman, Klik Select > Edit jika melakukan perubahan pada page yang sudah ada
   

Gambar 03. Tampilan menggunakan elemen pada page yang ada

• Expand pada bagian Content
  

• Klik Add New Element icon + pada Magezon page builder
  

• Muncul Pop Up pilihan Elemen yang tersedia pada Magezon Page builder
  

• Pilih Row. 
  

• Klik pada Row Layout untuk menentukan jumlah Kolom yang akan digunakan. 
  

Gambar 04. Tampilan Konfigurasi Row pada page 

• Atur Tampilan Row pasa Row Layout
  

• Memasukkan konten yang akan diisikan pada icon + pada Kolom
  

• Klik Save pada Pop Up
  

• Klik Save pada Page
  

2. Text Block
   

Text Block merupakan elemen yang digunakan untuk membuat sebuah blok teks dalam bentuk WYSIWYG. WYSIWYG yang tersedia sama dengan bawaan Magento, yang juga dapat melakukan insert widget, image, maupun Menulis Konten dalam mode raw HTML.

Cara menggunakan Elemen Text Block

Elemen ini dapat dikonfigurasikan dengan langkah sebagai berikut :

1. Masuk pada Dashboard admin
   

2. Pilih Content > Pages
   

3. Pilih Page yang akan diisi
   

4. Untuk melakukan penambahan elemen pada page baru, Klik add New jika akan membuat page baru
   

Gambar 05. Tampilan Add New Page

• Isi kolom dengan informasi yang dibutuhkan
  

• Expand pada bagian Content
  

• Klik Add New Element icon + pada Magezon page builder
  

• Muncul Pop Up pilihan Elemen yang tersedia pada Magezon Page builder, Pilih Element Text Block.
  

• Klik pada Element Text Block.
  

Gambar 06. Tampilan Konfigurasi element Textblock

• Klik Save pada Pop Up 
  

• Klik Save pada Page
  

5. Untuk melakukan edit halaman, Klik Select > Edit pada page yang sudah ada
   

Gambar 07. Tampilan Konfigurasi page untuk magezone page builder di admin

• Expand pada bagian Content
  

• Klik Add New Element icon + pada Magezon page builder
  

• Muncul Pop Up pilihan Elemen yang tersedia pada Magezon Page builder
  

Gambar 08. Tampilan Konfigurasi Text Block pada page 

• Pilih Text Block
  

• Memasukkan konten yang akan diisikan
  

• Klik Save pada Pop Up 
  

• Klik Save pada Page
  

Tampilan Elemen Text Block pada Front End

Gambar 09. Tampilan pada Frontend

3. Instagram Feed Widget
   

Elemen yang digunakan untuk menampilkan Feed Instagram.  

Cara menggunakan Elemen Instagram Feed Widget

Elemen ini dapat dikonfigurasikan dengan langkah sebagai berikut :

1. Masuk pada admin Backoffice
   

2. Store > Configuration > Magezon > Magezon Page Builder. Setting pada bagian Instagram User Token.
   

Isikan Token yang sudah di generate sebelumnya. Generate token dapat dilakukan dengan menggunakan dokumentasi yang ada pada Swift Documentation - Instagram Feed Widget

Gambar 11. Tampilan Konfigurasi Magezone Instagram Token

3. Untuk melakukan penambahan elemen pada page baru, Klik add New jika akan membuat page baru
   

Gambar 12. Tampilan Add New Page

• Isi kolom dengan informasi yang dibutuhkan
  

• Expand pada bagian Content
  

• Klik Add New Element icon + pada Magezon page builder
  

• Muncul Pop Up pilihan Elemen yang tersedia pada Magezon Page builder, Pilih Instagram Feed Widget.
  

• Klik pada Instagram Feed Widget.
  

Gambar 13. Tampilan Konfigurasi Magezon Page Builder : Instagram Feed

• Klik Save pada Pop Up 
  

• Klik Save pada Page
  

4. Untuk melakukan edit halaman yang sudah ada, Klik Select > Edit pada page yang sudah ada
   

Gambar 14. Tampilan Konfigurasi page untuk magezone page builder di admin

• Expand pada bagian Content
  

• Klik Add New Element icon + pada Magezon page builder
  

• Muncul Pop Up pilihan Elemen yang tersedia pada Magezon Page builder, Pilih Instagram Feed Widget.
  

• Klik pada Instagram Feed Widget.
  

Gambar 15. Tampilan Konfigurasi Magezon Page Builder : Instagram Feed

• Klik Save pada Pop Up 
  

• Klik Save pada Page
  

Tampilan Elemen Instagram Feed Widget pada Front End

Gambar 16. Tampilan pada Frontend Magento

Gambar 17. Tampilan pada Frontend PWA

4. Contact Form
   

Elemen yang digunakan untuk membuat Contact Form sebagai konten. Setelah customers submit, konten akan masuk ke Email Admin. 

Cara menggunakan Elemen Contact Form

Elemen ini dapat dikonfigurasikan dengan langkah sebagai berikut :

1. Masuk pada Dashboard admin
   

2. Pilih Content > Pages
   

3. Pilih Page yang akan diisi oleh Form 
   

4. Untuk melakukan penambahan elemen pada page baru, Klik add New jika akan membuat page baru
   

Gambar 18. Tampilan Add New Page

• Isi kolom dengan informasi yang dibutuhkan
  

• Expand pada bagian Content
  

• Klik Add New Element icon + pada Magezon page builder
  

• Muncul Pop Up pilihan Elemen yang tersedia pada Magezon Page builder, Pilih Element Contact Form.
  

• Klik pada Elemen Contact Form.
  

• Klik Save pada Pop Up 
  

• Klik Save pada Page
  

5. Untuk melakukan edit halaman yang sudah ada, Klik Select > Edit pada page yang sudah ada
   

Gambar 19. Tampilan Konfigurasi Magezon Page Builder pada Page

• Expand pada bagian Content
  

• Klik Add New Element icon + pada Magezon page builder
  

• Muncul Pop Up pilihan Elemen yang tersedia pada Magezon Page builder
  

• Memasukan keyword Contact pada search bar > Pilih Contact Form
  

• Muncul Konfigurasi Contact Form > Klik save
  

Gambar 20. Tampilan Konfigurasi Contact Form Magezon Page Builder pada Page

• Klik Save pada pop up
  

• Klik Save pada page
  

Tampilan Elemen Contact Form pada Front End

Berikut Tampilan Contact Form pada PAge yang telah dibuat :

Gambar 23. Tampilan Konfigurasi Product Grid pada page

5. Magento Widget
   

Elemen yang digunakan untuk menampilkan Widget dari Magento & Extension 3rd Party. 

Cara menggunakan Elemen Magento Widget

Elemen ini dapat dikonfigurasikan dengan langkah sebagai berikut :

1. Masuk pada Dashboard admin
   

2. Pilih Content > Pages
   

3. Pilih Page yang akan diisi
   

4. Untuk melakukan penambahan elemen pada page baru, Klik add New jika akan membuat page baru
   

Gambar 24. Tampilan Add New Page

• Isi kolom dengan informasi yang dibutuhkan
  

• Expand pada bagian Content
  

• Klik Add New Element icon + pada Magezon page builder
  

• Muncul Pop Up pilihan Elemen yang tersedia pada Magezon Page builder, Pilih Element Magento Widget
  

• Pilih Widget yang ada. Sebagai contoh berikut menggunakan Catalog Product list.
  

• Klik pada Element Magento Widget.
  

• Konfigurasikan Widget yang telah dipilih Pada Tab Magento Widget
  

• Title : Judul Widget
  

• Display Page Control : Opsi menampilkan Kontrol Halaman
  

• Number of Product per Page : Jumlah Produk per halaman
  

• Number of Product to Display : Jumlah produk yang akan ditampilkan
  

• Templates : Template yang akan digunakan
  

• Conditions : Kondisi untuk menampilkan produk
  

• Klik Save pada Pop Up 
  

• Klik Save pada Page
  

5. Untuk melakukan edit halaman yang sudah ada, Klik Select > Edit pada page yang sudah ada
   

• Expand pada bagian Content
  

• Klik Add New Element icon + pada Magezon page builder
  

• Muncul Pop Up pilihan Elemen yang tersedia pada Magezon Page builder
  

• Memasukan keyword Widget pada search bar > Pilih Magento Widget
  

• Pilih Widget yang ada. Sebagai contoh berikut menggunakan Catalog Product list
  

Gambar 27. Tampilan Konfigurasi Magento Widget pada  Magezon Page Builder

• Konfigurasikan Widget yang telah dipilih Pada Tab Magento Widget
  

• Title : Judul Widget
  

• Display Page Control : Opsi menampilkan Kontrol Halaman
  

• Number of Product per Page : Jumlah Produk per halaman
  

• Number of Product to Display : Jumlah produk yang akan ditampilkan
  

• Templates : Template yang akan digunakan
  

• Conditions : Kondisi untuk menampilkan produk
  

6. Klik Save pada Pop Up 
   

7. Klik Save pada Page
   

Tampilan Elemen Magento Widget pada Front End

Berikut Tampilan Widget pada page yang telah dibuat

Gambar 28. Tampilan pada Frontend

6. Single Product
   

Elemen yang digunakan untuk menampilkan 1 Produk yang telah di filter melalui SKU, Nama produk maupun ID produk.  

Cara menggunakan Elemen Single Product

Elemen ini dapat dikonfigurasikan dengan langkah sebagai berikut :

1. Masuk pada Dashboard admin
   

2. Pilih Content > Pages
   

3. Pilih Page yang akan diisi
   

4. Untuk melakukan penambahan elemen pada page baru, Klik add New jika akan membuat page baru
   

Gambar 29. Tampilan Add New Page

• Isi kolom dengan informasi yang dibutuhkan
  

• Expand pada bagian Content
  

• Klik Add New Element icon + pada Magezon page builder
  

• Muncul Pop Up pilihan Elemen yang tersedia pada Magezon Page builder, Pilih Element Single Product.
  

• Klik pada Element Single Product
  

• Pada bagian General Konfigurasikan
  

• Widget Title : Judul Widget yang akan ditampilkan di Frontend
  

• Product SKU : SKU Product yang akan ditampilkan di Frontend
  

Pada Product Options, Set Enable pada atribut produk yang ada

• Nama : Jika ingin menampilkan Nama Produk
  

• Image : Jika ingin menampilkan Gambar Produk
  

• Add to cart : Jika ingin menampilkan Button Add to cart
  

• Wish list Link : Jika ingin menampilkan Shortcut Wishlist
  

• Swatches : Jika ingin menampilkan Pilihan Warna/ukuran
  

• Price : Jika ingin menampilkan Harga Produk
  

• Review : Jika ingin menampilkan Review Produk
  

• Short Description : Jika ingin menampilkan Deskripsi Produk
  

• Compare Link : Jika ingin menampilkan Perbandingan Produk
  

• Equal Height : Untuk menyamakan Height Produk
  

• Padding : Untuk mengatur Padding pada produk
  

• Background Color : Untuk mengatur Warna background produk
  

• Klik Save pada Pop Up 
  

• Klik Save pada Page
  

5. Untuk melakukan edit halaman yang sudah ada , Klik Select > Edit pada page yang sudah ada
   

• Expand pada bagian Content
  

• Klik Add New Element icon + pada Magezon page builder
  

• Muncul Pop Up pilihan Elemen yang tersedia pada Magezon Page builder
  

• Memasukan keyword Single pada search bar > Pilih Single Product
  

• Pada bagian General Konfigurasikan
  

• Widget Title : Judul Widget yang akan ditampilkan di Frontend
  

• Product SKU : SKU Product yang akan ditampilkan di Frontend
  

• Pada Product Options, Set Enable pada atribut produk yang ada
  

• Nama : Jika ingin menampilkan Nama Produk
  

• Image : Jika ingin menampilkan Gambar Produk
  

• Add to cart : Jika ingin menampilkan Button Add to cart
  

• Wish list Link : Jika ingin menampilkan Shortcut Wishlist
  

• Swatches : Jika ingin menampilkan Pilihan Warna/ukuran
  

• Price : Jika ingin menampilkan Harga Produk
  

• Review : Jika ingin menampilkan Review Produk
  

• Short Description : Jika ingin menampilkan Deskripsi Produk
  

• Compare Link : Jika ingin menampilkan Perbandingan Produk
  

• Equal Height : Untuk menyamakan Height Produk
  

• Padding : Untuk mengatur Padding pada produk
  

• Background Color : Untuk mengatur Warna background produk
  

• Klik Save pada Pop Up 
  

• Klik Save pada Page
  

Tampilan Elemen Single Product pada Front End

Berikut Tampilan Contact Form pada PAge yang telah dibuat :

Gambar 33. Tampilan pada Frontend Magento

Gambar 34. Tampilan pada Frontend PWA

7. Button 
   

Elemen yang digunakan untuk menambahkan button pada konten.  

Cara menggunakan Elemen Button 

Elemen ini dapat dikonfigurasikan dengan langkah sebagai berikut :

1. Masuk pada Dashboard admin
   

2. Pilih Content > Pages
   

3. Pilih Page yang akan diisi
   

4. Untuk melakukan penambahan elemen pada page baru, Klik add New jika akan membuat page baru
   

Gambar 35. Tampilan Add New Page

• Isi kolom dengan informasi yang dibutuhkan
  

• Expand pada bagian Content
  

• Klik Add New Element icon + pada Magezon page builder
  

• Muncul Pop Up pilihan Elemen yang tersedia pada Magezon Page builder, Pilih Element Button.
  

• Klik pada Elemen Button
  

• Memasukkan Url yang akan menghubungkan Button ketika akan di klik. Beberapa action yang bisa dilakukan
  

oleh Button selain direct ke Custom URL, dapat pula diarahkan ke Product maupun Category tertentu.

Gambar 36. Tampilan Konfigurasi Button  Magezon Page Builder pada Page

• Klik Save pada Pop Up 
  

• Klik Save pada Page
  

5. Untuk melakukan edit halaman yang sudah ada, Klik Select > Edit pada page yang sudah ada
   

Gambar 37. Tampilan Konfigurasi page untuk magezone page builder di admin

• Expand pada bagian Content
  

• Klik Add New Element icon + pada Magezon page builder
  

• Muncul Pop Up pilihan Elemen yang tersedia pada Magezon Page builder
  

Gambar 38. Tampilan Konfigurasi Button pada page 

• Pilih button
  

• Memasukkan Url yang akan menghubungkan Button ketika akan di klik. Beberapa action yang bisa dilakukan
  

oleh Button selain direct ke Custom URL, dapat pula diarahkan ke Product maupun Category tertentu. 

• Klik Save pada Pop Up 
  

• Klik Save pada Page
  

• 
  

Tampilan Elemen Button pada Front End

Gambar 39. Tampilan pada Frontend Magento

8. Separator
   

Elemen yang digunakan untuk menambahkan sebuah pembatas garis horizontal.

Cara menggunakan Elemen Separator

Elemen ini dapat dikonfigurasikan dengan langkah sebagai berikut :

1. Masuk pada Dashboard admin
   

2. Pilih Content > Pages
   

3. Pilih Page yang akan diisi
   

4. Untuk melakukan penambahan elemen pada page baru, Klik add New jika akan membuat page baru
   

Gambar 41. Tampilan Add New Page

• Isi kolom dengan informasi yang dibutuhkan
  

• Expand pada bagian Content
  

• Klik Add New Element icon + pada Magezon page builder
  

• Muncul Pop Up pilihan Elemen yang tersedia pada Magezon Page builder, Pilih Element Separator.
  

• Klik pada Elemen Separator, masukkan konten yang akan diisikan
  

• Klik Save pada Pop Up 
  

• Klik Save pada Page
  

5. Untuk melakukan edit halaman yang sudah ada, Klik Select > Edit pada page yang sudah ada
   

Gambar 42. Tampilan Konfigurasi page untuk magezone page builder di admin

• Expand pada bagian Content
  

• Klik Add New Element icon + pada Magezon page builder
  

• Muncul Pop Up pilihan Elemen yang tersedia pada Magezon Page builder
  

Gambar 43. Tampilan Konfigurasi Separator pada page 

• Pilih Separator
  

• Memasukkan konten yang akan diisikan
  

• Klik Save pada Pop Up 
  

• Klik Save pada Page
  

Tampilan Elemen Separator pada Front End

Gambar 44. Tampilan pada Frontend Magento

9. Empty Space
   

Elemen yang digunakan untuk menambahkan spasi kosong dengan tinggi yang bisa di kustomisasi.

Cara menggunakan Elemen Empty Space

Elemen ini dapat dikonfigurasikan dengan langkah sebagai berikut :

1. Masuk pada Dashboard admin
   

2. Pilih Content > Pages
   

3. Pilih Page yang akan diisi
   

4. Untuk melakukan penambahan elemen pada page baru, Klik add New jika akan membuat page baru
   

Gambar 45. Tampilan Add New Page

• Isi kolom dengan informasi yang dibutuhkan
  

• Expand pada bagian Content
  

• Klik Add New Element icon + pada Magezon page builder
  

• Muncul Pop Up pilihan Elemen yang tersedia pada Magezon Page builder, Pilih Element Empty Space.
  

• Klik pada Empty Space, masukkan Height yang yang diinginkan
  

• Klik Save pada Pop Up 
  

• Klik Save pada Page
  

5. Untuk melakukan edit halaman yang sudah ada, Klik Select > Edit pada page yang sudah ada
   

Gambar 47. Tampilan Konfigurasi page untuk Empty Space magezone page builder di admin

• Expand pada bagian Content
  

• Klik Add New Element icon + pada Magezon page builder
  

• Muncul Pop Up pilihan Elemen yang tersedia pada Magezon Page builder
  

Gambar 48. Tampilan Konfigurasi Empty Space pada page 

• Pilih Empty Space
  

• Memasukkan Height yang yang diinginkan
  

• Klik Save pada Pop Up
  

• Klik Save pada Page
  

Tampilan Elemen Empty Space pada Front End

Gambar 49. Tampilan pada Frontend Magento 

9. Single Image
   

Elemen untuk menampilkan 1 gambar yang ditambahkan dengan animasi CSS.

Cara menggunakan Elemen Single Image

Elemen ini dapat dikonfigurasikan dengan langkah sebagai berikut :

1. Masuk pada Dashboard admin
   

2. Pilih Content > Pages
   

3. Pilih Page yang akan diisi
   

4. Untuk melakukan penambahan elemen pada page baru, Klik add New jika akan membuat page baru
   

Gambar 51. Tampilan Add New Page

• Isi kolom dengan informasi yang dibutuhkan
  

• Expand pada bagian Content
  

• Klik Add New Element icon + pada Magezon page builder
  

• Muncul Pop Up pilihan Elemen yang tersedia pada Magezon Page builder, Pilih Element Single Image.
  

• Klik pada Single Image, masukkan Source image yang akan ditampilkan.
  

Gambar 52. Tampilan Konfigurasi Single Image Magezon Page Builder pada Page

• Klik Save pada Pop Up 
  

• Klik Save pada Page 
  

5. Untuk melakukan edit halaman yang sudah ada, Klik Select > Edit pada page yang sudah ada
   

Gambar 53. Tampilan Konfigurasi page untuk Single Image magezone page builder di admin

• Expand pada bagian Content
  

• Klik Add New Element icon + pada Magezon page builder
  

• Muncul Pop Up pilihan Elemen yang tersedia pada Magezon Page builder
  

Gambar 54. Tampilan Konfigurasi Single image  pada page 

• Pilih Single Image
  

• Memasukkan Source image yang akan ditampilkan. Source image dapat menggunakan Image yang ada pada
  

media internal device maupun berasal dari External Source (Misal : Google, Pinterest dst..). Pada  External Source perlu menyertakan Link Image Source untuk Image yang Akan digunakan. Property Onclick action adalah kemana Pengguna akan diarahkan ketika melakukan klik pada Image (Misal: Category page, Product detail page, dst…) Pilih None jika Image tidak mengarah kemanapun.

• Klik Save pada Pop Up
  

• Klik Save pada Page
  

Tampilan Elemen Single Image pada Front End

Gambar 55. Tampilan pada Frontend Magento

10. Raw JS
    

Elemen ini digunakan untuk menyisipkan script javascript (JS) ke dalam konten CMS. Diperlukan pengetahuan tentang HTML dan javascript untuk menggunakan elemen ini.

Cara menggunakan Elemen Raw JS

Elemen ini dapat dikonfigurasikan dengan langkah sebagai berikut :

1. Masuk pada Dashboard admin
   

2. Pilih Content > Pages
   

3. Pilih Page yang akan diisi
   

4. Untuk melakukan penambahan elemen pada page baru, Klik add New jika akan membuat page baru
   

Gambar 57. Tampilan Add New Page

• Isi kolom dengan informasi yang dibutuhkan
  

• Expand pada bagian Content
  

• Klik Add New Element icon + pada Magezon page builder
  

• Muncul Pop Up pilihan Elemen yang tersedia pada Magezon Page builder, Pilih Element Raw JS.
  

• Klik pada Raw JS, Edit konten untuk notifikasi yang akan dimunculkan
  

• Klik Save pada Pop Up 
  

• Klik Save pada Page 
  

5. Untuk melakukan edit halaman yang sudah ada, Klik Select > Edit pada page yang sudah ada
   

Gambar 58. Tampilan Konfigurasi page untuk magezone page builder di admin

• Expand pada bagian Content
  

• Klik Add New Element icon + pada Magezon page builder
  

• Muncul Pop Up pilihan Elemen yang tersedia pada Magezon Page builder
  

Gambar 59. Tampilan Konfigurasi raw JS  pada page 

• Pilih Raw JS
  

• Edit konten untuk notifikasi yang akan dimunculkan 
  

• Klik Save pada Pop Up
  

• Klik Save pada Page
  

11. Raw HTML
    

Elemen yang digunakan untuk menambahkan HTML ke dalam konten CMS, dibutuhkan pengetahuan HTML untuk menggunakan elemen ini. Sebagai referensi, dasar HTML dapat dipelajari di https://www.w3schools.com/html/.

Cara menggunakan Elemen Raw HTML

Elemen ini dapat dikonfigurasikan dengan langkah sebagai berikut :

1. Masuk pada Dashboard admin
   

2. Pilih Content > Pages
   

3. Pilih Page yang akan diisi
   

4. Untuk melakukan penambahan elemen pada page baru, Klik add New jika akan membuat page baru
   

Gambar 60. Tampilan Add New Page

• Isi kolom dengan informasi yang dibutuhkan
  

• Expand pada bagian Content
  

• Klik Add New Element icon + pada Magezon page builder
  

• Muncul Pop Up pilihan Elemen yang tersedia pada Magezon Page builder, Pilih Element Raw HTML.
  

• Klik pada Raw HTML, Edit konten untuk notifikasi yang akan dimunculkan
  

• Klik Save pada Pop Up 
  

• Klik Save pada Page
  

5. Untuk melakukan edit halaman yang sudah ada, Klik Select > Edit pada page yang sudah ada
   

Gambar 61. Tampilan Konfigurasi page untuk Raw HTML  magezone page builder di admin

• Expand pada bagian Content
  

• Klik Add New Element icon + pada Magezon page builder
  

• Muncul Pop Up pilihan Elemen yang tersedia pada Magezon Page builder
  

Gambar 62. Tampilan Konfigurasi Raw HTML pada page 

• Pilih Raw HTML
  

• Edit Konten HTML yang akan ditampilkan 
  

• Klik Save pada Pop Up 
  

• Klik Save pada Page 
  

Tampilan Elemen Raw HTML pada Front End

Tampilan pada Frontend bergantung pada kode HTML dengan konten yang ditulis pada Page builder. Contoh pada gambar dibawah dapat ditulis sebagai berikut : 

<h1>Contoh Judul</h1> 

<p>Berikut adalah contoh paragraf </p>

Gambar 63. Tampilan pada Frontend Magento

12. Product Slider
    

Elemen untuk menampilkan kumpulan produk dalam bentuk slider dengan beberapa kondisi yang bisa disesuaikan. 

Cara menggunakan Elemen Product Slider

Elemen ini dapat dikonfigurasikan dengan langkah sebagai berikut :

1. Masuk pada Dashboard admin
   

2. Pilih Content > Pages
   

3. Pilih Page yang akan diisI
   

4. Untuk melakukan penambahan elemen pada page baru, Klik add New jika akan membuat page baru
   

Gambar 65. Tampilan Add New Page

• Isi kolom dengan informasi yang dibutuhkan
  

• Expand pada bagian Content
  

• Klik Add New Element icon + pada Magezon page builder
  

• Muncul Pop Up pilihan Elemen yang tersedia pada Magezon Page builder, Pilih Element Product Slider.
  

• Klik pada Raw Slider, Edit konten untuk notifikasi yang akan dimunculkan
  

• Klik Save pada Pop Up 
  

• Klik Save pada Page 
  

5. Untuk melakukan edit halaman yang sudah ada, Klik Select > Edit pada page yang sudah ada
   

Gambar 66. Tampilan Konfigurasi page untuk Product slider Magezon page builder di admin

• Expand pada bagian Content
  

• Klik Add New Element icon + pada Magezon page builder
  

• Muncul Pop Up pilihan Elemen yang tersedia pada Magezon Page builder
  

• Memasukan keyword Product slider > Klik Product Slider
  

• Pada bagian General, Konfigurasikan
  

• Widget Title : Judul Widget yang akan ditampilkan di Frontend
  

• Pada Condition, Pengguna harus mengatur kondisi tertentu untuk memunculkan produk. Jika ingin
  

memunculkan semua produk maka biarkan seperti setting awal

Gambar 67. Tampilan Konfigurasi Product slider pada page 

• Klik Save pada Pop Up
  

• Klik Save pada Page
  

Tampilan Elemen Product Slider pada Front End

Gambar 68. Tampilan pada Frontend Magento

13. Product Grid
    

Elemen untuk menampilkan kumpulan produk dalam bentuk grid dengan beberapa kondisi yang bisa disesuaikan. 

Cara menggunakan Elemen Product Grid

Elemen ini dapat dikonfigurasikan dengan langkah sebagai berikut :

1. Masuk pada Dashboard admin
   

2. Pilih Content > Pages
   

3. Pilih Page yang akan diisi 
   

4. Untuk melakukan penambahan elemen pada page baru, Klik add New jika akan membuat page baru
   

Gambar 70. Tampilan Add New Page

• Isi kolom dengan informasi yang dibutuhkan
  

• Expand pada bagian Content
  

• Klik Add New Element icon + pada Magezon page builder
  

• Muncul Pop Up pilihan Elemen yang tersedia pada Magezon Page builder, Pilih Element Product Grid.
  

• Pada bagian General Konfigurasikan
  

• Widget Title : Judul Widget yang akan ditampilkan di Frontend
  

Gambar 71. Tampilan Konfigurasi page untuk Product Grid Magezon page builder di admin

• Pada Tab Condition, Pengguna harus mengatur kondisi tertentu untuk memunculkan produk. Jika ingin
  

memunculkan semua produk maka biarkan seperti setting awal

• Pada bagian Grid Option, Pengguna dapat mengatur jumlah tampilan produk. Jika ingin memunculkan
  

semua produk maka biarkan seperti setting awal

• Klik Save pada Pop Up 
  

• Klik Save pada Page  
  

5. Untuk melakukan edit halaman yang sudah ada, Klik Select > Edit pada page yang sudah ada
   

• Expand pada bagian Content
  

• Klik Add New Element icon + pada Magezon page builder
  

• Muncul Pop Up pilih Elemen Product Grid yang tersedia pada Magezon Page builder
  

Gambar 73. Tampilan Konfigurasi Product Grid pada page 

• Pada bagian General Konfigurasikan
  

• Widget Title : Judul Widget yang akan ditampilkan di Frontend
  

• Pada Tab Condition, Pengguna harus mengatur kondisi tertentu untuk memunculkan produk. Jika ingin memunculkan
  

semua produk maka biarkan seperti setting awal

• Pada bagian Grid Option, Pengguna dapat mengatur jumlah tampilan produk. Jika ingin memunculkan semua
  

produk maka biarkan seperti setting awal

• Klik Save pada Pop Up 
  

• Klik Save pada Page
  

Tampilan Elemen Product Grid pada Front End

Gambar 74. Tampilan pada Frontend Magento

Gambar 75. Tampilan pada Frontend PWA

14. Product List
    

Elemen untuk menampilkan kumpulan produk dalam bentuk list beberapa kondisi yang bisa disesuaikan. 

Cara menggunakan Elemen Product List

Elemen ini dapat dikonfigurasikan dengan langkah sebagai berikut :

1. Masuk pada Dashboard admin
   

2. Pilih Content > Pages
   

3. Pilih Page yang akan diisi
   

4. Untuk melakukan penambahan elemen pada page baru, Klik add New jika akan membuat page baru
   

Gambar 76. Tampilan Add New Page

• Isi kolom dengan informasi yang dibutuhkan
  

• Expand pada bagian Content
  

• Klik Add New Element icon + pada Magezon page builder
  

• Muncul Pop Up pilihan Elemen yang tersedia pada Magezon Page builder, Pilih Element Product List.
  

• Klik pada Product List, Edit konten untuk notifikasi yang akan dimunculkan 
  

5. Untuk melakukan edit halaman yang sudah, Klik Select > Edit pada page yang sudah ada
   

• Expand pada bagian Content
  

• Klik Add New Element icon + pada Magezon page builder
  

• Muncul Pop Up pilih Elemen Product List yang tersedia pada Magezon Page builder
  

Gambar 78. Tampilan Konfigurasi Product Grid pada page

• Pada bagian General Konfigurasikan
  

• Widget Title : Judul Widget yang akan ditampilkan di Frontend
  

• Pada Tab Condition, Pengguna harus mengatur kondisi tertentu untuk memunculkan produk. Jika ingin
  

memunculkan semua produk maka biarkan seperti setting awal

• Klik Save pada Pop Up 
  

• Klik Save pada Page
  

Tampilan Elemen Product List pada Front End

Gambar 79. Tampilan Konfigurasi pada Frontend Magento

Gambar 80. Tampilan pada Frontend