Prak 15 - Membuat Versi DIVI dari User Interface yang telah Dibuat dan Hosting (Bagian 2)

1. Tujuan

• Mahasiswa dapat lebih mengetahui tentang Desain Web dengan membuat Desain User Interface.
• Mahasiswa dapat lebih mengenal DIVI untuk mendesain sebuah Web (statis).
• Mahasiswa dapat meng-hosting web yang telah dibuat

2. Alat dan Bahan

• WordPress Tema ‘DIVI’
• Assets yang telah dibuat
• Web untuk Hosting gratis

3. Dasar Teori

Divi Theme adalah salah satu dari 87 theme WordPress premium Elegant Themes yang banyak diminati, ada sekitar +300.000 Website menggunakan Divi sebagai theme Mereka, Anda bisa lihat di divithemeexamples.com. Harga theme ini adalah $89 pertahun atau jika di rupiahkan sekitar Rp 1,179,873 an pertahun termasuk 87 Themes & 3 Plugins Premium lainnya yang bebas di gunakan tanpa batas.

Divi Theme ini merupakan theme multi guna atau multifungsi yang dapat di gunakan untuk berbagai jenis kebutuhan website, seperti kegiatan bloging, bisnis, toko online, agency dan lain sebagainya, fitur andalan Divi Theme ini adalah Page Buildernya yang sangat menakjubkan, Kita bisa membuat atau mendesain halaman website dengan mudah, hanya perlu drag & drop tanpa harus menulis code HTML atau CSS, namun jika ingin memberikan sedikit sentuhan CSS maka itu akan sangat baik.

Berdasarkan informasi yang ada di Elengan Themes kita dapat mempelajari fitur-fitur dari Divi Builder yaitu:

• Real Time Design: Ketika kita membuat perubahan disai pada suatu halaman, maka disain akan berubah secara instan pada saat itu juga.
• Klik dan ketik: Dengan menggunakan divi kita tidak perlu membuka panel untuk menambahkan content. Kita dapat dengan mudah melakukan klik dan memulai mengerik isi halaman.
• Customize Everything: Setiap elemen dapat dikuskom mulai dengan font, warna, ukuran, spacing dan juga custom CSS.
• Responsive Editing :Fitur ini akan menampilkan live resposive preview.
• Pengaturan yang mudah: Kemudahan menambah baris dan kolom.
• Global Elemen: Sinkronisasi item yang bersifat global pada banyak halaman.
• 46 Content Element: Pada waktu artikel ini ditulis, Divi memiliki 46 Content Elemen.
• Import dan Export: Kita dapat menyimpan layout ke dalam library untuk digunakan kemudian.
• Sedikit atau tanpa loading: Divi builder bekerja cepat, sehingga sedikit atau tanpa loading.
• Premade Layouts: Divi Builder menyediakan lebih dari 20 layout yang sudah dipersiapkan sebelumnya.

Hosting (disebut juga Web Hosting / sewa hosting) adalah penyewaan tempat untuk menampung data-data yang diperlukan oleh sebuah website dan sehingga dapat diakses lewat Internet. Data disini dapat berupa file, gambar, email, aplikasi/program/script dan database.

4. Tugas Praktikum

• Membuat versi DIVI dari Desain User Interface dengan minimal 1 buah elemen

5. Hasil Praktikum
Pada saat mendaftar untuk hosting web pada https://www.000webhost.com

Membuat desain pada wordpress yang telah online

Tampilan pada website yang telah diedit dengan menggunakan DIVI pada Wordpress

Tampilan pada mock up

Pada praktikum kali ini kami membuat website "BACK TO NATURE" pada Wordpress dengan menggunakan DIVI. Terdapat beberapa perbedaan pada website yang kami kerjakan dengan mock up yang telah kami buat. Letak perbedaan terdapat pada font yang kami gunakan untuk tulisan "back to" dan tulisan "NATURE" karena jenis font yang kami gunakan tidak terdapat pada pilihan font di DIVI editor. Namun kami mencari alternatif font yang masih dekat dan sesuai dengan mock up. Selain itu terdapat perbedaan background image karena background yang kami gunakan pada mock up ketika kami upload untuk background website gambar menjadi pecah, sehingga kami mencari gambar lain yang masih sesuai dengan tema website kami yaitu alam. Kemudian terdapat perbedaan pada kolom pencarian "Search", dimana pada mock up kami tidak terdapat tombol "search" pada sisi kanan kolom tersebut namun hanya icon. Hal ini terjadi karena kami masih belum menemukan cara untuk mengganti tulisan "search" tersebut menjadi icon.
6. Kesimpulan

Pada praktikum kali ini, kami melanjutkan untuk mengedit dan membuat desain UI web pada wordpress yang telah online atau ter-hosting pada alamat https://sekarrwis.000webhostapp.com/home

7. Referensi

http://www.topwp.org/blog/review-divi-theme/

https://www.proweb.co.id/articles/wp/divi_builder.html
http://www.idebagus.com/help/tanya-jawab/hosting/apa-yang-dimaksud-dengan-hosting