Divi Mania: Tema Divi WordPress Paling Anteng Buat Web Desainer

7 November 202225 September 2017 oleh Torikul Fauzi

Puskomedia.id—Divi Theme atau Tema Divi? jangan ditanya lagi. Elegant Theme saya rasa benar-benar berhasil membangun sesuatu yang luar biasa. Mulai dari website basis WordPress dengan tampilan bawaan ala kadarnya, hingga website cantik hanya dengan sedikit sentuhan desainernya. Intinya, tema ini benar-benar membuat web desainer terbantu dan memberikan seribu satu macam cara untuk mendesain website impian untuk kliennya.

Pertama mengenal tema Divi waktu jamannya masih dalam masa pencarian hakikat kebenar dari web desain di lingkungan WordPress. Waktu itu saya mencari satu tema yang bisa dibolak-balik sesuka hati, tapi tetep anteng. Tanpa terbatas oleh layout bawaan yang kadang-kadang tak sesuai keinginan. Keinginan ya, bukan kebutuhan. Karena pada dasarnya web desain itu masalah selera si empunya.

Nyoba pakai tema gratisan ditambah Page Builder dari Site Origin, ta rasa masih banyak kekurangan. Belum bisa memenuhi animo desain saya. Karena saya ini Homo Sapien yang sedikit tau web desain karena suka desain grafis. Jamannya pakai Corel Draw. Nyoba tema berbayar yang dilengkapi Visual Builder, saya gak suka karena rasanya berat-berat gimana gitu. Ditambah lagi live desainnya kurang anteng, kadang-kadang masih harus refresh berkali-kali.

Kriteria Tema untuk Web Desainer

Berbekal pengalaman nyoba macem-macem tema (yang pakai visual builder) WordPress, akhirnya saya bisa “merumuskan” tema impian itu seperti apa. Tema impian menurut saya adalah sebagai berikut;

(Lihat juga, saya sudah menulis: Pusing Memilih Tema untuk WordPress? Pertimbangkan 9 Hal Ini Dulu)

1. Gratis, murah dan bisa dipakai di banyak website, tak dibatasi lisensi kayak dari Themeforest;
2. Bagian halaman bisa diutak-utik sesuka hati;
3. Less/ minim pengaturan;
4. Murni ngandalin selera desain, tak terbatas oleh layout paten yang susah diutak-atik lagi;
5. Enteng waktu diakses dari macem-macem browser;
6. Dah gitu aja kira-kira;

Setelah saya nyoba browsing dengan macem-macem kata kunci, akhirnya nemu web https://www.elegantthemes.com/ yang punya tema Tema Divi. Saya baca dengan teliti sambil mikir-mikir elemen sebuah website itu apa saja. Elemen web misalnya; tab, accordion, icon box, heading, kolom dalam satu baris, dan lain-lain. Waktu itu saya memutuskan memilih tema divi sebagai tema andalan.

Setelah berhasil join jadi member, saat itulah saya resmi jadi Divi Mania. Waktu itu sih belum tahu kalau ternyata tema ini terkenal di kalangan developer WordPress. Apalagi yang namanya komunitas Divi (Divi Mania). Sampai-sampai ada website yang khusus membahas tentang tema ini dan menjual layout/ theme child’nya.

Oh ya, waktu itu lagi dapat project web komunitas (web membership). Saya nyoba install di web klien. Perdana dengan Tema Divi. Begitu berhasil dipasang dan diaktifin, dalam hati saya cuma bergumam. “Tema opo iki, ora ana apa-apane (tema apa ini, gak ada apa-apanya)”. Pengaturannya juga kelihatan sederhana banget, cuma ngatur logo, font, warna, sama nambahin teks footer.

Baca juga : Pentingnya Kecepatan Akses Sebuah Website

Langkah-langkah Pengaturan Dasar Tema Divi

Weleh gimana ini, saya mau bikin web macam apa kalau tema yang dipakai gak ada apa-apanya. Import demo juga gak ada (kebiasaan import demo). Kira-kira kalau digambarin Tema Divi, layoutnya cuma kayak gini.

Kepalang basah sudah beli membershipnya, kalau gak salah waktu itu sekitar $80’an. Saya mikir keras, ini gimana kok tema mahal-mahal isinya kosongan gini. Setelah mengamati struktur tema dan pengaturan di balik layar (bagian admin), masih tetep harus mikir keras untuk memulai proses desain webnya. Mata melirikkan ke bagian atas layar, ada tulisan “Aktifkan Pembangun Visual”, nah ini kayaknya titik awalnya.

Maklum, jaman sakmono saya masih belum nerapin langkah-langkah standar untuk membangun website dengan WordPress. Jadi bingung harus mulai dari mana. Seharusnya jaman sakmono, langkah-langkahnya kayak gini;

(Lihat artikel saya 5 Langkah Pengembangan Web yang Harus Dilalui oleh Developer)

1. Set pengaturan dasar tema sesuai rencana pengembangan website YBS;
2. Pilih warna background header (tempat menu utama);
3. Tentukan warna dasar/ skema warna website, jenis font tiap bagian (header dan body);
4. Pilih jenis font untuk menu utama;
5. Tentukan jenis dan ukuran font body;
6. Warna background widget bagian footer;
7. Nah, baru deh buat halaman lengkap web (home, tentang, kontak, news/ blog);
8. Baru deh buat menu utamanya, terus cantolin deh di header;
9. Cukup itu dulu.

Kenapa harus membuat halaman terlebih dahulu sebelum membuat menu utama website? Ya karena nantinya menu itu juga dibuat untuk navigasi ke setiap halaman. Saya sarankan jangan sekali-kali membuat menu fiktif, yang isinya cuma link “#”. Karena itu sama saja membohongi diri sendiri. Mending gak ada menunya daripada membohongi diri sendiri kan.

Kalau saya ngajarin ke anak-anak, “pokoke haram gawe menu kambi link mati (menu fiktif). Kalau masih ngeyel, ta jotos ngko koe” (Pokoknya tidak boleh membuat menu dengan link mati (#). Kalau masih tak mau, nanti ta kasih uang kamu).

Segmentasi Tema Divi

Yups, sampean harus tahu bahwa segmentasi Tema Divi itu buat web desain (murni/ pure) terutama web korporasi, charity/ yayasan. Pokoknya yang banyak menampilkan halaman statis, ketimbang update konten/ berita. Namun, belakangan dari hasil semedi saya berhasil menemukan bahwa Tema Divi juga enak buat bikin toko online.

Khususnya toko online yang nampilin beberapa produk. Walaupun dihajar buat web yang punya ribuan produk juga bisa, tapi saya sarankkan gunakan hanya untuk web-web basis korporasi.

Kalau masih dipaksa buat website berita, sampean bakal kesusahan nampilin modul news. Karena memang gak ada, cuma standar blog saja. Akibatnya harus pasang plugin tambahan buat nampilin konten dengan gaya web news.

Saya mengatakan segmentasi Tema Divi itu buat web desain murni, karena memang tema ini cuma ngandalin kemudahan desain tiap halamannya. Kalau tidak ada basic desain dan ketelatenan menata layoutnya, percaya sama saya itu musrik web yang sampean buat dengan bakal kelihatan berantakan.

Kalau buat pengguna awam lumayan cocok. Hanya saja desain yang dihasilkan sangat standar bawaan layout hasil import. Kalau mau layout yang lebih mentereng, bisa searching di blognya Elegant Theme. Ada tuh kayaknya Divi Layout Kit. Kalau punya budget lebih bisa searching dari komunitas Divi Mania. Banyak kok yang menyediakan Child Theme dan layout yang bisa main pakai teknik import-eksport, plus image di halaman didownload ke media website YBS.

Baca juga : Benarkah Konten Tidak Berkualitas Mempengarui Website ?

Medesain Halaman Depan dengan Divi Builder

Saya menerapkan langkah-langkah pengembangan website biar gak ada yang kelewat. Kerjanya juga bisa efektif gak muter-muter kaya kitiran. Nah, halaman yang paling pertama diperhatiin itu halaman berandanya.

Kalau saya yang biasa sompral waktu ngbangun web, langsung ta hajar di web live. Ora urus berantakan kayak apa, yang penting klien bisa langsung mantau perkembangan websitenya. Gak ada tuh istilah install XAMPP dkk di laptop. 😀

Masalah boros bandwith atau kuota sih iya, tapi kelebihan mendesain di live web ada banyak. Yang paling utama kita dipaksa selesai per-bagian biar gak malu-maluin web mangkrak kayak gak digarap-garap.

Misalnya sesi malam pertama membuat halaman berandanya kudu selesai, sesuai pesanan. Kalau dapet klien yang babar blas gak ada gambaran websitenya mau kaya apa, ya hajar saja pakai layout prebuilde atau apa itu namanya layout bawaan yang cuma import aja.

Kalau lagi dapet klien yang agak idep gak ngasih-ngasih materi, hajar pakai konten dummy. Comotin aja dari web sebelah demo kalau punya. Gambar comotin aja dari www.pexels.com sedikit dicroping pakai Gimp, pilih gambar resolusi paling kecil saja yang penting bisa kelihatan agak jernih.

Konsep beranda secara umum menurut saya isinya mengandung unsur;

1. Kekerasan Hero atau slider,
2. Selayang pandang,
3. Services/ Produk utama,
4. Testimoni kalo perlu,
5. Berita

Baca juga : Yang Harus diperhatikan Sebelum Membuat Website

Fitur Tema Divi

Fitur paling powerfull Tema Divi yaitu kemudahan dalam membuat macem-macem layout halaman di WordPress. Ditambah lagi, gak bikin ngeden server atau bahasa kerennya gak bikin server ngos-ngosan alias enteng, halah.

Satu lagi, ada macem-macem pilihan modul pembangun elemen halaman web). Misalnya; elemen image, tabs, header, counter, dst. Silahkan baca sendiri di websitenya https://www.elegantthemes.com/gallery/divi/. 😀

Program Afiliasi

Saat ini saya lagi daftar program afiliasinya. Biar ke depannya misal sampean minat join jadi Divi Mania, terus klik link lewat link afiliasi disini, saya dapet komisinya deh. Ibarat, “Menyelam sekalian nangkep ikan”. 😀

Saya Pengen Nyoba Tema Divi Om!

Boleh-boleh saja. Syaratnya, join di grup Telegram saya API Community biar ta minta bantuan tim saya suruh bantu pasangin Tema Divi di website sampean, sekalian dikasih kunci API’nya buat update nantinya.

Sebagai ajang silaturahmi juga. Sukur-sukur ada yang minat minta diajarin mulai dari nol ngedesain halaman dengan Divi Builder. Kalau gak banyak yang minta, saya mau lah mandu. Gratis kok, gak ta pungut biaya sedikit pun. Paling minta diisiin pulsa, weleh!

Tahap Ta’aruf dengan Tema Divi

Halah, apalagi ini om? Ya intinya saya cuma mau curhat tentang pengalaman saya menggunakan Tema Divi dari sejak jaman Belanda (dusta). Mulai dari jaman desainnya masih cupu hingga kini merasa agak jumawa desainnya lebih propesional. Kira-kira tahapannya seperti ini;

Tahap Inisiasi

1. Standar banget, gak ada kreatip-kreatipnya babar blas;
2. Header standar, kadang milih pakai background warna mencolok mata;
3. Layout prebuilt, pilihan warna pun ikut-ikutan bawaan;
4. Sidebar standar, tampilannya agak jelek-jelek gimana gitu;
5. Teks di laptop gede, di mobile ancur berantakan gak karuan tugel-tugel gak layak baca;
6. Halaman blog, cuma bikin halaman judulnya “blog” terus dicantolin ke pengaturan bawaan WordPress (itu loh yang di pengaturan reading di bawah halaman depan;

Tahap Pendekatan

1. Mulai agak neko-neko;
2. Sedikit main transparansi header;
3. Pilihan warna clear, font menu utama gak tipis-tipis gimana gitu;
4. Layout mulai download dari resource blog Elegant Theme;
5. Mulai baca-baca trik and tips;
6. Warna layout mulai sedikit dimainin;

Tahap Chemistry

1. Mulai bangga mengatakan, i’am Divi Mania cuy;
2. Header dihajar clear habis;
3. Tinggi header mulai dikompres habis, bentek;
4. Hlaman utama yang jelek mulai dimainin, dorong kekanan, pepet habis nyamppe-nyampe widget terpaksa tersingkir ke bawah;
5. Widget yang jelek kadang-kadang disembunyiin pakai CSS (display: none;);
6. Nambahin CSS custom setidaknya setingkat Child Theme (bisa nyampe 60’an baris);
7. Mulai familiar (mikir) pakai teknik eksport-import layout antar web;
8. Tumplek blek pengaturan samain antara web klien satu dengan lain, cuma beda desain halaman saja;
9. Eksport-import pengaturan;
10. Mulai bermain-main dengan Woocommerce. (Pernah nyoba buat web live desain percetakan);
11. Penyempurnaan web membership, (contohnya: https://agen.puskomedia.id/ )
12. Dan lain-lain

Tahap Perkawinan

Hikmah

Sebelum pakai Tema Divi, dulu saya gak paham itu markup HTML + CSS. Kalaupun makai juga hasil nyomot dari blog orang. Alhamdulillah berkat Tema Divi sekarang saya sedikit bisa makai CSS Custom, jadi gak ngandalin tampilan bawaan tema banget.

Kalau lagi emosi dan kehabisan ide, kadang-kadang saya nerapin teknik supercopy. Nyontek desain web orang pakai Tema Divi, saking entengnya. Mau plek jiplek kayaknya bisa kalau dikasih tantangan “sok gawekno tampilan website seperti tokopedia atau bukalapak, nanti ta bayar 10 juta, kalau cuma bisa mirip 50% turun jadi 15 juta, kalau cuma 20% cuma cair 20 juta” Weleh…. Kayaknya saya berani nerimanya.

Akhir kata, Saya Torikul Fauzi Co Leader PuskoMedia Indonesia adalah seorang Divi ManiaX. Seneng nyontek web orang lain pakai teknik ATM (Amati, Tiru, Modifikasi) kadang sama persis plek jiplek kalau lagi khilaf. 😀

Salam….

Baca juga : Cara Mudah Meningkatkan User Engagement Pada Website