Bienvenido a un nuevo tutorial, en esta ocasión veremos el proceso paso a paso de como pasar una pagina de aterrizaje (landing page) a una versión móvil. Hoy en dia esta de moda estos sitios donde pides datos de contacto a cambio de un recurso gratuito para tenerlo en tu lista de prospectos para futuros productos que vayas a vender y sepas que es lo que quiere tu publico objetivo.
Por eso, en este tutorial vamos a ver como pasar un sitio de aterrizaje a una versión móvil para tener un mayor alcance de usuarios ya que cada ves mas las personas revisamos nuestras redes sociales en nuestros dispositivos, y esto lo vamos a ocupar usando bootstrap en su versión 3. Así que comencemos:
Lo primero que debemos de tener es el codigo de siempre al comenzar usar bootstrap 3, puedes descargar su ultima version desde su sitio oficial o copiar el cdn que te proporciona para usar bootstrap desde los servidores. Entonces comenzamos con el siguiente codigo html normal y cargando los archivos de bootstrap:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <title>Landing Page</title> <meta name="klinsmann" content="zenva" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"> <!--[if lt IE 9]> <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <link href="css/styles.css" rel="stylesheet"> </head> |
Ahora vamos a crear 3 divs que van a envolver toda la parte el encabezado de nuestra landing page:
1 2 3 4 5 6 7 8 | <div class="container-full"> <div class="row"> <div class="col-lg-12 text-center v-center"> </div> </div> </div> <!-- /container full --> |
Dentro del div con clase “col-lg-12 text-center v-center” vamos a poner lo siguiente
1 2 3 4 5 6 7 8 9 10 11 12 13 | <h1>Hello Landing</h1> <p class="lead">A sign-up page example for Bootstrap 3</p> <br><br><br> <form class="col-lg-12"> <div class="input-group" style="width:340px;text-align:center;margin:0 auto;"> <input class="form-control input-lg" title="Don't worry. We hate spam, and will not share your email with anyone." placeholder="Enter your email address" type="text"> <span class="input-group-btn"><button class="btn btn-lg btn-primary" type="button">OK</button></span> </div> </form> <br><br><br> <p><a href="" class="btn-more">View More</a></p> |
Fuera de ese div pero dentro del div con clase “container-full” vamos a colocar las redes sociales:
1 2 3 4 5 6 7 | <div class="row"> <div class="col-lg-12 text-center v-center" style="font-size:39pt;"> <a href="#"><i class="icon-google-plus"></i></a> <a href="#"><i class="icon-facebook"></i></a> <a href="#"><i class="icon-twitter"></i></a> <a href="#"><i class="icon-github"></i></a> <a href="#"><i class="icon-pinterest"></i></a> </div> </div> |
Ya tenemos listo nuestro encabezado, ahora vamos con el contenido. Primero vamos a crear los divs contenedores para hacer responsive y se comporten de una cierta estructura:
1 2 3 4 5 6 | <div class="container"> <hr> <div class="row"> </div> </div> |
Y adentro colocamos nuestros titulares y textos:
1 2 3 4 5 6 7 8 9 10 | <div class="col-md-4"> <div class="panel panel-default"> <div class="panel-heading"><h3>Hello.</h3></div> <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. Aliquam in felis sit amet augue. </div> </div> </div> |
Este contenido lo repetimos 2 veces mas para tener 3 columnas y que ocupen el sistema de 12 rejillas.
Por ultimo terminamos con el pie de pagina:
1 2 3 4 5 6 7 | <footer class="row"> <div class="col-lg-12"> <br><br> <p class="pull-right"><a href="http://www.zenva.com">Template from Klinsmann</a> &nbsp; ©Copyright 2015 Zenva<sup>TM.</sup></p> <br><br> </div> </footer> |
Recuerda que si vas agregar alguna funcionalidad javascript a tu sitio cargar los script que te proporciona bootstrap al final del sitio:
1 2 | <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> |
Por ultimo terminamos con los estilos css, pero ya aqui puedes poner los estilos a tu gusto que ya con lo que hicimos del codigo html lo tenemos preparado para que se vea en un dispositivo movil, pero de cualquier forma te dejo los estilos aplicados:
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 32 33 34 35 36 37 38 39 40 41 42 43 44 | html,body { height:100%; } h1 { font-family: Arial,sans-serif font-size:80px; color:#DDCCEE; } .lead { color:#DDCCEE; } /* Custom container */ .container-full { margin: 0 auto; width: 100%; min-height:100%; background-color:#110022; color:#eee; overflow:hidden; } .container-full a { color:#efefef; text-decoration:none; } .v-center { margin-top:7%; } .btn-more{ padding:15px 55px; border:1px solid #fff; border-radius:3px; } .btn-more:hover{ background: rgba(255,255,255,0.1); padding:15px 95px; transition: 1s ease; } |
Quedando como resultado lo siguiente:
Te invito a que revises mi otro tutorial sobre como crear una pagina web básica con bootstrap 3 para que puedas entender mejor esta parte.
