babastudio fileTerdapat beberapa fitur yang dapat dimanfaatkan pada home Rumahweb.com seperti pada...

31
babastudio.com babastudio.com

Transcript of babastudio fileTerdapat beberapa fitur yang dapat dimanfaatkan pada home Rumahweb.com seperti pada...

Page 1: babastudio fileTerdapat beberapa fitur yang dapat dimanfaatkan pada home Rumahweb.com seperti pada gambar sebelumnya. Terutama fitur untuk melakukan pengecekan Domain, untuk

babastudio.com

baba

stud

io.c

om

Page 2: babastudio fileTerdapat beberapa fitur yang dapat dimanfaatkan pada home Rumahweb.com seperti pada gambar sebelumnya. Terutama fitur untuk melakukan pengecekan Domain, untuk

29

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

3. Mengenal Theme DIVI Mengenal tentang theme wordpress dan Theme DIVI

3.1 Mengenal tentang Theme Wordpress

3.1.1 Wordpress-theme.asia

3.1.2 Theme Forest / Envato Market

3.1.3 Elegant Themes

3.2 Mengenal Theme DIVI

3.2.1 .Drag and Drop Page Builder

3.2.2 Module System

3.3 Instalasi Theme DIVI

3.5 Menggunakan Layout Instan

3.5.1 Predefined Layouts

3.5.2 Add Layout From Library

3.6 Export / Import Layout

4. Menguasai Modul dalam DIVI Memahami Module yang disediakan oleh DIVI

4.1 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

1

1

2

4

6

7

11

11

14

15

17

17

18

19

23

24

25

25

27

28

30

31

33

35

37

38

40

41

42

43

babastudio.com

baba

stud

io.c

om

Page 3: babastudio fileTerdapat beberapa fitur yang dapat dimanfaatkan pada home Rumahweb.com seperti pada gambar sebelumnya. Terutama fitur untuk melakukan pengecekan Domain, untuk

4.12 Countdown Timer Module

4.13 Divider

4.13 Email Optin

4.14 Filterable Portfolio

4.15 Filterable Portfolio

4.16 Image

4.17 Number Counter

4.18 Person

4.19 Portfolio

4.20 Post Navigation

4.21 Post Slider

4.22 Post Title

4.23 Pricing Table

4.24 Search

4.25 Shop

4.26 Sidebar

4.27 Slider

4.28 Social Media Follow

4.29 Tabs

4.30 Testimonial

4.31 Text

4.32 Toggle

4.33 Video

4.33 Video Slider

5. 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

44

45

46

49

50

51

52

53

55

57

58

61

62

64

65

66

67

70

72

73

75

76

77

78

80

80

83

84

86

87

88

90

90

babastudio.com

baba

stud

io.c

om

Page 4: babastudio fileTerdapat beberapa fitur yang dapat dimanfaatkan pada home Rumahweb.com seperti pada gambar sebelumnya. Terutama fitur untuk melakukan pengecekan Domain, untuk

1

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.

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

Hosting

Domain

babastudio.com

baba

stud

io.c

om

Page 5: babastudio fileTerdapat beberapa fitur yang dapat dimanfaatkan pada home Rumahweb.com seperti pada gambar sebelumnya. Terutama fitur untuk melakukan pengecekan Domain, untuk

2

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

babastudio.com

baba

stud

io.c

om

Page 6: babastudio fileTerdapat beberapa fitur yang dapat dimanfaatkan pada home Rumahweb.com seperti pada gambar sebelumnya. Terutama fitur untuk melakukan pengecekan Domain, untuk

3

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.

babastudio.com

baba

stud

io.c

om

Page 7: babastudio fileTerdapat beberapa fitur yang dapat dimanfaatkan pada home Rumahweb.com seperti pada gambar sebelumnya. Terutama fitur untuk melakukan pengecekan Domain, untuk

4

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.

babastudio.com

baba

stud

io.c

om

Page 8: babastudio fileTerdapat beberapa fitur yang dapat dimanfaatkan pada home Rumahweb.com seperti pada gambar sebelumnya. Terutama fitur untuk melakukan pengecekan Domain, untuk

5

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 email

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 email verifikasi pembayaran dan

aktivasi domain dan hosting, lalu lakukan login ke dalam rumahweb.com dan cek apakah domain dan hosting sudah dapat di akses.

babastudio.com

baba

stud

io.c

om

Page 9: babastudio fileTerdapat beberapa fitur yang dapat dimanfaatkan pada home Rumahweb.com seperti pada gambar sebelumnya. Terutama fitur untuk melakukan pengecekan Domain, untuk

6

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

login ke dalam cpanel menggunakan credential yang sudah disediakan pada halaman

member rumahweb.com, berikutnya akan muncul tampilan homepage dari cpanel.

tesdomainname.com/cpanel

babastudio.com

baba

stud

io.c

om

Page 10: babastudio fileTerdapat beberapa fitur yang dapat dimanfaatkan pada home Rumahweb.com seperti pada gambar sebelumnya. Terutama fitur untuk melakukan pengecekan Domain, untuk

7

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

babastudio.com

baba

stud

io.c

om

Page 11: babastudio fileTerdapat beberapa fitur yang dapat dimanfaatkan pada home Rumahweb.com seperti pada gambar sebelumnya. Terutama fitur untuk melakukan pengecekan Domain, untuk

8

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 Email untuk

mendaftarkan id tersebut

Pilih bahasa wordpress yang

diinginkan

abaikan Setting lainnya,

Terakhir Klik Install

babastudio.com

baba

stud

io.c

om

Page 12: babastudio fileTerdapat beberapa fitur yang dapat dimanfaatkan pada home Rumahweb.com seperti pada gambar sebelumnya. Terutama fitur untuk melakukan pengecekan Domain, untuk

9

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

email untuk admin tersebut

Pilih bahasa wordpress yang

diinginkan

abaikan Setting lainnya,

Terakhir Klik Install

Proses instalasi dilakukan otomatis oleh sistem

babastudio.com

baba

stud

io.c

om

Page 13: babastudio fileTerdapat beberapa fitur yang dapat dimanfaatkan pada home Rumahweb.com seperti pada gambar sebelumnya. Terutama fitur untuk melakukan pengecekan Domain, untuk

10

Sekarang wordpress telah dibuat dan siap untuk mulai dilakukan Customizing

babastudio.com

baba

stud

io.c

om

Page 14: babastudio fileTerdapat beberapa fitur yang dapat dimanfaatkan pada home Rumahweb.com seperti pada gambar sebelumnya. Terutama fitur untuk melakukan pengecekan Domain, untuk

11

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:

3.1.1 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.

babastudio.com

baba

stud

io.c

om

Page 15: babastudio fileTerdapat beberapa fitur yang dapat dimanfaatkan pada home Rumahweb.com seperti pada gambar sebelumnya. Terutama fitur untuk melakukan pengecekan Domain, untuk

12

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

babastudio.com

baba

stud

io.c

om

Page 16: babastudio fileTerdapat beberapa fitur yang dapat dimanfaatkan pada home Rumahweb.com seperti pada gambar sebelumnya. Terutama fitur untuk melakukan pengecekan Domain, untuk

13

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 email berupa (.zip) File.

babastudio.com

baba

stud

io.c

om

Page 17: babastudio fileTerdapat beberapa fitur yang dapat dimanfaatkan pada home Rumahweb.com seperti pada gambar sebelumnya. Terutama fitur untuk melakukan pengecekan Domain, untuk

14

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.

babastudio.com

baba

stud

io.c

om

Page 18: babastudio fileTerdapat beberapa fitur yang dapat dimanfaatkan pada home Rumahweb.com seperti pada gambar sebelumnya. Terutama fitur untuk melakukan pengecekan Domain, untuk

15

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.

3.1.3 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

babastudio.com

baba

stud

io.c

om

Page 19: babastudio fileTerdapat beberapa fitur yang dapat dimanfaatkan pada home Rumahweb.com seperti pada gambar sebelumnya. Terutama fitur untuk melakukan pengecekan Domain, untuk

16

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.

babastudio.com

baba

stud

io.c

om

Page 20: babastudio fileTerdapat beberapa fitur yang dapat dimanfaatkan pada home Rumahweb.com seperti pada gambar sebelumnya. Terutama fitur untuk melakukan pengecekan Domain, untuk

17

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.

3.2.1 .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.

babastudio.com

baba

stud

io.c

om

Page 21: babastudio fileTerdapat beberapa fitur yang dapat dimanfaatkan pada home Rumahweb.com seperti pada gambar sebelumnya. Terutama fitur untuk melakukan pengecekan Domain, untuk

18

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.

babastudio.com

baba

stud

io.c

om

Page 22: babastudio fileTerdapat beberapa fitur yang dapat dimanfaatkan pada home Rumahweb.com seperti pada gambar sebelumnya. Terutama fitur untuk melakukan pengecekan Domain, untuk

19

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

babastudio.com

baba

stud

io.c

om

Page 23: babastudio fileTerdapat beberapa fitur yang dapat dimanfaatkan pada home Rumahweb.com seperti pada gambar sebelumnya. Terutama fitur untuk melakukan pengecekan Domain, untuk

20

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.

babastudio.com

baba

stud

io.c

om

Page 24: babastudio fileTerdapat beberapa fitur yang dapat dimanfaatkan pada home Rumahweb.com seperti pada gambar sebelumnya. Terutama fitur untuk melakukan pengecekan Domain, untuk

21

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:

Publish tab untuk mengatur

publikasi terhadap page yang dibuat.

Page Attributes Tab untuk

menentukan Posisi dari Page tersebut dalam suatu Menu

Menyi mpan Page pada Kategori tertentu

Menga tu r T ampil an P age

meng gun akan Te mpla te ya ng ada

Ubah Status Page

Atur Hak Akses Page

Atur Waktu Publikasi

Simpan Perubahan

dan Publikasi Page yang dibuat

Melihat Hasil Pembuatan Page

Simpan Page sebagai Draft

Page Buil der

Setting

A tur Posisi Section

Judul Page

Entity Page pada

DIV I Page Builde r Minimize

Undo / Redo

Perubahan

C olumn

Row

Section

babastudio.com

baba

stud

io.c

om

Page 25: babastudio fileTerdapat beberapa fitur yang dapat dimanfaatkan pada home Rumahweb.com seperti pada gambar sebelumnya. Terutama fitur untuk melakukan pengecekan Domain, untuk

22

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

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:

Pilih module yang diinginkan, setelah proses editing selesai maka tampilan section akan terlihat seperti berikut.

C olumn

Row

Section

babastudio.com

baba

stud

io.c

om

Page 26: babastudio fileTerdapat beberapa fitur yang dapat dimanfaatkan pada home Rumahweb.com seperti pada gambar sebelumnya. Terutama fitur untuk melakukan pengecekan Domain, untuk

23

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.

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.

Column - Module

Column - Module Column - Module

Row

Section babastudio.com

baba

stud

io.c

om

Page 27: babastudio fileTerdapat beberapa fitur yang dapat dimanfaatkan pada home Rumahweb.com seperti pada gambar sebelumnya. Terutama fitur untuk melakukan pengecekan Domain, untuk

24

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.

3.5.1 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.

babastudio.com

baba

stud

io.c

om

Page 28: babastudio fileTerdapat beberapa fitur yang dapat dimanfaatkan pada home Rumahweb.com seperti pada gambar sebelumnya. Terutama fitur untuk melakukan pengecekan Domain, untuk

25

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

babastudio.com

baba

stud

io.c

om

Page 29: babastudio fileTerdapat beberapa fitur yang dapat dimanfaatkan pada home Rumahweb.com seperti pada gambar sebelumnya. Terutama fitur untuk melakukan pengecekan Domain, untuk

26

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.

babastudio.com

baba

stud

io.c

om

Page 30: babastudio fileTerdapat beberapa fitur yang dapat dimanfaatkan pada home Rumahweb.com seperti pada gambar sebelumnya. Terutama fitur untuk melakukan pengecekan Domain, untuk

babastudio.com

baba

stud

io.c

om

Page 31: babastudio fileTerdapat beberapa fitur yang dapat dimanfaatkan pada home Rumahweb.com seperti pada gambar sebelumnya. Terutama fitur untuk melakukan pengecekan Domain, untuk

babastudio.com

baba

stud

io.c

om