5 najlepszych narzędzi do tworzenia stron internetowych WYSIWYG i ich ewolucja funkcji

Pamiętam czasy, gdy tworzenie strony internetowej było jak próba rozszyfrowania tajnego języka. Przed powstaniem narzędzia do tworzenia stron internetowych WYSIWYG jedynym sposobem na zbudowanie witryny było przejście przez często tajemniczy świat HTML, CSS i innych języków kodowania.

Przejdźmy szybko do dnia dzisiejszego, a krajobraz tworzenia stron internetowych radykalnie się zmienił. Ewoluowaliśmy od podstawowych edytorów kodu do edytorów WYSIWYG (What You See Is What You Get), a teraz do ery konstruktorów bloków. Z powodu tej ewolucji utworzenie listy najlepszych narzędzi do tworzenia stron internetowych WYSIWYG nie jest tak proste jak kiedyś.

Gra się zmieniła, a rozwiązania hybrydowe i narzędzia do tworzenia bloków oferują teraz te same możliwości, co kiedyś tradycyjne edytory WYSIWYG: wizualny podgląd zaplecza tego, czego można się spodziewać po interfejsie.

W związku z tym definiujemy nowoczesny kreator stron internetowych WYSIWYG jako platformę, która generuje podgląd na zapleczu, niezależnie od tego, czy używa bloków, czy edycji tekstu sformatowanego.

Rozumiemy jednak, że „tradycyjne” edytory WYSIWYG nadal mają swoje miejsce, dlatego określimy, gdzie pojawiają się na zalecanych przez nas platformach.

Definicja narzędzia do tworzenia stron internetowych WYSIWYG i jego zmiany na przestrzeni lat

Po wydaniu tradycyjne narzędzia do tworzenia stron internetowych WYSIWYG były darem niebios dla tych z nas, którzy mają ograniczoną wiedzę na temat kodowania.

WYSIWYG, akronim od „What You See Is What You Get”, pozwolił nam wizualnie zaprojektować stronę internetową i zobaczyć dokładnie, jak będzie wyglądał efekt końcowy.

Następnie zaczęliśmy zauważać pojawienie się kreatorów typu „przeciągnij i upuść”, które pozwoliły nam wybierać i umieszczać elementy dosłownie tam, gdzie chcieliśmy, na stronie internetowej.

Były podobne do kreatorów WYSIWYG w tym sensie, że zapewniały wizualną reprezentację wyniku końcowego. Oferowały jednak bardziej intuicyjną i usprawnioną obsługę użytkownika.

Przejdźmy szybko do czasów dzisiejszych i mamy coś, co nazwiemy „nowoczesnymi” narzędziami do tworzenia stron internetowych WYSIWYG, znanymi również jako narzędzia do tworzenia bloków lub narzędzia do tworzenia metodą „przeciągnij i upuść”.

Wiele popularnych kreatorów stron internetowych, takich jak Wix, Squarespace i Shopify, oferuje hybrydę zarówno tradycyjnego WYSIWYG, jak i kreatorów blokowych.

Na przykład większość interfejsu Wix działa jak kreator bloków, ale kiedy wstawisz blok akapitu do swojego projektu, nadal będziesz widzieć tradycyjny edytor WYSIWYG.

A zatem, kogo dzisiaj uważamy za kreatora stron internetowych WYSIWYG?

Oto kilka elementów, które często są zawarte w nowoczesnym kreatorze stron WYSIWYG:

• Interfejs wizualny bez kodu
• Podgląd na żywo
• Funkcja przeciągnij i upuść
• Opcje edycji kodu
• Bogata obsługa treści

Ogólnie rzecz biorąc, narzędzia do tworzenia stron internetowych WYSIWYG przeszły długą drogę od samego początku. Mając na uwadze naszą nową definicję „nowoczesnych kreatorów stron internetowych WYSIWYG”, przyjrzyjmy się najlepszym platformom do rozważenia. ️

Pięć najlepszych narzędzi do tworzenia stron internetowych WYSIWYG

Teraz, gdy rozumiemy, czym jest kreator stron internetowych WYSIWYG i jakie są jego zalety, przyjrzyjmy się najlepszym narzędziom w tej kategorii.

1. WordPressa
2. Przepływ sieci
3. Przestrzeń kwadratowa
4. Wix
5. Shopify

1. WordPressa

WordPress to system zarządzania treścią typu open source, który umożliwia użytkownikom utworzenie witryny internetowej lub bloga. Udostępnia kilka typów edytorów WYSIWYG, co pozwala wybrać ulubiony typ interfejsu.

Na przykład niektórzy wolą narzędzie do tworzenia bloków „Gutenberg”, podczas gdy inni trzymają się jego poprzednika: edytora klasycznego.

Z drugiej strony możesz wybrać edytor tekstu/kodu, który umożliwia dostosowanie kodu HTML, a następnie powrót do jednej z opcji edycji wizualnej.

Nowoczesne funkcje kreatora stron internetowych WYSIWYG z WordPress

• Interfejs typu „przeciągnij i upuść ”: ułatwia użytkownikom dodawanie i porządkowanie elementów na swojej stronie internetowej.
• Opcja w pełni tradycyjnego edytora WYSIWYG : Możesz wyłączyć edytor blokowy i używać starszego edytora TinyMCE, podobnego do edytora tekstowego.
• Wtyczki dla różnych marek edytorów WYSIWYG : zazwyczaj są to edytory blokowe, takie jak Elementor lub Beaver Builder.
• Niestandardowy HTML i CSS : dla zaawansowanych użytkowników WordPress umożliwia dodanie niestandardowego kodu w celu uzyskania większej kontroli nad projektem witryny.
• Edycja mobilna : WordPress oferuje aplikację mobilną, która pozwala użytkownikom edytować witrynę za pomocą smartfona lub tabletu.

Gdzie w WordPress można znaleźć tradycyjne narzędzia do edycji WYSIWYG?

Tradycyjne narzędzia do edycji WYSIWYG znajdziesz w edytorze postów/stron w WordPress. Kiedy tworzysz lub edytujesz post lub stronę, możesz przełączać się między trybem wizualnym i tekstowym . Tryb wizualny oferuje edytor WYSIWYG, w którym możesz formatować tekst, dodawać łącza i wstawiać multimedia.

Klasyczny redaktor

Autorzy: Współtwórcy WordPress

Aktualna wersja: 1.6.3

Ostatnia aktualizacja: 9 listopada 2023 r

klasyczny-editor.1.6.3.zip

98% ocen 5 000 000+ Instaluje WP 4.9+ Wymaga

Domyślnie WordPress nie ma tradycyjnego edytora (zamiast tego ma narzędzie do tworzenia bloków), więc aby go uzyskać, musisz użyć wtyczki Classic Editor.

Kreator bloków (Gutenberg) udostępnia także tradycyjne elementy WYSIWYG, takie jak wygląd wszystkich multimediów, nagłówków i pól tekstowych dokładnie tak, jak można je zobaczyć w interfejsie użytkownika.

2. Przepływ sieci

Webflow to narzędzie do projektowania stron internetowych, które pozwala użytkownikom projektować, budować i uruchamiać wizualnie responsywne strony internetowe. Oferuje edytor WYSIWYG, który zapewnia wizualną informację zwrotną w czasie rzeczywistym na temat tego, jak będzie wyglądać ostateczna strona internetowa.

Tak naprawdę zespół stojący za Webflow stworzył Webflow, którego głównym celem było dostosowywanie kodowania backendu w czasie rzeczywistym podczas stylizowania wizualnych aspektów swojej witryny.

Nowoczesne funkcje kreatora stron internetowych WYSIWYG firmy Webflow

• Wizualna siatka CSS : pozwala użytkownikom tworzyć złożone układy za pomocą prostego, wizualnego interfejsu.
• Interakcje i animacje : Webflow umożliwia użytkownikom dodawanie złożonych interakcji i animacji bez konieczności pisania kodu.
• Transformacje 3D : Użytkownicy mogą przesuwać i obracać obiekty w przestrzeni 3D.
• Flexbox : pozwala na elastyczne układy i łatwiejsze wyrównywanie elementów.
• Responsywny projekt : Webflow automatycznie skaluje Twój projekt do różnych rozmiarów ekranu.

Gdzie w Webflow można znaleźć tradycyjne narzędzia do edycji WYSIWYG?

Tradycyjne narzędzia do edycji WYSIWYG znajdziesz w Webflow w panelu Projektanta. W tym przypadku Webflow zapewnia potężny interfejs z dostępem zarówno do narzędzi „przeciągnij i upuść”, jak i zwykłej edycji WYSIWYG. Zmiany w kodzie można także natychmiastowo przeglądać po przeniesieniu bloku multimediów lub zmianie rozmiaru przy użyciu ustawień ogólnych.

Inne obszary panelu Webflow, takie jak sekcja wpisów na blogu , również mają proste edytory WYSIWYG. Tutaj możesz generować szybkie posty na blogu i nadal widzieć formatowanie i obrazy przed publikacją.

3. Przestrzeń kwadratowa

Squarespace to zdecydowanie jedna z platform o bardziej hybrydowej strukturze WYSIWYG. Edytor wygląda jak interfejs Twojej witryny, z przeciąganymi blokami umożliwiającymi poruszanie się po treści, jednak wiele z tych bloków zawiera tradycyjne edytory WYSIWYG w swoich modułach ustawień.

Nowoczesne funkcje kreatora stron internetowych WYSIWYG firmy Squarespace

• Interfejs typu „przeciągnij i upuść ”: ułatwia dodawanie i rozmieszczanie elementów na stronie.
• Edytor stylów : umożliwia użytkownikom dostosowywanie czcionek, kolorów i innych zaawansowanych opcji stylu.
• Edycja mobilna : Squarespace oferuje aplikację mobilną, która pozwala użytkownikom edytować witrynę za pomocą smartfona lub tabletu.
• Łatwy dostęp do edytorów nagłówków i stopek : poprzednie edytory stron WYSIWYG pozostawały oddzielone od obszarów nagłówków i stopek, ale Squarespace zapewnia natychmiastowy dostęp do nagłówków i stopek z głównego panelu projektowego.
• Projektowanie oparte na siatce : wielu kreatorów stron internetowych typu „przeciągnij i upuść” ogranicza miejsca, w których można przenosić moduły, ale Squarespace korzysta z systemu siatki, dzięki czemu można podnosić i przenosić elementy projektu praktycznie w dowolne miejsce na stronie.

Gdzie można znaleźć tradycyjne narzędzia do edycji WYSIWYG w Squarespace?

Każdy blok tekstowy ma narzędzie do tworzenia stron internetowych WYSIWYG, które wyświetla ustawienia nagłówków, pogrubienia tekstu i dostosowywania innych części formatowania.

Nawet bloki obrazów zawierają standardowe ustawienia WYSIWYG, w których zobaczysz przycisk umożliwiający przesłanie obrazu, dodanie tekstu alternatywnego i wyświetlenie łącza do obrazu.

4. Wix

Podobnie jak Squarespace, Wix poświęca większość swojej przestrzeni projektowej na w pełni wizualny interfejs, który wygląda dokładnie tak, jak frontend Twojej witryny.

Dlatego sklasyfikowalibyśmy Wix jako nowoczesny kreator stron WYSIWYG, ponieważ łączy w sobie nowsze elementy – takie jak moduły przeciągane – i tradycyjne edytory WYSIWYG, które znamy z przeszłości.

Nowoczesne funkcje narzędzia do tworzenia stron WYSIWYG firmy Wix

• Interfejs typu „przeciągnij i upuść” : możesz przenosić dowolne elementy w swojej witrynie, od obrazów po akapity, filmy i nagłówki.
• Edycja widoku mobilnego : Wix oferuje edytor widoku mobilnego, który pozwala użytkownikom dostosować wygląd witryny na urządzeniach mobilnych.
• Animacja : użytkownicy mogą dodawać animacje do przeciąganych modułów na swojej stronie internetowej.
• Szybka edycja nagłówka i stopki : Kontroluj wygląd i formatowanie nagłówka i stopki bez opuszczania edytora strony głównej.
• Edycja oparta na siatce : Dzięki Wix możesz przeciągać bloki w niemal dowolne miejsce na stronie dzięki systemowi siatki.

Gdzie w Wix znajdziesz tradycyjne narzędzia do edycji WYSIWYG?

Edytor stron internetowych Wix zawiera wszystkie nowoczesne i tradycyjne narzędzia do projektowania WYSIWYG.

Edytor strony internetowej pokazuje w czasie rzeczywistym podgląd tego, jak Twoja witryna wygląda po modyfikacjach.

Każdy blok po kliknięciu udostępnia bardziej tradycyjną sekcję WYSIWYG, na przykład moduł Ustawienia tekstu pokazuje opcje formatowania i efekty.

Aby uzyskać obszar przypominający edytory WYSIWYG z przeszłości, po prostu utwórz post na blogu w Wix. W tej sekcji możesz wpisywać treść, dodawać obrazy i formatować za pomocą elementów takich jak nagłówki, punktory i cudzysłowy, które stają się widoczne podczas pisania w edytorze (tak jak w interfejsie).

5. Shopify

Jeśli szukasz kreatora stron internetowych WYSIWYG, który koncentruje się wyłącznie na sklepach internetowych, nie szukaj dalej niż Shopify. Platforma Shopify zapewnia zarówno nowoczesne, jak i tradycyjne narzędzia do projektowania WYSIWYG z powiązaną funkcjonalnością e-commerce.

Nowoczesne funkcje kreatora stron internetowych WYSIWYG firmy Shopify

• Przeciągane sekcje : Chociaż Shopify nie jest prawdziwym projektantem typu „przeciągnij i upuść”, oferuje sekcje, które można przesuwać w górę i w dół na stronie.
• Zintegrowane generowanie tekstu AI : Shopify ma przycisk sztucznej inteligencji w każdym edytorze WYSIWYG do szybkiego tworzenia opisów produktów, zawartości stron i tytułów.
• Szybki podgląd kodu : każdy edytor WYSIWYG w Shopify udostępnia kartę HTML.
• Dynamiczne źródła treści : redaktorzy WYSIWYG w Shopify mają opcję dodawania dynamicznej treści źródłowej, która dostosowuje się na podstawie reguł. Możesz na przykład umieścić przewodnik po rozmiarach na wszystkich stronach produktów, który zmienia się w zależności od produktu.
• Edycja widoku mobilnego : Edytor Shopify oferuje edycję widoku mobilnego w celu zaprojektowania wyglądu interfejsów tabletu i smartfona.

Gdzie w Shopify znajdziesz tradycyjne narzędzia do edycji WYSIWYG?

Większość części interfejsu Shopify ma bardzo tradycyjne narzędzia do tworzenia stron internetowych WYSIWYG. Na przykład edytor strony głównej wyświetla standardowe edytory WYSIWYG po każdym kliknięciu bloku tekstu.

Jest to szczególnie prawdziwe, gdy edytujesz strony inne niż strona główna, np. strony produktowe lub informacyjne. Te strony są nadal kontrolowane przez tradycyjne edytory do tworzenia stron internetowych WYSIWYG; używają szybkich przycisków do formatowania u góry i zapewniają widok tego, jak treść będzie wyglądać po opublikowaniu.

Wypróbuj narzędzie do tworzenia stron internetowych WYSIWYG już dziś

Pamiętaj, że najlepszym kreatorem stron internetowych WYSIWYG jest ten, który spełnia Twoje specyficzne potrzeby, a często oznacza to pytanie, czy wolisz nowoczesny WYSIWYG (budowanie blokowe), czy tradycyjny WYSIWYG (edycja tekstu sformatowanego z podglądem treści).

Aby zobaczyć inne narzędzia, które mogą pomóc w stworzeniu witryny internetowej bez konieczności znajomości kodu, być może zainteresuje Cię także nasze zestawienie najlepszych kreatorów witryn internetowych. ️️

Daj nam znać w komentarzach, co sądzisz o ewolucji narzędzi do tworzenia stron internetowych WYSIWYG .