babastudio.com
babastudio.com
babastudio.com
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.
babastudio.com
babastudio.com
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.
babastudio.com 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.
babastudio.com
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.
babastudio.com Title
Content
Title Title 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.
babastudio.com
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. Klik Pada Tombol Mata untuk melakukan Preview, apabila sudah sesuai dengan tampilan yang diinginkan, pilih Save & Exit.
babastudio.com 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 :
babastudio.com
Berikut penjelasan untuk setting Audio Player
Audio : Tambahkan File audio disini, baik itu Upload maupun add melalui gallery dimana audio tersebut telah terupload sebelumnya.
babastudio.com 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
dan dua opsi terakhir sama dengan opsi sebelumnya, yaitu Disable O n dan Admin Label dengan fungsi yang sama. Klik Pada Tombol Mata untuk melakukan Preview, apabila sudah sesuai dengan tampilan yang diinginkan, pilih Save & Exit.
4.4 Bar Counters
Bar Counters berfungsi untuk menambahkan prosentase untuk display progress, skill, kemampuan, maupun status, dengan animasi dan terlihat sangat menarik bagi para visitor
babastudio.com
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
babastudio.com 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
babastudio.com
Berikut penjelasan untuk setting Bar Counters
Text Color : Mengubah warna dari tulisan Counter
Background Color : Memberi warna pada latar Bar Counter
babastudio.com Bar Background Color : Memberi warna pada Bar nya saja
Use Percentage : Aktfikan apabila persentase dimunculkan, jika hanya menggunakan angka, matikan.
dan dua opsi terakhir sama dengan opsi sebelumnya, yaitu Disable On dan Admin Label dengan fungsi yang sama.
Klik Pada Tombol Mata untuk melakukan Preview, apabila sudah sesuai dengan tampilan yang diinginkan, pilih Save & Exit.
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.
babastudio.com
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.
babastudio.com
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
babastudio.com
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
babastudio.com 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 dan dua opsi terakhir sama dengan opsi sebelumnya, yaitu Disable On dan Admin Label dengan fungsi yang sama. Klik Pada Tombol Mata untuk melakukan Preview, apabila sudah sesuai dengan tampilan yang diinginkan, pilih Save & Exit.
4.6 Blurb Module
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.
babastudio.com
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.
babastudio.com
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.
babastudio.com
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
babastudio.com Content : Menambahkan Content utama pada modul blurb
dan dua opsi terakhir sama dengan opsi sebelumnya, yaitu Disable On dan Admin Label dengan fungsi yang sama.
Klik Pada Tombol Mata untuk melakukan Preview, apabila sudah sesuai dengan tampilan yang diinginkan, pilih Save & Exit.
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
babastudio.com
Terdapat beberapa setting dalam penambahan module button
Button Url : Menambahkan link untuk akses Button tersebut tertuju.
babastudio.com 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 dan dua opsi terakhir sama dengan opsi sebelumnya, yaitu Disable On dan Admin Label dengan fungsi yang sama. Klik Pada Tombol Mata untuk melakukan Preview, apabila sudah sesuai dengan tampilan yang diinginkan, pilih Save & Exit.
4.8 Call to Action Module
29
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.
babastudio.com
Berikut merupakan setting untuk menambahkan call to action
babastudio.com
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.
babastudio.com
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 dan dua opsi terakhir sama dengan opsi sebelumnya, yaitu Disable On dan Admin Label dengan fungsi yang sama. Klik Pada Tombol Mata untuk melakukan Preview, apabila sudah sesuai dengan tampilan yang diinginkan, pilih Save & Exit.
babastudio.com 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
babastudio.com
Title : Menambahkan judul untuk Circle Counter
babastudio.com 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 dan dua opsi terakhir sama dengan opsi sebelumnya, yaitu Disable On dan Admin Label dengan fungsi yang sama. Klik Pada Tombol Mata untuk melakukan Preview, apabila sudah sesuai dengan tampilan yang diinginkan, pilih Save & Exit.
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.
babastudio.com
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.
babastudio.com 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 dan dua opsi terakhir sama dengan opsi sebelumnya, yaitu Disable On dan Admin Label dengan fungsi yang sama. Klik Pada Tombol Mata untuk melakukan Preview, apabila sudah sesuai dengan tampilan yang diinginkan, pilih Save & Exit.
babastudio.com
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.
babastudio.com Sebagai default, contact form telah disediakan beberapa field yaitu Name, Email, dan Message, sementara dalam beberapa kasus dibutuhkan tidak hanya field yang ditentukan di atas, untuk menambahkannya klik Add New Field di pojok kiri bawah.
M enentukan Identifier U nik untuk F ield Tersebut, jangan menggunakan Karakter spesial dan spasi contoh: field_alamat M emberi judul untuk F ield tersebut
M enentukan tipe dari field tersebut, yang terdiri dari Input F ield, E mail field yang sudah diimbue dengan email validation, dan juga textarea yang berarti input berukuran besar dan mampu menampung text dalam jumlah bany ak.
Adapun setting form secara general adalah sebagai berikut.
babastudio.com
Display Captcha : Menentukan form menggunakan Captcha/security code atau tidak
babastudio.com Email : Menentukan alamat email 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
dan dua opsi terakhir sama dengan opsi sebelumnya, yaitu Disable On dan Admin Label dengan fungsi yang sama. Klik Pada Tombol Mata untuk melakukan Preview, apabila sudah sesuai dengan tampilan yang diinginkan, pilih Save & Exit.
4.12 Countdown Timer Module
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.
babastudio.com
Berikut beberapa setting dalam menambahkan countdown timer
babastudio.com 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 dan dua opsi terakhir sama dengan opsi sebelumnya, yaitu Disable On dan Admin Label dengan fungsi yang sama. Klik Pada Tombol Mata untuk melakukan Preview, apabila sudah sesuai dengan tampilan yang diinginkan, pilih Save & Exit.
4.13 Divider
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.
babastudio.com
Berikut setting dalam menambahkan Divider
Color : Menentukan Warna dari Divider
babastudio.com Visibility : Menentukan apakah Divider ditampilkan sebagai sebuah garis atau tidak Height : Menentukan Ketinggian / Ketebalan dari Divider tersebut
dan dua opsi terakhir sama dengan opsi sebelumnya, yaitu Disable On dan Admin Label dengan fungsi yang sama.
Klik Pada Tombol Mata untuk melakukan Preview, apabila sudah sesuai dengan tampilan yang diinginkan, pilih Save & Exit.
4.13 Email Optin
Email Optin atau lebih dikenal sebagai DIVI newsletter Signup merupakan modul untuk menciptakan form pendaftaran E-Mail yang terintegrasi dengan mailchimp, Aweber, dan FeedBurner bagi yang biasa menggunakan Provider mailing List tersebut
babastudio.com
Berikut setting dalam menambahkan Email Optin
babastudio.com 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
Content : Menentukan isi dari teks penjelasan form dan dua opsi terakhir sama dengan opsi sebelumnya, yaitu Disable On dan Admin Label dengan fungsi yang sama. Terdapat perbedaan pada Newsletter Signup ketika memilih Service provider yang berbeda maka isi akan berubah menjadi sedikit berbeda, dengan ketentuan berikut:
babastudio.com
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
babastudio.com 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. Klik Pada Tombol Mata untuk melakukan Preview, apabila sudah sesuai dengan tampilan yang diinginkan, pilih Save & Exit.
babastudio.com
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
babastudio.com
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
babastudio.com
Show Pagination : Menentukan paginasi dari filterable portfolio atau tidak Text Color : Menentukan warna dari tulisan pada filterable portfolio dan dua opsi terakhir sama dengan opsi sebelumnya, yaitu Disable On dan Admin Label dengan fungsi yang sama. Klik Pada Tombol Mata untuk melakukan Preview, apabila sudah sesuai dengan tampilan yang diinginkan, pilih Save & Exit.
4.15 Filterable Portfolio
babastudio.com 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
Gallery Images : Memilih image mana saja yang ingin ditampilkan pada Gallery Layout : Menentukan jenis layout untuk gallery, apakah itu slider, maupun grid
babastudio.com
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 dan dua opsi terakhir sama dengan opsi sebelumnya, yaitu Disable On dan Admin Label dengan fungsi yang sama. Klik Pada Tombol Mata untuk melakukan Preview, apabila sudah sesuai dengan tampilan yang diinginkan, pilih Save & Exit.
4.16 Image
babastudio.com 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
babastudio.com
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
babastudio.com Link URL : Menentukan Link ketika image di 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 dan dua opsi terakhir sama dengan opsi sebelumnya, yaitu Disable On dan Admin Label dengan fungsi yang sama. Klik Pada Tombol Mata untuk melakukan Preview, apabila sudah sesuai dengan tampilan yang diinginkan, pilih Save & Exit.
4.17 Number Counter
Number counter merupakan module untuk menambahkan tampilan angka yang diberi animasi, cocok untuk menampilkan status bagi para visitor dengan cara yang sangat menarik.
babastudio.com
Berikut setting dalam menambahkan Module Number Counter
babastudio.com 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 dan dua opsi terakhir sama dengan opsi sebelumnya, yaitu Disable On dan Admin Label dengan fungsi yang sama. Klik Pada Tombol Mata untuk melakukan Preview, apabila sudah sesuai dengan tampilan yang diinginkan, pilih Save & Exit.
4.18 Person
Person Module menambahkan status orang ke dalam wordpress, sebuah m odule yang dapat memberikan informasi sangat menarik dan sangat personal berhubungan dengan kebutuhan untuk mempromosikan diri sendiri maupun tim kepada visitor
babastudio.com
Berikut setting dalam menambahkan Person
babastudio.com
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
babastudio.com
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 dan dua opsi terakhir sama dengan opsi sebelumnya, yaitu Disable On dan Admin Label dengan fungsi yang sama. Klik Pada Tombol Mata untuk melakukan Preview, apabila sudah sesuai dengan tampilan yang diinginkan, pilih Save & Exit.
babastudio.com 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
babastudio.com
babastudio.com 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 dan dua opsi terakhir sama dengan opsi sebelumnya, yaitu Disable On dan Admin Label dengan fungsi yang sama. Klik Pada Tombol Mata untuk melakukan Preview, apabila sudah sesuai dengan tampilan yang diinginkan, pilih Save & Exit.
4.20 Post Navigation
babastudio.com
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
babastudio.com 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 dan dua opsi terakhir sama dengan opsi sebelumnya, yaitu Disable On dan Admin Label dengan fungsi yang sama. Klik Pada Tombol Mata untuk melakukan Preview, apabila sudah sesuai dengan tampilan yang diinginkan, pilih Save & Exit.
babastudio.com
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
babastudio.com
babastudio.com
babastudio.com 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
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.
babastudio.com
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
babastudio.com 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.
Automatic Animation : Menentukan animasi otomatis pada post slider dan dua opsi terakhir sama dengan opsi sebelumnya, yaitu Disable On dan Admin Label dengan fungsi yang sama.
babastudio.com
Klik Pada Tombol Mata untuk melakukan Preview, apabila sudah sesuai dengan tampilan yang diinginkan, pilih Save & Exit.
babastudio.com
babastudio.com
babastudio.com
