Elementor vs Gutenberg – Pertarungan 2021: Pembuat Halaman Mana yang Lebih Baik?

Apakah kita bahkan dapat mengingat saat-saat ketika WordPress berfungsi tanpa pembuat halaman?

Waktu berlalu, kemajuan teknologi dan WordPress dengan kemampuannya yang sangat terbatas sekarang hanya menjadi memori yang kabur , berkat fungsionalitas tema WordPress, tetapi terutama plugin WordPress, seperti pembuat halaman.

Pada artikel ini kita akan membahas dua pembuat halaman paling populer di kalangan pengguna OceanWP – Elementor dan Gutenberg . Informasi yang akan kami berikan di sini tidak didasarkan pada pendapat dan pengalaman pribadi kami saja, tetapi juga pada umpan balik pengguna OceanWP yang kami terima setiap hari.

Biarkan Showdown dimulai!

Apa itu Elementor?

Dengan peringkat rata-rata 4,7 dari 5 dan 5+ juta pemasangan aktif – tidak diragukan lagi: Elementor adalah pembuat halaman paling populer di antara pengguna WordPress .

Elementor pertama kali diperkenalkan pada tahun 2016 dan mengambil alih kepemimpinan dengan sangat cepat. Alasan popularitasnya yang hampir instan adalah perbedaan antara visual drag-and-drop builder Elementor dan editor teks WordPress biasa (era pra-Gutenberg).

Pengguna WordPress akhirnya mendapatkan sesuatu yang tidak menyerupai Microsoft Word – editor fleksibel yang memungkinkan kreativitas mereka bersinar , semua berkat berbagai widget yang mengurangi kebutuhan akan semua jenis pengkodean kustom atau pembuatan template HTML / PHP / CSS kustom.

Dan, jika Anda mencari beberapa templat situs web Elementor WordPress baru? Lihat koleksi HubSpot terbaru kami.

Dalam perbandingan Elementor vs Gutenberg ini, kami hanya akan membahas fitur Elementor versi gratis.

Apa itu Gutenberg?

Gutenberg, juga dikenal sebagai editor blok , adalah editor halaman / posting WordPress default. Itu diperkenalkan pada tahun 2018 untuk pertama kalinya, dengan versi WordPress Bebo 5.0.

Tim WordPress memahami kebutuhan komunitas akan editor default yang lebih canggih dan intuitif , serta tren dalam pembuatan situs web. Begitulah cara editor Gutenberg muncul dan menggantikan pendahulunya – editor klasik.

Meskipun Gutenberg belum dikembangkan secara maksimal dan puncaknya diharapkan di tahun-tahun mendatang , tim WordPress memberikan apa yang mereka janjikan – editor visual yang sederhana namun hebat yang membuat peralihan dari editor konten menjadi pembuat halaman.

Dan, jika Anda mencari beberapa templat situs web WordPress Gutenberg, lihat koleksi templat WooCommerce terbaru kami yang menggunakan Gutenberg.

Elementor vs Gutenberg: Perbandingan

Elementor vs Gutenberg: Kemudahan Penggunaan

Setiap pengguna WordPress yang senang menggunakan kedua alat akan memberi tahu Anda sesuatu yang juga dapat kami setujui – Elementor memenangkan perbandingan kemudahan penggunaan .

Berkat fleksibilitas dan mobilitasnya yang luar biasa, Elementor benar-benar menyerupai alat pengeditan gambar tingkat lanjut. Cukup pilih widget yang Anda butuhkan dan letakkan di mana saja di konten – itu saja.

Perlu membuat bagian? Atau bagian dengan jumlah kolom yang berbeda? Pilih desain atau gambar yang berbeda untuk perangkat yang berbeda? Juga tidak masalah. Elementor benar-benar memungkinkan Anda untuk mengatur seluruh konten hingga sempurna. Belum lagi berbagai animasi yang disukai desainer situs web (meskipun alat pengukur kecepatan tidak).

Di sisi lain, Gutenberg adalah pembuat halaman yang bersih dan sederhana . Tidak seperti Elementor, Gutenberg tidak menawarkan fitur drag-and-drop yang sangat disukai (setidaknya belum). Meskipun Anda dapat dengan mudah menambahkan dan memindahkan blok, hal-hal tidak sesederhana Elementor. Selain itu, menata balok bisa jadi agak menantang, terutama bagi mereka yang terbiasa dengan lingkungan mewah yang disediakan Elementor.

Gutenberg telah menjadi editor default WordPress selama 3 tahun sekarang, tetapi masih ada orang yang enggan untuk mencobanya . Pengguna seperti itu tidak menyukai pembuat halaman mana pun – mereka lebih menyukai editor WordPress klasik (konten) daripada yang lainnya.

Karena kita semua adalah makhluk kebiasaan, kita merasa tidak objektif untuk menandai Gutenberg sebagai non-intuitif dan sulit digunakan hanya karena editor klasik lebih mudah digunakan. Namun, kami dapat memberi tahu Anda satu hal – setelah Anda membuat satu postingan dengan Gutenberg dan mengatasi kurva pembelajaran awal itu, Anda akan terus menggunakannya .

Elementor vs Gutenberg, mana yang harus dipilih? Jawabannya selalu OceanWP, karena kami menggunakan keduanya

PS Salah satu blok Gutenberg juga merupakan blok Klasik jadi tidak ada alasan untuk menggunakan plugin tambahan untuk menggunakan fitur jadul

Ringkasan Kemudahan Penggunaan Elementor vs Gutenberg

Elementor menawarkan widget canggih dan alat pengeditan yang membuatnya lebih mudah digunakan daripada Gutenberg, tetapi itu bisa menjadi sama menantangnya setelah kebutuhan untuk membuat halaman situs web responsif muncul .

Gutenberg hadir dengan kurva belajarnya sendiri yang dapat Anda atasi dengan mudah. Memahami cara kerja Gutenberg akan membantu Anda mengelola semua pembuat laman lainnya , termasuk Elementor.

Elementor vs Gutenberg: Fitur

Elementor memiliki widget, Gutenberg memiliki blok – sesederhana itu.

Istilah widget , bagaimanapun, telah digunakan di WordPress untuk waktu yang lama, ketika mengacu pada fitur yang menggunakan elemen gabungan . Misalnya, gambar dengan judul, daftar posting blog dengan opsi kueri yang berbeda, dll.

Widget elemen berfungsi dengan cara yang serupa – dengan menyediakan fitur dengan opsi yang dikelompokkan dan beberapa kueri dan pengaturan gaya. Secara alami, widget Elementor menawarkan lebih banyak opsi dan keserbagunaan daripada widget WordPress (Tampilan > Widget).

Gutenberg memulai dengan blok yang sangat mendasar , seperti blok paragraf, gambar, video, dll. Meskipun blok juga menawarkan opsi gaya, fitur ini tidak sekaya atau seintuitif Elementor. Namun, agar adil, dalam hal pengaturan yang ramah pengguna, Elementor jelas memimpin – tidak hanya dibandingkan dengan Gutenberg, tetapi dibandingkan dengan hampir semua pembuat halaman yang tersedia.

Di sisi lain, "masalah blok yang terlalu sederhana" dapat dengan mudah diselesaikan dengan beberapa plugin Gutenberg tambahan yang menawarkan blok yang sangat fungsional dengan lebih banyak fitur dan opsi pengguna .

Omong-omong, apakah Anda memiliki kesempatan untuk menjelajahi produk terbaru kami – Blok Ocean Gutenberg? Jika Anda pelanggan, plugin ini sudah tersedia di dasbor Anda untuk diunduh dan digunakan. Jika Anda mempertimbangkan untuk menjadi pro, periksa penawaran terbaru kami.

Ringkasan Fitur Elementor vs Gutenberg

Elementor menggunakan widget, Gutenberg menggunakan blok. Versi gratis Elementor hadir dengan banyak widget canggih yang dapat digunakan oleh setiap perancang situs web untuk membangun situs web yang fantastis. Untuk mendapatkan blok yang lebih canggih, diperlukan plugin tambahan untuk Gutenberg – seperti Blok Ocean Gutenberg.

Elementor vs Gutenberg: Performa

Anda mungkin memperhatikan bahwa kami sengaja menggunakan istilah "kinerja" alih-alih "kecepatan halaman".

Alasannya sederhana dan lugas – sebagian besar alat online mengukur skor situs web yang tidak mencerminkan kecepatan situs web . Selain itu, ada terlalu banyak faktor yang bergantung pada kecepatan situs web . Keberhasilan kinerja sebuah website sayangnya tidak semata-mata tergantung pada tema atau plugin yang Anda jalankan.

Belum lagi, pemilik situs web biasanya lupa bahwa alat ini tidak mencerminkan status seluruh situs web – hanya laman yang ditetapkan ke URL yang diuji . Singkatnya, urus semua halaman situs web sama seperti yang Anda lakukan dengan beranda .

Namun, kualitas tema dan plugin dapat berdampak besar pada kinerja situs web secara keseluruhan . Dan begitu juga pembuat halaman.

Perbandingan Pengaturan WordPress

Sebelum kita mulai, kami ingin memberikan sedikit pengenalan tentang bagaimana kami membangun template WordPress . Dengan begitu, hasil perbandingan Elementor vs Gutenberg bisa dipahami secara utuh.

Template WordPress adalah contoh konten situs web (halaman, posting blog, prebuilt dan gaya). Template ini berfungsi untuk mempercepat proses pembangunan atau menginspirasi. Dalam hal templat Situs Web Ocean, ketika pembuat halaman Elementor digunakan, itu hanya digunakan di halaman utama (rumah, kontak, tentang, dll).

Semua halaman lain, seperti posting blog, toko, halaman produk, halaman arsip adalah halaman WordPress default yang dikelola oleh tema OceanWP.

Untuk percobaan kecil ini, kami menggunakan dua templat situs web WordPress kami: Agenda dan Gutenberg Agenda .

Dengan pandangan pertama dan hanya melihat gambar, apakah Anda dapat membedakan antara keduanya dan menebak mana yang dibangun menggunakan Elementor dan yang menggunakan Gutenberg?

Kedua situs web tersebut terletak di server yang sama dan memiliki konfigurasi yang benar-benar sama:

• Perangkat Lunak: Apache/2.4.51 (Unix)
• MySQL: (Ubuntu) v5.7.36
• PHP: 7.4.24
• WordPress: 5.8.1
• Batas Memori WordPress (PHP): 256M
• Tema WordPress: OceanWP (berkedip berkedip)

Kedua situs web memiliki sebagian besar plugin WordPress yang sama :

• Ekstra Laut
• Berbagi Produk Laut
• Berbagi Sosial Laut
• WooCommerce
• Daftar Keinginan TI WooCommerce
• WPforms Lite
• Tajuk Lengket Laut
• WP Rocket (tidak digunakan dalam pembuatan template WordPress).

Templat WordPress Agenda:

• elemen
• Widget Elemen Laut

Templat WordPress Gutenberg Agenda:

• Blok Ocean Gutenberg

Seperti yang Anda lihat, versi Gutenberg tidak memerlukan plugin tambahan untuk dijalankan. Yang Anda butuhkan hanyalah editor blok WordPress default – Gutenberg .

Elementor vs Gutenberg: Wawasan Kecepatan Halaman Google

Untuk semua orang yang melewatkan beberapa bagian teks dan langsung datang ke sini – penting untuk ditekankan bahwa Google Page Speed ​​Insights tidak mengukur kecepatan situs web . Sebaliknya, itu menilai situs web dengan mempertimbangkan berbagai faktor.

Lebih dari itu, penting juga untuk mengakui bahwa skor tidak hanya bisa positif palsu (skor rendah tetapi situs web cepat dan sebaliknya), tetapi sering kali tidak menggambarkan gambaran yang sebenarnya. Dalam hal skor PSI (Page Speed ​​Insights) seluler, Google mengumpulkan informasi dari pengguna nyata yang menjelajahi situs web Anda menggunakan ponsel .

Ini berarti bahwa situasi aktual akan menjadi terlihat dari waktu ke waktu – tidak secara instan. Ini juga berarti kami secara halus menyarankan Anda untuk tidak memeriksa skor Anda dan mencoba mengerjakannya saat Anda menginstal WordPress atau membuat halaman – informasinya tidak akurat.

Untuk memahami sepenuhnya cara kerja pengumpulan data pada kinerja situs web dan pemrosesan data, sebaiknya periksa balasan ini dari karyawan Google. Tidak ada yang lebih baik daripada mendapatkan jawaban langsung dari sumbernya.

Meskipun demikian, kami memahami bahwa skor penting bagi pengguna. Dan itulah mengapa kami membagikan hasilnya kepada Anda.

Dalam hal skor PSI seluler , dalam balapan Elementor vs Gutenberg, pemenangnya adalah Gutenberg .

Perbedaan antara semua data cukup jelas, dan mendukung Gutenberg.

Hasil yang paling mengejutkan kami adalah perbedaan Total Blocking Time (TBT). Dalam hal halaman yang dibuat oleh Elementor, TBT adalah 310 md, sedangkan TBT pada halaman yang dibuat oleh Gutenberg hanya 50 md .

Bisakah Anda bayangkan apa hasilnya jika kami benar-benar mengoptimalkan gambar di situs web sebelum mengunggah dan mengatur WP Rocket dengan benar alih-alih menjalankan pengaturan default? Jangan seperti kami – optimalkan gambar Anda dan temukan pengaturan caching yang optimal untuk situs web Anda .

Pada perbandingan Elementor vs Gutenberg desktop , perbedaannya tidak terlalu drastis meskipun hasilnya sedikit mendukung Gutenberg . Setidaknya, tidak menurut PSI.

Itulah mengapa kami beralih ke alat lain yang sering kami rekomendasikan kepada pengguna kami – GTmetrix.

Elementor vs Gutenberg: Perbandingan GTmetrix

GTmetrix tampaknya senang dengan kedua versi template Agenda WordPress kami – Elementor dan Gutenberg.

Namun, kami tidak dapat mengabaikan perbedaan besar antara Waktu untuk Interaktif dan Waktu Interaktif DOM – keduanya merupakan metrik yang mendukung Gutenberg.

Waktu untuk Interaktif : Elementor vs Gutenberg : 912ms vs 408ms .

Waktu Interaktif DOM: Elementor vs Gutenberg : 714ms vs 405ms .

Ketika datang ke perbandingan Elementor vs Struktur Gutenberg, GTmetrix sekali lagi menunjukkan kepada kita sapuan hijau.

Namun ada satu hal yang langsung menarik perhatian kami – ukuran DOM . Sekali lagi, hasilnya mendukung Gutenberg.

Hindari ukuran DOM yang berlebihan : Elementor vs Gutenberg : 1251 elemen vs 929 elemen .

Baik Anda penggemar Gutenberg atau bukan, Anda harus mengakui bahwa 300+ elemen lebih sedikit untuk laman dengan konten yang hampir sama adalah kemenangan besar . Belum lagi, ini juga merupakan kemenangan out-of-the-box.

Secara keseluruhan, grafik telah berbicara. Meskipun skor Performa dan Struktur sama persis, di mana kedua situs web telah mendapatkan GTmetrix Grade A, Skor Performa 100%, dan Skor Struktur 98% – ada banyak statistik yang mendukung Gutenberg yang mungkin penting bagi Anda jika Anda pengoptimalan besar dan penggemar kinerja.

Dilihat oleh GTmetrix, semuanya jernih. Ketika datang ke perbandingan kinerja Elementor vs Gutenberg secara berdampingan – Gutenberg adalah pemenang mutlak .

Tapi, tunggu sebentar. Apakah ini berarti Elementor buruk dan tidak boleh digunakan? Tidak, karena mencapai nilai memuaskan yang bisa dibanggakan juga bisa dilakukan dengan Elementor .

Hasilnya hanya menunjukkan bahwa Gutenberg memberikan kemenangan kinerja instan, bebas repot, dan avant-garde , sedangkan ketika datang ke Elementor, Anda harus menjadi perancang web yang cerdas dan bertanggung jawab.

Ringkasan Performa Elementor vs Gutenberg

Tidak satu pun dari templat situs web kami yang dioptimalkan untuk kecepatan/skor, dan kami menggunakan pengaturan caching WP Rocket default pada keduanya. Gutenberg menawarkan lebih banyak kemenangan kinerja yang out-of-the-box dan beberapa perbedaan metrik cukup drastis dibandingkan dengan Elementor , terutama metrik Waktu Pemblokiran Total, ukuran DOM, Waktu untuk Interaktif, dan Waktu Interaktif DOM.

Perancang situs web berpengalaman dengan keterampilan pengoptimalan tingkat lanjut yang mengikuti praktik pembuatan situs web terbaik dan menggunakan alat yang tepat tidak akan mengalami masalah dalam mencapai kecepatan atau skor terbaik menggunakan Elementor.

Situs web yang didukung Gutenberg juga membutuhkan lebih sedikit sumber daya , terutama Batas Memori WordPress, untuk berjalan dengan lancar dibandingkan dengan situs web Elementor yang dikombinasikan dengan berbagai plugin Elementor tambahan.

Elementor vs Gutenberg: Manfaat

Mengenai perbandingan manfaat Elementor vs Gutenberg, sulit untuk memutuskan.

Setiap pembuat halaman memiliki kemenangan dan alasan sendiri untuk digunakan . Demikian pula, setiap pembuat halaman memiliki kekurangannya. Baik pro dan kontra bisa bersifat subjektif .

Tentu saja, kita semua menyukai Elementor karena fitur drag-and-drop-nya, tetapi menggunakan Gutenberg juga tidak terlalu sulit .

Pengaturan responsivitas elemen dan kemampuan untuk menyembunyikan bagian atau elemen berdasarkan perangkat atau elemen gaya sepenuhnya berdasarkan perangkat juga, adalah salah satu alasan tambahan untuk menyukainya . Sekarang, itu adalah fitur yang sama yang dapat membuat pemula merasa putus asa dan kewalahan ketika baru memulai ketika mereka menyadari bahwa membangun situs web membutuhkan lebih banyak usaha daripada yang biasa mereka baca di berbagai blog.

Dalam hal penggunaan yang mudah digunakan dan melepaskan kreativitas, kami memilih Elementor .

Namun, ketika pengguna kami bertanya kepada kami tentang alternatif untuk Elementor, mereka menyebutkan stabilitas sebagai alasan utama perlunya perubahan . Agar jelas, kesalahan dan bug terjadi, bahkan pada perusahaan seperti Facebook. Dan apa pun penyiapan yang dijalankan pemilik dan pengembang situs web, bertanggung jawab dan mengikuti praktik terbaik adalah suatu keharusan untuk menghindari ketidaknyamanan . Ya, kita berbicara tentang mengambil cadangan atau menguji pembaruan baru di area pementasan.

Memang, bahkan pengguna berpengalaman yang mengikuti praktik ini menyimpan sedikit dendam karena inovasi dan perubahan Elementor yang sering membuat mereka tidak memiliki kemungkinan untuk [benar] menggunakan alat ini selama beberapa periode waktu.

Ketika berbicara tentang Gutenberg, sebagai pengembang kami mendukung kinerjanya (baik frontend maupun backend), aksesibilitas, dan stabilitas . Harap diperhatikan, beberapa plugin Gutenberg dapat menambahkan lebih banyak atau bahkan lebih banyak ke HTML seperti editor halaman non-Gutenberg lainnya, jadi pilihlah dengan bijak.

Meskipun Gutenberg tidak tampak ramah pemula seperti Elementor, kami pasti mendorong pemula untuk mencobanya . Dan, rekomendasi kami didasarkan pada tidak adanya beberapa fitur lanjutan yang memerlukan pendekatan yang lebih profesional atau berpengalaman (seperti mengedit dalam mode responsif dan menyesuaikan konten untuk perangkat yang berbeda).

Juga aman untuk mengatakan bahwa mereka yang menangani dan belajar bagaimana menangani Gutenberg juga akan memiliki pemahaman yang cepat dari semua pembuat halaman lainnya – termasuk Elementor.

Ringkasan Manfaat Elementor vs Gutenberg

Opsi dan pengaturan responsivitas Elementor dapat membantu siapa saja menyesuaikan desain situs web untuk semua perangkat , bahkan secara berbeda jika diperlukan. Tapi, itu juga pengaturan yang sama yang dapat mengejek pemula WordPress begitu mereka menyadari bahwa membangun situs web hanya membutuhkan sedikit lebih banyak waktu, usaha, dan latihan daripada yang mereka baca.

Gutenberg dapat tampak mengintimidasi dan sama sekali tidak intuitif pada awalnya , tetapi sebenarnya merupakan titik awal pembelajaran yang luar biasa. Mengatasi Gutenberg akan membantu semua orang memahami semua pembuat halaman dengan lebih baik . Plus, Gutenberg menawarkan lebih banyak stabilitas, aksesibilitas, SEO, dan kemenangan kinerja secara keseluruhan .

Elementor vs Gutenberg: Pembuat halaman mana yang lebih baik?

Anda tahu apa yang mereka katakan – satu sepatu tidak akan cocok untuk setiap kaki, tetapi Anda tidak akan tahu itu kecuali Anda mencoba sepatu itu terlebih dahulu.

Beberapa pengguna menyukai Elementor, beberapa Gutenberg , dan ada berbagai alasan di baliknya. Karena kita berbicara tentang situs web Anda, penting untuk mengetahui apa yang cocok untuk Anda dan kebutuhan situs web Anda .

Ketika pengguna kami menghubungi kami untuk meminta saran tentang penggunaan Elementor tanpa mengorbankan stabilitas situs web, kinerja, SEO, aksesibilitas, dan banyak hal penting lainnya untuk pembuatan situs web , kami sarankan mereka menggunakan Elementor dengan cara yang sama seperti kami menggunakannya untuk membuat templat situs web WordPress . Gunakan Elementor di halaman utama yang harus menarik dan menarik – serahkan yang lainnya ke WordPress dan tema Anda.

Singkatnya, hindari membuat templat arsip khusus, terutama jika Anda bukan desainer yang paham atau memiliki sedikit pengalaman dalam pengoptimalan situs web secara keseluruhan.

Jika Anda seorang pemula dan ingin tidak terlalu khawatir tentang pengeditan dan penataan tambahan , atau jika Anda seorang profesional yang tidak keberatan melakukan sedikit lebih banyak upaya dalam desain situs web (kami mengacu pada tidak adanya drag-and -drop fitur) dan jangan keberatan dengan tidak adanya berbagai opsi animasi, maka Anda harus memilih Gutenberg . Terutama mengingat semua manfaat kinerja dan fakta bahwa Anda dapat membuat desain dengan kualitas yang sama menggunakan Gutenberg .

Satu hal yang benar-benar tidak boleh Anda lakukan dan kami telah melihat desain seperti itu, adalah membuat templat khusus dengan Elementor kemudian menggunakan Gutenberg dalam kombinasinya untuk menambahkan konten. Jangan membuat hidup Anda lebih sulit dari yang seharusnya dan jangan bunuh situs web Anda

Apakah pembuat halaman pilihan Anda adalah Elementor atau Gutenberg, jawabannya selalu OceanWP dan Ocean Core Extensions Bundle, karena kami menawarkan widget dan blok untuk mencapai desain situs web yang diinginkan

Apa keputusanmu? Apa pembuat halaman favorit Anda dan mengapa? Dan ya, Anda dapat memilih dan menggunakan keduanya.

Setelah Anda beristirahat dari membangun situs web, tinggalkan komentar dan beri tahu kami pendapat Anda.