Pagebuilder

Il Pagebuilder è un altro editor presente nella sezione Crea > Nuova spedizione > Contenuto del messaggio. E’ uno strumento che consente di modificare i contenuti di template (appositamente preparati per Pagebuilder) senza il rischio di danneggiare il codice html e quindi senza il rischio di errori di visualizzazione da parte dei destinatari.

Il concetto alla base del Pagebuilder è: strutturare il template in una serie di elementi, ognuno dei quali può essere modificato a parte. Dopo aver modificato gli elementi editabili, il risultato sarà salvato in un nuovo file html che potrà essere subito utilizzato in ContactLab. Questo concetto risulterà più chiaro dopo aver letto i primi tre paragrafi di questo capitolo.

Come accedere Per accedere è sufficiente cliccare sul link “Pagebuilder” sotto il box “Testo (in formato HTML)” (vedi fig.2)

pageb-01

Figura 2: Aprire il Pagebuilder

Cliccando sul link si aprirà una finestra pop-up contenente l’applicazione (fig. 3).

pageb-02

Figura 3: la pagina principale di Pagebuilder

La pagina principale mostra la due sezioni: template e immagini; nella prima si creano e gestiscono i template, nella seconda le immagini. In figura 2 vediamo che sono presenti più template.

Utilizzare un template: creare una nuova pagina All’interno di Pagebuilder troverete dei template. Ogni template può essere visto come la matrice di uno stampo, da cui creare infinite pagine. Ogni volta che vorremo aggiornare il contenuto di un certo template, basterà creare una nuova pagina da quel template e poi andare a modificarla. Ecco come fare per creare nuove pagine.

1. Passare col mouse sopra il template desiderato, nell’esempio nella figura a lato “Template per tutti”. Cliccare su “Nuova pagina”.
pageb-13
  1. La nuova pagina viene creata ed automaticamente visualizzata (fig. 4)

pageb-07

Figura 4: la schermata che permette di modificare una pagina

Modificare la pagina

1. In figura 3 possiamo osservare la struttura del Pagebuilder: la finestra è divisa in 2 riquadri. L’anteprima della nostra pagina viene mostrata nel riquadro a destra. La pagina è stata suddivisa in blocchi, che vengono mostrati nella colonna di sinistra. Questi blocchi rappresentano la “struttura” della pagina. Cliccando su ciascun elemento, esso comparirà in una lightbox per poter essere modificato.
2. A quel punto, modificare il contenuto dell’elemento e poi cliccare sul tasto “Salva” (fig. 5)

pageb-08

Figura 5: modificare il contenuto di un elemento

3. Modificando il titolo e premendo “Salva”, la modifica viene mostrata in anteprima. Gli elementi modificabili possono essere di quattro tipi: immagini, testo monoriga, editor semplice, editor avanzato. Nel prossimo paragrafo li analizzeremo uno per uno, ora vediamo come salvare la pagina dopo averla modificata.
4. Una volta modificati gli elementi desiderati e vista l’anteprima cliccando “Salva”, conviene salvare le modifiche: per farlo basta cliccare sul link “Salva modifiche” in alto alla pagina. Se invece si vogliono **annullare** tutte le modifiche fin lì effettuate cliccare su Annulla modifiche.
5. Una volta salvate le modifiche la pagina aggiornata verrà salvata. Il sistema vi riporterà automaticamente all’elenco delle pagine associate a quel template.

Gli elementi modificabili

pageb-09

Figura 5: formattare il testo di un elemento modificabile

Gli elementi che vedete nella colonna di sinistra, Struttura, sono di quattro tipi. Vediamoli in dettaglio.

Testo monoriga Questi elementi permettono di inserire una riga di testo, solitamente breve, senza poter modificare la formattazione esistente. Tipicamente questi elementi sono usati per i titoli di articoli, per inserire gli URL dei link o per i punti di un elenco.

Editor semplice Questi elementi possono essere modificati attraverso un editor semplice, che permette di modificare solo pochi aspetti grafici: grassetti, sottolineature, corsivi, inserire o togliere link, ecc… Vediamo qui sotto le icone presenti nell’editor semplice e le loro funzionalità.

pageb-biu sono i pulsanti per formattare il testo in grassetto, corsivo e sottolineato
pageb-tagliacopiaincolla i pulsanti che tagliano, copiano e incollano il testo
pageb-txteword servono a copiare testo da file txt o word
pageb-seltutto seleziona tutto il testo
pageb-undoredo annulla o rifai l’ultima azione
pageb-giustifica giustifica il testo
pageb-links permette di inserire o togliere un link sulla porzione di testo selezionato
pageb-gomma consente di cancellare ogni formattazione e riportare il testo originario ai valori di default.

Se si desidera mandare a capo il testo senza lasciare una riga bianca, dare Invio tenendo premuto il tasto Shift.

Editor avanzato Questi elementi possono essere modificati attraverso un editor che, oltre ad avere tutte le funzioni dell’editor semplice (vedi paragrafo precedente), ne ha altre:

pageb_insimmagine inserisce un’immagine presente su un server (es. http://www.server.it/img/immagine.gif )
pageb_instabella inserisce una tabella; se la tabella c’è già, permette di modificarne le impostazioni
pageb_propcella permette di modificare le impostazioni di una singola cella
pageb_pastrugnacelle questi tre pulsanti cancellano o inseriscono righe alla tabella
pageb_cleanmessup questo pulsante ripulisce il codice “sporco”
pageb_fontsize dal menù a tendina si può selezionare la grandezza del testo
pageb-centrare centra la porzione di testo evidenziata.
pageb_colori cambia il colore del testo selezionato
pageb_omega inserisce un carattere speciale (lettere accentate, simbolo dell’euro ecc…)

Se si desidera mandare a capo il testo senza lasciare una riga bianca, dare Invio tenendo premuto il tasto Shift.

Immagini Nel caso in cui l’elemento che si sta modificando non sia un testo ma un’immagine, si avrà una schermata simile a quella in figura 6:

crea_pageb-11

Figura 6: la selezione delle immagini in Pagebuilder

Cliccando sulla seguente icona edit_image a destra del percorso dell’immagine, si aprirà una finestrella contenente l’elenco di tutte le immagini disponibili (fig.7) :

upload_immagini_pb

Figura 7: elenco immagini disponibili.

Basta cliccare sul nome di un’immagine per selezionarla. A questo punto sarà sufficiente cliccare sul solito tasto “Salva” per vedere la nuova immagine nell’anteprima. Il prossimo paragrafo sarà dedicato alla gestione delle immagini in Pagebuilder.

6. Una volta applicate tutte le modifiche desiderate, per renderle definitive, bisogna ricordarsi di salvarle con i link “Salva le modifiche” in cima alla pagina.

Caricare le immagini

Le immagini si possono caricare: 1) In fase di modifica immagini, sempre cliccando sull’icona edit_image(fig. 6)

2) Cliccando su “immagini” a destra di “template” dopo aver aperto il pagebuilder.(fig.8)

crea_pageb-img

Figura 8

Per caricare le immagini è sufficiente cliccare su “Upload” upload_ico (fig. 7) e sc quindi i file da caricare.

E’ possibile inoltre creare nuove cartelle cliccando su “Create folder” create_folder_ico (fig. 7)

La colonna Struttura La colonna a sinistra, come abbiamo visto, mostra la struttura del template. Ogni elemento della struttura può avere delle proprietà particolari: in questo caso accanto all’elemento troverete una delle seguenti icone:

pageb-tastopiu duplica l’elemento, creandone una copia identica che poi sarà possibile modificare: se ad esempio si hanno 2 articoli se ne possono creare un terzo, un quarto ecc… con la stessa struttura e poi modificare i contenuti.
pageb-tastomeno cancella l’elemento corrispondente; attenzione: se si cancellano tutti gli elementi poi non sarà possibile ricrearne di nuovi (se si hanno 3 articoli in una sezione e si cancellano tutti e tre, poi non si potrà più creare un nuovo articolo in quella sezione).
pageb-lucchetto_off è una sorta di sicura: cliccandoci sopra la si sblocca e si fa apparire il pulsante pageb-tastomeno
pageb-lucchetto_on questa icona indica che la sicura è sbloccata; cliccandola si reinserisce la sicura.
pageb-occhio alcuni elementi possono essere nascosti oppure mostrati a richiesta: quando l’icona dell’occhio è presente significa che quell’elemento è visibile, ma cliccandola si potrà nascondere l’elemento.
pageb-occhiociecato questa icona indica che quell’elemento è nascosto: cliccandola si renderà l’elemento visibile e apparirà l’icona pageb-occhio

Salvare la pagina e usarla in ContactLab Un volta modificata la pagina come si desidera, vedrete nel riquadro in basso l’anteprima di come apparirà la pagina. Le modifiche che vedete in anteprima tuttavia non sono ancora state salvate definitivamente! Per salvarle, cliccate sul link in cima alla pagina “Salva modifiche“.

A questo punto si potrà salvare la pagina (con lo stesso nome o rinominandola) e poi il sistema vi riporterà direttamente all’Elenco pagine.

Ora la nostra pagina è aggiornata con i contenuti che volevamo e salvata nell’elenco pagine: come inserirla in ContactLab?

Sotto il nome di ogni pagina c’è un apposito link “Usa in ContactLab“: cliccandolo la pagina viene inserita automaticamente dentro il riquaro “Testo in formato HTML” di Contactsend (fig. 9)

clab-crea-pb

Figura 9: come inserire il contenuto di una pagina di Pagebuilder dentro ContactLab

A questo punto la pagina è copiata dentro Contactsend e si potrà proseguire nel processo di spedizione cliccando il tasto “Avanti” (cfr. “Crea–>Spedizione email”).

ATTENZIONE: perché l’inserimento dell’html da Pagebuilder a Contactsend funzioni, è necessario che sotto la finestrella pop-up di Pagebuilder, ci sia la schermata di Contactsend “Contenuto del messaggio” (come in fig. 8). Quando si clicca su “Usa in ContactLab” lo sfondo del link dovrebbe lampeggiare.

Altre operazioni sulle pagine Nella figura 9 qui sopra possiamo vedere che sotto ogni pagina sono presenti, oltre a “Usa in ContactLab”, altri link: – Anteprima apre una finestra pop-up contenente un’anteprima della pagina. – Modifica permette di entrare nella struttura della pagina e modificarla nel modo descritto nei paragrafi precedenti. – Duplica crea una copia identica della pagina, quindi con tutti gli aggiornamenti fatti. La copia può poi essere rinominata e modificata a sua volta. – Scarica consente di scaricare l’html della pagina creata.