En İyi 5 WYSIWYG Web Oluşturucu Aracı ve Özelliklerinin Gelişimi

Bir web sitesi oluşturmanın gizli bir dili çözmeye çalışmak gibi hissettirdiği günleri hatırlıyorum. Bir WYSIWYG web oluşturucusundan önce, bir site oluşturmanın tek yolu HTML, CSS ve diğer kodlama dillerinin gizemli dünyasından geçmekti.

Günümüze hızlı bir şekilde ilerlediğimizde, web oluşturma ortamı çarpıcı biçimde değişti. Temel kod editörlerinden WYSIWYG (Ne Görürsen Onu Alırsın) editörlerine ve şimdi de blok oluşturucular çağına geçtik. Bu gelişme nedeniyle, en iyi WYSIWYG web oluşturma araçlarının bir listesini derleme görevi eskisi kadar basit değil.

Hibrit çözümler ve blok oluşturucuların artık geleneksel WYSIWYG editörlerinin bir zamanlar sunduğu yeteneklerin aynısını sunmasıyla oyun değişti: ön uçta görmeyi beklemeniz gerekenlerin arka uç görsel önizlemesi.

Bu nedenle, modern bir WYSIWYG web oluşturucuyu, blokları veya zengin metin düzenlemeyi kullanmasına bakılmaksızın arka uçta bu önizlemeyi üreten bir platform olarak tanımlıyoruz.

Ancak "geleneksel" WYSIWYG editörlerinin hala bir yeri olduğunu biliyoruz, dolayısıyla bunların önerdiğimiz platformlarda nerede göründüklerini belirleyeceğiz.

WYSIWYG web oluşturucusunun tanımı ve yıllar içinde nasıl değiştiği

Geleneksel WYSIWYG web oluşturucuları piyasaya sürüldükten sonra, sınırlı kodlama bilgisine sahip olan bizler için bir lütuftu.

"Ne Görürsen Onu Alırsın" ifadesinin kısaltması olan WYSIWYG, bir web sayfasını görsel olarak tasarlamamıza ve nihai sonucun tam olarak nasıl görüneceğini görmemize olanak sağladı.

Daha sonra, öğeleri tam anlamıyla bir web sayfasında istediğimiz yere seçip yerleştirmemize olanak tanıyan sürükle ve bırak oluşturucuların ortaya çıktığını görmeye başladık.

Nihai sonucun görsel bir temsilini sağlamaları açısından WYSIWYG geliştiricilerine benziyorlardı. Ancak daha sezgisel ve akıcı bir kullanıcı deneyimi sunuyorlardı.

Günümüze hızla ilerlersek, blok oluşturucular veya sürükle-bırak oluşturucular olarak da bilinen, "modern" WYSIWYG web oluşturucuları diyeceğimiz araçlara sahibiz.

Wix, Squarespace ve Shopify gibi birçok popüler web oluşturucu, hem geleneksel WYSIWYG hem de blok oluşturucuların bir karışımını sunar.

Örneğin, Wix'in arayüzünün çoğu blok oluşturucu olarak işlev görür, ancak tasarımınıza bir paragraf bloğu eklediğinizde geleneksel WYSIWYG düzenleyiciyi görmeye devam edersiniz.

Peki bugün bir WYSIWYG web oluşturucusunu ne olarak görüyoruz?

Modern bir WYSIWYG web oluşturucusunda sıklıkla bulunan bazı öğeler şunlardır:

• Kodsuz görsel arayüz
• Canlı önizleme
• Sürükle ve bırak işlevi
• Kod düzenleme seçenekleri
• Zengin içerik desteği

Genel olarak, WYSIWYG web oluşturucuları ilk günlerinden bu yana uzun bir yol kat etti. Yeni "modern WYSIWYG web oluşturucuları" tanımımızı aklımızda tutarak, dikkate alınması gereken en iyi platformları inceleyelim. ️

En iyi beş WYSIWYG web oluşturma aracı

Artık WYSIWYG web oluşturucusunun ne olduğunu ve faydalarını anladığımıza göre, bu kategorideki en iyi araçları inceleyelim.

1. WordPress
2. Web akışı
3. Kare alanı
4. Wix
5. Shopify

1.WordPress

WordPress, kullanıcıların bir web sitesi veya blog oluşturmasına olanak tanıyan açık kaynaklı bir içerik yönetim sistemidir. En sevdiğiniz arayüz türünü seçmenize olanak tanıyan çeşitli WYSIWYG düzenleyici türleri sağlar.

Örneğin, bazı insanlar "Gutenberg" blok oluşturucuyu tercih ederken, diğerleri öncekine sadık kalıyor: Klasik editör.

Öte yandan, HTML'yi ayarlamanıza ve ardından görsel düzenleme seçeneklerinden birine geri dönmenize olanak tanıyan Metin/Kod düzenleyiciyi tercih edebilirsiniz.

WordPress'ten WYSIWYG web oluşturucunun modern özellikleri

• Sürükle ve bırak arayüzü : Bu, kullanıcıların web sitelerine öğe eklemesini ve düzenlemesini kolaylaştırır.
• Tamamen geleneksel bir WYSIWYG düzenleyici seçeneği : Blok tabanlı düzenleyiciyi devre dışı bırakabilir ve eski metin düzenleyici benzeri TinyMCE düzenleyiciyi kullanabilirsiniz.
• Farklı WYSIWYG editör markalarına yönelik eklentiler : Bunlar genellikle Elementor veya Beaver Builder gibi blok düzenleyiciler olarak gelir.
• Özel HTML ve CSS : İleri düzey kullanıcılar için WordPress, web sitesinin tasarımı üzerinde daha fazla kontrol sağlamak için özel kodun eklenmesine olanak tanır.
• Mobil düzenleme : WordPress, kullanıcıların web sitelerini akıllı telefonlarından veya tabletlerinden düzenlemelerine olanak tanıyan bir mobil uygulama sunar.

Geleneksel WYSIWYG düzenleme araçlarını WordPress'te nerede bulabilirsiniz?

Geleneksel WYSIWYG düzenleme araçlarını WordPress'teki yazı/sayfa düzenleyicisinde bulabilirsiniz. Bir gönderi veya sayfa oluşturduğunuzda veya düzenlediğinizde Görsel ve Metin modu arasında geçiş yapabilirsiniz. Görsel mod, metni biçimlendirebileceğiniz, bağlantılar ekleyebileceğiniz ve medya ekleyebileceğiniz WYSIWYG düzenleyicisini sunar.

Klasik Düzenleyici

Yazar(lar): WordPress Katkıda Bulunanlar

Güncel Sürüm: 1.6.3

Son Güncelleme: 9 Kasım 2023

classic-editor.1.6.3.zip

%98 Derecelendirme 5.000.000+ Yükleme WP 4.9+ Gerektirir

Varsayılan olarak, WordPress'te geleneksel düzenleyici yoktur (bunun yerine blok oluşturucu vardır), bu nedenle onu elde etmek için Klasik Düzenleyici eklentisini kullanmanız gerekir.

Blok oluşturucu (Gutenberg) ayrıca tüm medyanın, başlıkların ve metin kutularının ön uçta gördüğünüz gibi nasıl görüneceği gibi geleneksel WYSIWYG öğelerini de sağlar.

2. Web akışı

Webflow, kullanıcıların görsel olarak duyarlı web siteleri tasarlamasına, oluşturmasına ve başlatmasına olanak tanıyan bir web tasarım aracıdır. Nihai web sitesinin nasıl görüneceğine ilişkin gerçek zamanlı, görsel geri bildirim sağlayan bir WYSIWYG düzenleyicisi sunar.

Aslında Webflow'un arkasındaki ekip, web sitenizin görsel yönlerini stilize ederken arka uç kodlamasını gerçek zamanlı olarak ayarlamak amacıyla Webflow'u oluşturdu.

Webflow'un WYSIWYG web oluşturucusunun modern özellikleri

• Görsel CSS ızgarası : Bu, kullanıcıların basit, görsel bir arayüzle karmaşık düzenler oluşturmasına olanak tanır.
• Etkileşimler ve animasyonlar : Webflow, kullanıcıların kod yazmaya gerek kalmadan karmaşık etkileşimler ve animasyonlar eklemesine olanak tanır.
• 3B dönüşümler : Kullanıcılar 3B alanda nesneleri taşıyabilir ve döndürebilir.
• Flexbox : Bu, esnek düzenlere ve öğelerin daha kolay hizalanmasına olanak tanır.
• Duyarlı tasarım : Webflow, tasarımınızı farklı ekran boyutlarına göre otomatik olarak ölçeklendirir.

Webflow'ta geleneksel WYSIWYG düzenleme araçlarını nerede bulabilirsiniz?

Geleneksel WYSIWYG düzenleme araçlarını Webflow'taki Tasarımcı panelinde bulabilirsiniz. Burada Webflow, hem sürükle ve bırak araçlarına hem de olağan WYSIWYG düzenlemesine erişim sağlayan güçlü bir arayüz sağlar. Ayrıca genel ayarları kullanarak bir medya bloğunu taşıdığınızda veya bir şeyi yeniden boyutlandırdığınızda kod değişiklikleri anında görüntülenebilir.

Blog Gönderisi bölümü gibi Web akışı kontrol panelinin diğer alanlarında da basit WYSIWYG düzenleyicileri bulunur. Burada hızlı blog gönderileri oluşturabilir ve yayınlanmadan önce biçimlendirmeyi ve görselleri görmeye devam edebilirsiniz.

3. Kare alanı

Squarespace kesinlikle daha fazla hibrit WYSIWYG yapısına sahip platformlardan biri. Düzenleyici, içerikte gezinmek için sürüklenebilir bloklarla web sitenizin ön ucuna benzer, ancak bu blokların birçoğunun ayar modüllerinde geleneksel WYSIWYG düzenleyicileri bulunur.

Squarespace'in WYSIWYG web oluşturucusunun modern özellikleri

• Sürükle ve bırak arayüzü : Bu, sayfaya öğe eklemeyi ve düzenlemeyi kolaylaştırır.
• Stil düzenleyici : Bu, kullanıcıların yazı tiplerini, renkleri ve diğer gelişmiş stil seçeneklerini özelleştirmesine olanak tanır.
• Mobil düzenleme : Squarespace, kullanıcıların web sitelerini akıllı telefonlarından veya tabletlerinden düzenlemelerine olanak tanıyan bir mobil uygulama sunar.
• Kolay erişimli üstbilgi ve altbilgi düzenleyicileri : Geçmişteki WYSIWYG sayfa düzenleyicileri, üstbilgi ve altbilgi alanlarından ayrı kalmıştı, ancak Squarespace, ana tasarım panelinden üstbilgilere ve altbilgilere anında erişmenizi sağlar.
• Izgara tabanlı tasarım : Birçok "sürükle ve bırak" web oluşturucu, modülleri taşıyabileceğiniz yerleri kısıtlar, ancak Squarespace bir ızgara sistemi kullanır, böylece bir tasarım öğesini alıp sayfanın hemen hemen her yerine taşıyabilirsiniz.

Geleneksel WYSIWYG düzenleme araçlarını Squarespace'te nerede bulabilirsiniz?

Herhangi bir metin tabanlı blok, başlıklar, metni kalınlaştırma ve biçimlendirmenizin diğer bölümlerini ayarlamayla ilgili ayarları ortaya çıkaran bir WYSIWYG web oluşturucuya sahiptir.

Resim blokları bile standart WYSIWYG ayarlarını içerir; burada resim yüklemek, alternatif metin eklemek ve resim bağlantısını görüntülemek için bir düğme görürsünüz.

4. Wix'in

Squarespace'e çok benzeyen Wix, tasarım alanının çoğunu web sitenizin ön ucuna tamamen benzeyen tamamen görsel bir arayüze ayırır.

Bu nedenle Wix'i, sürüklenebilir modüller gibi daha yeni unsurları ve geçmişten bildiğimiz geleneksel WYSIWYG düzenleyicilerini birleştirdiği için modern bir WYSIWYG web oluşturucusu olarak sınıflandırırız.

Wix'in WYSIWYG web oluşturucusunun modern özellikleri

• Sürükle ve bırak arayüzü : Web sitenizdeki resimlerden paragraflara, videolardan başlıklara kadar herhangi bir öğeyi taşıyabilirsiniz.
• Mobil görünüm düzenleme : Wix, kullanıcıların bir web sitesinin mobil cihazlarda nasıl görüneceğini özelleştirmesine olanak tanıyan bir mobil görünüm düzenleyici sunar.
• Animasyon : Kullanıcılar web sitelerindeki sürüklenebilir modüllere animasyonlar ekleyebilirler.
• Hızlı üstbilgi ve altbilgi düzenleme : Ana sayfa düzenleyicisinden ayrılmadan üstbilginin ve altbilginin görünümünü ve biçimlendirmesini kontrol edin.
• Izgara tabanlı düzenleme : Wix'in ızgara sistemi sayesinde blokları sayfanın hemen her yerine sürükleyebilirsiniz.

Geleneksel WYSIWYG düzenleme araçlarını Wix'te nerede bulabilirsiniz?

Wix'in web sitesi düzenleyicisi tüm modern ve geleneksel WYSIWYG tasarım araçlarını içerir.

Web sitesi düzenleyicisi, sitenizin değişikliklerden sonra nasıl göründüğüne dair gerçek zamanlı bir önizleme gösterir.

Tıklandığında her blok, Metin Ayarları modülünün biçimlendirme seçeneklerini ve efektleri nasıl gösterdiği gibi daha geleneksel bir WYSIWYG bölümü sağlar.

Geçmişteki WYSIWYG editörlerine benzeyen bir alan için Wix'te bir blog yazısı oluşturmanız yeterlidir. Bu bölüm içerik yazmanıza, resim eklemenize ve başlıklar, madde işaretleri ve alıntılar gibi öğelerle biçimlendirmenize olanak tanır; bunların tümü düzenleyicide yazarken görünür hale gelir (tıpkı ön uçta gördüğünüz gibi).

5. Shopify'da

Tamamen çevrimiçi mağazalara odaklanan bir WYSIWYG web oluşturucu için Shopify'dan başkasına bakmayın. Shopify platformu, e-ticaret işlevselliğine bağlı olarak hem modern hem de geleneksel WYSIWYG tasarım araçları sağlar.

Shopify'ın WYSIWYG web oluşturucusunun modern özellikleri

• Sürüklenebilir bölümler : Gerçek bir sürükle ve bırak tasarımcısı olmasa da Shopify, sayfada yukarı ve aşağı hareket ettirebileceğiniz bölümler içerir.
• Entegre AI metin oluşturma : Shopify'da, ürün açıklamalarını, sayfa içeriğini ve başlıkları hızlı bir şekilde oluşturmak için her WYSIWYG düzenleyicisinde bir yapay zeka düğmesi bulunur.
• Kodun hızlı görünümleri : Shopify'daki her WYSIWYG düzenleyicisi bir HTML sekmesi sağlar.
• Dinamik içerik kaynakları : Shopify'daki WYSIWYG düzenleyicileri, kurallara göre ayarlanan dinamik kaynak içeriği ekleme seçeneğine sahiptir. Örneğin tüm ürün sayfalarına, ürüne göre değişen beden kılavuzuna yer verebilirsiniz.
• Mobil görünüm düzenleme : Shopify düzenleyici, tablet ve akıllı telefon arayüzlerinin nasıl görüneceğini tasarlamak için mobil görünüm düzenleme olanağı sunar.

Shopify'da geleneksel WYSIWYG düzenleme araçlarını nerede bulabilirsiniz?

Shopify arayüzünün çoğu bölümünde oldukça geleneksel WYSIWYG web oluşturma araçları bulunur. Örneğin ana sayfa düzenleyicisi, bir metin bloğuna tıkladığınızda standart WYSIWYG düzenleyicilerini gösterir.

Bu, özellikle ana sayfanın dışındaki ürün veya bilgi sayfaları gibi sayfaları düzenlediğinizde geçerlidir. Bu sayfalar hâlâ geleneksel WYSIWYG web oluşturucu editörleri tarafından kontrol ediliyor; üst kısımda biçimlendirme için hızlı düğmeler kullanırlar ve içeriğin yayınlandıktan sonra nasıl görüneceğine ilişkin bir görünüm sağlarlar.

Bugün bir WYSIWYG web oluşturucuyu deneyin

Unutmayın, en iyi WYSIWYG web oluşturucusu, özel ihtiyaçlarınızı karşılayandır ve bu genellikle modern WYSIWYG'yi (blok oluşturma) mı yoksa geleneksel WYSIWYG'yi mi (içerik önizlemeleriyle zengin metin düzenlemeyi) tercih ettiğiniz anlamına gelir.

Kod bilmenize gerek kalmadan web sitesi oluşturmanıza yardımcı olabilecek diğer araçları görmek için en iyi web sitesi oluşturucuları listemiz de ilginizi çekebilir. ️️

WYSIWYG web oluşturucularının gelişimi hakkında ne düşündüğünüzü yorumlarda bize bildirin .