Cómo pasar una landing page a version móvil

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.

landingpagebootstrap

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:


	
		
		
		
		
		
		
		
		<!-- [if lt IE 9]>-->

Ahora vamos a crear 3 divs que van a envolver toda la parte el encabezado de nuestra landing page:

 

 

 

 



Dentro del div con clase “col-lg-12 text-center v-center” vamos a poner lo siguiente

Hello Landing


 

A sign-up page example for Bootstrap 3


 

 

 


 

View More

 

Fuera de ese div pero dentro del div con clase “container-full” vamos a colocar las redes sociales:

 

 


 

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:

 


 

 


 

Y adentro colocamos nuestros titulares y textos:

 

 

Hello.

 

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.

 

 


 

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:


 

Recuerda que si vas agregar alguna funcionalidad javascript a tu sitio cargar los script que te proporciona bootstrap al final del sitio:


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:
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:

scrn1

scrn2

scrn3

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.