En la cuarta entrega del curso de CSS vamos a crear una landing page a partir de una página normal, sólo modificando dos atributos CSS: "display" y "width". Ya veréis que bien que queda.
Ya sabéis que para ver los vídeos podéis suscribiros a través de este enlace, y tendréis acceso tanto a este curso como al resto de cursos de marketing online y desarrollo web.
4 - Crear una landing page con CSS
Antes que nada debo decir que esta no es la mejor forma de hacer una landing page, ya que lo suyo sería hacerlo con una plantilla especial modificando el PHP. Pero un oyente del podcast me preguntó cómo hacerlo, y he creído interesante hacerlo en esta lección, ya que es una forma de aprender y a su vez ver un resultado útil.
Así pues, empecemos a construir nuestra landing. Es importante destacar que cuando hablo de landing, en este caso me refiero a una página hecha únicamente para recibir visitas de una campaña de Google AdWords o de Facebook, por ejemplo.
Estas se caracterizan por no tener ningún elemento de distracción como el encabezado, la navegación, sidebars, comentarios u otra cosa que no sea el contenido con un buen call to action. ¡Vamos a ello!
¡Bien, pues ya está! ¿A que parece mentira lo que que podemos conseguir con unas lineas de CSS? Como podemos ver, la página ha cambiado totalmente de aspecto, sólo agregando tres instrucciones.
Ahora es vuestro turno. Elegid una web o utilizad la vuestra propia, y empezad a hacer pruebas, a ver si conseguís los resultados deseados. Os dejo el código que he usado debajo del vídeo por si lo queréis probar o consultar. En la próxima clase... ¡Más! :)
Todos los capítulos de este curso:
- Curso CSS #1. Introducción
- Curso CSS #2. Practica
- Curso CSS #3. Modificar el CSS de una web
- Curso CSS #4. Crear una landing page sólo con CSS
- Curso CSS #5. Modificar nuestro CSS correctamente
- Curso CSS #6. Media queries
- Curso CSS #7. Las 10 modificaciones de CSS que más me piden
- Curso CSS #8. Extensiones de CSS para Chrome
- Curso CSS #9. Modificar y guardar CSS visualmente
- Curso CSS #10. Herramientas online CSS