Edited with the trial version of

Foxit Advanced PDF Editor

To remove this notice, visit:
www.foxitsoftware.com/shopping

MATERI
KELAS WEBSITE GRATIS
DAY 2
Membuat Website Pertama

ANTON SURYANTONO

KELAS WEBSITE GRATIS - 2018 1

Baik, kali ini kita akan belajar membuat website pertama kita menggunakan Diva Web Builder.

Seperti yang sudah kemarin saya infokan, silakan login menggunakan akun Diva FREE TRIAL yang
sudah saya berikan.

Begini tampilan pada Dashboard Diva Web Builder

kita langsung mulai buat website pertama kita, dengan cara CLONE WEB LAIN

saya berikan contoh untuk clone dari web https://mitrapropertisyariah.com/

buka website https://mitrapropertisyariah.com/ lalu copy linknya

mohon maaf bila disini ada pihak dari Mitra Property Syariah, ini hanya buat contoh 😁

KELAS WEBSITE GRATIS - 2018 2

Kita mulai step by step pembuatan website dengan cara CLONING website lain

1. klik Create Project di pojok kiri atas

2. paste link https://mitrapropertisyariah.com/ disini, kemudian klik CREATE

KELAS WEBSITE GRATIS - 2018 3

3. Setelah klik CREATE, maka akan muncul tampilan seperti ini, langsung saja klik LIVE EDIT
untuk masuk ke halaman editor Diva

4. Kalau sudah, tampilannya seperti ini. Disini kita bisa edit text, gambar, video, tambah tombol
call to actio, dll.

KELAS WEBSITE GRATIS - 2018 4

 5. kita edit text yg asli disitu. klik, lalu hapus dan ganti dengan kata-kata yg kita inginkan.
Tinggal klik pada text yang mau diedit, lalu hapus text asli, ganti dengan text baru.

Hasilnya jadi seperti ini setelah kita edit textnya. Mudah bukan?

Sampai disini tidak ada kesulitan ya?

KELAS WEBSITE GRATIS - 2018 5

6. Mengganti gambar yang lama dengan gambar yang baru

a. Klik gambar, lalu klik SETTING

b. masuk ke menu setting lalu klik Choose Image

c. upload gambar

KELAS WEBSITE GRATIS - 2018 6

d. pilih gambar yg mau diupload dari laptop/pc Anda

e. klik di gambar tersebut, maka gambar akan terupload otomatis

f. Setelah berhasil, tampilannya seperti ini ya 😊

KELAS WEBSITE GRATIS - 2018 7

7. Menambahkan Element
kita tambahkan element (teks, gambar, video, dll) di bawah, atas, kanan atau kiri dari
element yg sudah ada. Disini saya mencontohkan menambahkan di bawahnya.

a. Klik tanda (+) pada kotak

b. Kemudian muncul menu layout seperti itu dan pilih container

KELAS WEBSITE GRATIS - 2018 8

c. setelah muncul kotak yg bertuliskan ADD ELEMENT HERE, drag / seret menu ELEMENT
di dashboard sebelah kanan ke kotak ADD ELEMENT HERE tadi

d. muncul menu Element Selection seperti ini, pilih BUTTON.

Kita bisa pilih element lain juga disitu, ada text, heading, image, video, icon, timer, dll.
Tapi kali ini kita pakai BUTTON dulu. Untuk element lain nanti bisa coba sendiri,
prosesnya sama saja.

KELAS WEBSITE GRATIS - 2018 9

e. Setelah klik Button, maka akan muncul tampilan buttonnya seperti ini

f. pilih jenis button yg mau dipakai

1
KELAS WEBSITE GRATIS - 2018
0
 g. kita juga bisa masukkan link order Whatsapp ke button kita. Agar orang yg klik button
tersebut langsung terhubung ke Whatsapp kita.

h. Setelah jadi, tampilan buttonnya seperti ini ya.

Button sudah selesai kita buat. Untuk membuat link order WA, bisa ikuti panduan disini:

https://kasurnet.com/cara-membuat-link-whatsapp-menuju-chat-langsung/

Atau bisa juga menggunakan tools wa.orderlink.in/

Tapi disini kita hanya bisa langsung terhubung ke WA, tidak bisa custom text

1
KELAS WEBSITE GRATIS - 2018
1
 8. Mengubah Background
Setelah berhasil mengedit text, gambar dan menambahkan button, sekarang kita lanjut ke
cara mengubah background. Yang tadinya warna merah diubah jadi kuning, atau background
berupa gambar, dll
Langsung saja pelajari caranya sebagai berikut:

a. Klik pada background yang mau kita edit, lalu pilih SETTING

b. Klik Background, lalu ganti warna sesuai yang kita inginkan pada menu Background
Colour

Setelah sukses, maka tampilan warna background sudah berubah.

Alhamdulillah editing sederhana kita selesai. Langsung klik SAVE pada logo save di pojok kiri bawah.

Kemudian klik HOME untuk setting berikutnya.

pastikan editing yg tadi sudah di SAVE dan sudah muncul pemberitahuan SAVE SUKSES di pojok
kanan atas.

1
KELAS WEBSITE GRATIS - 2018
2
9. Setting Configure

kita buka menu Configure ya, untuk setting web yg tadi kita cloning.

a. di Home, arahkan kursor ke project kita tadi, lalu klik Configure. arahkan pointer mouse
ke project, klik Configure.

b. di menu configure tampilannya seperti ini. kita edit judul webnya, di atas gambar, yg
saya blok. ganti pakai judul apapun yg Anda mau.

1
KELAS WEBSITE GRATIS - 2018
3
 c. Untuk membuka web yg sudah kita edit, kita COPY link di bagian yg dilingkari.
Jika disitu Cuma ada Diva Link, copy saja yg itu. Sama saja. karena akun itu belum
disetting usernamenya, jadi cuma ada 1 link

d. setelah copy, buka tab baru, lalu paste disana untuk melihat hasil editing kita tadi

Hasil dari web kita seperti ini

SELAMAT. Anda berhasil membuat web PERTAMA Anda!

Silakan bisa cek di video youtube saya untuk tutorial lebih detailnya

https://www.youtube.com/watch?v=R8PumggeULQ&t=794s

Terima kasih

1
KELAS WEBSITE GRATIS - 2018
4