Tutorial One Page Scroll Responsive
Creare una Landing Page Efficace con Html e Css
By Andrea Marchetti
@marchetti_design
Oggi andiamo a vedere come creare una landing Page accattivante, con background Full Width e Scroll animato.
La funzione della pagina che vogliamo creare deve essere quella di invogliare il visitatore a compiere un azione. Per esempio la registrazione a un servizio o la richiesta di un preventivo. Per questo utilizzeremo un layout senza elementi di distrazione come menu e link in uscita.
Per ottimizzare la possibilità di successo bisogna formulare il giusto Messaggio con la Call to Action appropriata. Nel nostro esempio il messaggio potrebbe essere quello di una Web Agency che vende servizi Web.
Messaggio – Hello! This is an Example of a Cool Landing Page. You want something like this?
Call to Action – CONTACT US
Ci sono molti studi su questo argomento, in questo campo vengono utilizzati modelli importati dal Marketing come l’AIDA e adattati al Web. Noi ci focalizzeremo sulla realizzazione della struttura Html/CSS.
Come prima cosa creiamo un file index.html e inseriamo jquery.
<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
Poi creiamo la struttura html base.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Landing Page</title>
<link href="style.css" rel="stylesheet">…
</head>
<body><div class="bg">
…
</div>
<div class="testo">
<div class="center-text">…
</div>
</div><script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
</body>
</html>
Nel div bg inseriremo il messaggio e l’azione, nel div testo inseriremo il testo e il form che apparirà con uno scroll animato quando si clicca sul pulsante.
Inseriamo il logo, il messaggio e la call to action nel primo blocco.
<div class="logo"> <strong>MY<span>.</span></strong> LOGO</div>
<div class="message">Hello! This is an Example of a Cool Landing Page. You want something like this?</div>
<a class="arrow" href="#info">arrow</a>
<a class="action" href="#">CONTACT US</a>
Poi inseriamo il form di contatto e il testo nel secondo blocco.
<h1 id="info"><strong>Contact</strong> Us</h1>
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h2>
<form>
<p>
<label>Nome</label>
<input class="name" type="text" size="40" value="" name="your-name">
</p><p>
<label>Cognome</label>
<input class="surname" type="text" size="40" value="" name="your-surname">
</p><p>
<label>Email</label>
<input class="email" type="text" size="40" value="" name="your-email">
</p><p><input class="submit" type="submit" value="Invia"></p>
</form>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
<a class="big" href="#">Tel +39 333 33 333 333</a>
</p>
Ora tramite il Css Andiamo a impostare il div bg alto come l’altezza dello schermo e l’immagine di sfondo nel body come cover, in questo modo l’immagine sarà ridimensionata senza perdere le proporzioni originali e occuperà l’intero sfondo.
body, html{height:100%;margin:0; padding:0;font-family: Lato;color:#333;background: #333 url(bg.jpg) no-repeat top center;
background-attachment:fixed;-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;}
A seguire inseriamo il css per posizionare il logo, il messaggio e il resto dei contenuti.
h1{font-size:55px; font-weight: 800;margin-bottom:0; font-weight: 300; text-transform: uppercase;text-align: center }
h2{font-size:30px; color:#ff7272; font-weight: 800;font-weight: 300}p{font-size:14px;line-height: 24px; color:#666}
a{color:#fff; font-weight: bold; text-decoration: none;}
a:hover{color:#ff7272;}strong{font-weight: bold}
span{color:#ff7272;}.big{font-size: 40px; color:#000; padding:30px 0; width:100%; float:left; text-align: center;margin:40px 0;text-transform: uppercase; border-top: 3px solid #eee}
.bg{height: 100%; width:100%;float:left;display:block;position:relative;}
.logo{ text-align: center;background: #fff; padding-top:20px;opacity: 0.7;font-size: 80px;font-weight: 100;color:#000;display: block; width:40%; height:120px; position: absolute; top:45%; left:30%; margin: -203px 0 0 0px;}
.message{top:40%; text-shadow: 0 0 10px #000;font-size: 51px;font-weight:700;position:absolute;left:15%;z-index: 9999; color:#fff;text-align: center;width:70%; }.action{border: 5px solid #fff;padding: 10px 0px; top:69%; position:absolute;font-size: 40px;left:50%;z-index: 9999; color:#fff;text-transform: uppercase;text-align: center;width:400px;margin-left:-200px }
.action:hover{background: #eee}.arrow{width:100%; height:180px;position: absolute; bottom:0;background: url(arrow.png) no-repeat center center;text-indent: -9999px; cursor: pointer}
.testo{float:left;width: 100%; background: #fff}
.center-text{width:700px; margin:0 auto;}form{width: 100%;float:left;margin: 30px 0}
form p{margin: 10px 0;float:left; width:100%;}label{width:20%; display:block;float:left;padding: 10px;}
input{width: 70%;float:left;border:none; background: #eee; padding:15px 10px; border-radius: 5px;}.submit{margin-left: 23%;width: 30%;background: #ff7272; color:#fff; font-size: 16px; font-weight: 700}
Infine animiamo lo scroll della pagina con jquery.
$(‘.arrow, .action’).click(function(event){
event.preventDefault();
var n = $(document).height();
$(‘html, body’).animate({scrollTop:$(‘#info’).position().top – 130},1000);
});
Al click della Call to action parte l’animazione.
Con questo articolo volevamo dare una infarinatura sulla logica che sta dietro le landing page, utilizzando tecniche Html/Css accattivanti per cogliere l’attenzione del visitatore.
I file dell’esempio sono disponibili per il download qui di seguito.
Stay Tuned!
Potrebbero interessarti:
Grazie per questo nuovo apporto. Solamente ci sarebbe da sistemare il responsive, il bottone contact si sovrappone o viceversa agli altri testi ….
Ciao Andrea,
grazie della segnalazione ora dovrebbe essere corretto..
Grazie per la condivisione Andrea.
Davvero un ottimo articolo sulla creazione di landing page efficaci.
Non male anche in versione responsive (però se i testi e il n.ri du telefono, nella parte di contatto, sono un pò sballati).
Salve, volevo sapere se fosse possibile applicarlo ad un elemento section per costruire un sito one page, in modo che con lo scroll, ogni sezioni si adatti in altezza automaticamente ad ogni dispositivo, in pratica che tutte si comportino come nella prima pagina di questo esempio, grazie
Ciao Erunis,
si è possibile utilizzando height: 100% applicato all’elemento che vuoi rendere alto come l’altezza dello schermo, assicurati prima di aver impostato body, html{height:100%}
Scusa la richiesta banale, ma sono un neofita. Se volessi cambiare font come posso fare? Il font che viene usato non scrive le parole accentate ed in italiano farebbe comodo 😀
Grazie ancora per le dritte!
Ciao Fedo,
inserisci il nome del font in body, html{ … font-family: NOME FONT;}
I tuoi consigli sono chiarissimi, ma perché ora non riesco a renderla visibile on line???
Ciao Silvia, ricontrolla il codice, utlizza firebug per ispezionare le parti del che ti danno problemi e test, test, test 😉
Questa landing page, dal punto di vista SEO, deve essere ancora completa? Occorre angiungere qualche meta tag o simili?
Ciao, prima di tutto ottimo lavoro e complimenti..
Volevo mettere un secondo form nel forum (uno per il login e l’altro per la registrazione di nuovo utente). Così al posto di ARROW ho messo un pulsante “Registrati” e un secondo form con id=new_usr.
Il problema è nello scroll che se metto …scrollTop:$(‘#new_usr’)… non ci arriva a fermarsi al posto giusto.. devo modificare anche il css?
Grazie ancora
scusa non ho capito dove inserisco l’indirizzo email del destinatario