I 5 migliori strumenti per la creazione di siti Web WYSIWYG e la loro evoluzione delle funzionalità

Ricordo i giorni in cui creare un sito web era come cercare di decodificare un linguaggio segreto. Prima di un web builder WYSIWYG, l'unico modo per costruire un sito era attraverso il mondo spesso misterioso di HTML, CSS e altri linguaggi di codifica.

Avanti veloce fino ad oggi e il panorama della creazione web è cambiato radicalmente. Ci siamo evoluti dagli editor di codice di base agli editor WYSIWYG (What You See Is What You Get) e ora all'era dei block builder. A causa di questa evoluzione, il compito di compilare un elenco dei migliori strumenti di creazione web WYSIWYG non è così semplice come una volta.

Il gioco è cambiato, con soluzioni ibride e builder di blocchi che ora offrono le stesse funzionalità che una volta offrivano gli editor WYSIWYG tradizionali: un'anteprima visiva del backend di ciò che dovresti aspettarti di vedere sul frontend.

Pertanto, definiamo un moderno web builder WYSIWYG come una piattaforma che produce quell'anteprima sul backend, indipendentemente dal fatto che utilizzi blocchi o editing rich text.

Tuttavia, comprendiamo che gli editor WYSIWYG “tradizionali” hanno ancora il loro posto, quindi identificheremo dove appaiono sulle piattaforme che consigliamo.

Definizione di un web builder WYSIWYG e come è cambiato nel corso degli anni

Una volta rilasciati, i tradizionali web builder WYSIWYG sono stati una manna dal cielo per quelli di noi con una conoscenza limitata della codifica.

WYSIWYG, acronimo di "What You See Is What You Get", ci ha permesso di progettare visivamente una pagina web e vedere esattamente come sarebbe il risultato finale.

Poi, abbiamo iniziato a vedere l'emergere di builder drag-and-drop, che ci hanno permesso di scegliere e posizionare gli elementi letteralmente dove volevamo su una pagina web.

Erano simili ai costruttori WYSIWYG nel senso che fornivano una rappresentazione visiva del risultato finale. Tuttavia, offrivano un'esperienza utente più intuitiva e snella.

Avanti veloce fino ad oggi e abbiamo quelli che chiameremo web builder WYSIWYG “moderni”, noti anche come builder a blocchi o builder drag-and-drop.

Molti famosi web builder, come Wix, Squarespace e Shopify, offrono un ibrido sia del tradizionale WYSIWYG che dei block builder.

Ad esempio, la maggior parte dell'interfaccia di Wix funziona come un generatore di blocchi, ma quando inserisci un blocco di paragrafo nel tuo progetto, vedrai comunque il tradizionale editor WYSIWYG.

Quindi, cosa consideriamo oggi un web builder WYSIWYG?

Ecco alcuni elementi che sono spesso inclusi in un moderno web builder WYSIWYG:

• Interfaccia visiva senza codice
• Anteprima dal vivo
• Funzionalità di trascinamento della selezione
• Opzioni di modifica del codice
• Supporto ricco di contenuti

Nel complesso, i web builder WYSIWYG hanno fatto molta strada sin dai primi giorni. Tenendo presente la nostra nuova definizione di "moderni web builder WYSIWYG", esploriamo le migliori piattaforme da considerare. ️

I cinque migliori strumenti per la creazione di siti web WYSIWYG

Ora che abbiamo capito cos'è un web builder WYSIWYG e i suoi vantaggi, esploriamo gli strumenti principali in questa categoria.

1. WordPress
2. Flusso web
3. Spazio quadrato
4. Wix
5. Shopify

1. WordPress

WordPress è un sistema di gestione dei contenuti open source che consente agli utenti di creare un sito Web o un blog. Fornisce diversi tipi di editor WYSIWYG, permettendoti di scegliere il tuo tipo di interfaccia preferito.

Ad esempio, alcune persone preferiscono il generatore di blocchi “Gutenberg”, mentre altri si attengono al suo predecessore: l’editor Classic.

D'altra parte, potresti optare per l'editor di testo/codice, che ti consente di regolare l'HTML e poi tornare direttamente a una delle opzioni di modifica visiva.

Funzionalità moderne del web builder WYSIWYG di WordPress

• Interfaccia drag-and-drop : consente agli utenti di aggiungere e organizzare facilmente gli elementi sul proprio sito web.
• L'opzione per un editor WYSIWYG completamente tradizionale : puoi disabilitare l'editor basato su blocchi e utilizzare il vecchio editor TinyMCE simile a un editor di testo.
• Plugin per diverse marche di editor WYSIWYG : generalmente vengono forniti come editor a blocchi, come Elementor o Beaver Builder.
• HTML e CSS personalizzati : per gli utenti avanzati, WordPress consente di aggiungere codice personalizzato per un maggiore controllo sul design del sito web.
• Modifica mobile : WordPress offre un'app mobile che consente agli utenti di modificare il proprio sito Web dal proprio smartphone o tablet.

Dove puoi trovare i tradizionali strumenti di editing WYSIWYG in WordPress?

Puoi trovare i tradizionali strumenti di modifica WYSIWYG nell'editor di post/pagine in WordPress. Quando crei o modifichi un post o una pagina, puoi passare dalla modalità visiva a quella di testo . La modalità visiva offre l'editor WYSIWYG, in cui puoi formattare il testo, aggiungere collegamenti e inserire contenuti multimediali.

Editore classico

Autore(i): Collaboratori WordPress

Versione corrente: 1.6.3

Ultimo aggiornamento: 9 novembre 2023

editor-classico.1.6.3.zip

98% Valutazioni 5.000.000+ Installazioni WP 4.9+ Richiede

Per impostazione predefinita, WordPress non ha l'editor tradizionale (ha invece il generatore di blocchi), quindi è necessario utilizzare il plug-in Editor classico per ottenerlo.

Il generatore di blocchi (Gutenberg) fornisce anche elementi WYSIWYG tradizionali, come il modo in cui tutti i media, i titoli e le caselle di testo appaiono proprio come li vedresti sul frontend.

2. Flusso web

Webflow è uno strumento di progettazione Web che consente agli utenti di progettare, creare e avviare visivamente siti Web reattivi. Offre un editor WYSIWYG che fornisce feedback visivo in tempo reale su come apparirà il sito Web finale.

In effetti, il team dietro Webflow ha creato Webflow con l'obiettivo principale di regolare la codifica backend in tempo reale mentre stilizzi gli aspetti visivi del tuo sito web.

Funzionalità moderne del web builder WYSIWYG di Webflow

• Griglia CSS visiva : consente agli utenti di creare layout complessi con un'interfaccia visiva semplice.
• Interazioni e animazioni : Webflow consente agli utenti di aggiungere interazioni e animazioni complesse senza la necessità di scrivere codice.
• Trasformazioni 3D : gli utenti possono spostare e ruotare gli oggetti nello spazio 3D.
• Flexbox : consente layout flessibili e un più semplice allineamento degli elementi.
• Design reattivo : Webflow ridimensiona automaticamente il tuo design per le diverse dimensioni dello schermo.

Dove puoi trovare gli strumenti di modifica WYSIWYG tradizionali in Webflow?

Puoi trovare i tradizionali strumenti di modifica WYSIWYG in Webflow nel pannello Designer. Qui, Webflow fornisce un'interfaccia potente con accesso sia agli strumenti di trascinamento della selezione che alla consueta modifica WYSIWYG. C'è anche la visualizzazione immediata delle modifiche al codice mentre sposti un blocco multimediale o ridimensioni qualcosa utilizzando le impostazioni generali.

Anche altre aree della dashboard di Webflow, come la sezione Post del blog , dispongono di semplici editor WYSIWYG. Qui puoi generare post rapidi sul blog e continuare a visualizzare la formattazione e le immagini prima della pubblicazione.

3. Spazio quadrato

Squarespace è sicuramente una delle piattaforme con una struttura WYSIWYG più ibrida. L'editor assomiglia proprio al frontend del tuo sito web, con blocchi trascinabili per spostare i contenuti, ma molti di questi blocchi includono editor WYSIWYG tradizionali all'interno dei moduli delle impostazioni.

Funzionalità moderne del web builder WYSIWYG di Squarespace

• Interfaccia drag-and-drop : semplifica l'aggiunta e la disposizione degli elementi sulla pagina.
• Editor di stile : consente agli utenti di personalizzare caratteri, colori e altre opzioni di stile avanzate.
• Modifica mobile : Squarespace offre un'app mobile che consente agli utenti di modificare il proprio sito Web dal proprio smartphone o tablet.
• Editor di intestazioni e piè di pagina di facile accesso : gli editor di pagine WYSIWYG precedenti rimanevano separati dalle aree di intestazione e piè di pagina, ma Squarespace ti offre accesso immediato a intestazioni e piè di pagina dal suo pannello di progettazione principale.
• Design basato sulla griglia : molti web builder “drag-and-drop” limitano dove puoi spostare i moduli, ma Squarespace utilizza un sistema a griglia in modo da poter prendere e spostare un elemento di design praticamente ovunque sulla pagina.

Dove puoi trovare i tradizionali strumenti di modifica WYSIWYG in Squarespace?

Qualsiasi blocco basato su testo ha un web builder WYSIWYG che rivela le impostazioni per i titoli, il testo in grassetto e la regolazione di altre parti della formattazione.

Anche i blocchi di immagini includono impostazioni WYSIWYG standard, in cui vedresti un pulsante per caricare un'immagine, aggiungere testo alternativo e visualizzare il collegamento dell'immagine.

4. Wix

Proprio come Squarespace, Wix dedica la maggior parte del suo spazio di progettazione a un'interfaccia completamente visiva che assomiglia esattamente al frontend del tuo sito web.

Pertanto, classificheremmo Wix come un moderno web builder WYSIWYG, poiché combina elementi più recenti, come i moduli trascinabili, e i tradizionali editor WYSIWYG che conosciamo dal passato.

Funzionalità moderne del web builder WYSIWYG di Wix

• Interfaccia drag-and-drop : puoi spostare qualsiasi elemento del tuo sito web, dalle immagini ai paragrafi, dai video ai titoli.
• Modifica della visualizzazione mobile : Wix offre un editor di visualizzazione mobile che consente agli utenti di personalizzare l'aspetto di un sito Web sui dispositivi mobili.
• Animazione : gli utenti possono aggiungere animazioni ai moduli trascinabili sul proprio sito web.
• Modifica rapida di intestazione e piè di pagina : controlla l'aspetto e la formattazione dell'intestazione e del piè di pagina senza uscire dall'editor della pagina principale.
• Modifica basata sulla griglia : con Wix puoi trascinare i blocchi praticamente ovunque sulla pagina grazie al suo sistema a griglia.

Dove puoi trovare i tradizionali strumenti di editing WYSIWYG in Wix?

L'editor del sito web di Wix contiene tutti gli strumenti di progettazione WYSIWYG moderni e tradizionali.

L'editor del sito web mostra un'anteprima in tempo reale di come apparirà il tuo sito dopo le modifiche.

Ogni blocco, una volta cliccato, fornisce una sezione WYSIWYG più tradizionale, come il modo in cui il modulo Impostazioni testo mostra le opzioni e gli effetti di formattazione.

Per un'area che assomiglia agli editor WYSIWYG del passato, crea semplicemente un post sul blog in Wix. Questa sezione ti consente di digitare contenuto, aggiungere immagini e formattare con elementi come titoli, elenchi puntati e virgolette, che diventano tutti visibili durante la digitazione nell'editor (proprio come vedresti sul frontend).

5. Shopify

Per un web builder WYSIWYG che si concentra interamente sui negozi online, non cercare oltre Shopify. La piattaforma Shopify fornisce strumenti di progettazione WYSIWYG sia moderni che tradizionali con funzionalità di e-commerce collegate.

Funzionalità moderne del web builder WYSIWYG di Shopify

• Sezioni trascinabili : sebbene non sia un vero designer drag-and-drop, Shopify presenta sezioni che puoi spostare su e giù nella pagina.
• Generazione di testo AI integrata : Shopify dispone di un pulsante di intelligenza artificiale su ogni editor WYSIWYG per creare rapidamente descrizioni di prodotti, contenuto della pagina e titoli.
• Visualizzazioni rapide del codice : ogni editor WYSIWYG in Shopify fornisce una scheda HTML.
• Origini di contenuti dinamici : gli editor WYSIWYG in Shopify hanno la possibilità di aggiungere contenuti di origine dinamici che si adattano in base alle regole. Ad esempio, potresti includere una guida alle taglie su tutte le pagine dei prodotti che cambia in base al prodotto.
• Modifica della vista mobile : l'editor di Shopify offre la modifica della vista mobile per progettare l'aspetto delle interfacce di tablet e smartphone.

Dove puoi trovare i tradizionali strumenti di modifica WYSIWYG in Shopify?

La maggior parte dell'interfaccia di Shopify dispone di strumenti di creazione web WYSIWYG molto tradizionali. L'editor della home page, ad esempio, rivela gli editor WYSIWYG standard ogni volta che si fa clic su un blocco di testo.

Ciò è particolarmente vero quando modifichi pagine oltre alla home page, come pagine di prodotti o informative. Quelle pagine sono ancora controllate dai tradizionali editor di web builder WYSIWYG; utilizzano pulsanti rapidi per la formattazione in alto e forniscono una visione di come apparirà il contenuto una volta pubblicato.

Prova un web builder WYSIWYG oggi stesso

Ricorda, il miglior web builder WYSIWYG è quello che soddisfa le tue esigenze specifiche e spesso ciò significa chiederti se preferisci il moderno WYSIWYG (costruzione a blocchi) o il tradizionale WYSIWYG (modifica di testo ricco con anteprime dei contenuti).

Per vedere alcuni altri strumenti che possono aiutarti a creare un sito Web senza dover conoscere il codice, potresti essere interessato anche alla nostra carrellata dei migliori costruttori di siti Web. ️️

Facci sapere nei commenti cosa ne pensi dell'evoluzione dei web builder WYSIWYG .