babastudio.com babastudio.com

Transkripsi

1

2 4. Menguasai Modul dalam DIVI Memahami Module yang disediakan oleh DIVI 4.1 Pengenalan tentang Module pada DIVI DIVI memiliki beragam Module yang dapat dimanfaatkan sesuai dengan kebutuhan dari website yang diinginkan, varian yang bermacam-macam mampu mengatasia berbagai macam kebutuhan Website terutama untuk tampilan website yang elegan, kekinian, bersih, dan mudah dimengerti.

3 Untuk penambahan Module sendiri semuanya memiliki alur yang sama, akan tetapi detail dalam pembuatannya kadang sedikit berbeda tergantung dari jenis/tipe modul itu sendiri,module entity terletak sebagai entitas paling rendah dalam sebuah section, dimulai dari Section > Column > Row hingga terlihat dibawah row terdapat tulisan add Module. klik untuk mengeluarkan panel Insert Module. Langkah selanjutnya adalah memilih module sesuai dengan kebutuhan. 4.2 Accordion Module Accordion module merupakan modul untuk menampilkan toggle accordion seperti pada gambar disamping, biasanya digunakan untuk bagian F.A.Q maupun daftar seputar fitur dan banyak lagi yang lain.

4 Pada penambahan Accordion sendiri terdapat beberapa hal yang perlu diperhatikan, pada general settings, gunakan Add New Item untuk menambahkan list Accordion sesuai dengan kebutuhan. Klik pada Add New Item maka akan muncul tampilan berikut. Title untuk judul Accordion pada bagian atas yang di klik dan Content merupakan isi dari Accordion, gunakan Add Media jika ingin isi dari Accordion tidak hanya berupa tulisan saja. Title Content Title Klik Save dan akan muncul tampilan berikut. Accordion biasanya terlihat lebih dari satu karena fungsinya sebagai listing yang ditutup sehingga memudahkan user untuk membaca banyak deskripsi dalam satu waktu tanpa harus melihat banyak tulisan, klik Add New Item dan ulangi prosesnya untuk menambahkan Accordion baru. Title Title

5 Terdapat 2 setting tambahan untuk Accordion, Disable On dan Admin Label. Disable On : untuk menghilangkan Accordion pada View tertentu, baik itu pada Phone, Tablet, maupun ketika Desktop. Admin Label : Sebagai Label penanda pada DIVI page builder untuk mempermudah editing Module. 4.3 Audio Player Module Audio Player Module berfungsi untuk menambahkan pemutar Audio yang berfungsi untuk memainkan audio yang diinginkan, terutama jika ingin mempromosikan beberapa lagu/musik kepada para visitor. Pada penambahan Audio Player, terdapat beberapa option pada General Setting, yaitu :

6 Berikut penjelasan untuk setting Audio Player Audio : Tambahkan File audio disini, baik itu Upload maupun add melalui gallery dimana audio tersebut telah terupload sebelumnya. Title : Beri Judul Audio tersebut Artist Name : Beri nama Penyanyi / Pencipta dari Audio tersebut Artist Name : Beri nama Album untuk Audio tersebut Cover Art Image : Beri foto/ gambar untuk Cover Audio tersebut Text Color : Pilih Warna untuk tulisan Audio 4.4 Bar Counters

7 Bar Counters berfungsi untuk menambahkan prosentase untuk display progress, skill, kemampuan, maupun status, dengan animasi dan terlihat sangat menarik bagi para visitor Untuk menambahkan Bar Counter, pertama-tama klik insert module dan pilih Bar Counters, maka akan muncul tampilan berikut. Sebelum menjelaskan tentang setting, pertama-tama akan dijelaskan tentang bagaimana menambahkan Bar Counter, klik pada Add New Bar Counter. Title : Isi dengan judul dari Bar Counter tersebut Percent : Isi dengan Persentase untuk Bar tersebut, contoh : 59% Klik Save Tambahkan sejumlah Bar Counters yang diinginkan, maka akan terlihat seperti tampilan berikut. Lanjutkan dengan setting pada Bar Counters

8 Berikut penjelasan untuk setting Bar Counters Text Color : Mengubah warna dari tulisan Counter Background Color : Memberi warna pada latar Bar Counter Bar Background Color : Memberi warna pada Bar nya saja Use Percentage : Aktfikan apabila persentase dimunculkan, jika hanya menggunakan angka, matikan. 4.5 Blog Blog / Masonry Blog Layout bawaan DIVI merupakan tampilan untuk News / Artikel dengan tampilan stacked cards seperti pada contoh di atas. Mengambil Blogs/News dari yang sudah dibuat sebelumnya.

9 Pada artikel sebelumnya telah dijelaskan bagaimana cara membuat News Page, dan pada module Blog berfungsi untuk menampilkan News Pages tersebut berupa Card dari masingmasing Blog dengan jumlah blog yang ditampilkan dapat di atur.

10 Berikut penjelasan untuk setting Blog Layout : Mengubah layout dari tampilan list blog, baik itu berupa fullwidth maupun grid, Fullwidth yang berarti blog ditampilan berupa memanjang, untuk tampilan grid, akan terlihat seperti contoh pada screenshot sebelumnya. Post Number : Mengubah jumlah post yang ingin ditampilkan dalam 1 page. Include Categories : Memasukkan kategori ke dalam tampilan Blog Meta Data Format : Mengubah tampilan dari format tanggal, gunakan PHP Date Format untuk merubah format tanggal tersebut. Show Thumbnail Feature : Untuk memunculkan atau mematikan tampilan gambar dari tiap post Content : Terdapat dua pilihan pada Content, Show Excerpt untuk menampilkan blog dengan tampilan terbatas, atau Show Content untuk menampilkan blog secara keseluruhan. Read More button : Menentukan tampilan Read Button dimunculkan atau tidak. Show Author : Menampilkan nama author Show Date : Menampilkan tanggal pembuatan Blog Show Categories : Menentukan link kategori menyala atau tidak Show Comment Count : Menampilkan jumlah komentar untuk post tersebut Show Pagination : Menampilkan paginasi / pemisah halaman pada list blog tersebut. Offset By : Memberi Offset pada per jumlah post yang di inginkan Featured Image Overlay : Menampilkan Warna dan Icon overlay ketika post tersebut di hover. Text Color : Merubah warna general untuk tampilan list Post 4.6 Blurb Module

11 Blurb Module merupakan kombinasi dari gambar dan text yang elegan berfungsi untuk showcasing/memamerkan beberapa info singkat dan penting untuk diketahui, terkesan mudah, praktis, ringan, namun tepat sasaran. Untuk penambahan Blurb sendiri biasanya dalam satu row memiliki lebih dari 1 blurb, sehingga langkah awal yang bisa di ambil adalah dengan menentukan berapa column yang dibutuhkan pada sebuah row melalui tombol berikut. Tentukan dalam satu row memiliki berapa column, sehingga dari column tersebut dapat diinput dengan menggunakan Blurb Module dengan setting sebagai berikut.

12 Title : Menambahkan judul untuk module blurb tersebut Url : Menambahkan Link untuk Blurb Module agar bisa di klik menuju tampilan lain Url Opens: Menentukan metode ketika Url dibuka, apakah dalam satu window yang sama maupun dibuka ke tab baru disebelahnya. Use Icon : Menampilkan icon pada blurb module tersebut apabila diperlukan Image: Menambahkan gambar untuk blurb module tersebut melalui image gallery maupun upload gambar baru. Image Alt Text : Menentukan Alt Text untuk dimasukkan ke dalam image Blurb sebagai metode agar terbaca oleh SEO Google. Image / Icon Placement : Apabila menggunakan Icon, untuk menentukan posisi penambahan icon tersebut Image / icon Animation : Mengontrol animasi untuk icon ketika blurb ditampilkan Show Date : Menampilkan tanggal pembuatan Blog Text Color : Merubah warna general untuk tampilan tulisan Blurb Text Orientation : Mengontrol align pada tulisan Blurb Content : Menambahkan Content utama pada modul blurb 4.7 Button Module Button Module berfungsi untuk menambahkan Tombol sebagai link ke halaman / website lain. Penambahan Button biasanya diikuti dengan sebuah text maupun gambar yang menunjukkan button untuk memperjelas ide dari text maupun gambar tersebut

13 Terdapat beberapa setting dalam penambahan module button Button Url : Menambahkan link untuk akses Button tersebut tertuju. Url Opens: Menentukan metode ketika Url dibuka, apakah dalam satu window yang sama maupun dibuka ke tab baru disebelahnya. Button Text : Menentukan tulisan yang tertera pada Button tersebut Button Alignment : Mengontrol align pada button tersebut. Text Color : Merubah warna general untuk tampilan tulisan Blurb 4.8 Call to Action Module 29

14 Call To Action bisa dikatakan sebagai fitur yang sangat mempengaruhi user untuk melakukan sesuatu terhadap web tersebut, baik itu untuk membeli produk, untuk melihat info, maupun untuk kontak pemiliki website dengan sangat cepat, singkat, mudah dimengerti dan tepat sasaran. Berikut merupakan setting untuk menambahkan call to action

15 Title : Menambahkan judul untuk module Call to Action Button Url : Menambahkan Link yang dituju oleh Call to Action tersebut Url Opens: Menentukan metode ketika Url dibuka, apakah dalam satu window yang sama maupun dibuka ke tab baru disebelahnya. Use Background Color : Menentukan penggunaan warna pada Call to Action dengan menggunakan warna latar atau tidak. Background Color : Menentukan warna latar yang ingin digunakan. Text Color : Merubah warna general untuk tampilan tulisan Call to Action Text Orientation : Mengontrol align pada tulisan Calll to Action Content : Menambahkan Content pada tab Call to Action 4.9 Circle Counter Module Circle counter memberikan Counter berbentuk lingkaran/ Pie yang di imbue dengan animasi sehingga tampilan website akan jauh terlihat lebih menarik dan juga untuk menampilkan data tidak akan membuat visitor bosan dan justru tertarik untuk membaca data tersebut Berikut merupakan setting untuk menambahkan Circle Counter

16 Title : Menambahkan judul untuk Circle Counter Number : Menentukan jumlah angka, masukkan angka saja jangan menggunakan karakter persen (%) Percent Sign: Menentukan Circle counter apakah menggunakan karakter persen atau tidak Text Color : Merubah warna general untuk tampilan tulisan Call to Action Bar Background Color : Mengubah Warna pada latar belakang dari Bar Counter 4.10 Code Module Code Module merupakan modul untuk menambahkan custom code yang bisa berupa HTML Element manual yang ingin ditambahkan sendiri, dimana fitur ini diperuntukkan pada user Wordpress yang sudah expert dan mahir dalam menggunakan Code dan membutuhkan Code yang didefine secara manual.

17 4.10 Comments Module Comments module menambahkan komentar untuk website tersebut, tampilan comment sesuai dengan comment feedback yang diberikan oleh visitor, dapat dilihat pada menu Comments pada wordpress dan dapat di atur dengan setting sebagai berikut. Show Author Avatar : Menampilkan Avatar dari Author/kontributor tulisan pada komentar Show Reply Button : Menampilkan tombol reply pada komentar tersebut Show Comments Count : Menampilkan Jumlah komentar Text Color : Merubah warna general untuk tampilan tulisan Comment

18 4.11 Contact Form Module Contact Form module berfungsi untuk menambahkan form agar visitor dapat berkomunikasi secara langsung kepada pemilik website, baik itu untuk feedback maupun inquiry pembelian suatu product, sangat berguna sebagai interaksi antara visitor dengan pemilik website secara langsung Untuk menambahkan field pada Contact Form dapat dilakukan dengan cara sebagai berikut. Sebagai default, contact form telah disediakan beberapa field yaitu Name, , dan Message, sementara dalam beberapa kasus dibutuhkan tidak hanya field yang ditentukan di atas, untuk menambahkannya klik Add New Field di pojok kiri bawah. Adapun setting form secara general adalah sebagai berikut. Menentukan Identifier Unik untuk F ield Tersebut, jangan menggunakan Karakter spesial dan spasi contoh: field_alamat Memberi judul untuk F ield tersebut Menentukan tipe dari field tersebut, yang terdiri dari Input F ield, field yang sudah diimbue dengan validation, dan juga textarea yang berarti input berukuran besar dan mampu menampung text dalam jumlah bany ak.

19 Display Captcha : Menentukan form menggunakan Captcha/security code atau tidak Menentukan alamat dimana pesan akan dikirimkan Title : Menentukan judul dari form Message Pattern : Dengan message pattern, hasil input dari form dapat diberikan sebuah format tulisan tertentu sebelum dikirimkan, biarkan kosong jika tidak ingin menambahkan format apapun. Enable Redirect URL: Mengaktifkan Redirect ketika form sudah berhasil di input oleh visitor, visitor akan diarahkan kembali ke page semula. Success Message : Menentukan tulisan ketika input form berhasil dilakukan 4.12 Countdown Timer Module

20 Countdown timer berfungsi sebagai pengingat waktu untuk event tertentu, misal akan diadakan bazaar / discount / launching product, dengan tampilan yang menarik visitor akan lebih well informed dan selalu update dengan perkembangan waktu hingga event tersebut terjadi. Berikut beberapa setting dalam menambahkan countdown timer Countdown Timer title : Menentukan Judul dari Countdown Timer Countdown To : Menentukan waktu akhir dari Countdown Timer Text Color : Menentukan warna tulisan dari Countdown Timer Use Background Color : Menentukan Countdown Timer menggunakan warna latar atau tidak Background Color : Menentukan warna latar Countdown Timer 4.13 Divider

21 Divider merupakan module untuk menampilkan sebuah pemisah ruang yang berfungsi untuk memberikan area kosong sehingga tampilan website tidak terlalu sesak dan berlebihan, terkadang design yang elegan memiliki balance antara ruang yang terisi dengan ruang kosong. Berikut setting dalam menambahkan Divider Color : Menentukan Warna dari Divider Visibility : Menentukan apakah Divider ditampilkan sebagai sebuah garis atau tidak Height : Menentukan Ketinggian / Ketebalan dari Divider tersebut Optin Optin atau lebih dikenal sebagai DIVI newsletter Signup merupakan modul untuk menciptakan form pendaftaran yang terintegrasi dengan mailchimp, Aweber, dan FeedBurner bagi yang biasa menggunakan Provider mailing List tersebut

22 Berikut setting dalam menambahkan Optin Service Provider : Menentukan Mailing List Provider yang diinginkan Title : Menentukan Judul dari Newsletter Signup Button Text : Menentukan Tulisan dari Button Signup Use Background Color : Menentukan apabila form menggunakan warna latar Background Color : Menentukan warna latar dari form Text Color : Menentukan warna text dari form tersebut Text Orientation : Menentukan Alignment dari teks penjelasan form

23 Content : Menentukan isi dari teks penjelasan form Terdapat perbedaan pada Newsletter Signup ketika memilih Service provider yang berbeda maka isi akan berubah menjadi sedikit berbeda, dengan ketentuan berikut: Mailchimp Pada Mailchimp terdapat Mailchimp List untuk menambahkan mailing list yang sudah dimiliki oleh akun tersebut, pastikan MailChimp API Key telah terpasang pada wordpress dan paling tidak satu akun MailChimp telah terdaftar Feedburner Pada Feedburner terdapat Feed Title, Feed title merupakan judul dari Feed yang sudah ada pada akun google feedburner, Feed merupakan sekumpulan content yang siap untuk di distribusikan secara instan dan otomatis tanpa harus ada visitor yang mengakses konten tersebut Aweber Pada Aweber terdapat Aweber list, seperti halnya Mailchimp, harus setup API Key terlebih dahulu pada wordpress dan minimal harus memiliki satu akun Aweber, dimana Aweber list menambahkan mailing list yang telah tersedia pada akun tersebut.

24 4.14 Filterable Portfolio Filterable Portfolio merupakan module yang kurang lebih mirip dengan module porfolio, yang menjadi pembeda disini adalah module Filterable Portfolio mampu memisahkan/memfilter tampilan dari portfolio sesuai dengan category Portfolio tersebut seperti contoh diatas yang menujukkan adanya beberapa tombol category diatas konten portfolio. Berikut setting dalam menambahkan Module Filterable Portfolio

25 Layout : Menentukan tampilan dari layout filter apakah porto terlihat memanjang atau berupa grid yaitu terkotak-kotak Post Number : Menentukan Jumlah dari post yang ditampilkan Include Categories : Menentukan Kategori yang ingin ikut ditampilkan pada portfolio Show Title : Memperlihatkan judul dari portfolio Show Categories : Menyalakan Link dari Kategori tersebut atau tidak Show Pagination : Menentukan paginasi dari filterable portfolio atau tidak Text Color : Menentukan warna dari tulisan pada filterable portfolio 4.15 Filterable Portfolio Gallery merupakan module untuk menampilkan list gambar pada website, berfungsi untuk showcasing foto-foto baik itu product maupun event untuk dikonsumsi oleh visitor. Berikut setting dalam menambahkan Module Gallery

26 Gallery Images : Memilih image mana saja yang ingin ditampilkan pada Gallery Layout : Menentukan jenis layout untuk gallery, apakah itu slider, maupun grid Show Pagination : Memperlihatkan paginasi/halaman untuk gallery Text Color : Menentukan warna dari tulisan pada filterable portfolio Automatic Animation : Untuk Slider, memastikan animasi terjadi secara otomatis 4.16 Image Image menampilkan gambar seperti gallery, hanya saja image module menampilkan gambar secara satuan, menambahkan animasi sehingga tampilan dari gambar tersebut menarik, dan gambar tersebut tidka terbatas pada jpeg, namun juga bisa untuk format GIF dan animasi GIF tersebut berjalan dengan baik. Berikut setting dalam menambahkan Module Image

27 Image URL : Mengisi URL Image atau memilih image dari gallery yang diinginkan Image Alt Text : Mengisi deskripsi singkat image untuk kebutuhan SEO Image Title Text : Mengisi judul dari image Open in Lightbox : Menentukan jika image ditampilkan dalam lightbox, jika iya, URL akan dihiraukan Link URL : Menentukan Link ketika image klik akan menuju link tersebut URL Opens : Jika image di klik, akan menentukan behaviour keluar url, apakah pada window asal, maupun membuka tab baru Animation : Menentukan arah animasi dari gambar ketika ditampilkan Remove Space below the image : Menentukan apakah image memiliki ruang dibawah image tersebut Image Alignment : Mengatur tampilan dari image apakah rata kiri maupun kanan 4.17 Number Counter

28 Number counter merupakan module untuk menambahkan tampilan angka yang diberi animasi, cocok untuk menampilkan status bagi para visitor dengan cara yang sangat menarik. Berikut setting dalam menambahkan Module Number Counter Title : Menentukan judul dari Number Counter Module Number : Memberikan angka untuk Number Counter tanpa simbol persen Percent Sign : Menampilkan simbol persen ditampilkan atau tidak Counter Text Color : Menentukan warna dari counter tersebut Text Color : Menentukan warna tulisan pada number counter 4.18 Person

29 Person Module menambahkan status orang ke dalam wordpress, sebuah module yang dapat memberikan informasi sangat menarik dan sangat personal berhubungan dengan kebutuhan untuk mempromosikan diri sendiri maupun tim kepada visitor Berikut setting dalam menambahkan Person

30 Name : Menentukan nama dari orang tersebut Position : Menentukan jabatan dari orang tersebut Image URL : Isi dengan foto orang tersebut Animation : Menentukan arah animasi ketika menampilkan module Text Color : Menentukan warna pada tulisan person Facebook Profile URL : Isi dengan link menuju profil fb orang tersebut Twitter Profile URL : Isi dengan link menuju profil twitter orang tersebut Google+ Profile URL : Isi dengan link menuju profil google+ orang tersebut Linkedin Profile URL : Isi dengan link menuju profil linkedin orang tersebut Description : Memberikan deskripsi tentang orang tersebut 4.19 Portfolio Portfolio module berfungsi sebagai showcase portfolio yang telah dibuat pada Wordpress, dimana portfolio yang telah dibuat sebagai list portfolio, module portfolio berfungsi untuk menampilkannya Berikut setting dalam menambahkan Portfolio

31 Layout : Menentukan layout dari portfolio, baik itu fullwidth berupa full satu row, maupun grid berupa susunan kotak. Post Number : Menentukan jumlah portfolio yang ingin ditambahkan Include Categories : Memasukan kategori ke dalam tampilan portfolio Show Title : Menentukan tampilan dari judul portfolio ditampilkan atau tidak Show Categories : Menentukan tampilan dari kategori portfolio ditampilkan atau tidak Show Pagination : Menentukan tampilan dari pemisah halaman ditampilkan atau tidak Text Color : Menentukan warna dari module portfolio

32 4.20 Post Navigation Post Navigation module berfungsi untuk memberi tombol navigasi cepat untuk blog post sehingga memudahkan visitor untuk mengakses post yang lainnya dengan sekali klik saja. Berikut setting dalam menambahkan Post Navigation In The same Category : Menentukan apakah link post masih pada kategori yang sama Hide Previous Post Link : Pilihan untuk menyembunyikan link Previous Hide Next Post Link : Pilihan untuk menyembunyikan link Next Previous Link Text : Merubah tulisan untuk link Previous Next Link Text : Merubah tulisan untuk link Next

33 4.21 Post Slider Post Slider seperti halnya slider, akan tetapi yang ditampilkan merupakan blog post dengan tampilan yang unik, menarik, mewah dan juga elegan membuat visitor pasti tertarik untuk mengklik pada slider tersebut Berikut setting dalam menambahkan Post Slider

34 Post Number : Isi berapa banyak post yang ingin ditampilkan Include Categories : Pilih kategori mana yang ingin ditampilkan kedalam slider Order By : Urutkan Post sesuai dengan setting yang ada Show Arrows : Pilih untuk menampilkan panah navigasi atau tidak Show Controls : Pilih untuk menampilkan tombol navigasi atau tidak Show Read More Button : Pilih untuk menampilkan tombol detail post atau tidak

35 Button Text : Menentukan tulisan dari tombol read more, biarkan kosong jika ingin menetapkan setting default Content Display : Menentukan jenis display dari post tersebut, apakah keseluruhan maupun beberapa saja. Use Post Excerpt if Defined : Untuk menentukan penambahan tulisan preview post secara otomatis atau diisi secara manual Automatic Excerpt Length : Menentukan jumlah karakter dalam preview post, biarkan kosong jika ingin dibiarkan default yaitu 270 Character. Show Post Meta : Pilihan untuk mematikan atau menyalakan Meta section pada post Background Color : Menentukan warna latar untuk post slider Background Image : Menentukan gambar untuk latar post slider Text Color : Menentukan warna tulisan pada Post Slider Show Featured Image : Menentukan gambar feature dari post untuk ditampilkan pada post slider Image Placement : Menentukan posisi dari featured image pada post slider Use Parallax Effect : Memberikan fungsi pada background image sebagai fixed position Use Background Overlay : Memberikan warna background diatas background image dibawah konten Background Overlay Color : Menentukan warna dari Background Overlay Use Text Overlay : Menentukan tampilan dari overlay dibawah tulisan post agar tulisan lebih terlihat dengan jelas Remove Inner Shadow : Menentukan tampilan dari Inner shadow pada post terlihat atau tidak Background Image Position : Menentukan posisi dari gambar latar. Bakcground Image Size : Menentukan ukuran dari gambar latar.

36 Automatic Animation : Menentukan animasi otomatis pada post slider dan dua opsi terakhir sama dengan opsi sebelumnya, yaitu Disable On dan Admin Label Klik Pada Tombol Mata untuk melakukan Preview, apabila sudah sesuai dengan tampilan

37