Recensione di LiveCanvas: un generatore di pagine WordPress adatto agli sviluppatori

Pubblicato: 2021-04-03

In questa recensione, esaminiamo un plug-in per la creazione di pagine di WordPress con un editor HTML e CSS integrato: LiveCanvas.

Sebbene siano disponibili molti plug-in per la creazione di pagine per WordPress, questo mira a differenziarsi dalla concorrenza essendo il più possibile amichevole per gli sviluppatori.

Non solo, ma l'output di questo generatore di pagine è puro HTML e CSS. Grazie a ciò, le tue pagine dovrebbero caricarsi più velocemente ed essere più SEO-friendly, rispetto ad altri plugin per la creazione di pagine.

In questa recensione di LiveCanvas, copriamo tutte le migliori funzionalità di questo strumento per aiutarti a decidere se questo è il plug-in per la creazione di pagine WordPress giusto per il tuo sito web.

Iniziamo…

Per chi è il plugin LiveCanvas?

L'editor di LiveCanvas

Chiunque voglia assumere il pieno controllo del design del proprio sito Web WordPress dovrebbe trovare LiveCanvas un plug-in interessante.

Tuttavia, LiveCanvas ha molte funzionalità che sviluppatori e programmatori dovrebbero trovare particolarmente utili. Queste funzionalità aiutano a separare LiveCanvas dalla concorrenza. Grazie all'editor HTML e CSS che tratteremo in modo più dettagliato più avanti in questa recensione, hai molto controllo sull'aspetto del tuo sito con questo plug-in di WordPress.

Quindi, se desideri creare un sito Web WordPress personalizzato o aggiungere pagine con design personalizzati al tuo sito, LiveCanvas potrebbe essere il plug-in che fa per te.

LiveCanvas funziona con il proprio tema, un tema figlio personalizzato di UnderStrap. Ciò significa due cose: buone prestazioni del sito e con Bootstrap 4 come framework CSS sottostante.

Funzionalità del plugin WordPress LiveCanvas

Poiché LiveCanvas è un potente plug-in per la creazione di pagine di WordPress, ha molte funzionalità. Ecco alcuni dei punti salienti di questo strumento per aiutarti a decidere se è giusto per te.

Per una rapida panoramica del plug-in, questo video offre una rapida panoramica di ciò che LiveCanvas può fare.

Un plug-in per la creazione di pagine a misura di sviluppatore

Editor di codice LiveCanvas

Una delle funzionalità per gli sviluppatori di questo generatore di pagine è l'editor di codice LiveCanvas. Quando crei progetti di pagina con il plug-in, puoi visualizzare rapidamente l'HTML e il CSS sottostanti. Non solo puoi visualizzare questo codice, ma puoi anche modificarlo tramite l'editor intuitivo.

Questo ti dà molta più libertà di quella che ottieni con molti altri plugin per la creazione di pagine di WordPress. Grazie a questo, dovresti essere in grado di creare design davvero personalizzati e unici per il tuo sito Web WordPress, il tutto utilizzando un plug-in standard.

Tuttavia, se non sei uno sviluppatore e non sei interessato a modificare l'HTML e il CSS sottostanti, puoi semplicemente utilizzare l'interfaccia WYSIWYG front-end di LiveCanvas per creare le tue pagine.

Un sacco di contenuti già pronti

Contenuti già pronti

Mentre LiveCanvas piacerà sicuramente a chiunque voglia creare un sito Web WordPress totalmente personalizzato, viene fornito anche con alcuni contenuti già pronti dall'aspetto accattivante.

Un gran numero di sezioni è a portata di mano, che puoi combinare e mescolare per creare facilmente pagine web personalizzate.

menti sono.

Tutte queste sezioni già pronte sono completamente modificabili, quindi puoi usarle così come vengono o personalizzarle per renderle tue. Sono solo pezzi di codice HTML5 che usano Bootstrap 4.

Alcuni esempi dei tipi di sezioni coperti da questo contenuto includono sezioni degli eroi, pannelli delle funzioni, griglie della galleria e pannelli di invito all'azione. Puoi anche aggiungere pannelli del profilo dei membri del team, sezioni della tabella dei prezzi e visualizzazioni di testimonianze. Esistono più varianti di ogni tipo, quindi dovresti essere in grado di trovare qualcosa che funzioni per il tuo sito, indipendentemente dalle preferenze e dai requisiti del tuo design.

Grazie alle eleganti sezioni di contenuto già pronte, dovresti trovare facile creare rapidamente le tue pagine con LiveCanvas.

Interfaccia del generatore di pagine front-end

Interfaccia di LiveCanvas Page Builder

Come molti dei migliori plugin moderni per la creazione di pagine per WordPress, LiveCanvas ha un'interfaccia front-end. Ciò significa che tutto il lavoro di personalizzazione avviene tramite un editor WYSIWYG. In passato, con la maggior parte dei plugin di questo tipo, questo lavoro sarebbe stato svolto nel back-end del tuo sito WordPress. Questo era scomodo in quanto la visualizzazione della pagina su cui stavi lavorando non assomigliava per niente alla versione che i tuoi visitatori vedrebbero quando il contenuto è stato pubblicato.

Poiché LiveCanvas ha un'interfaccia front-end, hai un'ottima idea di come apparirà la tua pagina quando sarà pubblicata mentre ci stai lavorando. Ciò elimina la necessità di salvare il lavoro, visualizzare in anteprima la pagina in una nuova scheda del browser e cambiare scheda per vedere come apparirà quando sarà pubblicata. Grazie a ciò, puoi creare design di pagine personalizzate con LiveCanvas molto più velocemente di quanto faresti quando utilizzi un generatore di pagine con un editor di back-end.

Ecco alcune delle migliori caratteristiche dell'interfaccia del generatore di pagine di LiveCanvas:

Modifica della cronologia

Per darti più libertà creativa e la possibilità di lavorare senza preoccuparti di commettere errori, LiveCanvas ha una funzione di annullamento. Ciò ti consente di tornare alla versione precedente del design della tua pagina personalizzata nel caso in cui qualcosa non appaia come pensavi potesse essere. Ora puoi sperimentare con sicurezza, sapendo che qualsiasi errore che commetti può essere rapidamente annullato.

Facile modifica HTML e CSS

Come accennato in precedenza in questa recensione di LiveCanvas, questo plugin per la creazione di pagine ha un editor di codice.

A differenza di altri popolari plugin per la creazione di pagine di WordPress, LiveCanvas semplifica la modifica dell'HTML e del CSS sottostanti delle tue pagine. Grazie a questo, ottieni molto più controllo su come appariranno i tuoi contenuti. In qualsiasi momento, puoi visualizzare l'HTML e quindi apportarvi modifiche. Queste modifiche verranno applicate istantaneamente alla tua pagina, facilitando il controllo sul design dei tuoi contenuti.

Con LiveCanvas, la modifica di HTML e CSS è facilitata dall'interfaccia dell'editor di codice. Quando apri l'editor HTML, tutto il codice è chiaramente formattato e allineato. I colori sono usati per rendere il codice più facile da leggere. Puoi anche facilmente comprimere e piegare il codice per avere una visione più chiara della sezione che stai modificando.

Se hai bisogno di ridimensionare la finestra dell'editor di codice, anche questo è facile. Trascina semplicemente il bordo della finestra per rimpicciolirla o ingrandirla secondo necessità. Un'altra caratteristica davvero impressionante dell'editor di codice LiveCanvas è la funzione di completamento automatico. Questo ti aiuterà a scrivere il tuo codice più velocemente e a ridurre gli errori fornendo suggerimenti tramite il completamento automatico. Un altro aspetto utile dell'editor di codice è la sua capacità di correggere il codice aggiungendo eventuali tag di chiusura che hai dimenticato di includere.

L'editor LiveCanvas può aiutarti a evitare di essere sopraffatto anche durante la modifica dell'HTML e del CSS della tua pagina. Per fare ciò, l'editor di codice nasconde alla vista tutto il codice HTML e CSS, a parte l'elemento specifico che stai modificando. Ciò ti consente di concentrarti sulla parte della pagina su cui stai lavorando, senza distrarti o perderti nel resto del codice della pagina.

Anche se non sai molto, o niente, sull'HTML, questa funzione sarà comunque utile. Poiché online sono disponibili così tanti snippet HTML, puoi copiare e incollare questi esempi nel design della tua pagina LiveCanvas. Per questo motivo, puoi aggiungere più elementi alle tue pagine, come i pulsanti di invito all'azione, che hai trovato online. In alternativa, se conosci un po' di codice HTML, apprezzerai sicuramente la facilità con cui puoi aggiungere il tuo codice HTML alle tue pagine.

Crea i tuoi mattoncini: la libreria di blocchi e sezioni

In LiveCanvas hai la possibilità di salvare i tuoi blocchi HTML in una libreria locale per un facile riutilizzo nelle tue pagine. Questa è un'ottima funzionalità per risparmiare tempo: è sicuramente qualcosa che apprezzeranno coloro che stanno creando più pagine o siti Web personalizzati.

In realtà, ci sono due librerie separate, sezioni e blocchi: le sezioni sono per quegli elementi grandi, a tutta larghezza e grandi già pronti. I blocchi sono per gli elementi che vanno all'interno di una griglia, quindi in genere non a tutta larghezza.

Se hai utilizzato altri page builder di WordPress in passato e hai scoperto che i tuoi contenuti sembrano tutti piuttosto simili, questa funzione può aiutarti a creare la tua libreria personalizzata di moduli per dare ai tuoi progetti un aspetto totalmente originale e soddisfare le tue esigenze altamente specifiche .

Crea piè di pagina personalizzati

Alcuni page builder di WordPress ti consentono solo di modificare le aree del post e della pagina. Tuttavia, non è il caso di LiveCanvas. Se desideri creare un piè di pagina personalizzato per il tuo sito Web WordPress, puoi farlo con LiveCanvas. Non sei limitato solo ad aggiungere widget al tuo piè di pagina. Puoi invece aggiungere qualsiasi contenuto ad esso, tramite l'editor di contenuti di LiveCanvas e il suo supporto per la gestione dell'HTML personalizzato.

Accesso rapido alle immagini Stock

Mentre crei il tuo sito Web o le tue pagine personalizzate, puoi inserire rapidamente immagini stock nei tuoi layout con LiveCanvas. Grazie all'integrazione con Unsplash, puoi sfogliare la loro vasta libreria di immagini gratuite. Una volta trovato quello che ti piace, puoi inserirlo rapidamente nella tua pagina. Tutto questo avviene dall'interno dell'interfaccia di modifica di LiveCanvas.

Effetti di animazione della pagina *********

Per aiutare i tuoi contenuti a catturare l'attenzione dei tuoi visitatori, LiveCanvas semplifica l'aggiunta di animazioni alle tue pagine. Selezionando un'opzione nella pagina delle impostazioni di backend di LiveCanvas, la libreria Animate On Scroll viene aggiunta al sito. Nell'editor LiveCanvas puoi assegnare varie animazioni a ciascun elemento, come dissolvenza, capovolgimento, scorrimento e zoom, mantenendo il controllo della durata e del ritardo dell'animazione.

Supporto universale per shortcode

LiveCanvas ti dà la possibilità di inserire qualsiasi shortcode nei tuoi progetti di pagine personalizzate. Ciò consente di integrare qualsiasi tipo di plug-in e funzionalità di terze parti nelle pagine basate su LiveCanvas, con una comoda anteprima ajax in tempo reale, in modo da poter vedere immediatamente come sarebbe l'output dello shortcode.

Poiché ci sono così tanti plug-in shortcode disponibili per WordPress, puoi aumentare rapidamente il numero di elementi che puoi inserire nelle pagine personalizzate che crei con LiveCanvas, espandendo esponenzialmente le tue opzioni creative.

Un fantastico tema complementare

LiveCanvas viene fornito con un tema WordPress di base consigliato e complementare: CustomStrap.

A garanzia di velocità e affidabilità, è bello sapere che CustomStrap è un tema figlio di UnderStrap, il tema di avviamento alimentato da Bootstrap 4 più votato e puro.

CustomStrap ha un compilatore SCSS integrato in modo da poter ricostruire al volo e personalizzare il CSS di Bootstrap per avere la tua tavolozza di colori specifica e dargli il tuo tocco di stile unico - tutto dall'interfaccia di WordPress Customizer, senza dover installare pacchetti npm geek sul tuo macchina tramite riga di comando.

Alcuni designer sostengono che i siti Bootstrap siano tutti uguali. Questo non accadrà con CustomStrap: hai migliaia di combinazioni di caratteri, colori, stili.

CustomIt consente anche di abilitare la funzione di tipografia reattiva, qualcosa che è molto utile nel primo mondo mobile di oggi.

Tuttavia, non sei bloccato con una scelta. LiveCanvas funzionerà con qualsiasi tema WordPress basato su Bootstrap 4. Se hai il tuo tema personalizzato basato su Bootstrap 4, sarai in grado di eseguire senza problemi il plug-in LiveCanvas per creare le tue pagine personalizzate.

Nessun blocco del fornitore

Come spiegato in precedenza in questa recensione di LiveCanvas, puoi facilmente accedere e modificare l'HTML e il CSS generati dall'interfaccia visiva dell'editor. Mentre questo ti dà una maggiore libertà creativa sulla tua pagina, ha anche un altro vantaggio.

Poiché LiveCanvas genera HTML e CSS puliti per il design della sua pagina, se disabiliti il ​​plug-in, i design della tua pagina continueranno a funzionare normalmente. Ciò significa che non sei bloccato nell'utilizzo di LiveCanvas a vita, come nel caso di altri plug-in per la creazione di pagine.

Anche una volta disabilitato il plug-in, puoi comunque accedere e modificare la pagina HTML e CSS per apportare modifiche. Non sarai in grado di apportare le modifiche tramite l'interfaccia utente di LiveCanvas o l'editor di codice, a meno che non riattivi il plug-in.

Esperienza utente del plug-in LiveCanvas

Per darti un'idea di come viene utilizzato questo generatore di pagine, questa parte della nostra recensione di LiveCanvas esplorerà l'esperienza utente del plug-in.

Come accennato, LiveCanvas dovrebbe funzionare con qualsiasi tema WordPress basato su Bootstrap 4. Tuttavia, il plug-in viene fornito anche con il proprio tema di partenza che puoi utilizzare al posto di un tema da un'altra fonte.

Indipendentemente dal tema scelto, una volta installato il plugin sul tuo sito, puoi inserire la tua chiave di licenza LiveCanvas per abilitare gli aggiornamenti automatici.

Per iniziare a creare un design di pagina personalizzato per il tuo sito Web WordPress, devi semplicemente creare una nuova pagina dalla dashboard di WordPress.

Il plug-in aggiunge un pannello all'editor di pagine che ti consente di attivare l'editor LiveCanvas per quel contenuto.

Abilita l'editor LiveCanvas

Abilita LiveCanvas

Dopo aver abilitato LiveCanvas per una determinata pagina, puoi iniziare a utilizzare l'editor di contenuti per creare il tuo design personalizzato.

Generatore di pagine LiveCanvas

Dopo aver aggiunto una sezione alla tua pagina, puoi inserire del contenuto in quella sezione. Poiché LiveCanvas include molte sezioni predefinite, puoi iniziare rapidamente a creare la tua pagina.

Sezioni di pagina già pronte

Nuova sezione LiveCanvas

I diversi elementi che puoi aggiungere alle tue pagine sono tutti ben organizzati, rendendo facile trovare quello che stai cercando. Dopo averne aggiunto uno alla tua pagina, puoi iniziare a personalizzarlo tramite l'editor live.

Modifica del testo in linea

Poiché LiveCanvas ha la modifica del testo in linea, puoi semplicemente fare clic su un'area di testo e iniziare a digitare per aggiungere il tuo contenuto.

Modifica del testo LiveCanvas

Se vuoi modificare un altro tipo di elemento sulla tua pagina, come un'immagine, è altrettanto facile. Per fare ciò, fai clic sull'elemento e i controlli per quell'elemento verranno visualizzati nella barra laterale. Puoi quindi personalizzare quell'elemento tramite i controlli del pannello della barra laterale.

Modifica proprietà immagine

Viewport per smartphone e tablet

Mentre lavori sulla tua pagina, puoi modificare le dimensioni dell'area visibile in qualsiasi momento. In questo modo avrai una buona idea di come appariranno i tuoi contenuti su una vasta gamma di dispositivi. Ciò include smartphone, tablet e altri viewport preimpostati di piccolo schermo.

Mobile Viewport

Modifica HTML e CSS

Come accennato, una delle caratteristiche principali di LiveCanvas è l'editor HTML e CSS. Puoi passare all'editor HTML in qualsiasi momento, semplicemente facendo clic su un elemento della pagina, ad esempio una riga, e quindi facendo clic sulla voce di menu appropriata.

Editor HTML

Per evitare confusione, l'editor HTML visualizza solo l'HTML per l'elemento che stai modificando. Inoltre, non appena apporti modifiche all'HTML, viene applicato alla tua pagina in modo che tu possa vedere i risultati della tua modifica.

Si spera che questo ti dia un'idea di come funziona questo plugin per la creazione di pagine. Ora diamo un'occhiata alle informazioni sui prezzi.

Informazioni sui prezzi del plugin WordPress LiveCanvas

LiveCanvas è un plugin premium disponibile su due piani tariffari:

  • Pro: $ 79 all'anno per l'accesso agli aggiornamenti e al supporto per 1 anno.
  • A vita: $ 199 per l'accesso a vita ad aggiornamenti e supporto.

Indipendentemente dall'opzione scelta, puoi utilizzare LiveCanvas su tutti i siti web di cui hai bisogno. Ciò include tutti i siti che crei per i tuoi clienti.

LiveCanvas Review Considerazioni finali

LiveCanvas ha molte delle migliori funzionalità presenti nei più popolari plugin per la creazione di pagine di WordPress. Ciò include una moderna interfaccia drag-and-drop, una buona selezione di contenuti già pronti e molti controlli di personalizzazione.

Tuttavia, ha anche un editor HTML e CSS intuitivo che ti offre un controllo ancora maggiore sui design delle tue pagine.

Pertanto, se stai cercando un plug-in per la creazione di pagine WordPress flessibile e adatto agli sviluppatori, LiveCanvas è un'ottima opzione.

Visita il sito Web di LiveCanvas per saperne di più su questo plug-in per la creazione di pagine.