Page Builder - Starter Kit
Tempo di lettura: 5 minuti
Difficoltà: Base
L’editor grafico Page Builder consente di creare landing page o pagine web senza bisogno della conoscenze di un linguaggio di programmazione. Grazie a elementi Drag&Drop (trascinabili) hai la possibilità di comporre le tue pagine web e di personalizzarle in modo semplice e funzionale.
In questa guida:
Come si compone l'editor:
L’editor è composto da tre elementi principali:
- la colonna degli elementi e dei livelli (a sinistra)
- il contenuto della tua pagina (in posizione centrale)
- la colonna di stile e impostazioni (a destra)
Tramite l’utilizzo di questi tre elementi puoi creare pagine web complete e funzionali.
Il flusso di lavoro va da sinistra a destra. Quando devi inserire un nuovo elemento lo prelevi dalla colonna di sinistra per trascinarlo nella sezione centrale, a quel punto nella colonna di destra modifichi le varie impostazioni dell’elemento e il suo contenuto.
Nella parte più alta della pagina hai a disposizione la navbar che ti permette di fare delle utili operazioni, andando per ordine di posizione:
- Indietro, uscire dalla modifica pagina
- Modificare il nome
- Visualizzare le versioni mobile e tablet della pagina, in modo da fare modifiche specifiche per le versioni responsive
- Visualizzare i bordi degli elementi all’interno della pagina
- visualizzare il codice HTML e CSS
- visualizzare l’anteprima della tua pagina
- annullare o ripristinare delle modifiche annullate in precedenza
- Salvare e pubblicare
- Salvataggio semplice senza pubblicazione
Toolbar:
Selezionando un componente all’interno della pagina hai la possibilità di fare semplici operazioni, andando per ordine:
- Cliccando la freccia che punta verso l’alto selezioni il componente "contenitore";
- Attraverso le frecce direzionali puoi spostare l’elemento in un altro contenitore o colonna;
- Duplicare il componente;
- Eliminare il componente.
Nell’elemento immagine la toolbar è leggermente diversa, infatti troverai un tasto a forma di matita che ti permette di accedere alla media library per selezionare o caricare un’immagine.
LIVELLI
Un elemento molto utile nella colonna di sinistra è la possibilità di visualizzare i vari livelli all’interno della pagina. Puoi visualizzare gli annidamenti tra i componenti e modificare le posizioni semplicemente spostando i blocchi. Oltre a questo puoi rendere “invisibili” determinati livelli, nel caso in cui si voglia mantenere l’elemento creato su quella pagina per poi renderlo visibile in un secondo momento. È possibile anche eliminare gli elementi semplicemente cliccando il tasto “canc” della tua tastiera.
La prima cosa che da fare per iniziare a creare una Landing Page è inserire gli elementi all’interno della pagina bianca.
Nota bene:Per inserire dei contenuti, fatta eccezione per header e footer, il primo elemento da cui devi partire è il BOX. Cioè contenitore che ti permette di inserire al suo interno qualsiasi altro elemento tu voglia.
Elementi Drag&Drop
Gli elementi singoli, presenti nella sezione “Elementi” della colonna di sinistra si dividono in due sezioni, LAYOUT e BASE. I componenti layout sono i principali ed essenzialmente quelli che vanno a comporre la struttura della pagina mentre quelli base sono quelli che vanno a comporre i contenuti, come ad esempio testi, immagini, video, ecc..
BOX
Il box come già accennato in precedenza è fondamentale per creare la struttura della pagina e funge da contenitore per i componenti base. Consente di inserire una colonna, che fa da contenitore per altri elementi, nella tua pagina. ( versione alternativa )
Selezionandolo all’interno della pagina, attraverso la Tab impostazioni scegli un colore o un’immagine di background, oltre che altezza, larghezza, margini e padding.
COLONNA
Questo elemento consente di aggiungere nuove colonne in modo da avere contenuti affiancati all’interno della pagina. Va inserita quindi all’interno di un box ( che contiene una singola colonna ) in modo da aggiungere una colonna a quella già esistente.
Ripetendo l’operazione aggiungerai più colonne e lo spazio in larghezza sarà diviso equamente tra il numero di colonne presenti.
Il procedimento per la modifica delle colonne è lo stesso che c’è per il box.
HEADER
L’header, come già detto in precedenza, è quel componente che si trova nella parte più alta della pagina, quello in cui vai ad inserire il logo e il nome della tua azienda.
Ha il compito di dare subito una “denominazione” alla pagina web.
FOOTER
Il footer è fondamentale quando si crea una pagina web. Puoi inserire i dati “obbligatori” della tua azienda. È già predisposto per contenere il nome dell’azienda, i dati aziendali e i link per Privacy e Cookie Policy.
TESTO
Il testo è uno di quegli elementi che vanno a formare il contenuto della pagina. Va inserito dentro un componente colonna. Tramite la Tab stile puoi scegliere l’allineamento del testo, modificarne il colore, il tipo di font, scegliere un colore di sfondo, una larghezza e dei margini o padding.
Nella tab impostazioni si modifica il testo inserito. Tramite la zona di controllo situata sopra il campo di inserimento del testo hai la possibilità di gestire dei tool per formattarlo e personalizzarlo. Puoi sceglierne la tipologia tra i vari tipi di titolo e il paragrafo, creare degli elenchi, sottolineare, inserire dei grassetti, corsivi o barrati. Puoi anche inserire dei link su tutto il testo o solamente su parole specifiche, scegliere le dimensioni del font e anche, da qui, cambiare il colore del font.
IMMAGINE
Puoi inserire immagini all’interno di una colonna, automaticamente viene aperto un pop up con la tua media library dalla quale puoi scegliere un’immagine o caricarne una nuova. Si può scegliere l’immagine anche in un secondo momento facendo un doppio clic sul componente che ti permette di aprire la media library. Questa funzione è utile anche per sostituire un’immagine già inserita con un’altra.
Puoi ridimensionare l’immagine selezionandola e trascinando uno degli 8 punti di “ancoraggio” che vedrai ai suoi bordi.
Attraverso la Tab stile puoi modificare larghezza, altezza, margini e padding, inoltre puoi inserire un bordo. Attraverso la Tab impostazioni invece puoi impostare l’allineamento di essa all’interno della pagina, darle un titolo, inserire un link e le sue modalità di apertura e modificarne la url sorgente nel caso di immagini prese da indirizzi esterni.
IMG + TESTO
Si tratta di una combinazione tra immagine e testo grazie alla quale, attraverso la Tab impostazioni, scegli l’ordine dei due contenuti: immagine + testo o testo + immagine. Per modificare i contenuti interni basta selezionarli all’interno della pagina o tramite la Tab livelli e poi modificarli come spiegato in precedenza.
BOTTONE
L’elemento bottone ti permette di inserire bottoni all’interno della tua pagina. Anche qui attraverso la Tab stile puoi modificarne l'aspetto grafico. Ciò che lo differenzia rispetto ad altri elementi è la possibilità di gestire le impostazioni di stile per i due stati del bottone, normale e hover ( cioè quando ci si passa sopra con il mouse ) in modo da dare un feedback all’utente che visualizza la pagina. Nella Tab impostazioni modifichi il testo e le varie impostazioni quali la tipologia di apertura del link e l'URL che vuoi collegare.
VIDEO
Puoi inserire video e modificarli tramite la Tab stile scegliendo tra configurazioni come bordi, margini, padding, ecc..
Puoi inserire video da tre differenti fonti: HTML5, YouTube e Vimeo, per i quali cambiano solo alcune caratteristiche nella Tab impostazioni.
Andiamo per ordine:
Html5, puoi decidere il formato tra 16:9, 4:3 o auto. Devi inserire la sorgente del video, cioè la sua URL. Puoi impostare un’immagine di anteprima, l’autoplay, il loop e la visualizzazione dei comandi.
YouTube, per inserire video che provengono da YouTube hai bisogno di immettere l’ID del video che si trova nella URL ed è solitamente l’ultima parte di essa. Inserita la URL gli altri comandi sono gli stessi presenti per i video HTML5, se non per la possibilità di inserire i video relazionati.
Potresti trovare l’URL in due modi:
- https://www.youtube.com/watch?v=5g3SdJ-EOHw (URL più comune)
- https://www.youtube.com/watch?v=5g3SdJ-EOHw&list=DGSCDASG.... (URL meno comune)
L’ID sarà in tutti e due i casi 5g3SdJ-EOHw.
Vimeo, per inserire un video di Vimeo devi anche qui immettere l’ID del video che si trova nella URL che si presenterà in questo modo:
- https://vimeo.com/502163294. L’ID sarà: 502163294
Anche qui c’è la possibilità di far andare il video in loop ed impostare l’autoplay.
MAPPA
Puoi inserire una mappa di Google Maps.
Dalla Tab Stile vai a impostare bordo, dimensioni, margini e padding.
Dalla Tab Impostazioni invece hai la possibilità di scegliere l’indirizzo su cui localizzare la mappa, ad esempio se scrivi 4Dem nella Tab indirizzo la mappa ti farà visualizzare la posizione di 4Dem. Puoi scegliere la tipologia, se predefinita o satellitare e gestirne lo zoom verso l’indirizzo che hai scelto.
CITAZIONE
La citazione funziona come il testo se non per l’aggiunta di una impostazione che la caratterizza: l’ombra esterna. Infatti grazie all’ombra esterna si caratterizza la nostra citazione e attraverso la Tab Stile puoi a modificarne la grandezza e la posizione oltre che il colore, la sfocatura e la diffusione.
Per il resto funziona esattamente come l’elemento testo.
COUNTDOWN
Questo elemento ti permette di inserire un conto alla rovescia automatico all’interno della pagina. Basta infatti, tramite la Tab impostazioni, andare ad inserire una data di scadenza per farlo funzionare e, sempre in questa Tab, selezionando la casella mostra editor puoi modificare il testo che comparirà terminato il Countdown, lo modifichi come un semplice componente testo.
Oltre a questo puoi modificarne lo stile nella Tab Stile, e hai anche la possibilità di gestire singolarmente ogni elemento andandolo a selezionare dalla pagina centrale e poi modificandolo.
