| Tweet |
Realizzare una landing page efficace è di vitale importanza quando dovete raggiungere un obiettivo. Sia che si tratti della vendita di un prodotto, della promozione di un libro, di un evento o di qualsiasi altra cosa, l’aspetto e i contenuti di una landing page possono veramente decretare la differenza tra il successo o l’insuccesso dell’iniziativa.
Se utilizzate WordPress, potete benissimo sfruttare questo CMS per creare delle pagine con un template personalizzato. In questo modo è possibile realizzare landing page che differiscono completamente rispetto al tema utilizzato dal vostro blog.
Se adottate Thesis come tema su WordPress, la creazione di una landing page personalizzata è ancora più semplice.
Vi basterà creare una nuova pagina su WordPress e attribuire ad essa una classe CSS specifica, ad esempio “landingpage”.
In questo modo Thesis applicherà la classe .landingpage al tag <body> della pagina, permettendovi di personalizzarla graficamente utilizzando il foglio di stile custom.css.
In futuro potrete poi applicare la classe “landingpage” anche ad altre pagine, in modo da replicare tale stile anche su di esse.
Per rendere la vostra landing page diversa da tutto il resto del blog potete decidere di rimuovere le barre laterali, l’header, il footer e altri elementi che ritenete superflui sulla pagina. Per ottenere tale risultato vi basterà inserire un codice di questo tipo all’interno del file custom.css:
.landingpage #header { padding: 0; border-bottom: 0em; }
.landingpage #footer { display: none; padding-bottom: 0; border-top: 0em; }
.landingpage #sidebars { display: none; border: none; }
.landingpage #tabs {display:none;}
.landingpage #content_box { background:none; }
.landingpage .comments_closed { display: none; }
.landingpage #header #logo { display: none; }
.landingpage #header #tagline { display: none; }
.landingpage #content { margin: 0 auto; float: none; }Una volta fatto ciò, la vostra pagina sarà completamente ripulita da tutti quegli elementi che contraddistinguono il resto del blog. Sfruttando la classe .landingpage e la vostra fantasia potrete procede ad applicare uno sfondo alla pagina e ad effettuare ulteriori modifiche, in modo da renderla il più accattivante e funzionale possibile.
Vi segnalo inoltre che Thesis mette già a disposizione un template per la pagine privo delle barre laterali. Per utilizzarlo vi basterà accedere alla pagina di creazione o modifica della pagina stessa e selezionare il template “No sidebars” dal menu template.
Grazie a Thesis e a WordPress potrete quindi realizzare tutte le landing page che volete, senza dovervi sporcare troppo le mani con il codice del template.
Ovviamente potete utilizzare questo sistema anche per creare qualsiasi tipo di pagina personalizzata, non solamente un landing page pensata per la vendita di un prodotto.
Se inoltre il vostro sito dispone anche di una pagina su Facebook, scoprite come creare una landing page da utilizzare per la pagina Fan.
| Tweet |
Hai trovato interessante questo articolo? Sottoscrivi il Feed RSS o iscriviti alla NEWSLETTER per non perdere i prossimi aggiornamenti del blog. Se preferisci puoi anche seguirmi su Twitter.
Mi chiamo
{ 13 commenti }
Ottimo articolo… ti chiedo una cosa che non ho capito benissimo, forse per colpa del caldo :) . Custom.css è il css di default che solitamente si chiama style.css?
Se la risposta è si tutto ok. Se invece è un ulteriore css da caricare si hanno più css e le raccomandazioni per siti veloci e programmi tipo Yslow e pagespeed consigliano di ridurre al massimo i fogli di stile. In questo caso come ci si dovrebbe comportare?
custom.css è il file usato da Thesis per le configurazioni personali ed è un foglio di stile aggiuntivo.
Avere un foglio CSS in più comunque non è una cosa che rallenta sensibilmente un sito, ci sono altri fattori decisamente più importanti.
Chiaramente come dici tu bisogna sistemare altre cose prima, questa diventa una pignoleria… Colgo l’occasione per segnalarti la traduzione in italiano di Thesis
http://gidibao.net/index.php/2010/07/09/thesis-in-italiano/
E per chi non usa Thesis? Ok creare un secondo .css o anche un template differente per la landing page. Ma poi come faccio a sceglierli?
Grazie per la tua risposta.
Paola
Se crei un template custom per la tua pagina poi puoi selezionarlo dal menu Template quando crei o modifichi una pagina.
Puoi trovare maggiori informazioni sul Codex di WordPress:
http://codex.wordpress.org/Pages#Creating_Your_Own_Page_Templates
Grazie mille per le indicazioni. Ma se creo un template chiamato ad es. page2.php come faccio poi a sceglierlo solo per alcune pagine (es. disclaimer, landing page, sales page, ecc)? Proverò a leggere la pagina che mi hai indicato, ma se puoi aiutarmi te ne sarò grata sin da ora :)
Paola
Creando un template seguendo quelle indicazioni potrai poi selezionarlo dal menu Template quando crei una pagina.
molto interessante, devo ancora provare, poi dirò qualcosa.
Francesca
Ciao Tiziano,
grazie innanzitutto, ho da qualche ora installato Thesis e mi chiedevo proprio come realizzare una landing integrata nel blog: con questo suggerimento è stato semplicissimo.
Avrei una domanda, se possibile:
(noto che Thesis è veramente Seo friendly ed ora in ogni articolo è possibile impostare con precisione il title e gli ulteriori meta)
finora avevo utilizzato il plug in All in One Seo Pack; ora immagino non sia più necessario utilizzarlo giusto?
Grazie,
Salvatore
Esatto, ma non solo. Utilizzando le informazioni riportate in questo post:
http://www.the42ndestate.com/how-to-move-all-in-one-seo-values-into-thesis/
puoi anche migrare le informazioni precedentemente inserite con AllInOneSEO all’interno dei nuovi campi creati da Thesis.
Ti ringrazio Tiziano, veramente una manna dal cielo :)
Proverò nel fine settimana a seguire la procedura….con Aruba…e ho detto tutto..
Grazie ancora,
Salvatore
Ciao e grazie per l’ottimo tutorial.
Forse a qualcuno potrebbe anche interessare vedere questo utile video per approfondire http://thesistutor.com/how-to-make-a-custom-page-template-using-thesis/
Mi permetto di proporti questo quesito:
avendo thesis già incorporato un suo editor visuale “wysiwyg” non sarebbe secondo te estremamente utile implementare all’interno dell’editor una funzione del tipo “salva con nome” o “salva come custom-template” per avere template completi di funzioni e css gia’ salvati all’interno della cartella custom e bell’e pronti da selezionare dalla lista dei template?
Ciao e Grazie
Si, sarebbe sicuramente più comodo poter avere diversi template da selezionare direttamente dal menu a tendina. Al momento è necessario utilizzare il file functions.php per scegliere quale template personalizzato utilizzare a seconda della pagina.
I commenti a questo post sono chiusi.