¿Cómo crear una pagina de aterrizaje en wordpress con una plantilla woothemes?

pagina de aterrizaje en wordpressHoy voy a mostrarte cómo transformar una página o una entrada de tu blog WordPress en una pagina de aterrizaje en wordpress con una plantilla woothemes.

Y ¿para qué vas a necesitar una pagina de aterrizaje?

Bueno, para mejorar tus conversiones (por ejemplo tu tasa de conversión de visitas a ventas o de visitas a Leads) y para ello, vamos a ver dos tipos de procedimientos de distinta complejidad.

Una acción muy, muy sencilla que te permite en un solo clic (si usas como yo una plantilla de WooThemes) optimizar el layout de tu página  y luego veremos cómo afinar aun más la técnica.

¿Cómo crear una landing page muy profesional con un theme WooThemes?

Empezamos por lo sencillo: Pagina de aterrizaje en wordpress en 1 solo clic

No hay nada amás sencillo, si tu theme te lo permite. Es el caso de las plantillas de WooThemes  que suelo usar en mis proyectos WordPress.

Página de aterrizaje en wordpress

Editamos  nuestra entrada y en la parte baja del post ves que aparece un elemento que es el framework de la plantilla de Woo Themes (Canvas Custom Settings), donde puedes elegir el layout de cada una de tus entradas o de tus páginas. En este caso,  vamos a seleccionar la opción de mostrar la página sin ninguna columna y  vamos a guardar este cambio.

¡Ya está!

Éste es el método sencillo que recomiendo a todos los que no tienen ningún conocimiento de programación HTML o de programación CSS.

Resultado de la técnica de Landing Page Sencilla en WordPress

Como puedes ver, se ha quitado la columna de la derecha  y ya tienes una página que está mucho más enfocada a lo que son las conversiones. Es todo mucho más legible y más enfocado a cualquier call to action (llamado a la acción) que quieras poner en el propio copy de esta página.

Para usuarios más atrevidos

Tanto en la parte alta como en  la parte baja de la página hay una serie de elementos que sería mejor si los pudiésemos quitar,  en el caso de pensar, por ejemplo, en una página de alta a una newsletter o una página de venta de un producto digital o de un servicio.

La siguiente técnica implica un manejo avanzado de tu theme WordPress, y entender las bases de las etiquetas CSS. Vamos a utilizar una etiqueta que nos permite esconder elementos gráficos de la plantilla

#nombre_del_contenedor {display:none}

Paso 1 – Identifica los elementos que quieres quitar con Firebug

Lo que tienes que hacer es identificar los nombres de los distintos elementos que quieres eliminar.

En este caso, utilizo una extensión de Chrome que se llama Firebug y seleccionando el elemento en la propia pantalla y con el botón derecho, le das a «Inspeccionar elemento» y aparece el nombre del elemento en código HTML y esto lo que vamos a tratar de eliminar.

Cómo identificar elementos HTML con Firebug

 

Paso 2- Obtén el número de la entrada

Como no queremos aplicar este cambio a todas las páginas, tenemos que obtener el número de identificación de esta entrada.

Si pasas el ratón por encima del botón “Editar” verás aparecer en la parte baja, a la derecha de tu pantalla un número: «post=11304»  que es el número de identificación de la entrada.

¿Cómo identificar el ID de tu entrada en WordPress?

En el caso del ejemplo, ya he preparado en un block de notas los distintos elementos que quiero esconder.  Entonces el código que tienes que incorporar es:

.postid-11304   (donde 11304 es el identificador de la entrada)

Luego un espacio y el elemento HTML que quieres esconder, por ejemplo:

#respond  {display: none}

Código CSS para esconder los elementos que sobran

En mi caso tengo que ir a Canvas, en la zona de Custom CCS pego el código y lo guardo.

¿Dónde pegar el código CSS custom en tu themes Woothemes?

Veamos qué mejoras introduce este procedimiento

Vamos a ver qué cambios ha aplicado este cambio adicional: hemos quitado las navegaciones arriba y toda la  distracción que podía haber en el pie de página, con lo cual ahora tienes una página de aterrizaje super nítida, donde puedes trabajar tu copy y los call to action que quieres introducir en esta misma página.

La Landing Page definitiva: nada de distracciones

Obviamente, todos estos cambios solamente se han aplicado a esta página y no impactan en el resto de lo que es tu blog.

Quédate con esta idea de optimizar tus entradas o tus páginas para mejorar tus conversiones.

Dale un +1 a esta entrada si te ha gustado. Gracias!

Acerca del autor de esta entrada,

Franck Scipion

Acerca del autor de esta entrada,

Franck Scipion

¿Harto de nunca saber que pasos dar?

Reserva ya tu sesión 1 a 1 «Claridad Total» y saldrás con un plan de acción cristalino para llegar a tus metas a 12 meses vista. Si vas en serio y valoras tu tiempo, esta sesión es para ti.

¿Harto de nunca saber que pasos dar?

Reserva ya tu sesión 1 a 1 «Claridad Total» y saldrás con un plan de acción cristalino para llegar a tus metas a 12 meses vista. Si vas en serio y valoras tu tiempo, esta sesión es para ti.

¿Te gustaría transformar tu talento en un negocio digital y conseguir tus primeros clientes en 60 días?