Requirement:

  • WYSIWYG HTML Editor


Full Page Scroll

Full Page Scroll merupakan sebuah ekstensi yang memungkinkan untuk menggabungkan beberapa cms menjadi satu halaman. Pada satu halaman terdapat lebih dari satu block yang dapat dimasukan dan ditampilkan pada halaman depan website.

Membuat Full Page Store

Image Placeholder

Gambar 1: Tampilan pada menu Content

  1. Masuk pada Backoffice/Admin > Content > Elements > Pages

  2. Klik pada tombol Add New Page

  3. Isi required fields pada menu Add New Page

  4. Perhatikan pada bagian Content , Klik tombol Deactivate Magezon Page Builder


Gambar 2: Tampilan pada halaman Add New Page

  1. Klik tombol WYSIWYG

Note: Anda perlu untuk menghapus default kode yang ada pada form HTML yang akan secara default muncul ketika disable Magezon Page Builder. Pada form HTML masukan kode berikut (tidak boleh diubah): 

{{block class="WeltPixel\FullPageScroll\Block\FullPageScroll" name="fullpagescroll"

template="WeltPixel_FullPageScroll::fullpagescroll.phtml"}}



  1. Pada bagian Search Engine Optimization, isi URL Key


Gambar 3: Tampilan pada halaman Add New Page

  1. Buat CMS Block  

Image Placeholder

Gambar 4: Tampilan pada menu Content

  1. Masuk ke menu Content > Elements > Block

  2. Isi required fields untuk membuat Block baru


Gambar 5: Tampilan pada halaman Add New Block

  • Block Title

masukan kode berikut:

fullpagescroll_cmspageurlkey_sectionorder


contoh: fullpagescroll_testingfullpagescroll_section-1

Section Order: digunakan untuk menentukan block tersebut akan ditampilkan. Section Order harus diganti sesuai dengan urutan Block yang akan ditampilkan pada 1 halaman. Ketika terdapat lebih dari satu block yang digunakan maka block menggunakan section angka selanjutnya.

contoh: fullpagescroll_testingfullpagescroll_section-2 

  • Identifier: masukan kode yang sama seperti Block Title

fullpagescroll_cmspageurlkey_sectionorder


contoh: fullpagescroll_testingfullpagescroll_section-1

Note: Untuk kode yang pada identifier, CMS Page dan Homepage akan berbeda. Jika untuk CMS Page Anda bisa menggunakan kode yang sama dengan Block Title. Sedangkan untuk Homepage menggunakan kode berikut:


fullpagescroll_home-page-storeviewcode_sectionorder


contoh: fullpagescroll_home-page-v1_section_1

Store View Code: menentukan halaman website yang digunakan untuk menampilan CMS.

Note: sama dengan Block Title Section Order harus diganti sesuai dengan urutan Block yang akan ditampilkan pada full page scroll. Ketika terdapat lebih dari satu block yang digunakan maka block selanjutnya menggunakan section angka selanjutnya.

contoh: fullpagescroll_testingfullpagescroll_section-2

Contoh dalam pembuatan CMS Block disesuaikan dengan nomor section Block yang akan ditampilkan:

  1. Section 1


Gambar 6: Tampilan pada halaman Add New Block

  1. Section 2


Gambar 7: Tampilan pada halaman Add New Block

  1. Section 3


Gambar 8: Tampilan pada halaman Add New Block

  1. Pada bagian Content Anda dapat mengunggah gambar yang akan digunakan. 

Catatan: untuk ekstensi full page scroll belum didukung oleh Magezon Page Builder  dalam menggunakan element Row HTML.



Gambar 9: Tampilan pada halaman Add New Block pada bagian Content

Langkah untuk mengunggah gambar pada Content:

  1. Klik Deactivate Magezon Page Builder lalu klik  pada tombol WYSIWYG > Show / Hide Editor


Gambar 10: Tampilan pada bagian Content di Show/Hide Editor

  1. Pilih ikon gambar untuk memilih gambar yang sudah ada atau mengunggah gambar baru

Image Placeholder

Gambar 11: Tampilan pada bagian Content di Show/Hide Editor

  1. Masukan letak file gambar atau klik ikon kamera untuk membuka file

  2. Lalu klik Submit untuk menyimpan



Tampilan Pada Frontend

Masuk pada halaman CMS sesuai dengan URL Key yang dibuat atau masuk pada Homepage yang menerapkan full page scroll.


Gambar 12: Tampilan pada halaman depan website yang menampilkan full page scroll