babastudio.com 1. Jurus Dasar Membuat Website Tips and Trick cepat bagaiman cara membangun website 2. Instalasi Kilat Wordpress

Transkripsi

1

2 Table of Contents 1. Jurus Dasar Membuat Website Tips and Trick cepat bagaiman cara membangun website 1.1 Pengenalan Domain dan Hosting 1.2 Membeli Domain dan Hosting 1.3 Memilih paket hosting 1.4 Checkout Domain dan Hosting 2. Instalasi Kilat Wordpress Tips and Trick cepat bagaiman cara membangun website 2.1 Akses Cpanel Domain 2.2 Mulai Instalasi Wordpress Mengenal Theme DIVI Mengenal tentang theme wordpress dan Theme DIVI 3.1 Mengenal tentang Theme Wordpress Wordpress-theme.asia Theme Forest / Envato Market Elegant Themes 3.2 Mengenal Theme DIVI Drag and Drop Page Builder Module System Instalasi Theme DIVI Menggunakan Layout Instan Predefined Layouts Add Layout From Library 3.6 Export / Import Layout 4. Menguasai Modul dalam DIVI Memahami Module yang disediakan oleh DIVI Pengenalan tentang Module pada DIVI 4.2 Accordion Module 4.3 Audio Player Module 4.4 Bar Counters 4.5 Blog 4.6 Blurb Module 4.7 Button Module 4.8 Call to Action Module 4.9 Circle Counter Module 4.10 Code Module 4.10 Comments Module 4.11 Contact Form Module

3 4.12 Countdown Timer Module Divider Optin Filterable Portfolio Filterable Portfolio Image Number Counter Person Portfolio Post Navigation Post Slider Post Title Pricing Table Search Shop Sidebar Slider Social Media Follow Tabs Testimonial Text Toggle Video Video Slider Memahami Kerangka Website Pemahaman tentang bagaimana website yang bagus dibuat 5.1 Langkah Dasar dalam membuat Website 5.2 Cara Cepat Merancang Konsep Website 5.3 Memahami dan belajar membuat Pages 5.4 Masukkan semua karya dan project 5.5 Tulis Blog sebanyak mungkin 5.6 Mengatur Menu 5.7 Mengenal Theme Customizer 5.8 Upload Logo 5.9 Atur Header Website

4 1. Jurus Dasar Membuat Website Tips and Trick cepat bagaiman cara membangun website 1.1 Pengenalan Domain dan Hosting Dalam membuat website, terdapat dua hal yang perlu dikenal, yaitu Domain dan Hosting. Hosting Domain Pengertian dari Domain sendiri yaitu alamat ibarat seperti alamat rumah yang dituju, sedangkan Hosting merupakan tempat penyimpanan nya, layaknya sebuah rumah yang memiliki tanah sebagai tempat dimana rumah tersebut disimpan. 1.2 Membeli Domain dan Hosting Tedapat banyak sekali website yang melayani pembelian Domain dan Hosting, juga bisa dibeli secara terpisah dari satu website dengan website yang lain. Pada tutorial berikut akan diberikan step by step dalam pembelian Domain dan Hosting pada Rumahweb.com Gambar 1.1 Homepage dari Rumahweb.com 1

5 Terdapat beberapa fitur yang dapat dimanfaatkan pada home Rumahweb.com seperti pada gambar sebelumnya. Terutama fitur untuk melakukan pengecekan Domain, untuk memastikan Domain yang akan dibeli masih tersedia/belum dibeli oleh orang lain, isikan nama Domain yang diinginkan, lalu pilih domain yang ingin dibuat seperti.com,.id dan yang lainnya. lalu klik button cek. Note: Pada tutorial kali ini tertulis arkhastudio.com sebagai sample, untuk prakteknya gunakan nama Domain yang diinginkan, Akan muncul popup sebagai berikut: Gambar 1.2 Pop up cek domain Tampilan pop up berikut menandakan domain yang dipesan tersedia dan belum dibeli, untuk memulai pemesanan bisa melalui pop up berikut, dengan memilih pembelian domain dan hosting, maupun hanya memesan domain saja. klik tombol pesan. 1.3 Memilih paket hosting Pada Halaman berikutnya terdapat list dari paket hosting yang disediakan oleh rumahweb.com, dapat terlihat Personal Hosting, Profesional Hosting, maupun Enterprise Hosting, minimum untuk kebutuhan blog sektiar 100MB apabila tidak terdapat video di dalamnya. Pilih salah satu paket yang dibutuhkan sesuai dengan spesifikasi yang tersedia disana. klik pada tombol pilih pada kolom Paket yang diinginkan. Gambar 1.3 Paket Domain dan Hosting yang tersedia 2

6 Setelah mengklik pesan, akan muncul step by step pembelian seperti pada popup berikut: Centang pada pilihan pertama untuk mendaftarkan Domain baru untuk paket hosting tersebut. Masukkan Nama Domain yang ingin didaftarkan, klik cek domain Apabila Domain tersebut available, akan muncul pilihan sesuai dengan TLD yang dibutuhkan dengan tampilan berikut, klik pesan untuk melanjutkan Beirkutnya adalah rincian dari pembelian domain dengan nama domain tersebut, gunakan dropdown untuk memilih berapa lama domain tersebut akan disewa, centang pada privacy protection, lalu klik Lanjutkan. 3

7 muncul tampilan rincian dari pembelian yang telah dilakukan. Untuk periode pembayaran isi dengan periode dan jumlah tagihan yang diinginkan, sesuaikan dengan kebutuhan dari domain dan hosting, lalu lokasi server untuk meletakkan file sesuai dengan server di daerah tersebut, apabila website yang dibuat dirasa untuk konsumsi lokal / indonesia, disarankan website tersebut diletakkan pada server IIX (Indonesia) dan sebaliknya. Klik lanjutkan 1.4 Checkout Domain dan Hosting Pada page berikut memunculkan layanan yang ditawarkan oleh rumahweb.com, apabila merasa dibutuhkan klik pesan dengan harga yang tertera, klik lanjutkan jika tidak ingin menambahkan layanan tersebut. Berikut adalah tampilan Order Summary, menunjukkan semua detail dari pembelian domain dan hosting yang telah dibuat. Apabila informasi sudah mencukupi dan benar sesuai dengan yang diinginkan, klik tombol check out berwarna merah di kanan atas, isi promotional coupon apabila memiliki coupon special dari rumahweb.com untuk diskon. 4

8 Langkah berikutnya adalah login user, untuk melakukan pembelian user diharuskan untuk mendaftar /login terlebih dahulu, apabila belum pernah mendaftar sebelumnya, klik pada button Buat Akun Baru. Isi pada form isian berikut, apabila berhasil akan dikirimkan link aktivasi pada yang didaftarkan. lalu lakukan login dan melanjutkan proses pembayaran. Berikut adalah total tagihan dari pembelian hosting dan domain, pilih salah satu metode pembayaran diatas sesuai dengan kebutuhan. lalu klik lanjutkan pembayaran untuk membayar Domain dan Hosting yang dibeli. Apabila pembelian telah berhasil dilakukan akan muncul verifikasi pembayaran dan aktivasi domain dan hosting, lalu lakukan login ke dalam rumahweb.com dan cek apakah domain dan hosting sudah dapat di akses. 5

9 2. Instalasi Kilat Wordpress Tips and Trick cepat bagaiman cara membangun website 2.1 Akses Cpanel Domain Setelah melakukan step by step pembelian Website dan Domain, berikut adalah cara mengakses cpanel, ketik nama domain lalu tambahkan /cpanel dibelakangnya seperti yourdomainname.com/cpanel tesdomainname.com/cpanel login ke dalam cpanel menggunakan credential yang sudah disediakan pada halaman member rumahweb.com, berikutnya akan muncul tampilan homepage dari cpanel. 6

10 2.2 Mulai Instalasi Wordpress Pada halaman dashboard cpanel, scroll ke tab software,pada tutorial ini menggunakan softaculous Apps Installer icon softaculous Apps Installer lalu klik icon tersebut. Note: untuk beberapa cpanel menggunakan apps installer yang berbeda-beda seperti softaculous maupun quick Installer, pada dasarnya fungsi kurang lebih sama dengan perbedaan minor pada step by step nya saja. Berikut merupakan tampilan dari softaculous, terdapat banyak sekali aplikasi yang dapat di install oleh softaculous, untuk sekarang pilih Wordpress. Diatas merupakan tampilan dari Instalasi Wordpress lengkap dengan penjelasan detail mengenai Wordpress dan juga fitur-fitur yang dimiliki, klik Install Now 7

11 Isi Form seperti pada tampilan dibawah sesuai dengan informasi yang dibutuhkan. Pada isian Software Setup pilih domain yang sudah dibeli dan biarkan kosong pada in Directory Site settings, untuk nama site isi dengan judul dari website yang diinginkan, site description untuk deskripsi judul website tersebut kosongkan Enable Multisite Untuk menentukan akses wordpress isi Admin Username dan Admin Password juga sertakan untuk mendaftarkan id tersebut Pilih bahasa wordpress yang diinginkan abaikan Setting lainnya, Terakhir Klik Install 8

12 Isi Form seperti pada tampilan dibawah sesuai dengan informasi yang dibutuhkan. Pada isian Software Setup pilih domain yang sudah dibeli dan biarkan kosong pada in Directory Site settings, untuk nama site isi dengan judul dari website yang diinginkan, site description untuk deskripsi judul website tersebut kosongkan Enable Multisite Untuk menentukan akses wordpress isi Admin Username dan Admin Password juga untuk admin tersebut Pilih bahasa wordpress yang diinginkan abaikan Setting lainnya, Terakhir Klik Install Proses instalasi dilakukan otomatis oleh sistem 9

13 Sekarang wordpress telah dibuat dan siap untuk mulai dilakukan Customizing 10

14 3. Mengenal Theme DIVI Mengenal tentang theme wordpress dan Theme DIVI 3.1 Mengenal tentang Theme Wordpress Tampilan visual dari website merupakan hal yang wajib untuk diperhatikan, tanpa harus memahami banyak sekali ilmu tentang merubah tampilan website secara code, cukup dengan menggunakan Theme yang banyak tersedia di internet. Terdapat beberapa Website penyedia Theme yang disarankan untuk tutorial kali ini, yaitu: Wordpress-theme.asia Pada Wordpress-theme.asia memliki banyak sekali variasi theme berbayar yang sangat menarik serta elegan, memberikan pengalaman langsung tentang tampilan visual dari theme yang diinginkan, klik pada menu koleksi untuk mengakses list Theme yang dimiliki oleh wordpress-theme.asia. 11

15 Berikut adalah tampilan dari koleksi themes yang dimiliki oleh wordpress-theme.asia, scroll ke bawah untuk melihat list lengkapnya. Terlihat nama dan thumbnail dari tampilan Theme tersebut, klik sesuai dengan tampilan theme yang ingin dilihat. Berikut merupakan tampilan detail theme yang telah dipilih,apabila ingin melihat preview dari theme tersebut, klik tombol demo script, jika ingin melakukan pembelian/download theme klik pada button download 12

16 Terlihat theme diaplikasikan pada sebuah website dummy untuk memperlihatkan tampilan visual yang diberikan oleh theme tersebut, pastikan tampilan dari layout, color scheme semua sesuai dengan apa yang diharapkan Apabila tampilan telah sesuai dengan yang diinginkan, kembali pada halaman detail theme dan tekan tombol download, untuk wordpress-theme.asia, theme yang ditawarkan berbayar dan untuk melakukan download selain melakukan pembayaran menggunakna kartu kredit, juga diharuskan untuk melakukan login terlebih dahulu. Step yang diambil adalah : - Pendaftaran - Login - Pilih Payment Method ( kartu kredit ) Apabila semua step sudah dilakukan dan pembayaran sudah berhasil, Link Download akan dikirim oleh Wordpress-theme.asia ke berupa (.zip) File. 13

17 3.1.2 Theme Forest / Envato Market Website penyedia theme berikutnya adalah Theme Forest / Envato Market, website yang berbasis di luar negeri ini menawarkan banyak sekali variasi dan envato market sendiri merupakan portal dari berbagai macam provider theme baik itu untuk wordpress maupun untuk builder yang lain, jika ingin mempelajari lebih banyak themes, envato market menawarkan pilihan yang sangat beragam dan sangat banyak untuk dicari. Theme berkembang sangat cepat, banyak sekali pilihan yang diberikan dan cenderung membuat pemula menjadi bingung untuk melihatnya, untuk mempermudah, klik pada tombol Browse Popular Item untuk melihat Themes apa yang sedang populer saat ini. Terlihat tulisan Updated Weekly, dimana pada Code Forest mengupdate theme secara mingguan untuk theme yang paling sering di akses dan sering di download, terlihat pada box pilihannya, mulai dari nama, jumlah download ( sales ) pada sisi kiri bawah dan juga harga di sisi kanan bawah ( dalam dollar ) klik salah satu dari theme tersebut untuk melihat detailnya. 14

18 Seperti pada tampilan diatas, memperlihatkan detail dari theme itu sendiri, klik pada gambar di kiri untuk melihat live preview dari website yang mengaplikasikan theme tersebut, themeforest menawarkan sistem cart apabila ingin melakukan pembelian lebih dari satu theme, jika tidak, cukup klik pada buy now dan akan dilanjutkan ke proses pembayaran, Themeforest menggunakan Kartu Kredit, Paypal, juga bisa menggunakan Envato Credit yang sudah dimilki pada website Envato Market Elegant Themes Untuk pengenalan terakhir, theme didapat dari elegant themes, dimana DIVI merupakan theme andalan yang ditawarkan oleh elegantthemes.com Klik pada View Our Themes untuk melihat Theme yang ditawarkan oleh elegantthemes.com 15

19 Pada Page berikutnya terdapat beberapa penjelasan tentang DIVI Theme, dan semakin kebawah menampilkan gallery Themes yang bisa didapatkan dari Elegant Themes, klik pada salah satu theme untuk melihat detailnya. Untuk tampilan detail, terlihat jelas beberapa fitur dan tampilan yang disediakan oleh theme yang sudah dipilih, secara visual menjelaskan tentang semua kelebihan serta fitur yang ditawarkan sehingga akan memudahkan untuk mengambil keputusan tentang theme mana yang sebaiknya dipilih. Klik Live Theme Demo untuk melihat praktek langsung Theme tersebut, atau jika sudah dirasa memuaskan, klik Join to Download untuk memulai proses pendaftaran dan pembayaran untuk theme tersebut. elegantthemes menawarkan sistem pembayaran sekali untuk semua themes, jadi themes yang digunakan tidak terbatas, yang membedakan adalah plugin,photoshop files, dan pembayaran dilakukan sekali,atau langganan per tahun dengan harga yang bisa dibilang terjangkau dengan tampilan yang sangat elegan. 16

20 3.2 Mengenal Theme DIVI Terdapat beberapa hal yang menjadikan theme DIVI dari elegant themes berbeda, selain tampilan yang diberikan sangatlah elegan, bersih, mudah untuk dipahami dan menawarkan tampilan yang sleek dan tidak membuat visitor merasa terganggu dengan adanya animasi maupun gerakan-gerakan yang terjadi pada website tersebut Drag and Drop Page Builder DIVI menawarkan sistem drag and drop dalam menciptakan website, sehingga tanpa harus mengerti coding website pun seseorang mampu membuat tampilan website yang elegan dan rapih dengan sangat mudah. 17

21 3.2.2 Module System Selain drag and drop untuk element page, DIVI Page Builder menawarkan sistem module yang sangat beragam fungsinya, module aplikatif, tepat guna, dan dengan tampilan yang elegan dan bersih, serta UX yang mudah untuk dipahami oleh visitor website manapun. Berbagai macam kelebihan DIVI yang masih bisa dibahas akan tetapi dua fungsi DIVI yang telah dibahas merupakan fungsi utama mengapa DIVI memberikan solusi pembuatan Website yang amat sangat mudah namun memberikan tampilan yang sangat cantik, bersih, elegan, dan mampu membuat website disukai dan di akses oleh banyak orang. 18

22 3.3 Instalasi Theme DIVI Langkah pertama untuk memulai instalasi DIVI Themes adalah dengan mendownload Theme tersebut apabila sudah selesai melakukan pendaftaran dan Pembayaran sesuai dengan step sebelumnya, lalu pada dashboard Wordpress yang telah di install, klik pada Menu Appearance, dan klik pada Themes seperti gambar di atas 19

23 Akan muncul tampilan seperti diatas, dimana list theme yang ada disini adalah Theme bawaan dari Wordpress yang bisa diartikan sebagai theme gratisan dengan tampilan minimalis dan seadanya, klik tombol add new disamping tulisan Themes untuk menambahkan Theme baru. Pada lokasi yang sama, klik Upload Theme untuk mengupload file (.zip) theme DIVI yang sudah di download, di upload ke dalam wordpress Tampilan dibawah akan ter-expand dan muncul box seperti di gambar berikut, klik choose file dan pilih file DIVI (.zip) yang ingin di upload lalu klik Intsall Now Akses lagi pada Appearance > Theme untuk melihat Theme yang sudah di install, arahkan mouse pada theme tersebut dan klik Activate untuk mengaplikasikan Theme pada Wordpress, dan Proses Instalasi sudah selesai dilakukan. 20

24 3.4 Membangun Page dengan menggunakan DIVI Page Builder Setelah Theme berhasil di aplikasikan, sekarang waktunya untuk mulai membuat Page. Berikut langkah cepat dalam membuat Page menggunakan DIVI Page Builder. Pertama-tama, akses menu Page pada menu di kiri, pilih Add New, dan akan muncul tampilan sebagai berikut: Klik pada tombol use the DIVI Builder untuk mengaktifkan fitur DIVI Page Builder sebagai editor utama pembuatan Page, dengan tampilan dan penjelasan sebagai berikut: Judul Page Entity Page pada DIV I Page Builde r A tur Posisi Section Page Buil der Setting Minimize Undo / Redo Perubahan C olumn Section Row Simpan Page sebagai Draft Ubah Status Page Atur Hak Akses Page Melihat Hasil Pembuatan Page Menyi mpan Page pada Kategori tertentu Menga tu r T ampil an P age meng gun akan Te mpla te ya ng ada Atur Waktu Publikasi Publish tab untuk mengatur publikasi terhadap page yang dibuat. Simpan Perubahan dan Publikasi Page yang dibuat Page Attributes Tab untuk menentukan Posisi dari Page tersebut dalam suatu Menu 21

25 Beberapa hal yang harus diketahui sesuai penjelasan di atas yaitu : - Lakukan perubahan dengan menggunakan DIVI Page Builder, apabila menggunakan Editor, yang telah dibuat menggunaka DIVI Page Builder semuanya akan terhapus. - Lakukan Save Draft apabila tidak ingin menampilkan Page secara public / dapat diakses siapapun, jika dirasa sudah finish dan siap di publikasikan, selalu lakukan Publikasi terlebih dahulu sebelum melakukan Preview. - Gunakan Parent apabila ingin menampilkan Page dibawah suatu Page ( Sub-Page ) dengan catatan buatlah sebuah Page terlebih dahulu sehingga pada pilihan parent muncul pilihan page tersebut. - Page terdiri dari serangkaian bagan berikut: - Section - Row - Column C olumn Sebuah Page terdiri dari beberapa section, dimana sebuah section memiliki beberapa Row ( baris ), dalam satu baris bisa memiliki beberapa Column ( Kolom ) dan entitas yang paling terkecil dimasukkan ke dalam column adalah Module, klik pada insert module dan akan muncul tampilan sebagai berikut: Section Row Pilih module yang diinginkan, setelah proses editing selesai maka tampilan section akan terlihat seperti berikut. 22

26 Setelah editing selesai, lakukan save draft untuk menyimpan perubahan, atau langsung lakukan publikasi apabila page tersebut ingin langsung di publish, baru klik preview untuk melihat hasil dari pembuatan Page, akan muncul tab baru dengan tampilan seperti berikut, dan Page sudah selesai dibuat. Column - Module Column - Module Column - Module Row Section 3.5 Menggunakan Layout Instan Pada tahap sebelumnya telah dijelaskan tahapan dalam membuat Page, dengan merubah section, row, dan column satu per satu. Untuk berikutnya, akan dijelaskan tentang bagaimana cara memanfaatkan fitur layout Instan yang disediakan oleh DIVI Page Builder. Pada DIVI Builder terlihat 3 opsi yang belum dijelaskan, yaitu Save to Library, Load from Library, dan Clear Layout, 3 opsi ini merupakan opsi untuk merubah tampilan Page secara keseluruhan, terutama untuk 2 pertama merupakan opsi untuk memanfaatkan Layout Instan. Save to Library berguna untuk menyimpan hasil layout yang sudah dibuat untuk digunakan kembali nantinya tanpa harus melakukan editing dari 0. 23

27 Sedangkan untuk Load From Library, merupakan opsi untuk mengaplikasikan Layout yang telah tersimpan, maupun yang telah disediakan oleh DIVI Page Builder sehingga tidak perlu melakukan editing satu persatu, cukup dengan memilih Layout yang ada, klik, dan Layout tersebut langsung di aplikasikan kepada Page tersebut Predefined Layouts Predefined Layouts Layout yang telah disediakan oleh DIVI Page Builder Dengan mengklik Load salah satu Layout yang terdapat di atas, maka seluruh tampilan yang telah dibuat akan direset dan disesuaikan dengan tampilan yang baru, contohnya sebagai berikut. Layout akan ter load secara otomatis, yang perlu dilakukan hanyalah melakukan setting dan menyesuaikan Konten dari Section, Row, maupun Columns and Module sesuai dengan yang diinginkan. 24

28 3.5.2 Add Layout From Library Add From Library merupakan Layout yang telah dibuat sendiri dan disimpan ke dalam Library, yang membedakan antara Predefined Layouts dan Add Layout form Library yaitu Predefined Layouts merupakan Layout yang telah disediakan oleh DIVI, dan Add Layout From Library berarti Custom Made yang pernah dibuat dan disimpan. Lalu buat page baru dan masuk ke DIVI Page Builder, pilih Load From library dan kali ini pilih Add From Library, maka layout yang telah disimpan akan muncul pada tampilan Klik Load untuk mengaplikasikan Layout pada Page yang sedang dibuat, dan lakukan publish untuk merubah Page tersebut. 3.6 Export / Import Layout Selain Instant Layout, DIVI Layout juga dapat di Export / Import ke website lain, tanpa harus mengulang satu persatu perubahan yang dilakukan, dengan mudah tampilan layout dapat di duplikasi agar bisa dimanfaatkan pada website satunya. Akses Export/Import melalui Tools, lalu klik Export dan Centang pada Layout untuk mengexport Layout saja, dan klik pada Download Export File 25

29 Lalu untuk Import, klik Tools pilih Import dan pilih Wordpress Importer dan Pilih File XML yang telah di download melalui Export, lalu klik Import, maka sistem akan melakukan Import terhadap Layout yang telah dibuat ke dalam wordpress yang baru. 26

30

31