¿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!

Print Friendly
Opt In Image
El arte de convertir visitas en ventas
No siempre se necesita el doble de visitas para generar el doble de ingresos con tu web

Descubre el secreto de la webs que convierten, las que saben transformar una visita en un cliente:

  • Todo empieza con el Mercado
  • Las 3 palancas de la generación de ingresos online
  • El modelo del embudo o ¿Porqué la gente no logra vender en Internet?
  • Analítica Web: ¿Andas a ciegas con tu negocio?
  • 4 formas de generar ingresos en tu blog…¡la semana que viene!
  • 6 formas de generar más tráfico en tu blog…¡la semana que viene!
  • 9 formas de generar más conversiones en tu blog…¡la semana que viene!

Optimizado para Kindle

¿TE HA GUSTADO LO QUE HAS LEÍDO?

Si es el caso, únete a otras 25.000 personas que reciben cada semana mis mejores consejos sobre negocios online y blogging, y además se forman, GRATIS, con mi curso online de 10 clases, "Pro Blogging 10/10". Haz clic en el botón abajo.

¡EMPIEZA HOY MISMO!

¿Sabias que LifestyleAlCuadrado.com está diseñado con el Framework Genesis, de StudioPress?

Framework Genesis

Genesis te permite de construir unas webs WordPress increíbles, de forma rápida y sencilla.

Que seas un novato o un desarrollador experimentado, Genesis te brinda los mejores Look & Feel para tu proyecto, un entorno seguro totalmente optimizado para dispositivos móviles (HTML 5) y la mejor optimización SEO del mercado.

¿Quieres leer mi análisis a fondo?

Comments

  1. says

    Simplemente quería felicitarte por este excelente y claro artículo, ya que quienes estamos iniciando esto de los negocios por Internet necesitamos nuestras propias landing page y muchas veces no sabemos por donde comenzar.

    Saludos y muchos éxitos, Juana

  2. Jordi says

    Hola, Franck.

    La técnica que explicas está muy bien, pero tengo una pregunta. ¿Sabes si es aplicable en otros themes que no sean de woo? Lo pregunto para saber si también es aplicable a elementos definidos como clase tipo . Así, ¿sabes si es viable la solución .postid-11304 optin {display: none} sin el símbolo “#”?

    Gracias por tu tiempo!

  3. says

    Que interesante Artículo, Woothemes es muy completo, especialmente Canvas. Pero siempre nos quedan dudas a los nuevos bloggers al momento de realizar configuraciones como esta. ya que entre tantas opciones, nos confundimos.

    Gracias por el tutorial, me ha ayudado muchísimo.

    • says

      Gracias José. Es cierto lo que comentas sobre las muchas opciones, aunque si no tocas nada en el panel de admin de tus WooThemes, todo suele funcionar como la seda

      • says

        Tienes razón, aunque ninguno de nosotros va a utilizar un tema como viene por defecto, porque siempre queremos personalizarlo y hay algunas cositas que no nos parecen.

        Yo le recomiendo a todos los principiantes que compren un tema y contraten a un diseñador para tener un tema profesional, lo digo por experiencia.

        Cuando yo inicié como Blogger, quería hacerlo todo por mi cuenta, y desperdicié muchísimas horas de mi tiempo hasta quedar satisfecho. Incluso, tuve serios problemas.

        Cuando estaba editando el código del tema, al visualizar mi blog NO se podía ver, me aparecía un error. Sinceramente me preocupé mucho y perdí mucho tiempo hasta solucionarlo.

        Concluyendo, si tú no conoces a fondo PHP, HTML y CSS no trates de configurar el tema de tu blog por tu cuenta, busca a un experto que bien lo vale.

        Te ahorrarás mucho tiempo, trabajo y evitarás esos apuros.

        Claro, puedes configurarlo utilizando los menús que trae woothemes, pero creeme, habrán algunas opciones o configuraciones que solo las podrás hacer utilizando códigos.

        Muchas gracias Frank por el espacio, espero también aportar mi granito de arena y ayudar a los nuevos bloggers con mis experiencias. Saludos.

        • says

          Interesante tu punto de vista, Jose. Opino igual que tu, cuando la persona que hay tras el tema no tiene como objetivo formarse en el arte del diseño y el desarrollo web. Si uno desea tener una web/blog para hablar de marketing o dar a conocer sus servicios no es tan necesario invertir horas en aprender de maquetación o desarrollo, como bien dijo Franck Scipion en uno de sus posts cuando anunció que había adquirido Canvas. Es como todo, un empresario no lo podrá saber hacer todo, por lo menos no debería querer abarcarlo todo solo. Delegar funciones está bien, como el contrata a un técnico informático para el mantenimiento de los equipos, el que desea que su empresa tenga presencia online debe entender que hay profesionales que facilitan estas soluciones. [...] (Sigo en siguiente comentario que se me come el formulario y el botón)

        • says

          Sin embargo, opino que el marketing electrónico está muy relacionado con ciertos aspectos del desarrollo web y diseño web, y no considero una ”perdida” de tiempo para el especialista en esta tarea que ha ampliado sus conocimientos en ello (todo lo que se aprende bienvenido sea). Pero, evidentemente, es mundo, y como tal requiere de una total dedicación si uno desea ser un crack en ello. Así, si no tienes pensado ser maquetador o desarrollador o crear una empresa que ofrezca estos servicios, puedes entenderlo como un complemento, el cual te permitirá ahorrar en contratación de servicios de terceros en ciertos puntos. Otro aspecto son los que no quieren gastarse un duro con la presencia online o se piensan que los especialistas en ello no le dedican horas suficientes para cobrar (el que quiera algo que pague). Saludos!

          • says

            me gusta tu opinión Jordi, el aprender algo nuevo nunca está de más, es necesario conocer bien nuestro ambiente de trabajo (bloggers). Y es muy importante que las personas que evitan gastar a toda costa en la web, cambién de mentalidad, porque cada trabajo es digno y debe ser pagado. Si no fuera así, se murieran de hambre los diseñadores Web. Así que lo mejor es aprender los lenguajes o sino pagar a un experto… NUNCA tomes el trabajo pro tu cuenta sin conocer Cómo hacerlo xq pasarás muchos apuros.

          • says

            También estaba teniendo el mismo problema con el formulario, y con un par de clics le encontré solución:

            Franck te invito a arreglar el código css del formulario: Debes eliminar el atributo css height del formulario para que pueda tener el alto según el contenido y no limitarse, o sino puedes agregar el atributo overflow:visible; para que aunque se pase del tamaño establecido siempre esté visible el botón para publicar comentario.

            Saludos.

  4. says

    Había guardado en favoritos este blog por la calidad de información. La verdad; este artículo para mi es super interesante. Me gustaría muchísimo obtener un tutorial sobre el panel de los themes de Woothemes. Creo que existimos mucho que no sabemos ingles y además nos atemoriza el diseño de algunos themes. Aunque he visto algunos cursos de WP, me considero principiante frente a algunos themes.Gracias

  5. Carolina says

    Súper feliz con mi landing page! Me ha costado un poco porque mi plantilla a pesar de ser de Woo Themes no es tan intiutiva como Canvas. Además lo intentaba hacer con una página en lugar de con un post y el código, lógicamente! es…

    .page-id-2616 #main-nav {display: none } (no postid-2616)

    En mi caso no me ha permitido hacerlo con varios elementos + {display: none } He tenido que hacerlos uno a uno, así:

    .page-id-2616 #main-nav {display: none }
    .page-id-2616 #navigation {display: none }
    .page-id-2616 #footer-widgets {display: none }

    Por si a alguien le sucede como a mi!

    :-) Saludos!

  6. says

    Muy útil Franck, estoy aprendiendo mucho con todos tus contenidos.
    En próximos meses comenzaré con un blog sobre analitica web en el que fundamentaré un Plan B profesional :D. Los hangouts de navidad lo mejor que he encontrado en mucho tiempo.
    En fin, que en un par de semanas me has fidelizado : p

    • Andres Felipe Cataño says

      Hola frank es primera vez que comento sobre algo y la verdad me ah guatado mucho este informe, tengo una pregunta actualmente realizo un curso de superior de comunity manager y marketing online, y me preguntaba si con este metodo de crear una pagina de aterrizaje con wordpress puedo vender cursos como libros electronicos que en cuanto la gente realice su pago se descargue automaticamente o que mas debo de tener.

      Muchas gracias.

  7. says

    Hola Franck:

    Tengo dos dudas concretas:

    1.- ¿Es mejor hacer la landing page en una entrada del blog o en una página? Si es en una entrada ¿cómo haces para que no aparezca el la lista de artículos recientes?
    2. ¿El título que aparece es el de la página o ese lo ocultas y haces uno dentro del cuerpo del contenido?

  8. says

    un saludo Frank,
    ya estoy otra vez por tu blog, al final me compré el Canvas de wootheme y ando con él para customizarlo poco a poco. El trabajo es lento pero cada pequeño logro me da una gran satisfacción de saber manejar yo mismo el blog … no pierdo de vista la posibilidad de pagar por tus enseñanzas (no soy de la virgen del puño :-) ) o de pagar a algún programador que me ayude con el código pero mientras pueda voy a seguir caminando solo que es como más aprendo, muchas gracias por este artículo, un abrazo

  9. says

    Hola Franck:

    Buscando y buscando encontré respuesta a las 2 preguntas que hacía. Sin embargo me ha surgido una nueva.

    Veo que algunas páginas que manejas a una columna ocupan todo el ancho del sitio y otras no, ¿cómo haces para poder especificar el ancho de una página es específico?

    Por ejemplo esta es más ancha http://www.lifestylealcuadrado.com/herramientas-recomendables-para-un-negocio-en-internet/

    Y esta más estrecha http://www.lifestylealcuadrado.com/curso-online-e-commerce/

    Saludos desde México y gracias de antemano por tu respuesta.

    • says

      Usa el modelo de plantilla a vista completa de Canvas/Woo Themes, y luego puedes completar pagina a pagina con CSS el ancho de cada una de estas paginas