Pengaturan Column Dan Section

Untuk Memulai Page Builder, ada kalanya anda harus mengatur column dan section yang akan anda gunakan. mari kita coba mempelajarinya:

1. Pengaturan Column

Add new section. opsi ini digunakan untuk anda dapat memilih section dan berapa column yang akan anda gunakan.

2. memilih kolom.

Setelah anda mengklik “Add new section” akan muncul beberapa pilihan column seperti gambar dibawah ini:

di sini anda dapat bebas memilih berapa column yang akan anda gunakan di section tersebut.

contoh hasil memilih 1 column dan 2 column:

3. Edit Column.

Anda dapat mengedit Column anda dengan mengklik Tab Column, dengan itu akan muncul opsi seperti berikut:

di sana terdapat tab “Style” dan “Advanced”, Kegunaan:

– Pada Tab Style anda akan mendapat opsi untuk mengedit column anda, disana terdapat pilihan latar belakang, layout, dan Typography yang dapat anda atur.

– Pada Tab Advanced anda akan mendapat opsi untuk mengatur margin, padding, efek animasi, pengaturan responsive, dan Custom CSS.

Opsi tambahan:

– Meng-clone / menyalin column, icon yang terlihat seperti pada gambar di bawah, memungkinkan anda untuk Meng-clone / Menyalin Column tersebut menjadi 2 atau lebih.

– Tambah Column, icon yang terlihat seperti pada gambar di bawah, memungkinkan anda untuk menambah 2 atau lebih column pada section.

– Hapus Column, icon yang terlihat seperti pada gambar di bawah, memungkinkan anda untuk menghapus Column yang anda pilih.

– Anda juga dapat menentukan berapa persen selisih di antara column anda dengan cara menggeser bagian tengah di antara Column tersebut, Contoh:

3. Pengaturan Section

sama seperti column, section juga mempunyai icon opsi yang dapat memudahkan anda untuk:

– Meng-clone / menyalin Section, icon yang terlihat seperti pada gambar di bawah, memungkinkan anda untuk Meng-clone / Menyalin Section tersebut menjadi 2 atau lebih.

– Save Section (Menyimpan Section), icon yang terlihat seperti pada gambar di bawah, memungkinkan anda untuk menyimpan section yang anda pilih.

setelah anda klik/menekan icon save tersebut, anda akan mendapat opsi seperti berikut:

anda cukup menentukan nama untuk section yang akan anda simpan, setelah itu klik tombol save dan anda telah berhasil menyimpan section tersebut.

– Hapus Section, icon yang terlihat seperti pada gambar di bawah, memungkinkan anda untuk menghapus Section yang anda pilih.

Seperti Column, anda dapat mengedit Section anda dengan meng-Klik Tab Section, dengan itu akan muncul opsi seperti berikut:

4. Section Layout

Di tab layout ini, anda akan mendapat opsi untuk mengatur Layout Section.

5. Section Style

Pada Tab edit section style, anda dapat meng kreasikan section anda dengan beberapa opsi yang sudah di sediakan seperti:

1. Pada opsi Background (Latar Belakang). anda dapat memberi warna pada section anda dan juga meng-Upload gambar untuk di jadikan Hero image dalam section anda. Anda juga dapat mengatur posisi, Attachment (lampiran), pengulangan gambar, dan ukuran.

2. Background Overlay (Hamparan Latar Belakang). Pada opsi ini anda dapat menambahkan warna lapisan dengan kegelapan yang dapat anda atur sendiri sesuai keinginan. dan juga dapat menambah gambar lapisan pada Background (Latar Belakang) sebelumnya.

Contoh Hasil Opsi Background Overlay:

seperti yang sudah di jelaskan, gambar yang di upload di opsi “Background overlay” akan melapisi latar belakang sebelumnya.

3. Border (Pembatas). Pada opsi ini anda dapat mengatur Border (pembatas) pada section anda.

anda juga dapat menambahkan bayangan pada section anda dengan tambahan opsi dengan cara mengaktifkan “Box Shadow”

4. Shape Divider (Bentuk Pembatas). Pada opsi ini anda dapat menambahkan pembatas section dengan berbagai macam bentuk yang sudah di sediakan. anda juga dapat mengatur tinggi dan lebarnya.

5. Typography, pada opsi ini anda dapat merubah warna yang sudah tersedia. Tetapi opsi ini hanya berlaku untuk blok atau widget bawaan saja seperti “Heading Blok” Dan “Text Editor Blok”

6. Section Advanced

Sama seperti pada Column, Tab Advanced memungkinkan anda mendapat opsi untuk mengatur margin, padding, efek animasi, pengaturan responsive, dan Custom CSS.