Tampilan Tata Letak

Pengaturan web tampilan tata letak digunakan untuk mengatur tampilan konten, isi dan menu pada halaman utama website. pengaturan web tata letak dapat diakses pada menu : Pengaturan Web > Tampilan Tata Letak

uki-pengaturanweb-tataletak.JPG

Contoh pengaturan web tampilan tata letak

 

Pada pengaturan tampilan tata letak terdapat 3 bagian/section pengaturan yang utama yaitu Header & Layout, Section-section dan Footer. Bagian Header & Layout digunakan untuk mengatur tampilan pada layout utama, tipe menu, background dan list menu. Bagian section digunakan untuk menampilkan komponen-komponen website, maksimal komponen yang bisa ditampilkan dalam 1 section adalah 4 komponen dan minimal 1 komponen. Bagian Footer digunakan untuk menampilkan komponen-komponen website pada bagian halaman bawah website, untuk maksimal dan minimal komponen yang ditampilkan sama seperti bagian section.

uki-pengaturanweb-tataletak-header.JPGContoh pengaturan header & layout

 

uki-pengaturanweb-tataletak-section.JPG

Contoh pengaturan section

 

uki-pengaturanweb-tataletak-footer.JPG

Contoh pengaturan footer

 

Pengaturan Header & Layout

Pada pengaturan header & layout terdapat 5 komponen pengaturan, yaitu pengaturan layout utama, pengaturan tipe menu utama, pengaturan form pencarian paket, pengaturan background header dan pengaturan menu utama.

- Pengaturan Layout Utama

Pengaturan layout utama digunakan untuk mengatur tampilan layout website. klik pada tombol "Ubah Komponen" btn-edit-icon.png untuk mengubah pengaturan komponen.

uki-pengaturanweb-tataletak-header-layoututama.JPGContoh form pengaturan layout utama

Tipe Layout ada dua yaitu full dan boxed. Tipe full berfungsi untuk menampilkan website secara fullscreen/ penuh pada tampilan layar, tipe boxed berfungsi menampilkan website secara boxed atau ditampilkan dalam kolom yang membatasi pada kanan dan kiri pada setiap section. Kelebihan dari tipe boxed yaitu ketika layar yang digunakan menampilan website beresolusi besa maka tampilan website masih bisa terjaga kerapihan kontennya sedangkan untuk tipe full akan terlihat tidak ada batasan pada sisi kanan dan kiri.

uki-pengaturanweb-tataletak-layoututama1.JPG

Contoh tampilan layout tipe full

 

uki-pengaturanweb-tataletak-layoututama2.JPG

Contoh tampilan layout tipe boxed

Warna Background digunakan untuk mengatur warna background layout jika gambar background tidak digunakan, untuk warna background akan terlihat jika tipe layout yang digunakan adalah boxed.

Gambar Background digunakan untuk mengatur gambar background layout, untuk gambar background akan terlihat jika tipe layout yang digunakan adalah boxed.

Posisi Background digunakan untuk mengatur posisi gambar background layout. Ada 4 posisi yaitu repeat scroll, repeat fixed, fill scroll, fill fixed. Repeat biasanya digunakan untuk gambar patern, sehingga gambar akan diulang kesamping dan kebawah. Fill biasanya digunakan untuk gambar landscape atau satu gambar yang sudah full screen. Scroll digunakan agar gambar mengikuti scroll pada halaman dan fixed digunakan agar gambar tetap pada tampilan layar tanpa mengikuti gerakan scroll halaman.

Perataan digunakan untuk mengatur letak gambar background.

left top= rata kiri atas, left center=rata kiri tengah, left bottom=rata kiri bawah.

center top=rata tengah atas, center center=rata tengah tengah, center bottom=rata tengah bawah.

right top=rata kanan atas, right center=rata kanan tengah, right bottom=rata kanan bawah.

 

- Pengaturan Tipe Menu Utama

Pengaturan tipe menu utama digunakan untuk memilih tampilan menu pada halaman utama. klik pada tombol "Ubah Komponen" btn-edit-icon.png untuk mengubah pengaturan komponen.

uki-pengaturanweb-tataletak-header-tipemenuutama.JPG

Contoh pengaturan tipe menu utama

Terdapat 5 pilihan tipe menu utama. Sesuaikan dengan tampilan logo perusahaan, jika logo memanjang bisa menggunkan tipe 1,2,3 dan 5, jika logo persegi bisa menggunakan tipe 4.

 

- Pengaturan Form Pencarian Paket

Pengaturan form pencarian paket digunakan untuk menampilkan form pencarian paket pada header halaman utama. klik pada tombol "Ubah Komponen" btn-edit-icon.png untuk mengubah pengaturan komponen.

uki-pengaturanweb-tataletak-header-formpencarian.JPG

Contoh pengaturan form pencarian paket

Form pencarian paket bisa ditampilkan atau tidak ditampilkan. Untuk form transaksi yang ditampilkan juga bisa dipilih paket apa saja yang akan ditampilkan.

uki-pengaturanweb-tataletak-formpencarianpaket.JPG

Contoh tampilan form pencarian paket pada halaman utama

 

- Pengaturan Background Header

Pengaturan background header digunakan untuk mangatur background pada bagian header bukan pada background halaman utama. Background ditampilkan pada menu selain home. Tampilan background berbeda-beda tergantung pada tipe menu utama yang dipilih. klik pada tombol "Ubah Komponen" btn-edit-icon.png untuk mengubah pengaturan komponen.

uki-pengaturanweb-tataletak-backgroundheader.JPG

Contoh tampilan background header

 

- Pengaturan Menu Utama

Pengaturan menu utama digunakan untuk menampilkan menu-menu pada halaman utama. klik pada tombol "Ubah Komponen" btn-edit-icon.png untuk mengubah pengaturan komponen.

uki-pengaturanweb-tataletak-header-menuutama.JPG

Contoh form pengaturan menu utama

Menambah Menu Utama
Untuk menambah menu utama, klik pada tombol "Tambah Menu" pada form bagian bawah, lalu isikan nama menu, kemudian isikan link menu pada kolom URL. Jika link URL adalah link internal klik pada tombol "Pilih Link Internal" uki-pengaturanweb-tataletak-header-menuutama-linkinternalbtn.JPG, kemudian klik tombol "Pilih Link" uki-pengaturanweb-tataletak-header-menuutama-pilihlinkbtn.JPG pada judul link yang dikehendaki atau ketik pada kolom search untuk lebih cepat mencari link yang dikehendaki.

 

Menghapus Menu Utama
Untuk menghapus menu utama, klik pada tombol "Hapus Menu" btn-delete-icon.png.

uki-pengaturanweb-tataletak-header-menuutama-linkinternal.JPG

Contoh form pengaturan pilih link internal

 

Menambah Sub Menu
Untuk menambah sub menu, klik pada tombol "Tambah Sub Menu" uki-pengaturanweb-tataletak-header-menuutama-submenubtn.JPG pada kolom opsi, lalu isikan nama sub menu, kemudian isikan link sub menu pada kolom URL. Jika link URL adalah link internal klik pada tombol "Pilih Link Internal" uki-pengaturanweb-tataletak-header-menuutama-linkinternalbtn.JPG, kemudian klik tombol "Pilih Link" uki-pengaturanweb-tataletak-header-menuutama-pilihlinkbtn.JPG pada judul link yang dikehendaki atau ketik pada kolom search untuk lebih cepat mencari link yang dikehendaki. Pada URL menu utama diubah menjadi (#) tanpa kurung. 

 

Menghapus Sub Menu
Untuk menghapus sub menu, klik pada tombol "Hapus Sub Menu" btn-delete-icon.png.

uki-pengaturanweb-tataletak-header-menuutama-submenu.JPGContoh tampilan sub menu

catatan : jika link URL menu/sub menu adalah link external atau dari web lain, centang pada kolom "tab baru" agar link dibuka pada tab baru.

 

Pengaturan Section 1, 2, 3 dst

Pengaturan section digunakan untuk menampilkan komponen-komponen yang ingin ditampilkan pada website. Setiap section maksimal bisa diisi 4 komponen dan minimal 1 komponen. 

uki-pengaturanweb-tataletak-section.JPG

Contoh pengaturan section

 

uki-pengaturanweb-tataletak-section-tampilan.JPG

Contoh tampilan section pada halaman utama

 

Menambahkan Section

Untuk menambahkan section, klik pada tombol "Tambah Section", dan kemudian isikan data sesuai dengan form yang tersedia.

uki-pengaturanweb-tataletak-tambahsection.JPG

Contoh form tambah section

 

Keterangan :

Judul Section : digunakan untuk memberikan judul pada section, secara default judul berada pada perataan tengah atas.

Jumlah Kolom : digunakan untuk mengatur jumlah kolom/komponen yang ditampilkan pada halaman utama. Jumlah kolom maksimal adalah 4 kolom dan minimal 1 kolom. Jumlah kolom juga berpengaruh pada komponen yang ditampilkan. Contoh pada komponen Paket Umroh Terbaru, komponen ditampilkan pada section dengan 1 kolom akan berbeda tampilannya jika ditampilkan pada section dengan 4 kolom. 

uki-pengaturanweb-tataletak-kolom.JPGContoh tampilan komponen pada section dengan 3 kolom

 

uki-pengaturanweb-tataletak-kolom2.JPGContoh tampilan komponen pada section dengan 1 kolom

 

Urutan : Untuk mengatur urutan section pada halaman utama.

Warna Teks Judul : Untuk mengatur warna teks judul section.

Warna Background : Untuk mengatur warna background section jika gambar background tidak digunakan.

Gambar Background : Untuk mengatur gambar background section.

Posisi Background : Untuk mengatur posisi gambar background. Ada 4 posisi yaitu repeat scroll, repeat fixed, fill scroll, fill fixed. Repeat biasanya digunakan untuk gambar pattern, sehingga gambar akan diulang kesamping dan kebawah. Fill biasanya digunakan untuk gambar landscape atau satu gambar yang sudah full screen yang akan mengisi penuh pada section tersebut. Scroll digunakan agar gambar mengikuti scroll pada halaman dan fixed digunakan agar gambar tetap pada tampilan layar tanpa mengikuti gerakan scroll halaman.

 

Mengubah Data Section
Untuk mengubah data section, klik pada tombol "Ubah Section" btn-edit-icon.png, lalu isi perubahan data pada form yang tersedia.

uki-pengaturanweb-tataletak-section.JPG

Contoh pengaturan section

Mengatur Komponen Pada Section

Untuk mengatur komponen yang ditampilkan dalam sebuah section, klik section yang akan diatur, lalu klik pada tombol "Ubah Komponen" btn-edit-icon.png pada kolom Opsi.

uki-pengaturanweb-tataletak-section-ubahkomponen.JPG

Contoh form ubah komponen

Keterangan :

Judul Komponen : Untuk mengatur judul komponen. (tidak wajib diisi, menyesuaikan komponen yang dipilih)

Warna Teks Judul : Untuk mengatur warna teks pada judul komponen.

Warna Teks Konten : Untuk mengatur warna teks konten isi komponen.

Jenis Komponen : Untuk mengatur jenis komponen yang akan ditampilkan.

Untuk isian form setelah Jenis Komponen akan berbeda-beda tergantung komponen yang dipilih.

 

Macam Jenis Komponen

Untuk jenis komponen ada 41 komponen dan masih bisa bertambah. Agar tampilan web bisa ringkas dan mudah dibaca, tidak harus semua komponen ditampilkan, cukup pilih beberapa yang memang sesuai dan membuat tampilan web lebih menarik. Komponen-komponen tersebut adalah

- Box Dengan Icon

Untuk menampilkan teks dalam box disertai icon, biasanya untuk menunjukan beberapa kelebihan dan service perusahaan. Pada pengaturan komponen ini ada tambahan isian pada form ubah komponen, yaitu icon dan keterangan, icon diisi dengan link icon yang sudah ada disediakan pada web tertentu.

uki-pengaturanweb-tataletak-section-tampilan.JPG

Contoh tampilan komponen box dengan icon 

- Daftar Link

Untuk menampilkan link-link untuk shortcut, bisa untuk link internal ataupun external.

uki-pengaturanweb-tataletak-daftarlink.JPGContoh tampilan komponen daftar link

- Daftar Sosial Media

Untuk menampilkan daftar link social media yang dimiliki perusahaan. Pengaturan link dan daftar sosial media bisa diakses pada menu : Pengaturan Web > Media Sosial.

uki-pengaturanweb-tataletak-sosialmedia.JPG

Contoh tampilan komponen daftar media sosial

- Facebook Page

Untuk menampilkan facebook page perusahaan pada halaman web. Hanya bisa menampilkan halaman tipe facebook page, tidak bisa menampilkan tipe akun biasa. Untuk ukuran komponen akan berbeda tergantung pilihan jumlah kolom dalam satu section.

uki-pengaturanweb-tataletak-facebookpage.JPG

Contoh tampilan komponen facebook page


- Form Cek Transaksi

Untuk menampilkan form pengecekan transaksi. Tampilan form akan berbeda dan menyesuaikan jumlah kolom yang dipilih pada section.

uki-pengaturanweb-tataletak-cektransaksi.JPG

Contoh tampilan komponen form cek transaksi


- Form Pencarian Paket

Untuk menampilkan form pencarian paket. Dalam pengaturan ubah komponen bisa dipilih jenis paket apa saja yang akan ditampilkan dalam form pencarian. Tampilan form akan selalu tetap seperti contoh di bawah ini pada semua jumlah kolom yang dipilih.

uki-pengaturanweb-tataletak-pencarianpaket.JPG

Contoh tampilan komponen form pencarian paket


- Hotel Terbaru, Hotel Terpopuler, Paket Haji Terbaru, Paket Katering Terbaru, Paket Katering Terpopuler, Paket LA Terbaru, Paket LA Terpopuler, Paket Perlengkapan Terbaru, Paket Perlengkapan Terpopuler, Paket Umroh Terbaru, Paket Umroh Terpopuler, Paket Wisata Terbaru, Paket Wisata Terpopuler, Produk Lain Terbaru, Produk Lain Terpopuler, Promo Paket Haji, Promo Paket Katering, Promo Paket LA, Promo Paket Perlengkapan, Promo Paket Umrah, Promo Paket Wisata, Promo Pemesanan Hotel, Promo Produk Lain, Promo Terbaru, Pemberangkatan Haji Terdekat, Pemberangkatan Umroh Terdekat

Untuk tampilan komponen-komponen di atas hampir mirip semuanya, Tampilan komponen akan berbeda tergantung pilihan jumlah kolom dalam 1 section.

uki-pengaturanweb-tataletak-hoteldanumroh.JPG

Contoh tampilan komponen paket umroh terbaru dan hotel terbaru pada 2 kolom

uki-pengaturanweb-tataletak-kolom2.JPG

Contoh tampilan komponen paket umroh terbaru pada 1 kolom

- Kode HTML/CSS/Javascript
Digunakan untuk menambahkan Kode HTML/CSS/Javascript tambahan untuk tampilan atau fungsi di halaman utama. 

uki-pengaturanweb-tataletak-section-ubahkomponen2.JPG

Contoh pengaturan komponen Kode HTML/CSS/Javascript

 

uki-pengaturanweb-tataletak-javascript.JPG

Contoh tampilan komponen Kode HTML/CSS/Javascript

 

- Peta Lokasi Perusahaan

Untuk menampilkan alamat/peta lokasi perusahaan yang berupa map dan alamat.

uki-pengaturanweb-tataletak-petalokasi.JPG

Contoh tampilan komponen peta lokasi perusahaan


- Posting Terbaru

Untuk menampilkan posting-posting terbaru. Pengaturan tentang isi posting bisa diakses pada menu : Pengaturan Web > Posting.

uki-pengaturanweb-tataletak-posting.JPGContoh tampilan komponen slide show galeri


- Registrasi Subscriber

Untuk registrasi atau berlangganan email newsletter.

uki-pengaturanweb-tataletak-subscribe.JPGContoh tampilan komponen slide show galeri


- Slideshow Galeri

Untuk menampilkan slide show dari galeri. Tampilan komponen akan berbeda tergantung pilihan jumlah kolom dalam 1 section.

uki-pengaturanweb-tataletak-galeri.JPGContoh tampilan komponen slide show galeri


- Teks HTML

Untuk menampilkan teks/paragraf pada halam utama. Teks/paragraf bisa disesuaikan pada form editor ubah komponen.

uki-pengaturanweb-tataletak-section-ubahkomponen3.JPG

Contoh form ubah komponen teks HTML

 

uki-pengaturanweb-tataletak-tekshtml.JPG

Contoh tampilan komponen Teks HTML


- Testimonial

Untuk menampilkan testimonial-testimonial jamaah pada perusahaan.

uki-pengaturanweb-tataletak-testimonial.JPGContoh tampilan komponen testimonial


- Twitter Timeline

Untuk menampilkan timeline twitter perusahaan.

uki-pengaturanweb-tataletak-twitter.JPG

Contoh tampilan komponen Twitter timeline

 

- Video Youtube

Untuk menampilkan video dari youtube. Video langsung bisa diputar di halaman utama website.

uki-pengaturanweb-tataletak-youtube.JPGContoh tampilan komponen video youtube

 

Pengaturan Footer

Secara umum pengaturan footer hampir seperti pengaturan section, yaitu komponennya bisa diubah-ubah, minimal bisa diisi 1 kolom komponen dan maksimal 4 kolom komponen. Pengaturan footer menampilkan komponen pada akhir bawah website. 

uki-pengaturanweb-tataletak-footer.JPG

Contoh pengaturan footer

uki-pengaturanweb-tataletak-footer-tampilan.JPG

Contoh tampilan footer

 

Pengaturan Warna

Pengaturan warna digunakan untuk mengganti warna tema pada website. Klik pada tombol "Pengaturan Warna" pada halaman Pengaturan Tampilan Tata Letak, dan kemudian pilih warna yang diinginkan. Tema warna diterapkan pada tema warna seluruh halaman website utama kecuali halaman administrator, tema warna invoice, tema form transaksi dan laporan.

uki-pengaturanweb-tataletak-pengaturanwarna.JPG

Contoh pengaturan warna

 

Reset Default

Pengaturan reset default digunakan untuk mereset ulang tampilan website kembali seperti semula. Klik pada tombol "Reset Default" pada halaman Pengaturan Tampilan Tata Letak, dan kemudian konfirmasi untuk reset deault.

uki-pengaturanweb-tataletak-resetdefault.JPG

Contoh konfirmasi reset default