Supporto volontario e collaborativo per Joomla!® in italiano

Creare una Landing Page con Sp Page Builder

Valutazione attuale: 5 / 5

Stella attivaStella attivaStella attivaStella attivaStella attiva
 
Il logo della versione free del CCK SP Page BuilderCiao 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.

SP Page Builder aggiungi colonna
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:

  • Joomla Module
  • Accordion
  • Alert
  • Button
  • Carousel
  • Divider
  • Empty Space
  • Feature Box
  • Icon
  • Image
  • Tabs
  • Testimonials
  • Text Block
  • Video


Gli Addon disponibili nella versione Free di SP Page Builder
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.

Le varie opzioni di divisone colonne con SP Page Builder


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!.



Il risultato finale della creazione di una Landing Page con SP Page Builder

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

commentaCommenta questo articolo sul forum



Calendario articoli

Luglio 2016
Lun Mar Mer Gio Ven Sab Dom
27 28 29 30 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31

Ultima versione di Joomla!®

downloadVer. 3.5.1 Stabile Italiana
Data di rilascio: 05 Aprile 2016
(leggi la notizia Demo online

Le migliori estensioni gratuite

Un elenco aggiornato con i link a più di 100 estensioni fra componenti, moduli e plugin gratuiti per Joomla! 3

Manuale in italiano

Manuale in italianoPer conoscere meglio Joomla!, le sue caratteristiche ed il metodo di utilizzo leggi il manuale tradotto in italiano.

Molto utili anche le risposte alle domande più frequenti: FAQ

Sicurezza del proprio sito Joomla!Leggi anche: Nozioni sulla sicurezza del proprio sito

Autori di articoli recenti

Invia un articolo!Scrivi un articolo su Joomla.it e ricevi i ricavi dalle pubblicità di Google Adsense!
Segui queste istruzioni, condividi e collabora con la community. L'elenco degli autori attivi sul sito.

Libri consigliati

Torna su

Joomla.it sui Social Network

JoomlaDay Italia

JoomlaDay

Newsletter

Inserisci qui la tua e.mail: