PENGELOLAAN TEMA COMPRO

Berikut ini adalah petunjuk pengelolaan tema WP Compro, dibuat untuk membantu
pengguna tema WP Compro mengelola konten website.

Daftar Isi
1. Instalasi / Pemasangan Tema
2. Import Dummy / Demo Konten
3. Mengatur Frontpage / Halaman Beranda
4. Mengelola Tampilan
- Halaman Beranda
- Halaman Kontak
- Pengelolaan Menu
- Pengelolaan After Header
- Pengelolaan Footer
- Pengelolaan Sidebar

1. INSTALASI TEMA

Langkah pertama adalah instalasi / pemasangan tema, pastikan Anda telah login ke
halaman Dasbor WordPress ( contoh http://alamatwebsite.com/wp-admin ) dan untuk
memudahkan harap atur bahasa WordPress ke dalam bahasa Indonesia.
Untuk pemasangan tema, silahkan buka halaman untuk menambahkan tema

Dasbor > Tampilan > Tema

Tambahkan tema baru

Unggah / Upload tema Compro, klik pada Unggah Tema lalu akan muncul kolom untuk
unggah tema, klik Browse dan pilih file tema compro (berformat zip)
Jika sudah dipilih, klik Instal Sekarang dan file tema akan mulai di proses, tunggu hingga
selesai
Setelah proses Unggah / Upload selesai akan muncul perintah untuk mengaktifkan tema

2. IMPOR DUMMY / DEMO KONTEN

Demo konten atau contoh konten demo sangat berguna bagi pengguna sebuah tema
untuk mempelajari pengelolaan tema yang berangkutan. Jika tanpa konten contoh maka
pengguna biaanya akan bingung saat akan membuat sebuah Pos, ada banyak kolom dan
pilihan tetapi tidak tahu harus diisi apa karena tidak ada contohnya.

Dengan menginstal dummy, maka otomatis website akan memiliki pos dan laman dan
tugas pengelola web hanya melalukan ATM (Amati, Tiru, Modifikasi)

Untuk file dummy konten silahkan download melalui link ini

http://ciuss.com/th/compro-dummy.zip lalu ekstrak file terebut untuk mendapatkan
sebuah file berformat xml

Untuk proses impor dummy xml berikut langkahnya

Buka Dasbor > Perkakas > Impor

Impor disini adalah dari WordPress ke Wordpress jadi perkakas / tool yang digunakan
adalah Wordpress Importer, Klik pada link Instal Sekarang lalu tunggu prosesnya dan
text akan berubah menjadi Jalankan Pengimpor

Klik Jalankan Pengimpor

Selanjutnya adalah tahap mengunggah file comprodummy.xml untuk mulai di proses
(proses impor dummy konten). Pilih file comprodummy.xml yang telah di download
sebelumnya lalu klik tombol biru Unggah berkas dan impor.

Proses impor telah siap dan centang pada bagian Unduh dan impor lampiran berkas
sebelum melanjutkan. Mencentang bagian ini adalah agar file berupa media berupa file
atau gambar dummy ikut di impor.
PENTING : Pastikan internet dalam kondisi On dikarenakan media yang akan di impor
dalam prose ini terletak dalam web ciuss.com jadi harus dalam posii internet aktif untuk
dapat mengunduh/download file media

Klik tombol kirim dan tunggu prosesnya, jangan menutup halaman ini sebelum prose
impor selesai. Dan notifikasi proses impor akan muncul di bagian selanjutnya.

Jika proses impor selesai maka hasil akhirnya adalah seperti gambar berikut, jika tidak
maka dapat dipastikan prose impor telah gagal dan perlu diulangi lagi prosesnya.

3. MENGATUR FRONTPAGE / BERANDA

Setelah proses impor dummy konten selesai, langakh selanjutnya adalah petunjuk cara
menampilkan halaman Beranda menjadi sama persis dengan Beranda web demo
http://compro.ciuss.com

Dasbor > Pengaturan > Membaca

Pada halaman Pengaturan Membaca, pilih centang pada Halaman Statis, lalu pilih Page
yang akan dijadikan Beranda dan Page yang akan di jadikan halaman pos-pos
Pilih Page Beranda untuk Laman Beranda dan Page Berita untuk Laman Pos-pos. Lalu
klik Simpan

Jika telah sampai pada bagian ini maka seharusnya halaman Beranda website Anda telah
tampil seperti website demo http://compro.ciuss.com . Jika belum, silahkan cek kembali
perubahan yang dilakukan pada Pengaturan Membaca diatas.

4. MENGELOLA TAMPILAN

Pengelolaan tampilan ini bersifat umum (untuk keseluruhan tampilan website) namun
fokus dari tema Compro hanya terletak pada Homepage dan Kontak. Tampilan utama
tema berbasis pada Page Template atau Templat Laman dan seluruhnya di atur melalui
sebuah halaman pengaturan bernama WP Compro. Di halaman admin menunya ada di
sebelah kiri atas
Pengaturan tema Compro terdiri dari

1. Company Profile

Pengaturan Company Profile berisi kolom input data pokok yang umum dimiliki oleh
sebuah perusahaan seperti

- Nama Perusahaan
- Data Perijinan (SIUP, TDUP, SITU, NPWP)
- Kontak Perusahaan (telepon ,email akun social media, dll)
- Alamat Perusahaan
- Pengaturan Lokasi Maps

2. Layout Setting

Melalui halaman Layout Setting admin dapat memilih tampilan yang dinginkan, sebagai
contoh adalah memilih tampilan Header, Slider, dll. Dan terdapat juga fitur untuk
mengaktif/nonaktifkan beberapa bagian di halaman Beranda
Untuk mengaktifkan tampilan yang diinginkan caranya cukup centang pada bagian yang
dipilih. Lalu tekan tombol SIMPAN berwarna hijau di sisi kanan.

Pada Layout Setting juga terdapat pengaturan untuk mengganti gambar latar /
background untuk beberapa bagian antara lain

- Background Parallax (halaman Beranda)

- Background Testimoni (halaman Beranda)
- Background Setelah Header (semua halaman)

3. Replace Text

Fitur ini digunakan untuk merubah text default bawaan tema yang muncul di halaman
website setelah tema Compro di install.

Ada cukup banyak text yang bisa di replace melalui pengaturan ini, dimulai pada bagfian
header yaitu text HOTLINE dan EMAIL yang terletak di bagian Header

Fungsi replace text 80% digunakan untuk merubah text default di halaman Beranda
dimulai dari TOP CONTENT, berikut ini adalah yang dimaksud sebagai TOP CONTENT
(lokasi tepat setelah Slider)
Perhatikan pada gambar diatas, text PT Compro Ciuss Creative dan text di bawahnya,
dapat di ganti dengan text baru melalui pengaturan Replace Text.

Selain bagian tersebut, hamper seluruh bagian Beranda bisa diganti text melalui
pengaturan Replace Text.

4. Custom Color

Tema Compro memiliki halaman untuk merubah pewarnaan tema atau Custom Color,
admin dapat mengaktifkan terlebih dahulu fiturnya untuk dapat mengakses pilihan
warna.

Selanjutnya setelah fitur diaktifkan maka pewarnanya akan terbuka dan dapat dirubah.
Sangat mudah untuk merubah warna, cukup tekan pada palet warna dan arahkan
mouse pada warna yang diinginkan.

4.1 HALAMAN BERANDA

Halaman Beranda menampilkan hampir keseluruhan konten bawaan tema Compro, dan
pada bagian ini akan dijelaskan bagian-bagian tersebut.

4.1.1 Header
Header adalah bagian yang muncul di setiap halaman, dan ada beberapa hal yang akan
dijelaskan tentang bagian Header

- Header memiliki 4 style

Ada 4 buah pilihan tampilan header, bisa di aktifkan melalui Layout Setting (telah
dijelaskan di bagian atas)
- Menampilkan Info Telepon, Email, Alamat
Info Telepon dan Email di tampilkan pada semua tipe Header, kecuali Alamat hanya
dimunculkan pada Header 4
- Menampilkan Menu (akan dijelaskan di bagian Pengelolaan Menu)
- Menampilkan Kolom Pencarian

4.1.2 Slider
Slider adalah salah satu bagian dari Beranda, lokasi tepat di bawah Header dan diatas
Top Content. Berikut penjelasan tentang Slider dan pengelolaanya.

Konten Slider, berisi Gambar, Heading, Deskripsi, Dan Tombol Tautan. Untuk mengelola
Slider silahkan masuk ke halaman

Dasbor > Slide Gambar > Tambah Slide

Langkah selanjutnya untuk menambahkan konten slide telah dijelaskan di halaman

tersebut. Ada petunjuk yang telah di siapkan di bagian tertentu untuk memudahkan
admin menambahkan konten.
- Judul Slide
Judul Slide akan dimunculkan sebagai Heading pada tampilan Slider Homepage
- Gambar Slide
Gambar yang dibutuhkan untuk slide adalah gambar berukuran 1100x500 pixel
- Slide Detail
Bagian ini digunakan untuk menampilkan text deskripsi dan link pada Button Slide.
Jika tidak ingin menampilkan Button, cukup kosongkan kolom Link maka Button tidak
akan dimunculkan pada Slide

Pengaturan Slider
Slider memiliki pengaturan, untuk memilih style dan pengaturan warna, dapat di atur
melalui Layout Setting dan Custom Color (telah dijelaskan sebelumnya)

4.1.3 Top Content

Top Content berisi text Heading dan keterangan / deskripsi. Letaknya ada di halaman
Beranda, berada diantara Slider dan About Us

Untuk mengganti dengan text default bagian Top Content melalui menu pengaturan
Replace Text (telah dijelaskan sebelumnya)

Bagian ini juga dapat dirubah warna background serta text melalui pengaturan Custom
Color (telah dijelaskan sebelumnya)

INFO : Bagian ini bisa juga di nonaktifkan jika tidak ingin ditampilkan pada halaman
Beranda, nonaktifkan melalui Layout Setting (telah dijelaskan sebelumnya)
4.1.4 About Us / Work
Bagian ini digunakan untuk menampilkan info umum dari apa saja yang ditawarkan oleh
perusahaan atau untuk mendeskripsikan / menggambarkan garius besar perusahaan.

Terdapat 4 tipe tampilan yang bisa dipilih / diaktifkan melalui pengaturan Layout Setting
(telah dijelaskan sebelumnya)

Konten yang ditampilkan pada bagian ini adalah post About / Work, pengelolaan bagian
ini dilakukan melalui halaman pos About / Work yang ada di halaman berikut

Dasbor > About / Work

Pengelolaan Post About / Work

Yang perlu ditambahkan saat membuat post About / Work adalah sebagai berikut
- Judul Pos
Menambahkan judul pos, nantinya ditampilkan sebagai Heading
- Deskripsi Singkat
Menambahkan keterangan deskripsi singkat
- Gambar Ikon
Gambar ikon menggunakan Font Awesome. Tambahkan sebuah ikon dari Font
Awesome. Format penulisannya seperti fa-home atau fa-search. Untuk daftar font
bisa di lihat di halaman resmi Font Awesome di link berikut. Official FontAwesome

INFO : Bagian ini bisa juga di nonaktifkan jika tidak ingin ditampilkan pada halaman
Beranda, nonaktifkan melalui Layout Setting (telah dijelaskan sebelumnya)

4.1.5 Top Parallax

Tema Compro menerapkan parallax effect, ini adalah efek pemanis untuk tampilan
website. Bagian parallax tampil di halaman Beranda tepat di bawah About / Work dan
tepat diatas Our Project. Saat layer di scroll / gulung background pada bagian parallax
tidak ikut bergerak, bagian yang bergerak adalah konten diatasnya yaitu Heading dan
text tambahan.

Berikut adalah bagian yang menggunakan effek parallax tersebut

Pengaturan untuk bagian ini ada di Layout Setting, dan pewarnaan bagian Parallax bisa
di rubah melalui menu Custom Color.

Gambar background dapat diganti melalui Layout Setting, gambar yang disarankan
berukuran besar , Gambar yang di upload akan tampil full-width. Ukuran gambar bebas
namun disarankan berukuran 4 : 3 (contoh 1200x800 pixel)

Untuk Heading dan text tambahan dapat dirubah melalui pengaturan Replace Text, dan
pewarnaan bisa diubah melalui pengaturan Custom Color.

INFO : Bagian Heading dan text tambahan bisa juga di nonaktifkan jika tidak ingin
ditampilkan pada halaman Beranda sementara gambar background akan tetap muncul,
nonaktifkan melalui Layout Setting (telah dijelaskan sebelumnya)
4.1.6 Our Project / Our Works
Bagian ini lebih tepat digunakan untuk menampilkan produk atau hasil kerja, atau bisa
dibuat menampilkan Portfolio hasil pekerjaan.

Terdiri dari 2 bagian, bagian atas menampilkan Heading dan Deskripsi dan bagian bawah
menampilkan daftar Pos Our Work.

Heading dan Deskripsi dapat dirubah melalui pengaturan Replace Text, sedangkan
untuk konten daftar pos dibawahnya dapat ditambahkan melalui

Dasbor > Our Work > Tambahkan Data

Untuk menambahkan sebuah Pos Our Work, yang perlu ditambahkan adalah sebagai
berikut

- Judul Pos
Tambahkan judul pos
- Deskripsi
Tambahkan keterangan seputar pos, bisa menambahkan text dan gambar
- Kategori Project
 Tambahkan pos ke dalam sebuah kategori, jika belum ada kategori maka bisa dibuat
terlebih dahulu
- Gambar Unggulan
Gambar ini disebut juga Featured Image / Thumbnail dan muncul pada bagian pos
Our Work yang ada di halaman Beranda. Ukuran gambar yang disarankan adalah
600x450 pixel

Untuk pengaturan pewarnaan background dan text silahkan di atur melalui halaman
Custom Color

INFO : Bagian ini bisa juga di nonaktifkan jika tidak ingin ditampilkan pada halaman
Beranda, nonaktifkan melalui Layout Setting (telah dijelaskan sebelumnya)

4.1.7 Testimonial
Tema Compro menyediakan fitur testimonial yang dapat digunakan untuk menampilkan
berbagai pendapat, masukan, penilaian dari klien atau pengguna layanan.

Bagian Testimonial juga menggunakan effek Parallax, untuk pengaturan background

parallax bisa di ganti melalui pengaturan Layout Setting dan pewarnaan bisa dilakukan
melalui halaman Custom Color

Sisi kiri digunakan untuk menampilkan Heading, Deskripsi dan Tombol menuju halaman
lengkap Testimonial. Sementara sisi kanan digunakan untuk menampilkan beberapa
daftar testimoni terakhir yang diberikan dan tampil dalam format Slide

Heading, Deskripsi, dan Tombol dapat di ruabh melalui pengaturan Replace Text dan
pewarnaan dapat diurbah melalui Custom Color. Background parallax dapat diganti
melalui Layout Setting.

Untuk menambahkan konten Testimonial, silahkan ditambahkan melalui

Dasbor > Testimonial > Tambah Testimoni

Yang perlu ditambahkan dalam pos Testimoni adalah sebagai berikut

- Judul Testimoni
Bagian judul diisi dengan nama (orang) pemberi testimoni
- Isi Testimoni
Tambahkan isi testimoni

- Data Testimoni
Tambahkan data pemberi testimoni berupa Nama, Profesi, Asal Kota, Rating
- Gambar Unggulan
Upload gambar foto pemberi Testimoni berukuran 200x200 pixel (foto berukuran
kotak)

INFO : Bagian ini bisa juga di nonaktifkan jika tidak ingin ditampilkan pada halaman
Beranda, nonaktifkan melalui Layout Setting (telah dijelaskan sebelumnya)

4.1.8 Pricing
Fitur berikutnya adalah Pricing Table, digunakan untuk menampilkan info harga dari
layanan, harga menu, harga produk, dan sebagainya.

Pricing terbagi menjadi 2 bagian yaitu bagian atas berisi Heading dan Deskripsi dan
bagian bawah berisi Pricing Table
Heading dan Deskripsi dapat dirubah melalui Replace Text dan pewarnaan dapat
dirubah melalui Custom Color.

Untuk menambahkan Pricing Table, dilakukan melalui halaman

Dasbor > Pricing > Tambah Pricing

Berikut adalah bagian-bagian yang perlu diisi dalam pengelolaan Pricing

- Judul / Nama Paket

Berikan nama untuk paket yang ditawarkan
- Informasi Harga
Lengkapi detail harga, sudah disediakan diatas masing-masing kolom untuk isian
yang benar.
- MATA UANG : silahkan diisi dengan Rp untuk Rupiah atau $ untuk Dollar
- HARGA PAKET : contoh 450.000 cukup tulis 450 atau 1.700.000 ditulis 1.7
 - SATUAN HARGA : satuan harga rb untuk ribuan atau jt untuk jutaan
- BULANAN / TAHUNAN : paket dihitung berdasar bulan (bln) atau tahun (thn)
- Detail Paket
Tuliskan daftar apa saja yang ditawarkan atau didapatkan oleh pembeli dengan
paket yang ditawarkan

INFO : Bagian ini bisa juga di nonaktifkan jika tidak ingin ditampilkan pada halaman
Beranda, nonaktifkan melalui Layout Setting (telah dijelaskan sebelumnya)

4.1.9 Call Us / Call Action

Bagian ini digunakan untuk mengarahkan pengunjung untuk melakukan Action, bisa
untuk diarahkan ke link order, atau bisa diarahkan untuk menghubungi nomer Telepon
atau pesan Whatsapp.

Terdiri dari Heading dan Tombol Link, text dapat di rubag melalui pengaturan Replace
Text dan pewarnaan dapat dirubah melalui pengaturan Custom Color.

INFO : Bagian ini bisa juga di nonaktifkan jika tidak ingin ditampilkan pada halaman
Beranda, nonaktifkan melalui Layout Setting (telah dijelaskan sebelumnya)

4.1.10 Call Us / Call Action

Dapat digunakan untuk menampilkan daftar anggota Team, berisi biodata umum seperti
kontan telepon dan email serta social media.
Ditampilkan dalam slide dengan jumlah maksimal 8, dan data ditampilkan secara
random / acak. Untuk menambahkan data baru dilakukan melalui

Dasbor > Team Work > Tambahkan Data

INFO : Bagian ini bisa juga di nonaktifkan jika tidak ingin ditampilkan pada halaman
Beranda, nonaktifkan melalui Layout Setting (telah dijelaskan sebelumnya)

4.1.11 Partner
Bagian ini digunakan untuk menampilkan daftar partner. Menampilkan logo dan link
menuju ke website partner.

Untuk menambahkan partner baru, dilakukan melalui

Dasbor > Partner > Tambahkan Data

INFO : Bagian ini bisa juga di nonaktifkan jika tidak ingin ditampilkan pada halaman
Beranda, nonaktifkan melalui Layout Setting (telah dijelaskan sebelumnya)

4.1.12 Google Maps

Bagian ini digunakan untuk menampilkan titik lokasi di Google Maps, yang diperlukan
untuk menampilkan Maps adalah titik koordinat lokasi dan API Key. Keduanya wajib diisi
dan tidak boleh dikosongkan.
Pengaturan untuk pengisian titik koordinat dan API Key ada pada pengaturan Company
Profile (telah dijelaskan sebelumnya)

Untuk petunjuk mendapatkan koordinat lokasi di Google Maps silahkan kunjungi link
berikut http://imstilllearn.com/cara-mendapatkan-titik-koordinate-maps/

Untuk membuat API Key silahkan menuju ke halaman Google Developer dan masuk
dengan akun Google / Gmail https://developers.google.com/maps/web/

Gambar default marker (gambar penanda lokasi) dapat diubah dengan gambar sendiri
melalui Layout Setting. Syaratnya gambar harus dalam format png (gambar transparan)
dengan ukuran kotak 1 : 1 misalnya 64x64 pixel.

Tinggi tampilan Maps dapat di rubah sesuai keinginan, dan perbesaran Maps juga dapat
diatur melalui Layout Setting
INFO : Bagian ini bisa juga di nonaktifkan jika tidak ingin ditampilkan pada halaman
Beranda, nonaktifkan melalui Layout Setting (telah dijelaskan sebelumnya)

4.2 HALAMAN KONTAK

Seperti halnya halaman Beranda, halaman Kontak juga menggunakan Templat Laman
khusus untuk menampilkan info kontak.
Data yang ditampilkan pada halaman Kontak adalah Google Maps dan informasi umum
yang ditambahkan melalui pengaturan Company Profile (telah dibahas sebelumnya)

Jika Anda menginstal dummy konten, maka di dalamnya sudah ada sebuah halaman
yang digunakan untuk menampilkan info kotak lengkap. Tetapi Admin juga dapat
membuat sendiri halaman kontak yang diinginkan, berikut ini adalah

Dasbor > Laman > Tambah Baru

Buat sebuah Laman baru misalkan dengan judul Hubungi Kami, lalu pada bagian Attribut
Laman pilih template Tema Kontak.
4.3 PENGELOLAAN MENU
Tema Compro menyediakan 3 slot Menu yang ditampilkan pada bagian Header, ketiga
menu tersebut ditampilan pada lokasi yang berbeda.

- Menu Navigasi
Menu ini akan tampil jika menggunakan Header tipe 1, 3, dan 4
- Left Menu Header Style 2
Menu ini tampil jika menggunakan Header tipe 2
- Left Right Header Style 2
Menu ini tampil jika menggunakan Header tipe 2

Untuk mengelola Menu, dilakukan melalui

Dasbor > Tampilan > Menu

Jika Anda menginstal dummy konten, hasilnya sudah ada grup menu yang otomatis
terbentuk. Pengelolaan menu pada WordPress tampilannya seperti pada gambar
dibawah ini

Pada gambar diatas, berikut ini adalah keterangannya

Kotak merah besar sebelah kiri adalah komponen yang bisa ditambahkan ke dalam
menu, cukup centang pada yang ingin ditambahkan (dapat ambil dari Laman, Pos/
About / Work, dll) lalu klik pada tombol Tambahkan ke Menu

Setelah tombol di klik maka akan otomatis muncul di kotak bertanda merah di sebelah
kanan. Secara default semua bagian menu akan sejajar, dalam gambar diatas terlihat
tidak sejajar adalah jika kita ingin membuat sebagai sub-menu. Cukup drag dan drop
pada menu yang ingin di geser dan akan tampak seperti gambar diatas.

Kotak merah di bagian kanan bawah adalah pilihan lokasi, dimana kumpulan Menu
teresebut akan ditampilkan. Dalam gambar di centang pada Navigasi, artinya Menu
tersebut akan ditampilkan pada lokasi Navigasi (muncul pada Header tipe 1,3, dan 4)

4.4 PENGELOLAAN AFTER HEADER

Bagian ini digunakan untuk mengatur bagian setelah header, bagian setelah Header dan
sebelum konten adalah sebuah kotak kosong yang dapat di isi dengan sebuah gambar.
Gambar background dapat di ganti melalui Layout Setting dan pewarnaan dapat diganti
melalui Custom Color.