Cara Mengatur Section

Video Tutorial Cara Mengatur Section

Mohon maaf, video tutorial untuk materi "Cara Mengatur Section" belum tersedia

Panduan Tertulis Cara Mengatur Section

Section adalah seluruh bagian di halaman depan website selain Slideshow dan Footer. Satu Section dapat terdiri dari satu atau beberapa Komponen

 

Mengakses Pengaturan Section

A. Pada modul “Manajemen Administrasi” > pilih fitur “Data Master & Pengaturan” > pilih fitur “Desain & Tampilan” > pilih fitur “Tampilan Halaman Utama” > pilih fitur “Theme Builder V2”

Tampilan 1.png

(Gambar di atas : Tahapan untuk mengakses fitur Theme Builder V2)

 

Selanjutnya Anda akan melihat halaman pengaturan tampilan halaman depan.

Tampilan 13.png

Gambar di atas : Tampilan halaman pengaturan tampilan halaman depan)

 

Mengatur Section V.2

Anda dapat mengatur Section dengan menambah, mengubah, dan menghapus Section.

A. Menambah Section

 1. Tambah Section dengan klik tombol "Tambah Section" yang terdapat pada bagian bawah website.

Tampilan 14.png

(Gambar di atas : Penunjuk tombol Tambah Section)

 

 2. Pilih struktur Section.

Tampilan 15.png

(Gambar diatas : Penunjuk dalam memilih struktur Section)

 

B. Mengubah Section

1. Pilih salah satu Section > pilih tombol "Ubah Section" dengan ikon Pensil yang terletak di samping kanan.

Tampilan 16.png

(Gambar di atas : Penunjuk salah satu bagian Section dan penunjuk Ubah Section dengan ikon Pensil)

 

2. Atur Urutan Section, Lebar Section, Lembar Komponen” pada tab "Section" sesuai dengan keinginan Anda.

 

Tampilan 17.png

(Gambar di atas : Penunjuk pengaturan pada tab section)

 

Lebar Section terdiri dari 2 jenis : 

 

  • Full Width

Tampilan 16.png

(Gambar di atas : Contoh Lebar Section jenis Full Width)

 

  • Inside Box

Tampilan 18.png

(Gambar di atas : Contoh Lebar Section jenis Inside Box)

 

3. Pada tab Properti sesuaikan dengan keinginan Anda seperti :

  • Margin: Untuk mengatur jarak antara Section atau Komponen.
  • Padding: Untuk mengatur jarak Komponen yang ada di dalam Section.
  • CSS Selector Class: Untuk memberikan style pada Section atau Komponen berdasarkan nama class tertentu pada menu Custom CSS.
  • CSS Selector ID: Untuk memberikan style pada Section atau Komponen berdasarkan nama ID tertentu pada menu Custom CSS.
  • Custom Inline CSS: Untuk memberikan stlye CSS pada Komponen secara langsung.
  • Responsive Layout: Untuk menentukan tampil tidaknya Section atau Komponen terpiih pada ukuran layar tertentu.

Tampilan 19.png

(Gambar di atas : Penunjuk tab Properti)

 

4. Pada tab “Background" sesuaikan Warna Background, Gambar Background, dan Posisi Background”

Tampilan 20.png

(Gambar di atas : Penunjuk tab Background)

 

Warna Background ada 3 jenis “Transparan, Sesuai warna Tema, dan Pilih Warna”, Anda dapat memilih sesuai dengan keinginan Anda.

Tampilan 21.png

(Gambar di atas : Penunjuk jenis-jenis Warna Background)

 

Gambar Background  

Apabila Anda ingin mengupload gambar yang sudah ada di file komputer Anda, ikuti langkah berikut : 

Klik tombol “Ubah Gambar Logo.png > pilih tombol "Choose file" > plih tombol “Upload Gambar”

Tampilan 22.png

(Gambar di atas : Penunjuk tombol “Ubah Gambar Logo.png”)

 

Tampilan 23.png

(Gambar di atas : Penunjuk tombol "Choose File" dan tombol "Upload Gambar")

 

Posisi Background terdiri dari 4 Jenis yaitu “Repeat Scroll”, “Repeat Fixed”, “Fill Scroll”, “Fill Faxed”. Anda dapat memilih nya sesuai dengan keinginan wedding organizer Anda.

  1. Repeat Scroll : Gambar yang Anda jadikan sebagai background akan dilipatgandakan dan gambar background akan ikut bergerak saat pengunjung website Anda menaikkan atau menurunkan halaman menu.
  2. Repeat Fixed : Gambar yang Anda jadikan sebagai background akan dilipatgandakan dan gambar background tidak ikut bergerak saat pengunjung website Anda menaikkan atau menurunkan halaman menu.
  3. Fill Scroll : Gambar yang Anda jadikan sebagai background akan memenuhi background website dari atas sampai bagian bawah website dan gambar background akan ikut bergerak saat pengunjung website Anda menaikkan atau menurunkan halaman menu.
  4. Fill Fixed : Gambar yang Anda jadikan sebagai background akan akan memenuhi background website dari atas sampai bagian bawah website dan gambar background tidak ikut bergerak saat pengunjung website Anda menaikkan atau menurunkan halaman menu.

Tampilan 24.png

(Gambar di atas : Penunjuk jenis-jenis Posisi Background)

 

Anda juga dapat mengatur dan memilih letak Posisi Background.

Tampilan 25.png

(Gambar di atas : Penunjuk jenis-jenis letak Posisi Background)

 

5.  Setelah Anda selesai mengatur tab “Section, Properti, dan Background”, kembali pada tab Section lalu klik tombol Simpan Section”.

 

Tampilan 26.png

(Gambar di atas : Penunjuk tombol "Simpan Section")

 

6. Anda dapat mengubah kembali struktur Section dengan memilih tombol Ubah Stuktur Section dan pilih struktur Section yang sesuai dengan keinginan Anda.

Tampilan 27.png

(Gambar di atas : Penunjuk tombol Ubah Stuktur Section)

Tampilan 15.png

(Gambar di atas : Tampilan untuk memilih struktur Section)

7. Setelah Anda menambah atau mengubah Section Anda bisa melakukan Preview Tampilan terlebih dahulu dengan memilih tombol “Preview Tampilan Logo 2.png

 

Tampilan 298.png

(Gambar di atas : Penunjuk tombol “Preview Tampilan Logo 2.png)

 

8. Anda dapat langsung menerapkan tampilan website dengan memilih tombol "Terapkan Tampilan Logo.png"

 

Tampilan 30.png

(Gambar di atas : Penunjuk tombol "Terapkan Tampilan Logo.png")

 

C. Menghapus Section

Tampilan 31.png

(Gambar di atas : Penunjuk salah satu bagian Section dan penunjuk Ubah Section dengan ikon Pensil)

 

Maka Section tersebut akan terhapus :

Tampilan 2.png

(Gambar di atas : Bukti Section terhapus)

Twit Terbaru
Facebook Aksana
messenger icon
messenger icon Chat Dengan Kami