Cómo Crear Una Landing Page En Blogger Paso A Paso

La semana pasada publiqué este artículo sobre los componentes esenciales que debe tener una landing page efectiva, y expliqué por qué la página de aterrizaje es una de las piezas más importantes del marketing digital independientemente de si tu objetivo es conseguir altas para un producto o servicio, captar suscriptores para tu lista de e-mail marketing, vender cualquier cosa o generar leads para un programa de afiliación.

Hay decenas de programas y plugins dedicados exclusivamente a construir landing pages (por ejemplo http://www.LeadPages.net), pero generalmente estos servicios son de pago y/o necesitarás comprar un dominio propio y contratar alojamiento web para albergar tu landing page.

Antes de decantarte por una de estas soluciones profesionales, creo que es importante aprender a implementar una landing page efectiva por tu cuenta así que en el artículo de hoy vamos a ver exactamente cómo lo puedes hacer de forma gratuita utilizando únicamente (((redoble de tambores…))) ¡Blogger!

Landing Page En Blogger Paso A Paso

Creación del blog y selección de plantillas

En primer lugar, dirígete a http://www.blogger.com y crea un nuevo blog.

Selecciona la plantilla “sencilla” de Blogger, elige un nombre relacionado con el producto o servicio que vas a promocionar a través de tu landing page y busca una URL disponible que incluya tus palabras clave como te expliqué aquí.

Cada vez es más complicado encontrar URLs libres en Blogger, así que tendrás que estrujarte la sesera y echarle imaginación.

En cualquier caso, a diferencia de una página web convencional, el tráfico de una landing page no suele venir a través del posicionamiento SEO (entre otras cosas porque tiene mucho menos contenido que una página normal) así que tampoco te estreses demasiado con el título.

Para este ejemplo, hemos optado por esta URL:

http://landingpagefacil.blogspot.com

Buena Landing Page

Copia de seguridad

Te recomiendo que durante todo el proceso vayas creando copias de seguridad de tu plantilla.

Hay un componente de prueba y error en la creación de una landing page con Blogger, y seguramente tendrás que ajustar varias cosas hasta que todo quede exactamente como tú quieres; no tengas miedo a probar distintas cosas (puedes eliminar aquello que no te guste) pero por buenas prácticas te aconsejo encarecidamente guardar una copia de tu plantilla cada vez que vayas a hacer un cambio significativo por si quieres revertir las modificaciones y volver el estado anterior de tu blog.

Para ello simplemente dirígete a la opción de “Plantilla” en el Panel de Control de tu blog y escoge la opción de “Crear/Restablecer Copia de Seguridad”. Al crear una copia de seguridad, podrás descargar un archivo que deberás guardar en algún sitio que puedas localizar por si lo necesitas. Para restablecer una copia de seguridad, simplemente sube el archivo que previamente has guardado y listo.

Recuerda que esta opción sirve para guardar y restaurar la plantilla y configuración de tu landing page, y no el contenido (eso lo podrás hacer desde el menú “Configuración Otros Herramientas del Blog Exportar Blog”).

Deshabilitar la versión móvil del sitio

Una de las grandes ventajas de Blogger es que por defecto puedes habilitar una plantilla de tu sitio web optimizado para dispositivos móviles.

Sin embargo, a efectos de crear una landing page eficaz multidispositivo, te recomiendo no utilizar esta funcionalidad por el momento; la página que vamos a crear es sencilla de por sí (no quedará mal en un navegador móvil) y no nos interesa que Blogger adapte la plantilla que vamos a crear.

Para desactivar la versión móvil de tu landing page accede a tu Panel de Control, selecciona el apartado de “Plantilla” en el menú de la izquierda y selecciona el icono de configuración que se muestra justo debajo de la previsualización de tu plantilla móvil.

Landing Page Con Blogger

Una vez allí, selecciona la segunda opción (No, mostrar la plantilla para ordenador en los dispositivos móviles) y dale a “Guardar” así:

Landing Page Blogspot

Listo, ya has deshabilitado la versión para móviles, ahora vamos a modificar el diseño básico de la plantilla.

Diseño básico de la plantilla

A pesar de que hemos seleccionado la plantilla más sencilla de todas cuando hemos creado la página en Blogger, como puedes ver a continuación todavía hay mucha chatarra que sobra para una landing page que debe de ser sencilla y minimalista.

Crear Landing Page Blogspot

No te preocupes, porque a continuación vamos a limpiar todo esto. Para ello, dirígete nuevamente a tu Panel de Control y selecciona la opción “PlantillaPersonalizar” para ir al editor de plantillas.

Lo primero que vamos a hacer en el editor de plantillas es eliminar las columnas laterales y simplificar el pie de página, para lo que debemos selecciona la opción de “Diseño” dentro del editor de plantillas y seleccionar tanto el cuerpo del blog como el pie de página más sencillo como mostramos a continuación:

Cómo Crear Una Landing Page

No te olvides de aplicar los cambios al blog, seleccionando el botón naranja que encontrarás arriba del todo a la derecha.

Ajustar el ancho

Te recomiendo ajustar el ancho completo de la landing page a unos 900px o 1.000px, de forma que la página encaje bien en las resoluciones de pantalla más comunes.

Nuevamente, no te olvides de aplicar los cambios, y si no te gusta como queda en cualquier momento puedes hacer tus propias pruebas.

Landing Page Gratis

Selección de fuente principal

Esta parte es bastante divertida, y consiste en seleccionar la fuente principal que utilizaremos para las distintas secciones de la landing page.

Como expliqué en este artículo detallado sobre los ingredientes de una landing page eficaz, tu “página de aterrizaje” estará compuesta por distintos bloques y cada uno de esos bloques tendrá un titular destacado.

En la herramienta de personalización de plantillas, selecciona el apartado “AvanzadoGadgets” y elige una fuente que te guste con un tamaño no inferior a 30px-36px.

A efectos de esta demostración, yo he elegido la fuente Lobster con un tamaño de 36px aunque una vez más tendrás que hacer distintas pruebas porque no todas las fuentes quedan igual de bien.

Crear Landing Pages Gratis

Aplica los cambios, y vuelve al Panel de Control de Blogger.

Eliminar los widgets instalados por defecto

Por defecto, cuando creas una página web con Blogger, se instalan por defecto una serie de widgets o artilugios incluyendo el archivo del blog, perfil del autor, datos personales, reconocimiento…

A pesar de que en la configuración de nuestra plantilla hemos eliminado las columnas laterales, lo que hará Blogger será mover todos estos artilugios o widgets a la columna central por tanto ahora tenemos que irlos quitando uno a uno.

Para ello, accede a “Panel de ControlDiseño” para ver el layout de tu página y elimina todos los widgets que puedas seleccionando el icono de configuración y dándole a eliminar.

Cómo Hacer Landing Page Gratis

No olvides ocultar también la barra de navegación superior que encontrarás arriba a la derecha.

Eliminar la cabecera y el reconocimiento

Como habrás podido comprobar, hay dos elementos de la página que no pueden eliminarse por el método convencional: la cabecera (arriba del todo) y el reconocimiento (abajo del todo).

Para eliminar estos dos elementos, tendrás que realizar unas pequeñas modificaciones en el código HTML de tu plantilla.

Para ello accede al Panel de Control, selecciona la opción “Plantilla” y selecciona “Editar HTML”.

Oscar Feito Landing Page

No te asustes, pero por si las moscas haz una copia de seguridad de tu plantilla antes de tocar nada en esta página.

Cuando hayas descargado tu copia de seguridad, haz click en cualquier parte del código y dale a ctrl. + F para realizar una búsqueda. Concretamente estamos buscando las líneas que incluyen estos dos términos:

Widget id=’Header1′

Widget id=’Attribution1′

Cada una de estas líneas incluirá algo así como locked=‘true’ que nosotros cambiaremos por locked=‘false’ y  showaddelement=’no‘ que nosotros cambiaremos por showaddelement=’yes‘ en ambos casos.en ambos casos. Esto nos permitirá más adelante eliminar estos widgets a través del diseño de la página.

Hacer Landing Page Gratis

Crear Landing Page Gratuita

Cuando hayas hecho estos dos cambios, guarda tu plantilla.

Ahora, vuelve a “Panel de ControlDiseño” y deberías poder eliminar tanto la cabecera como el módulo inferior de reconocimiento.

Ojo; no guardes la plantilla después de eliminar cada uno de estos dos módulos; el simple hecho de eliminarlos acaba con ellos y no debería ser necesario guardar los cambios.

Si tienes algún problema, modifica cada uno de los componentes que hemos visto anteriormente uno por uno: primero el componente locked=’true’ de tu cabecera en el editor HTML, guardando la plantilla y eliminando el componente del diseño y LUEGO haciendo lo propio con el componente inferior de reconocimiento.

Los dos últimos elementos

Si todo ha ido bien, llegados a este punto tendrás una página mayoritariamente virgen exceptuando estos dos molestos elementos relacionados con la paginación:

Cómo Hacer Una Landing Page Económica

Para eliminar estos dos elementos, volvemos al editor de plantillas localizado en “Panel de ControlPlantillaPersonalizar” y seleccionamos la opción “Avanzadoañadir CSS”.

Copia y pega el siguiente código en el cuadrito que sale añade este trozo de código para ocultar de la landing page esos elementos que no nos interesa mostrar.

Guarda tus cambios, y ahora sí que deberías de tener una página 100% limpia, así:

Crear Landing Page

¡Vamos bien, y ya queda menos para tener tu nueva y flamante landing page!

Ajustes visuales CSS

Vuelve a la edición avanzada – el cuadrito ese de antes donde hemos copiado y pegado el código – y agrega estas líneas adicionales de CSS para terminar de personalizar nuestra plantilla.

Llegados a este punto, me gustaría matizar que no soy programador. Todo lo que he aprendido ha sido de forma autodidacta, así que seguramente existan formas más limpias y elegantes técnicamente de hacer esto.

En cualquier caso, funciona, que es de lo que se trata.

Básicamente este código hace tres cosas: (1.) Sustituye las viñetas convencionales por un símbolo especial – concretamente una muesca de color verde – para las listas (2.) aniquila todo tipo de bordes, sombreados y relieves para las imágenes de tu landing page y (3.) Reduce el espacio en blanco de la cabecera.

Configurar las entradas del blog

Ya nos vamos acercando al final, al menos en cuanto a configuración se refiere…

Vuelve al Panel de Control de tu blog, selecciona la opción de “Diseño” para visualizar la plantilla, y haz clic en el icono de configuración en la esquina inferior derecha del apartado dedicado a las entradas de la página.

Cuando se abra el pop-up con las distintas opciones que se pueden añadir tanto en la cabecera como en el pie de las entradas – incluyendo por ejemplo el autor, el número de comentarios o la fecha de publicación – quítalo todo:

Landing Page Gratis

Queremos que la página sea lo más limpia posible, y no queremos incluir ninguna de estas opciones “extra” en nuestra landing page.

Crear la entrada (y borrar el título)

Para crear el contenido, simplemente tendrás que publicar (y posteriormente editar) una nueva entrada.

Landing Page Gratuita

El título de la entrada puede ser relevante a efectos de SEO (ya que Blogger utiliza el título de la entrada para crear la correspondiente URL), pero no tanto como en un blog convencional porque luego vamos a borrar el título de la entrada.

Como Blogger no permite publicar entradas sin título (que es lo que queremos hacer), primero tendremos que crear la entrada con el título y posteriormente borrarlo. Cosas de la vida.

Landing Page Desde Cero

Con respecto al contenido de la landing page en sí, hay muchas formas de hacerlo pero te recomiendo seguir el esquema que expliqué aquí.

Puedes utilizar tanto el editor visual como el editor HTML para crear los distintos componentes de tu landing page: el título, el subtítulo, las imágenes, las ventajas y funcionalidades del producto o servicio que estás ofreciendo, las llamadas a la acción…

Una vez más, aquí lo mejor es prueba y error. Juega con los textos y las imágenes hasta conseguir algo que te guste, y si lo deseas copia y pega este código en el editor HTML de tu entrada para utilizarlo como base:

Una vez más, te pido disculpas por adelantado porque no soy programador – y estoy seguro de que este código se puede optimizar de muchas maneras – pero al fin y al cabo funciona que es de lo que se trata.

Como es lógico, partiendo de este texto puedes modificar los textos y las imágenes para personalizar tu landing page.

Si todo ha marchado bien, acabarás con una página bastante apañada como la que puedes ver en http://landingpagefacil.blogspot.com (o bastante mejor, si tienes algo más de creatividad que yo lo cual no es muy complicado…)

Landing Page Gratis Con Blogger

Conclusión

¡Y eso es todo! Ya has aprendido a crear una landing page funcional, efectiva, ligera y gratuita.

Como te expliqué en este artículo sobre los componentes básicos de una buena landing page, la página que utilizo yo para generar suscriptores en mi blog (http://marketingdigital.oscarfeito.com) ha sido creada utilizando exactamente este método y ahora mismo tiene una tasa de conversión superior al 40%…

Resultados Landing Page

Te aseguro que el proceso es mucho más sencillo de lo que puede parecer aquí a primera vista. No tengas miedo en iterar y probar distintas combinaciones, ¡pero no te olvides de ir guardando la plantilla!

Si te ha parecido útil este tutorial, ¡no dudes compartir!