Membuat Website WordPress Pro

Pada panduan ini kita akan membuat website Pro dengan menggunakan tema Esteem Pro, kamu harus berlangganan Website Pro atau Nama Domain di DaunTal untuk menggunakan tema Esteem Pro.

Mengganti Tema

Setiap website yang baru dibuat di DaunTal menggunakan tema Twenty Seventeen. Kamu dapat mengganti tema melalui menu “Tampilan > Tema”.

Arahkan kursor mouse ke Esteem Pro kemudian tekan tombol “Aktifkan”. Kamu bisa lihat tampilan awal tema Esteem Pro seperti berikut:

Fitur Sesuaikan

WordPress menyediakan fitur “Sesuaikan” yang digunakan untuk kustomisasi tampilan website WordPress secara langsung yang disertai dengan pratinjau sehingga setiap setting yang diubah dapat dilihat langsung.

Fitur Sesuaikan dapat digunakan dari menu “Tampilan > Sesuaikan.” Berikut tampilan fitur Sesuaikan:

Fitur Sesuaikan (klik untuk memperbesar gambar)

Berikut bagian-bagian:

  1. Tema Aktif, kamu bisa ubah tema langsung dengan menekan tombol “Ubah”
  2. Menu, menu untuk mengubah setting tema aktif.
  3. Layar Device, kamu bisa menyesuaikan bentuk website sesuai dengan device di antaranya desktop, tablet dan ponsel
  4. Pratinjau, bentuk tampilan yang berubah secara langsung.

Design Website

Pengaturan design website dapat di lakukan dari menu “Design” yang ada pada fitur Sesuaikan.

Di dalam menu “Design” terdapat submenu untuk mengatur bentuk design website. Kita akan menggunakan beberapa submenu sesuai kebutuhan design website.

Di submenu “Disable site responsiveness”, kamu bisa memutuskan apakah website yang kamu buat responsif terhadap device tertentu (seperti desktop, tablet atau ponsel) atau tidak.

Beri tanda jika kamu ingin design website tidak responsif, artinya ketika website dilihat di perangkat kecil seperti ponsel, maka tampilan akan sama seperti di desktop.

Selanjutnya, pilih layout situs pada submenu “Site Layout”, apakah mau berbentuk Boxed (terlihat kotak) atau tampilan Wide yang artinya tampilan website menempel pada sisi-sisi layar.

Pilih warna utama website yang kamu inginkan di submenu “Primary color option”. Jika sudah selesai, kurang lebih design akan seperti gambar di bawah ini:

Header Website

Bagian header website berada di paling atas tampilan website. Di sini terdapat judul situs, logo situs, menu dan informasi-informasi yang dapat dimunculkan di bagian atas website.

Di fitur Sesuaikan, pilih menu Header. Di dalam menu ini terdiri dari beberapa submenu, di antaranya untuk mengatur logo, judul situs, top bar, dan kotak promo.

Memasukkan Logo

Logo situs bisa dimasukkan dari submenu “Header Logo”.

Disarankan tinggi logo tidak lebih dari 60px dengan format png transparan.

Logo situs dapat dimunculkan di website melalui pengaturan dari submenu “Show”.

Di sini, kamu bisa mengatur apakah hanya menampilkan logo saja, dengan teks judul atau keduanya.

Menampilkan Info di Top Bar

Kamu dapat memasukkan informasi di bagian paling atas dari header yang disebut Top Bar. Isi informasi tersebut dapat berupa nomor telepon / ponsel / WA, alamat atau informasi lainnya.

Pilih submenu “Activate Header Top Bar”, beri tanda cek untuk menampilkan informasi di Top Bar.

Informasi yang akan dimunculkan di Top Bar dapat dimasukkan melalui submenu “Header Info Text”.

Menampilkan Media Sosial di Top Bar

Jika kamu mempunyai akun media sosial seperti Facebook atau Instagram, kamu bisa tampilkan akun-akun tersebut di Top Bar Header.

Pilih menu “Social Links” di fitur Sesuaikan, di dalam menu ini terdapat submenu untuk pengaturan akun-akun media sosial yang dapat ditampilkan di website.

Aktifkan fitur ini dari submenu “Activate social links area”, dan beri tanda untuk memunculkan akun-akun media sosial kamu.

Masukkan link / url media sosial yang kamu punya di setiap submenu, misalkan di submenu Facebook berisikan link http://www.facebook.com/dauntal.

Masukkan akun media sosial lainnya di setiap submenu yang ada, misalkan untuk twitter http://twitter.com/dauntal atau Instagram http://www.instagram.com/dauntal

Promo Box

Jika kamu punya laman web yang digunakan untuk promosi, kamu bisa memasukkan promosi tersebut ke dalam Promo Box yang terletak di bawah header.

Di dalam menu Header, terdapat 4 submenu untuk mengatur Promo Box, di antaranya:

  1. Promo box primary slogan: masukkan kata-kata singkat dan menarik untuk promosi kamu.
  2. Promo box secondary slogan: di sini kamu bisa menambahkan kata-kata penjelasan singkat dari kata-kata promosi di atas
  3. Button text: teks yang muncul di tombol, misalkan “Kunjungi” atau “Daftar Sekarang”
  4. Button redirect link: link halaman promosi yang dituju ketika tombol diklik.

Sampai di sini, kamu bisa melihat pratinjau tampilan header di berbagai perangkat, baik itu desktop, tablet atau ponsel.

Pratinjau Header di Perangkat Desktop
Pratinjau Header di Perangkat: 1. Tablet dan 2. Ponsel

Klik “Terbitkan” untuk menerapkan penyesuaian bentuk tema website yang telah kamu lakukan.

Membuat Laman Web

Laman web berisikan informasi-informasi website kamu, di antaranya beranda / homepage sebagai tempat yang pertama kali dilihat ketika mengunjungi website, laman produk untuk memberikan informasi tentang produk atau layanan, laman kontak berisikan informasi kontak yang dapat dihubungi dan lain sebagainya. Untuk contoh, kita akan membuat laman beranda dan produk.

Kembali ke Dasbor WordPress, pilih menu “Laman > Tambah Baru”. Kamu akan dihadapkan pada editor laman, masukkan judul “Beranda” atau “Depan” atau “Home” atau judul lainnya yang dapat mengidentifikasi bahwa laman tersebut adalah laman yang pertama kali dilihat ketika pengunjungi mendatangi website kamu.

Biarkan isi laman kosong, dan pilih opsi Templat adalah “Business Template”. Klik tombol “Terbitkan”.

Buat laman baru lagi untuk membuat laman tentang produk. Masukkan judul misalkan “Produk” atau “Layanan” atau lainnya. Kali ini isikan laman di editor yang tersedia, kamu bisa memasukkan media gambar atau video atau menyisipkan video dari youtube. Untuk pilihan Templat, biarkan menggunakan “Templat bawaan”.

Laman yang telah diterbitkan akan tersimpan di website kamu dan dapat dikelola melalui menu “Laman > Semua Laman”.

Di sini kamu bisa mengedit, menghapus atau menampilkan laman yang telah dibuat. Untuk percobaan, kamu dapat “Buang” laman “Sample Page” yang dibuat otomatis oleh sistem.

Menambahkan Menu

Setelah laman-laman web sudah dibuat, sekarang membuat menu untuk navigasi pengunjung ke laman-laman tersebut. Dari Dasbor, pilih menu “Tampilan > Menu”, masukkan nama menu pada kontak input “Nama Menu”.

Masukkan laman-laman yang ingin ditampilkan sebagai item menu. Untuk catatan, selain laman, kamu juga bisa memasukkan pos, link/tautan atau kategori ke dalam item menu. Klik tombol “Buat Menu” jika semua telah selesai.

Terakhir di pengaturan menu adalah mencentang Primary Menu di kotak cek “Lokasi Penayangan” agar menu yang telah dibuat sebelumnya dimunculkan di bagian Header.

Klik tombol “Simpan Menu” untuk menerapkan perubahan yang dilakukan.

Pengaturan Widget

Bentuk tampilan  website dibagi-bagi menjadi blok-blok yang mempunyai fungsi spesifik yang dinamakan widget. Contohnya di sebelah kanan website (dinamakan sidebar) terdapat widget untuk menampilkan tulisan-tulisan terakhir (latest posts), komentar terakhir, kotak pencarian dan lain sebagainya.

Widget dapat diatur melalui menu “Tampilan > Widget”. Di dalam pengaturan widget, ada dua bagian, di sebelah kiri widget yang tersedia untuk dipakai di website dan sebelah kanan widget yang akan ditampilkan di website.

Pengaturan Widget di Admin

Pilih widget yang tersedia di sebelah kiri, lalu seret dan letakkan (drag and drop) di sisi sebelah kanan yang diinginkan. Cara lain bisa dengan memilih widget yang diinginkan lalu pilih mau diletakkan di tampilan bagian mana dan klik tombol “Tambahkan Widget”. Misalkan widget “Awan Tag” ingin di letakkan di bagian “Right Sidebar (sisi kanan website)”.

Setiap widget mempunyai pengaturan spesifik, kamu dapat atur sedemikian rupa sesuai dengan bentuk yang kamu inginkan. Simpan pengaturan widget atau buang jika kamu ingin menghilangkan dari website. Setelah selesai, kamu dapat melihat bentuk widget yang muncul di website.

Design Laman Beranda / Homepage

Sebelumnya kita telah membuat sebuah laman dengan judul Beranda yang akan digunakan sebagai beranda / homepage. Kita juga membiarkan isi dari laman tersebut kosong karena isi dari laman tersebut adalah widget-widget di Business Page Sidebar.

Pilih menu “Pengaturan > Membaca” dan pilih opsi “Halaman Statis” pada “Tampilan beranda Anda”. Selanjutnya pilih laman “Beranda” pada pilihan “Beranda”.

Menambahkan Widget Services

Di dalam widget Services, terdapat 3 kolom yang menampilkan laman produk / layanan dengan tampilan sebagai berikut:

Buat 3 laman baru dari menu “Laman > Tambah Baru”. Masukan judul dan isikan laman dengan informasi produk. Pilih Laman “Produk” di pilihan “Induk” pada kotak “Atribut Laman”, kemudian pilih Gambar Unggulan yang nantinya akan dimunculkan di beranda.

Laman untuk Widget Services (klik untuk memperbesar)

Isikan deskripsi ringkas di kotak “Kutipan”, deskripsi ini yang akan dimunculkan di beranda. Jika di editor tidak ada kotak kutipan, klik “Opsi Layar” yang ada di kanan atas dan beri tanda cek “Kutipan”.

Setelah semua laman untuk widget Services telah selesai, kembali ke pengaturan Widget dari menu “Tampilan > Widget”.

  1. Pilih widget “PRO: Services” dan tambahkan ke “Business Page Sidebar”.
  2. Lalu atur agar Gambar Unggulan dapat ditampilkan (display the Featured Image) dan pilih laman-laman yang sebelumnya telah dibuat.

Menambahkan Widget “Call to Action”

Setelah layanan-layanan telah dimasukkan ke beranda website, kini masukkan bagian lain ke dalamnya. Bagian selanjutnya adalah memasukkan “Call to Action” yang dapat digunakan oleh pengguna untuk melakukan sesuatu saat mengunjungi website kamu. Action / Tindakan tersebut dapat berupa ke laman tertentu seperti kontak, mendaftar dan lain sebagainya.


Masukkan widget “PRO: Call to Action” ke dalam “Business Page Sidebar”, letakkan di bawah widget “PRO: Services”.  Masukkan kata-kata menarik dan singkat di kolom “Call to Action Main Text” dan masukkan deskripsinya di “Call to Action Addition Text”.

Kemudian masukkan kata yang ingin dimunculkan di kolom “Daftar” dan masukkan link yang dituju ketika tombol tersebut diklik atau disentuh di kolom “Button Redirect Link”. Link dapat berupa halaman yang telah dibuat di Laman Website atau bisa menuju ke alamat website lainnya.

Simpan pengaturan di atas, dan widget “Call to Action” akan terlihat seperti di bawah ini:

Menambahkan Widget-widget Lain

Tema Pro menyertakan banyak widget yang dapat dimasukkan ke dalam beranda. Kamu bisa bereksplorasi menggunakan dan mengatur sedemikian rupa sehingga tampilan website menjadi menarik.

Contohnya widget “PRO: Featured Posts” yang diatur untuk menampilkan Pos / Tulisan terbaru [1] dan akan muncul di beranda [2]:

Footer Website

Footer berada di bagian paling bawah website. Di sini terdiri dari 2 bagian, baris widget yang terbagi menjadi 3 kolom dan informasi copyright di baris bawah.

Widget Footer

Terdapat 3 widget untuk footer, yaitu Footer Sidebar One, Footer Sidebar Two dan Footer Sidebar Three. Masing-masing bagian dapat diisi widget sesuai dengan kebutuhan, misalkan informasi “Tentang Kami” berada di kolom pertama dengan menambahkan widget “Teks”.

Untuk kolom kedua bisa berisikan menu, misalkan menu “Layanan”. Pertama buat menu baru dari “Tampilan > Menu”, kemudian pilih “buat menu baru”. Masukkan nama menu “Layanan” dan atur struktur menu sesuai dengan kebutuhan.

Setelah menu disimpan, tambahkan widget “Menu Navigasi” ke “Footer Sidebar Two”, beri judul “Layanan” dan pillih menu “Layanan”.

Silahkan isikan kolom ketiga dengan informasi lainnya seperti alamat atau tambahkan widget-widget lain di setiap kolom.

Informasi Copyright

Informasi copyright yang berada di paling bawah website dapat diatur dari fitur Sesuaikan, kemudian pilih menu “Additional > Footer Copyright Editor” dan masukkan konten pada editor yang disediakan.