Ciao a tutti, in questo articolo vi illustrerò come creare una landing page con la versione gratuita di SP Page Builder.SP Page Builder è un CCK (Content Construction Kit) sviluppato da Joomshaper, esiste la versione gratuita, scaricabile dalla Jed a questo link e la versione a pagamento.
La versione a pagamento, ovviamente, è più completa e con la sottoscrizione, se incontriamo delle difficoltà, possiamo ricevere supporto dal reparto tecnico di Joomshaper, ma per creare una landing page può bastare la versione gratuita.
Prima di continuare ad illustrarvi questo componente voglio fare questa premessa: con questo articolo non voglio spiegare come creare una landing page efficace che converta i visitatori del sito a clienti e quindi parlare di contenuti, ma illustrarvi i passaggi tecnici per creare una landing page con questo CCK.
Fatta questa premessa ora vi illustro le funzionalità della versione gratuita di questo componente.
Dopo aver scaricato il componente ed installato attraverso il menù estensioni del nostro sito, andiamo a cliccare sulla voce "Add New Page" del menù "SP Page Builder"
Ci troviamo di fronte una pagina vuota.
Notiamo il pulsante "Add Row" (Aggiungi Riga), questo ci fa capire che questo CCK struttura l'inserimento dei contenuti nella pagina in righe.
Ogni riga può essere divisa in colonne, per poter eseguire questa operazione bisogna cliccare sulla voce "Add Column" (Aggiungi Colonna) presente nell'intestazione di ogni riga.
All'interno di ogni riga, o colonna se abbiamo diviso la riga, possiamo inserire vari contenuti dal pulsante Addon che si trova nella parte destra di ogni riga, gli addon disponibili nella versione free di questo CCK sono:
|
|
Ogni riga può essere spostata di posizione semplicemente trascinandola con il mouse all'interno della pagina, per poter effettuare questa operazione dobbiamo posizionare il mouse nel simbolo "croce" che si trova nell'angolo sinistro di ogni riga e tenendo premuto il tasto sinistro spostare la riga nella posizione desiderata.
Dopo aver fatto questa breve panoramica sul componente SP Page Builder comincio ad illustrarvi come creare una landing page con questo CCK.
Per questo articolo ho pensato di creare una landing page per un sito immaginario di un wedding planner.
Torniamo alla nostra pagina vuota creata da SP Page Builder ed aggiungiamo altre 3 righe tramite il pulsante "Add Row" in modo che nella nostra pagina ci sia una struttura di quattro righe.
Nella prima riga, attraverso il pulsante "Addon" che si trova nella parte destra di ogni riga inseriamo l'addon Image, nella parte inferiore della scheda che si apre andiamo ad inserire l'immagine tramite il modulo per l'upload molto simile al classico modulo presente in Joomla.
Una volta inserita l'immagine ci spostiamo nella seconda riga e la dividiamo in due colonne tramite il pulsante "Column" che ho illustrato precedentemente, per questo esempio ho scelto la disione in due colonne con la forma 1/2 + 1/2.
Nella colonna sinistra della seconda riga come addon vado ad aggiungere Text Block in quanto voglio inserire un testo dove illustrare ai visitatori le peculiarità del servizio di wedding planner.
Nella colonna destra della seconda riga inserisco come addon Joomla Module, un contenitore per moduli già presenti nel sito, in questo contenitore inserisco il modulo contatti che ho creato con il componente gratuito Visforms.
Per poter inserire il modulo basta selezionarlo nel menù a tendina presente nella scheda che si apre quando selezioniamo Joomla Module nella scelta del addon.
Trovate una guida dettagliata su come creare un form di contatti con il componente Visforms in un articolo precedente scritto da AlexRed a questo link.
Passiamo alla terza riga, in questa sezione ho scelto di inserire 3 recensioni di vecchi clienti; quindi per prima cosa andiamo sul tasto "Column" e scegliamo l'opzione 1/3 + 1/3 + 1/3.
In ognuna delle 3 colonne inserisco l'addon Testimonials, questo addon è molto simile al Text Block, l'unica differenza è che il testo inserito appare in frontend con la classica formattazione da recensione/citazione.
Nella quarta ed ultima riga inserisco una carrellata di immagini dei precedenti addobbi matrimoniali svolti da questo fantomatico wedding planner.
Per poter fare questo inserisco come addon il Carousel, questo addon ci permette di scegliere se vogliamo l'autoplay, se si devono visualizzare i pulsanti di controllo e le frecce di navigazione delle immagini; per poter aggingere più immagini devo inserire più contenitori attraverso il pulsante azzuro "Add Row" che si trova in basso a sinistra nella scheda del Carousel.
Con questo abbiamo completato la nostra Landing Page, basta pubblicarla nel sito come un qualsiasi articolo creato in un sito Joomla!.
La scorsa estate ho avuto la fortuna di assistere ad un talk di Luca Orlandini, esperto nella creazione di landing page; Luca consiglia di eliminare tutte le "distrazioni" dalla pagina in modo di focalizzare l'attenzione del visitatore sul contenuto della landing page, per questo vi consiglio di eliminare tutti i vari moduli /menù/altri contenuti dalla pagina e lasciare visibile solamente i contenuti studiati appositamemte per convertire il visitatore a contatto/cliente.
Tornando alla mia premessa iniziale, io non mi ritengo e realmente non sono un esperto in creazione di landing page, con questo articolo ho voluto illustrare uno strumento gratuito per creare delle landing page, per questo motivo vi consiglio di visitare il sito di Luca Orlandini dove trovate esempi di landing page che convertono.
Grazie dell'attenzione, alla prossima!
Roberto "marine" Marinello
Over Web Agency - Siti web a Padova
Commenta questo articolo sul forum