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
construirlanding 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!
1. 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
2. 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 previa
mente 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”).
3. 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.
Una vez allí, selecciona la segunda opción (No, mostrar la plantilla para
ordenador en los dispositivos móviles) y dale a “Guardar” así:
Listo, ya has deshabilitado la versión para móviles, ahora vamos a modificar el
diseño básico de la plantilla.
4. 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.
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 “Plantilla –
Personalizar” 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:
No te olvides de aplicar los cambios al blog, seleccionando el botón naranja
que encontrarás arriba del todo a la derecha.
5. 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.
6. 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
“Avanzado – Gadgets” 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.
Aplica los cambios, y vuelve al Panel de Control de Blogger.
7. 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 artilugiosincluyendo 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 Control – Diseñ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.
No olvides ocultar también la barra de navegación superior que encontrarás
arriba a la derecha.
8. 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”.
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.
Cuando hayas hecho estos dos cambios, guarda tu plantilla.
Ahora, vuelve a “Panel de Control – Diseñ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.
9. 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:
Para eliminar estos dos elementos, volvemos al editor de plantillas localizado
en “Panel de Control – Plantilla –Personalizar” y seleccionamos la opción
“Avanzado – añ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.
| 1234567891011 |
|
Guarda tus cambios, y ahora sí que deberías de tener una página 100% limpia,
así:
¡Vamos bien, y ya queda menos para tener tu nueva y flamante landing page!
10. 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.
| 1234567891011121314151617181920 |
|
gistfile1.txt hosted with ❤ by GitHub
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.
11. 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:
Queremos que la página sea lo más limpia posible, y no queremos incluir
ninguna de estas opciones “extra” en nuestra landing page.
12. Crear la entrada (y borrar el título)
Para crear el contenido, simplemente tendrás que publicar (y posteriormente
editar) una nueva entrada.
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.
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:
| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546 |
|
No hay comentarios:
Publicar un comentario
Deja acá tus comentarios....