Elementor vs Gutenberg – 2021 Hesaplaşması: Hangi Sayfa Oluşturucu Daha İyi?

WordPress'in sayfa oluşturucular olmadan çalıştığı zamanları hatırlayabiliyor muyuz?

Zaman uçar, teknoloji ilerler ve WordPress temalarının işlevleri, ancak özellikle sayfa oluşturucular gibi WordPress eklentileri sayesinde çok sınırlı yetenekleriyle WordPress artık sadece belirsiz bir hatıradır .

Bu yazıda OceanWP kullanıcıları arasında en popüler iki sayfa oluşturucuyu ele alacağız – Elementor ve Gutenberg . Burada sağlayacağımız bilgiler, yalnızca kişisel görüş ve deneyimlerimize değil, aynı zamanda OceanWP kullanıcılarının günlük olarak aldığımız geri bildirimlerine de dayanmaktadır.

Showdown başlasın!

Elementor nedir?

5 üzerinden 4,7 ve 5+ milyon aktif kurulum ortalama puanı ile – buna hiç şüphe yok: Elementor, WordPress kullanıcıları arasında en popüler sayfa oluşturucudur .

Elementor ilk olarak 2016'da tanıtıldı ve liderliği çok hızlı bir şekilde devraldı. Neredeyse anında popüler olmasının nedeni, Elementor'un görsel sürükle ve bırak oluşturucusu ile olağan WordPress metin düzenleyicisi (Gutenberg öncesi dönem) arasındaki farktı.

WordPress kullanıcıları nihayet Microsoft Word'e benzemeyen bir şey elde ettiler - her türlü özel kodlama veya özel HTML / PHP / CSS şablonu oluşturma ihtiyacını azaltan çeşitli widget'lar sayesinde yaratıcılıklarının parlamasına izin veren esnek bir düzenleyici .

Ve bazı yeni Elementor WordPress web sitesi şablonları arıyorsanız? En son HubSpot koleksiyonumuza göz atın.

Bu Elementor ve Gutenberg karşılaştırmasında, Elementor'un yalnızca ücretsiz sürümünün özelliklerini ele alacağız.

Gutenberg nedir?

Blok düzenleyici olarak da bilinen Gutenberg, varsayılan WordPress sayfa/yazı düzenleyicisidir. WordPress Bebo 5.0 sürümü ile ilk kez 2018'de tanıtıldı .

WordPress ekibi, daha gelişmiş ve sezgisel bir varsayılan düzenleyici için topluluğun ihtiyaçlarını ve ayrıca web sitesi oluşturma eğilimlerini anladı . Gutenberg editörü bu şekilde ortaya çıktı ve öncülü olan klasik editörün yerini aldı.

Gutenberg henüz tam anlamıyla geliştirilmemiş olmasına ve önümüzdeki yıllarda zirveye ulaşması beklenmesine rağmen , WordPress ekibi söz verdiklerini – içerik düzenleyiciden sayfa oluşturucuya geçiş yapan basit ama güçlü bir görsel düzenleyici – gerçekleştirdi.

Ve bazı Gutenberg WordPress web sitesi şablonları arıyorsanız, Gutenberg kullanan en son WooCommerce şablonları koleksiyonumuza göz atın.

Elementor vs Gutenberg: Karşılaştırma

Elementor vs Gutenberg: Kullanım Kolaylığı

Her iki aracı da kullanmaktan zevk alan herhangi bir WordPress kullanıcısı, üzerinde anlaşabileceğimiz bir şey söyleyecektir – Elementor, kullanım kolaylığı karşılaştırmasını kazanır .

Muazzam esnekliği ve hareketliliği sayesinde Elementor, gelişmiş görüntü düzenleme araçlarına gerçekten benziyor. İhtiyacınız olan widget'ı seçin ve içeriğin herhangi bir yerine yerleştirin – işte bu kadar.

Bölümler oluşturmanız mı gerekiyor? Veya farklı sayıda sütun içeren bölümler mi? Farklı cihazlar için farklı bir tasarım veya resim mi seçiyorsunuz? Ayrıca sorun değil. Elementor, tüm içeriği mükemmelliğe kadar ayarlamanıza gerçekten izin verir. Web sitesi tasarımcılarının düşkün olduğu çeşitli animasyonlardan bahsetmiyorum bile (hız ölçüm araçları olmasa da).

Öte yandan, Gutenberg temiz ve basit bir sayfa oluşturucudur . Elementor'dan farklı olarak, Gutenberg çok sevilen sürükle ve bırak özelliğini sunmuyor (en azından henüz değil). Blokları kolayca ekleyip taşıyabilseniz de, işler Elementor'daki kadar basit değildir. Buna ek olarak, özellikle Elementor'un sunduğu lüks ortama alışmış olanlar için bir bloğu şekillendirmek biraz zor olabilir.

Gutenberg, 3 yıldır varsayılan WordPress editörü oldu, ancak hala denemekte isteksiz olan insanlar var . Bu tür kullanıcılar herhangi bir sayfa oluşturucuyu tercih etmezler – klasik (içerik) WordPress düzenleyicisini her şeye tercih ederler.

Hepimiz alışkanlık yaratıkları olduğumuz için , Gutenberg'i sezgisel olmayan ve sadece klasik editörün kullanımı daha kolay olduğu için kullanımı zor olarak işaretlemenin objektif olmayacağını görüyoruz. Ancak size bir şey söyleyebiliriz – Gutenberg ile bir gönderi oluşturup bu ilk öğrenme eğrisinin üstesinden geldiğinizde, onu kullanmaya devam edeceksiniz .

Elementor vs Gutenberg, hangisini seçmeli? Cevap her zaman OceanWP, çünkü ikisini de kullanıyoruz

PS Gutenberg'in bloklarından biri de Klasik bloktur, bu nedenle eski okul özelliğini kullanmak için ek eklentiler kullanmak için hiçbir neden yoktur

Elementor ve Gutenberg Kullanım Kolaylığı Özeti

Elementor, kullanımı Gutenberg'den daha kolay hale getiren gelişmiş widget'lar ve düzenleme araçları sunar, ancak web sitesi sayfalarını duyarlı hale getirme ihtiyacı ortaya çıktığında, aynı derecede zor olabilir .

Gutenberg, kolayca üstesinden gelebileceğiniz kendi öğrenme eğrisi ile birlikte gelir . Gutenberg'in nasıl çalıştığını anlamak, Elementor dahil diğer tüm sayfa oluşturucuları yönetmenize yardımcı olacaktır .

Elementor vs Gutenberg: Özellikler

Elementor'un widget'ları var, Gutenberg'in blokları var - bu kadar basit.

Bununla birlikte, widget terimi , birleştirilmiş öğeleri kullanan bir özelliğe atıfta bulunulduğunda , WordPress'te uzun süredir kullanılmaktadır. Örneğin, başlığı olan bir resim, farklı sorgu seçeneklerine sahip blog gönderilerinin listesi vb.

Elementor widget'ları, gruplandırılmış seçenekler ve çoklu sorgu ve stil ayarları ile özellikler sağlayarak benzer şekilde çalışır . Doğal olarak Elementor widget'ları, WordPress widget'larından (Görünüm > Widget'lar) çok daha fazla seçenek ve çok yönlülük sunar .

Gutenberg işe paragraf bloğu, resim, video vb. gibi çok temel bloklarla başladı . Bloklar da stil seçenekleri sunsa da, bu özellikler Elementor kadar zengin ve sezgisel değil. Ancak adil olmak gerekirse, konu kullanıcı dostu ayarlar olduğunda, Elementor kesinlikle öncülük ediyor – sadece Gutenberg ile değil, mevcut hemen hemen tüm sayfa oluşturucularla karşılaştırıldığında.

Öte yandan, "aşırı basit" bloklar sorunu , daha fazla özellik ve kullanıcı seçeneği ile son derece işlevsel bloklar sunan bazı ek Gutenberg eklentileri ile kolayca çözülebilir.

Bu arada, en son ürünümüz olan Ocean Gutenberg Bloklarını keşfetme şansınız oldu mu? Bir müşteriyseniz, bu eklenti indirip kullanmak için gösterge tablonuzda zaten mevcuttur. Profesyonel olmayı düşünüyorsanız, en son teklifimize göz atın.

Elementor ve Gutenberg Özellikleri Özeti

Elementor widget'ları, Gutenberg ise blokları kullanır. Elementor'un ücretsiz sürümü, her web sitesi tasarımcısının harika bir web sitesi oluşturmak için kullanabileceği birçok gelişmiş widget ile birlikte gelir . Daha gelişmiş bloklar elde etmek için, Gutenberg için Ocean Gutenberg Blokları gibi ek eklentilere ihtiyaç vardır .

Elementor vs Gutenberg: Performans

"Sayfa hızı" yerine kasıtlı olarak "performans" terimini kullandığımızı fark etmişsinizdir.

Nedeni açık ve anlaşılırdır – çoğu çevrimiçi araç, bir web sitesinin hızını yansıtmayan web sitesi puanlarını ölçer . Bunun dışında, web sitesi hızının bağlı olduğu çok fazla faktör vardır . Bir web sitesinin performansının başarısı ne yazık ki yalnızca çalıştırdığınız temaya veya eklentilere bağlı değildir.

Bahsetmemek gerekirse, web sitesi sahipleri genellikle bu araçları unuturlar, tüm web sitesinin durumunu yansıtmaz – yalnızca test edilen URL'ye atanan sayfa . Kısacası, ana sayfa ile yaptığınız gibi tüm web sitesi sayfalarına eşit şekilde özen gösterin .

Ancak, bir temanın ve eklentilerin kalitesi, genel web sitesi performansı üzerinde önemli bir etkiye sahip olabilir . Sayfa oluşturucular da öyle.

WordPress Kurulum Karşılaştırması

Başlamadan önce, WordPress şablonlarını nasıl oluşturduğumuz hakkında biraz bilgi vermek istiyoruz. Bu şekilde Elementor-Gutenberg karşılaştırmasının sonuçları tam olarak anlaşılabilir.

WordPress şablonları örnek web sitesi içeriğidir (sayfalar, blog gönderileri, önceden oluşturulmuş ve biçimlendirilmiş). Bu şablonlar, yapım sürecini hızlandırmaya veya ilham vermeye yarar. Ocean Web sitesi şablonları söz konusu olduğunda, Elementor sayfa oluşturucu kullanıldığında, yalnızca ana sayfalarda (ana sayfa, iletişim, hakkında vb.) kullanılır.

Blog gönderileri, mağaza, ürün sayfaları, arşiv sayfaları gibi diğer tüm sayfalar, OceanWP teması tarafından yönetilen varsayılan WordPress sayfalarıdır.

Bu küçük deney için iki WordPress web sitesi şablonumuzu kullandık: Agenda ve Gutenberg Agenda .

İlk bakışta ve sadece resimlere bakarak, bu ikisi arasındaki farkı anlayabilir ve hangisinin Elementor ve hangisinin Gutenberg kullanılarak yapıldığını tahmin edebilir misiniz?

Her iki web sitesi de aynı sunucuda bulunur ve kesinlikle aynı yapılandırmaya sahiptir:

• Yazılım: Apache/2.4.51 (Unix)
• MySQL: (Ubuntu) v5.7.36
• PHP: 7.4.24
• WordPress: 5.8.1
• WordPress (PHP) Bellek Sınırı: 256M
• WordPress teması: OceanWP (yanıp sönme)

Her iki web sitesinde de WordPress eklentilerinin çoğu ortak olarak bulunur :

• Okyanus Ekstra
• Okyanus Ürün Paylaşımı
• Okyanus Sosyal Paylaşımı
• WooCommerce
• TI WooCommerce İstek Listesi
• WPforms Lite
• Okyanus Yapışkan Başlık
• WP Rocket (WordPress şablonlarının oluşturulmasında kullanılmaz).

Gündem WordPress şablonu:

• eleman
• Ocean Elementor Widget'ları

Gutenberg Gündemi WordPress şablonu:

• Okyanus Gutenberg Blokları

Gördüğünüz gibi , Gutenberg sürümünün çalışması için herhangi bir ek eklenti gerekmiyor . Tek ihtiyacınız olan varsayılan WordPress blok düzenleyicisi – Gutenberg .

Elementor ve Gutenberg: Google Sayfa Hızı İstatistikleri

Metnin bazı bölümlerini atlayıp doğrudan buraya gelenler için – Google Page Speed ​​Insights'ın web sitesi hızını ölçmediğini vurgulamak önemlidir. Bunun yerine, web sitesini farklı faktörleri dikkate alarak puanlar.

Ayrıca, puanların yalnızca yanlış pozitif olamayacağını (düşük puanlar ancak hızlı web sitesi ve bunun tersi) kabul etmek de önemlidir, ancak çoğu zaman gerçek resmi boyamazlar. Mobil PSI (Page Speed ​​Insights) puanları söz konusu olduğunda Google, cep telefonlarını kullanarak web sitenize göz atan gerçek kullanıcılardan bilgi toplar .

Bu , gerçek durumun anında değil, zamanla görünür hale geleceği anlamına gelir. Bu aynı zamanda , WordPress'i kurduğunuzda veya bir sayfa oluşturduğunuzda puanlarınızı kontrol etmemenizi ve üzerinde çalışmaya çalışmamanızı önerdiğimiz anlamına geliyor - bilgiler doğru değil.

Web sitesi performansı ve veri işleme konusunda veri toplamanın nasıl çalıştığını tam olarak anlamak için bir Google çalışanının bu yanıtına göz atmanızı öneririz. Cevabı doğrudan kaynaktan almaktan daha iyi bir şey yoktur.

Bununla birlikte, puanların kullanıcılar için önemli olduğunu anlıyoruz. İşte bu yüzden sonuçları sizinle paylaşıyoruz.

Mobil PSI skorlarına gelince , Elementor vs Gutenberg yarışında kazanan Gutenberg .

Tüm veriler arasındaki farklar oldukça belirgindir ve Gutenberg lehinedir.

Bizi en çok şaşırtan sonuç ise Toplam Engelleme Süresi (TBT) farkı oldu. Elementor tarafından oluşturulmuş bir sayfada TBT 310ms iken, Gutenberg tarafından oluşturulmuş bir sayfada TBT sadece 50ms idi .

WP Rocket'i yüklemeden ve varsayılan ayarları çalıştırmak yerine düzgün bir şekilde kurmadan önce web sitesindeki görüntüleri gerçekten optimize etseydik sonuçların ne olacağını hayal edebiliyor musunuz? Bizim gibi olmayın – resimlerinizi optimize edin ve web siteniz için en uygun önbelleğe alma ayarlarını bulun .

Masaüstü Elementor vs Gutenberg karşılaştırmasında , sonuçlar biraz Gutenberg lehine olsa da, farklar o kadar büyük değil . En azından, PSI'ye göre değil.

Bu nedenle, kullanıcılarımıza sıklıkla önerdiğimiz başka bir araca geçiyoruz: GTmetrix.

Elementor ve Gutenberg: GTmetrix Karşılaştırması

GTmetrix, Gündem WordPress şablonumuzun her iki sürümünden de memnun görünüyor – Elementor ve Gutenberg.

Ancak, Etkileşim Süresi ve DOM Etkileşim Süresi arasındaki büyük farkı göz ardı edemeyiz - her iki ölçüm de Gutenberg lehinedir.

Etkileşim Süresi : Elementor vs Gutenberg : 912ms vs 408ms .

DOM Etkileşim Süresi: Elementor - Gutenberg : 714ms - 405ms .

Elementor ve Gutenberg Yapısı karşılaştırmasına gelince, GTmetrix bize yine yeşil bir tarama gösteriyor.

Ancak hemen dikkatimizi çeken bir şey var – DOM boyutu . Sonuçlar yine Gutenberg'in lehinde.

Aşırı DOM boyutundan kaçının : Elementor vs Gutenberg : 1251 eleman vs 929 eleman .

Gutenberg hayranı olsanız da olmasanız da , neredeyse aynı içeriğe sahip bir sayfa için 300'den fazla öğenin daha az olmasının büyük bir kazanç olduğunu kabul etmelisiniz. Bahsetmiyorum bile, aynı zamanda kutunun dışında bir galibiyet.

Sonuçta, grafikler konuştu. Performans ve Yapı puanları tamamen aynı olsa da, her iki web sitesi de GTmetrix A Sınıfı, Performans Puanı %100 ve Yapı Puanı %98'i kazandı; büyük bir optimizasyon ve performans hayranı.

GTmetrix'e bakılırsa işler berrak. Elementor ve Gutenberg yan yana performans karşılaştırması söz konusu olduğunda - Gutenberg mutlak kazanandır .

Ama bir dakika bekle. Bu, Elementor'un kötü olduğu ve kullanılmaması gerektiği anlamına mı geliyor? Hayır, çünkü gurur duyabileceğiniz tatmin edici puanlar elde etmek Elementor ile de yapılabilir .

Sonuçlar yalnızca Gutenberg'in anında, sorunsuz ve avangart performans kazanımları sağladığını gösterirken, Elementor söz konusu olduğunda bilgili ve sorumlu bir web tasarımcısı olmanız gerekir.

Elementor vs Gutenberg Performans Özeti

Web sitesi şablonlarımızın hiçbiri hız / puanlar için optimize edilmemiştir ve her ikisinde de varsayılan WP Rocket önbelleğe alma ayarlarını kullanıyoruz. Gutenberg, kullanıma hazır daha fazla performans kazanımı sunar ve Elementor ile karşılaştırıldığında bazı metrik farklar, özellikle Toplam Engelleme Süresi, DOM boyutu, Etkileşim Süresi ve DOM Etkileşim Süresi ölçümleri gibi oldukça ciddidir .

En iyi web sitesi oluşturma uygulamalarını takip eden ve uygun araçları kullanan, gelişmiş optimizasyon becerilerine sahip deneyimli web sitesi tasarımcıları, Elementor kullanarak en iyi hıza veya puanlara ulaşmakta sorun yaşamazlar.

Gutenberg destekli web siteleri, çeşitli ek Elementor eklentileriyle birlikte Elementor web sitelerine kıyasla sorunsuz çalışması için başta WordPress Bellek Limiti olmak üzere daha az kaynak gerektirir .

Elementor vs Gutenberg: Faydaları

Elementor ve Gutenberg faydaları karşılaştırmasına gelince, karar vermek zor.

Her sayfa oluşturucunun kendi kazançları ve kullanım nedenleri vardır . Benzer şekilde, her sayfa oluşturucunun dezavantajları vardır. Hem artıları hem de eksileri öznel nitelikte olabilir .

Elbette, Elementor'u sürükle ve bırak özelliğinden dolayı seviyoruz, ancak Gutenberg'i kullanmak da o kadar zor değil .

Elementor'un yanıt verme ayarları ve cihazlara göre bölümleri veya öğeleri gizleyebilmesi veya tamamen cihaza göre öğelerin stillendirilmesi , onu sevmenin ek nedenlerinden biridir . Şimdi, yeni başlayanların web sitesi oluşturmanın çeşitli bloglarda okuduklarından daha fazla çaba gerektirdiğini fark etmeye başladıklarında cesaretlerinin kırılmasına ve bunalmış hissetmelerine neden olan aynı özellikler.

Kullanıcı dostu kullanım ve yaratıcılığın serbest bırakılması açısından Elementor'a oy veriyoruz .

Ancak, kullanıcılarımız bize Elementor alternatifleri hakkında soru sorduğunda, bir değişiklik ihtiyacının ana nedeni olarak istikrardan bahsediyorlar . Açık olmak gerekirse, Facebook gibi şirketlerde bile hatalar ve hatalar olur. Ve hangi kurulum web sitesi sahipleri ve geliştiricileri çalışırsa çalışsın, sorumluluk sahibi olmak ve en iyi uygulamaları takip etmek, rahatsızlıklardan kaçınmak için bir zorunluluktur . Evet, hazırlama alanlarında yedek almaktan veya yeni güncellemeleri test etmekten bahsediyoruz.

Gerçekten de, bu uygulamaları takip eden deneyimli kullanıcılar bile, Elementor'un bazı zaman dilimlerinde onları bu aracı [düzgün bir şekilde] kullanma olanağından yoksun bırakan yenilikleri ve değişiklikleri nedeniyle biraz kin besler.

Gutenberg söz konusu olduğunda, geliştiriciler olarak performansı (hem ön uç hem de arka uç), erişilebilirlik ve istikrar için kök salıyoruz . Bazı Gutenberg eklentilerinin HTML'ye diğer Gutenberg olmayan sayfa editörleri kadar veya hatta daha fazla şişkinlik katabileceğini unutmayın, bu yüzden akıllıca seçin.

Gutenberg , Elementor kadar acemi dostu görünmese de, yeni başlayanları kesinlikle denemeye teşvik ediyoruz . Ve önerimiz, tam olarak daha profesyonel veya deneyimli bir yaklaşım gerektiren bazı gelişmiş özelliklerin (duyarlı modlarda düzenleme ve farklı cihazlar için içerik ayarlama gibi) olmamasına dayanmaktadır .

Ayrıca , Gutenberg ile uğraşan ve onu nasıl idare edeceğini öğrenenlerin, Elementor da dahil olmak üzere diğer tüm sayfa oluşturucuları çabucak kavrayacaklarını söylemek güvenlidir.

Elementor vs Gutenberg Faydaları Özeti

Elementor'un yanıt verme seçenekleri ve ayarları, herkesin web sitesi tasarımını tüm cihazlar için, hatta gerekirse farklı şekilde ayarlamasına yardımcı olabilir . Ancak, aynı zamanda, web sitesi oluşturmanın okuduklarından biraz daha fazla zaman, çaba ve pratik gerektirdiğini fark ettiklerinde , WordPress'e yeni başlayanlarla alay edebilecek aynı ayarlardır .

Gutenberg başlangıçta korkutucu ve tamamen sezgisel görünebilir , ancak aslında harika bir öğrenme başlangıç ​​noktasıdır. Gutenberg'in üstesinden gelmek, herkesin tüm sayfa oluşturucuları daha iyi anlamasına yardımcı olacaktır . Ayrıca, Gutenberg daha fazla kararlılık, erişilebilirlik, SEO ve genel performans kazanımları sunar .

Elementor vs Gutenberg: Hangi sayfa oluşturucu daha iyi?

Ne derler bilirsiniz, bir ayakkabı her ayağa sığmaz ama önce ayakkabıyı denemeden bunu bilemezsiniz.

Bazı kullanıcılar Elementor'u, bazıları Gutenberg'i sever ve bunun arkasında çeşitli nedenler vardır. Web siteniz hakkında konuştuğumuz için, size ve web sitenizin ihtiyaçlarına neyin uygun olduğunu bulmak çok önemlidir .

Kullanıcılarımız, web sitesinin kararlılığı, performansı, SEO'su, erişilebilirliği ve web sitesi oluşturma için çok önemli olan birçok şeyden ödün vermeden Elementor'u kullanma konusunda tavsiye almak için bize ulaştığında, onların da bizim WordPress web sitesi şablonları oluşturmak için kullandığımız şekilde Elementor'u kullanmalarını öneririz. . Çekici ve çekici olması gereken ana sayfalarda Elementor'u kullanın - diğer her şeyi WordPress'e ve temanıza bırakın.

Kısacası, özellikle bilgili bir tasarımcı değilseniz veya genel web sitesi optimizasyonu konusunda çok az deneyiminiz varsa, özel arşiv şablonları oluşturmaktan kaçının.

Yeni başlayan biriyseniz ve ek düzenleme ve stil hakkında daha az endişelenmek istiyorsanız veya web sitesi tasarımına biraz daha fazla çaba harcamaktan çekinmeyen bir profesyonelseniz (sürükle ve -drop özelliği) ve çeşitli animasyon seçeneklerinin olmamasına itiraz etmeyin, o zaman kesinlikle Gutenberg'i seçmelisiniz. Özellikle tüm performans avantajlarını ve Gutenberg'i kullanarak aynı kalitede tasarım oluşturabileceğiniz gerçeğini göz önünde bulundurarak .

Kesinlikle asla yapmamanız gereken ve böyle tasarımlar gördüğümüz tek şey, Elementor ile özel şablonlar oluşturmak ve ardından içerik eklemek için Gutenberg'i onunla birlikte kullanmaktır. Hayatınızı olması gerekenden daha zor hale getirmeyin ve web sitenizi öldürmeyin

Seçtiğiniz sayfa oluşturucu ister Elementor ister Gutenberg olsun, yanıt her zaman OceanWP ve Ocean Core Uzantıları Paketidir, çünkü istediğiniz web sitesi tasarımını elde etmek için size hem widget'lar hem de bloklar sunuyoruz

Kararın nedir? Favori sayfa oluşturucunuz nedir ve neden? Ve evet, ikisini de seçip kullanabilirsiniz.

Web siteleri oluşturmaya biraz ara verdiğinizde, bir yorum bırakın ve ne düşündüğünüzü bize bildirin.