Elementor vs Divi: Perbandingan Fitur Desain

Elementor dan Divi adalah dua alat hebat untuk membuat situs web dengan WordPress, terutama bagi mereka yang ingin membuat situs web yang fokus pada desain. Baik itu Elementor atau Divi hadir dengan editor visual untuk memudahkan Anda membuat halaman di situs WordPress Anda.

Pada artikel sebelumnya, kami telah menulis artikel yang membandingkan fitur umum dari dua pembuat halaman. Kali ini kita akan membandingkan detail fitur desain yang ditawarkan baik oleh Elementor maupun Divi.

Hal pertama yang pertama. Baik Elementor dan Divi hadir dengan editor visual tempat Anda dapat mendesain halaman Anda. Editor hadir dengan kemampuan pengeditan responsif. Artinya, Anda dapat mengoptimalkan desain untuk semua jenis perangkat (desktop, tablet, dan smartphone). Baik itu Elementor atau Divi memungkinkan Anda untuk menggunakan pengaturan yang berbeda (misalnya, nilai margin) untuk setiap jenis perangkat.

Kemampuan pengeditan responsif yang ditawarkan oleh Elementor dan Divi memungkinkan Anda untuk mengadopsi pendekatan desain yang mengutamakan seluler di situs web Anda.

Ada puluhan fitur desain yang ditawarkan Elementor dan Divi. Untuk memudahkan Anda mempelajari perbedaannya, kami akan membagi perbandingannya menjadi enam bagian.

Aset dan Media

– Perpustakaan Ikon

Untuk beberapa desainer, ketersediaan koleksi ikon adalah aspek yang paling mereka pertimbangkan saat memilih pembuat halaman. Dalam desain web, ikon memiliki peran penting seperti halnya tipografi.

Sejak awal, Elementor mengandalkan Font Awesome untuk menyediakan koleksi ikon kepada pengguna. Meskipun jumlah ikon cukup banyak, namun tidak terlalu memenuhi kebutuhan desainer. Apalagi jika Anda ingin menambahkan ikon tipis. Anda perlu meningkatkan ke versi pro dari Font Awesome untuk mengakses ikon tipis dan set ikon premium lainnya.

Jika Anda memiliki kumpulan ikon sendiri yang diunduh dari Fontello, IcoMoon atau Fontastic, Elementor memungkinkan Anda untuk menggunakannya.

Bagaimana dengan Divi?

Tidak seperti Elementor, Divi memiliki koleksi ikonnya sendiri. Sejujurnya, kami tidak tahu persis jumlah ikon yang ditawarkan oleh Divi, tetapi Anda dapat dengan mudah menemukan ikon tipis serta ikon umum seperti ikon media sosial hingga ikon merek.

Baru-baru ini, Divi juga terintegrasi dengan Font Awesome. Artinya Anda juga dapat menambahkan ikon yang disediakan oleh Font Awesome seperti di Elementor. Dengan kata lain, Divi memiliki dua penyedia ikon: pustaka ikon asli Divi itu sendiri dan Font Awesome. Tidak seperti Elementor, Divi tidak mengizinkan Anda mengunggah kumpulan ikon khusus.

- Video Latar Belakang

Baik itu Elementor atau Divi memungkinkan Anda untuk menambahkan video sebagai latar belakang pada suatu bagian. Perbedaannya adalah Divi tidak mengizinkan Anda untuk menambahkan video latar belakang dari sumber eksternal (misalnya, YouTube). Anda hanya dapat menggunakan latar belakang video dengan mengunggah file video dalam format MP4 atau Webm.

Sementara itu, Elementor memungkinkan Anda untuk menambahkan video latar belakang dari sumber pihak ketiga (YouTube dan Vimeo). Anda bahkan dapat menambahkan video dinamis menggunakan plugin bidang khusus seperti ACF atau JetEngine.

- Tampilan Slide Latar Belakang

Selain video, Elementor juga memungkinkan Anda menggunakan slideshow sebagai latar belakang suatu bagian. Fitur yang sama tidak tersedia di Divi.

Saat mengatur tampilan slide latar belakang, Anda dapat menambahkan gambar sebanyak yang Anda inginkan. Agar tidak mengganggu kecepatan pemuatan situs web Anda, Elementor menawarkan opsi pemuatan lambat.

- Topeng Latar Belakang

Divi memiliki fitur asli untuk menambahkan topeng latar belakang. Dengan fitur ini, Anda dapat menambahkan bentuk tertentu ke latar belakang Anda saat ini. Jadilah latar belakang warna solid, gradien, gambar, atau video. Berkat fitur ini, Anda tidak perlu mengunggah gambar PNG transparan untuk menambahkan bentuk ke latar belakang. Ada 23 pilihan bentuk yang bisa Anda pilih.

Berikut cara kerja fitur tersebut:

Bagaimana dengan Elementor?

Sejauh ini, Elementor belum memiliki fitur topeng latar belakang asli.

– Pola Latar Belakang

Untuk lebih menghias latar belakang bagian, Divi juga memungkinkan Anda menambahkan pola. Sama seperti topeng, pola juga berfungsi pada latar belakang warna solid, gradien, gambar, dan video. Divi menawarkan 24 pola yang dapat Anda pilih.

Elementor belum memiliki fitur asli untuk menambahkan pola ke latar belakang.

– Pembagi Bentuk

Pembagi bentuk memungkinkan Anda untuk menghias bagian bawah atau atas bagian dengan menambahkan bentuk tertentu. Baik Divi dan Elementor memungkinkan Anda menambahkan pembagi bentuk ke bagian.

Ada lebih dari 20 opsi pembagi bentuk yang ditawarkan oleh Elementor dan Divi. Saat menambahkan pembagi bentuk di Elementor, Anda hanya diberikan daftar nama pembagi. Saat berada di Divi, Anda diberikan pratinjau pembagi.

– Penyembunyian Gambar

Di Elementor, Anda dapat mengubah gambar persegi atau persegi panjang menjadi bentuk tertentu berkat fitur masking gambar asli. Ada enam bentuk default yang dapat Anda pilih: lingkaran, bunga, sketsa, segitiga, blog, segi enam. Anda juga dapat membuat bentuk kustom dengan membuat gambar SVG.

Divi tidak memiliki fitur penyamaran gambar asli.

Warna & Efek

– Warna Global

Warna global adalah fitur yang berguna, terutama jika Anda sering membuat situs web yang terdiri dari banyak halaman. Dengan menggunakan warna global, Anda dapat mengubah warna pada beberapa elemen — baik itu pada halaman yang sama atau halaman yang berbeda — dengan satu klik.

Baik Elementor dan Divi hadir dengan fitur global. Anda dapat membaca posting ini untuk mempelajari cara menggunakan warna global di Elementor. Sedangkan untuk Divi, Anda bisa membaca postingan ini.

– Gradien

Jika Anda suka bermain-main dengan gradien, Divi mungkin menjadi pilihan yang lebih cocok. Alasannya adalah bahwa Divi memungkinkan Anda untuk menambahkan beberapa warna (lebih dari dua) dua gradien Anda. Fitur gradien lanjutan Divi dapat digunakan pada elemen apa pun yang mendukung gradien. Mulai dari background bagian, background baris, background kolom, hingga button.

Fitur gradien Elementor hanya mendukung dua warna.

- Hamparan Latar Belakang

Saat menata bagian atau kolom di Divi, Anda dapat menambahkan gambar sebagai latar belakang. Untuk membuat konten bagian atau kolom lebih terlihat, Anda mungkin ingin menambahkan hamparan.

Elementor memiliki blok pengaturan pada panel pengaturan yang didedikasikan untuk menambahkan overlay latar belakang. Anda dapat menggunakan apakah warna solid atau gradien. Divi juga memungkinkan Anda untuk menambahkan overlay latar belakang (solid dan gradien) seperti Elementor.

– Mode Campuran

Jika Anda sering menggunakan Photoshop dan alat editing gambar lainnya, Anda pasti sudah tidak asing lagi dengan istilah “blend mode”. Fitur ini memungkinkan Anda untuk mencampur dua elemen untuk membuatnya menyatu dalam nada warna yang sama.

Elementor dan Divi hadir dengan fitur jenis ini, memungkinkan Anda untuk memadukan dua elemen ke dalam nada warna yang sama. Di Elementor, opsi untuk menambahkan mode campuran hanya tersedia di widget Judul. Sementara di Divi, Anda dapat menambahkan mode campuran pada gambar latar belakang, modul Gambar, modul Teks, dan modul lainnya.

– Filter CSS

Filter CSS adalah fitur yang memungkinkan Anda menerapkan efek tertentu pada gambar pada desain Anda. Dengan fitur tersebut, Anda tidak perlu mengedit gambar Anda menggunakan Photoshop untuk menambahkan efek seperti blur, sepia, dan sebagainya. Sebagai gantinya, Anda hanya perlu mengubah ukuran gambar Anda dan kemudian segera mengunggahnya.

Di Elementor, Anda memiliki lima opsi filter CSS. Saat berada di Divi, ada 8 opsi filter CSS yang bisa Anda pilih:

– Bayangan Kotak

Gambar di atas adalah contoh box shadow yang bisa Anda atur di Elementor dan Divi. Box shadow sendiri bisa ditambahkan ke semua elemen, baik itu di Elementor maupun Divi. Dari bagian, kolom, hingga widget (disebut modul di Divi).

Tipografi

– Tipografi Global

Tipografi global sama bermanfaatnya dengan warna global. Anda akan menemukan betapa bermanfaatnya ketika Anda membuat situs web yang terdiri dari beberapa halaman. Dengan tipografi global, Anda dapat mengubah pengaturan tipografi di banyak area dengan satu klik.

Tipografi global, serta warna global seperti yang telah kami sebutkan sebelumnya di atas, dapat menghemat banyak waktu Anda dalam mengedit situs web Anda.

Elementor adalah pembuat halaman yang memiliki fitur jenis ini. Sayangnya, Divi belum memiliki fitur seperti itu.

– Kontrol Tipografi

Kemampuan untuk menyesuaikan font adalah fitur yang akan Anda dapatkan dari plugin pembuat halaman seperti Elementor dan Divi Builder. Fitur live editing memungkinkan Anda untuk melihat perubahan secara real-time. Di Elementor dan Divi, Anda dapat menyesuaikan font dengan mengatur ukuran, berat, dan sebagainya.

Opsi pengaturan berikut tersedia untuk menyesuaikan font di Elementor dan Divi:

• Warna
• Ukuran
• Bobot
• Transform (huruf besar, huruf kecil, huruf besar)
• Gaya (normal, miring, miring)
• Dekorasi (Garis bawah, garis atas, garis tembus)
• Tinggi garis
• Spasi huruf
• Spasi kata

Baik di Elementor atau Divi, pratinjau font tersedia untuk memungkinkan Anda melihat keluarga font sebelum Anda menggunakannya.

– Font Kustom

Sebagian besar alat desain saat ini menggunakan Google Font untuk menambahkan pustaka font ke editor mereka. Elementor dan Divi tidak terkecuali. Di Divi, Anda memiliki opsi untuk menonaktifkan Google Font untuk menyederhanakan opsi font.

Untuk proyek situs web tertentu, Anda mungkin ingin menggunakan font khusus sebagai gantinya. Baik Elementor dan Divi memungkinkan jika Anda ingin menggunakan font Anda sendiri. Di Divi, jenis file yang diizinkan untuk font khusus adalah TTF dan OTF. Di Elementor, Anda dapat mengunggah TTF, dan WOFF.

Jika Anda menggunakan Adobe Fonts, Elementor mendukung integrasi dengan Adobe Fonts untuk memungkinkan Anda menggunakan font dari Adobe Fonts tanpa mengunduh file font terlebih dahulu. Divi tidak mendukung integrasi dengan Adobe Font. Jadi, Anda perlu mengunduh file font terlebih dahulu untuk menggunakan font dari Adobe Fonts.

Tata Letak

- Tata letak halaman

Di Elementor, sebelum Anda mulai membuat desain halaman Anda, Anda dapat mengatur tata letak halaman terlebih dahulu. Ada empat opsi tata letak halaman yang dapat Anda pilih:

• Default: Tata letak halaman default yang Anda atur dari Pengaturan Situs
• Elementor Canvas: Tata letak halaman kosong. Tanpa header dan footer
• Elementor Full-width: Mirip dengan Elementor Canvas, tetapi dengan header dan footer
• Tema: Templat halaman default tema Anda

Divi tidak memiliki opsi pengaturan untuk mengatur tata letak halaman dari editornya. Di Divi, wadah (bagian) secara otomatis diatur ke lebar penuh. Jika Anda ingin halaman Anda memiliki ukuran tertentu (misalnya, 1200px), Anda dapat mengatur ukuran baris (Anda dapat mengatur lebar default baris melalui Penyesuai Tema).

Divi juga memungkinkan Anda membuat halaman kosong (tanpa footer dan sidebar). Namun, Anda perlu mengaturnya melalui panel pengaturan Gutenberg alih-alih panel pengaturan Divi Builder.

– Pemosisian Kustom

Pemosisian khusus memungkinkan Anda menempatkan elemen di mana saja pada desain Anda. Dengan fitur ini, Anda dapat mencapai tata letak desain tertentu. Berikut adalah contohnya:

Seperti yang Anda lihat pada tangkapan layar di atas. Ada lima elemen yang mengelilingi gambar di area tengah. Tata letak seperti di atas dapat dicapai berkat pemosisian khusus.

Pemosisian khusus berfungsi dengan menempatkan elemen berdasarkan posisi vertikal dan horizontal layar perangkat, bukan wadahnya. Baik itu di Elementor atau Divi, Anda dapat mencapai tata letak desain seperti di atas.

– Margin & Padding

Margin dan padding adalah fitur pengaturan yang dapat Anda gunakan untuk mengatur ruang antara elemen tertentu dengan elemen lain di sekitarnya. Di Elementor dan Divi, Anda dapat mengatur margin dan padding pada semua elemen. Dari bagian, kolom, hingga widget (modul).

– Z-Indeks

Z-index adalah properti CSS yang menentukan urutan tumpukan elemen. Elemen dengan urutan tumpukan yang lebih besar selalu di depan elemen dengan urutan tumpukan yang lebih rendah. Baik Elementor dan Divi memungkinkan Anda untuk menetapkan nilai indeks-z dari suatu elemen.

– Penjajaran Flexbox

Penjajaran Flexbox memungkinkan Anda untuk menyelaraskan dan mendistribusikan elemen di setiap kolom dalam suatu bagian, baik secara vertikal maupun horizontal.

Di Elementor, Anda dapat mengatur perataan flexbox dari kolom pengaturan. Ada opsi pengaturan bawaan yang dapat Anda pilih seperti yang ditunjukkan di bawah ini:

Divi juga mendukung perataan flexbox. Namun, Anda perlu menambahkan kode CSS tertentu, yang merepotkan bagi pemula. Terutama bagi mereka yang tidak memiliki pengetahuan CSS.

– Pemosisian Sebaris

Pemosisian sebaris memungkinkan Anda menempatkan dua elemen di dalam kolom secara berdampingan. Lihatlah tangkapan layar berikut.

Seperti yang Anda lihat, ada dua tombol yang ditempatkan berdampingan. Tombol-tombol ini — serta gambar di atasnya — berada di kolom yang sama. Tata letak desain seperti di atas dapat dicapai berkat fitur pemosisian sebaris.

Di Elementor, Anda dapat dengan mudah mengatur pemosisian sebaris elemen karena Elementor memiliki opsi pengaturan bawaan untuk melakukannya. Di Divi, Anda perlu menambahkan kode CSS untuk mengatur pemosisian sebaris ke elemen.

Desain responsif

– Breakpoint Khusus

Tata letak halaman web berbeda pada setiap perangkat. Ini mengikuti ukuran perangkat layar.

Di Elementor dan Divi, Anda dapat mengoptimalkan tata letak desain Anda pada tiga jenis perangkat (desktop, tablet, dan perangkat). Bagaimana jika Anda ingin mengoptimalkan desain Anda untuk perangkat dengan ukuran layar tertentu (misalnya, desktop layar besar)?

Di Elementor, Anda dapat menambahkan breakpoint khusus, yang cukup berguna jika Anda perlu mengoptimalkan desain untuk jenis perangkat yang memiliki ukuran layar tertentu. Setelah menambahkan breakpoint kustom baru, Anda akan memiliki opsi perangkat baru pada editor untuk mengoptimalkan desain Anda.

Tidak seperti Elementor, Divi tidak memiliki fitur asli untuk menambahkan breakpoint khusus. Anda hanya dapat mengoptimalkan desain untuk jenis perangkat default yang tersedia di editor: desktop, tablet, dan ponsel pintar.

Untuk informasi Anda, berikut adalah ukuran layar dari jenis perangkat:

• Layar lebar: 2400 piksel
• Desktop: 1209px
• Laptop: 1025px
• Tablet: 881 piksel
• Seluler (ponsel pintar): 360px

– Kolom Terbalik

Bila Anda memiliki bagian yang terdiri dari dua kolom (atau lebih), kolom pertama (paling kiri) akan ditempatkan di bagian atas perangkat seluler. Lihatlah GIF animasi berikut.

Untuk alasan tertentu, Anda mungkin ingin kolom kedua ditempatkan di atas. Di Elementor, Anda dapat mencapainya dengan mudah berkat fitur mundur kolom bawaan.

Divi juga memungkinkan Anda untuk mengatur kolom terbalik pada suatu bagian. Namun, Anda perlu berurusan dengan kode CSS.

– Tampilkan / Sembunyikan Elemen

Saat membuat desain responsif dengan Elementor atau Divi, tidak semua elemen perlu ditampilkan di perangkat seluler karena terbatasnya area di layar. Baik itu Elementor atau Divi memungkinkan Anda untuk menyembunyikan elemen tertentu (bagian, kolom, atau widget/modul) pada jenis perangkat tertentu.

Gerakan dan Interaksi

- Efek Bergulir

Efek gulir memungkinkan Anda untuk menambahkan efek atau lebih ke elemen berdasarkan gulir halaman. Artinya, efeknya hanya akan terjadi ketika halaman di-scroll ke bawah atau ke atas. Elementor dan Divi hadir dengan fitur ini. Anda dapat menerapkan efek gulir berikut ke desain Anda:

Efek gulir dapat diterapkan ke bagian, kolom, dan widget/modul.

– Efek Tikus

Efek mouse memungkinkan Anda untuk menambahkan efek ekstra ke elemen tertentu pada desain Anda di mana efek terjadi berdasarkan pergerakan kursor. Elementor hadir dengan fitur ini sementara Divi tidak memilikinya.

Ada dua efek mouse yang dapat Anda terapkan di Elementor: Mouse Track dan 3D Tilt

– Animasi Arahkan dan Transformasi CSS

Ingin menambahkan efek yang hanya terjadi pada kursor mouse?

Elementor dan Divi hadir dengan efek hover bawaan yang dapat Anda gunakan untuk menerapkan efek hover ke bagian, kolom, dan widget/modul. Anda dapat, misalnya, menerapkan tingkat opasitas yang berbeda ke gambar pada keadaan normal dan keadaan melayang. Anda juga dapat dengan mudah menambahkan efek hover seperti shrink, pulse, dan sebagainya.

Selain itu, Elementor dan Divi juga hadir dengan CSS Transform yang dapat Anda terapkan pada kedua status (normal dan hover).

– Animasi Masuk dan Keluar

Animasi masuk dan keluar adalah fitur standar yang tersedia di pembuat halaman. Di Elementor, Anda memiliki lebih dari sepuluh animasi masuk dan keluar untuk dipilih. Saat berada di Divi, Anda hanya memiliki tujuh opsi (pudar, geser, bouncing, zoom, flip, fold, dan roll). Baik itu Elementor atau Divi memungkinkan Anda untuk mengatur kecepatan animasi.

– Paralaks

Paralaks mengacu pada perilaku latar belakang yang bergerak lebih lambat daripada latar depan. Anda dapat menerapkan paralaks ke bagian dan kolom.

Divi hanya menawarkan satu efek paralaks, sedangkan Elementor menawarkan enam efek paralaks sebagai berikut:

• Gulir vertikal
• Gulir horizontal
• Transparansi
• Mengaburkan
• Memutar
• Skala

– Efek Lengket

Dengan efek lengket, Anda dapat mengatur elemen agar selalu terlihat saat halaman digulir ke bawah. Fitur ini sangat berguna saat membuat tajuk khusus menggunakan pembuat tema.

Elementor dan Divi memungkinkan Anda untuk menambahkan efek lengket ke elemen. Anda dapat mengatur elemen untuk menempel apakah ke bawah atau atas. Anda juga dapat mengatur nilai offset agar efek lengket dapat diterapkan.

Garis bawah

Elementor dan Divi adalah alat yang hebat untuk membuat proyek situs web WordPress Anda. Mereka memungkinkan Anda membuat situs web yang indah dengan sedikit usaha berkat fitur desain yang ekstensif. Baik di Elementor atau Divi, Anda dapat dengan mudah mengatur padding dan margin antar elemen, mengatur ukuran, menerapkan efek animasi, dan sebagainya. Semua perubahan diterapkan secara real-time pada editor. Terlebih lagi, Anda juga dapat mengoptimalkan desain Anda pada jenis perangkat apa pun berkat fitur pengeditan responsif yang ditawarkan oleh keduanya.

Sebelum memilih pembuat halaman mana yang ingin Anda gunakan untuk proyek Anda, Anda mungkin ingin mempelajari fitur mendetail yang ditawarkan oleh keduanya terlebih dahulu.

Seperti yang telah Anda baca di atas, Elementor dan Divi memiliki fitur desain yang serupa — dengan beberapa perbedaan pada beberapa detail. Misalnya, Elementor memungkinkan Anda untuk mengatur pengaturan tipografi global sementara Divi tidak. Sebaliknya, Divi memungkinkan Anda membuat gradien multi-warna sementara Elementor hanya memungkinkan Anda membuat gradien dengan maksimal dua warna. Apa pun opsi yang akhirnya Anda pilih, pastikan mereka dapat memenuhi kebutuhan Anda untuk menyelesaikan proyek Anda.