Cómo crear una página de inicio de impacto en tu web profesional

Crear una página de inicio con apariencia profesional y atractiva es fundamental para la buena salud de tu proyecto online.

Ten en cuenta que es la puerta principal de tu casa digital y lo que primero verán los usuarios. Por eso, la página de inicio puede resultar determinante para que continúen navegando o se marchen por donde han venido.

Si a esto le sumamos que el tiempo que emplearán en decidir si tu web es un buen lugar para quedarse se reduce a 4 segundos y que la competencia está a solo un clic, conviene mimar su diseño y construirla de una forma estratégica para guiar a tus visitas hacia tus objetivos.

A esto vamos a dedicar este post. En concreto, te voy a mostrar cómo crear una página de inicio de alto impacto en Genesis, de una forma fácil y sin necesidad de tocar una sola línea de código.

¿Listo para crear una super home sin complicarte la vida?

Instala estos 3 plugins para crear una página de inicio que impacte en tus lectores

La herramienta que vamos a usar para darle forma a tu home será Beaver Builder.

Este plugin me gusta y lo recomiendo porque es sencillo de usar, intuitivo y ofrece muy buenos resultados, como vas a comprobar en este artículo.

Antes de pasar a la parte divertida y empezar a crear tu página de inicio, déjame que te hable un poquito de Beaver Builder.

Este poderoso plugin te permite diseñar páginas muy atractivas. El único límite del plugin es tu propia imaginación y creatividad.

Así que vamos a ver:

• Cómo instalar Beaver Builder en tu WordPress.
• Cómo se maneja.
• Funciones adicionales.

Cómo instalar Beaver Builder en WordPress

Una vez que estás en el editor de tu web, nos vamos al menú de plugins y seleccionamos «Añadir nuevo».

Subimos el plugin (que previamente tendrás que descargar de su web) y lo activamos. Antes de incluir la licencia, instalamos otro plugin más: Ultimate Addons for Beaver Builder, que es un complemento que le suma muchísimas funciones.

Nota: Ultimate Addons for Beaver Builder no es imprescindible para crear páginas ni para que Beaver Builder funcione correctamente. Sin embargo, sí es útil para añadir aún más funciones a las que trae el maquetador. Por eso lo recomiendo.

A continuación añadimos las licencias.

Para ello, vamos a «Ajustes» y seleccionamos «Page Builder».

Ahora, escribimos el número de licencia del documento .txt que nos hemos descargado y hacemos clic en «Guardar la Configuración de Suscripción».

Una vez que está activo es importante que actualicemos para asegurarnos de que tengamos la última versión y que no haya problemas de compatibilidad.

Qué te aporta Ultimate Addons for Beaver Builder

Aunque Beaver Builder es un plugin muy poderoso, el complemento Ultimate Addons for Beaver Builder multiplica sus funciones, así que, como te he dicho, me parece superútil.

Tras instalarlo, lo activamos . Para ello, volvemos a ajustes, elegimos UABB y en la pestaña de licencia, pegamos nuestra clave y pinchamos en «Activar licencia».

Volvemos a actualizar y avanzamos al siguiente paso.

Antes de empezar a crear nuestras páginas, vamos a instalar un plugin más (el último): Genesis Dambuster, que lo añadimos desde el repositorio de WordPress.

Si no estás utilizando Genesis, necesitas un plugin (a menos que te lo permita tu tema) con el que puedas eliminar la cabecera, el pie de página y que puedas poner los elementos a ancho completo.

Lo vamos a ver con un ejemplo muy práctico dentro de un momento.

Con esto, ya tenemos todas las herramientas que necesitamos:

• Un maquetador de páginas.
• La posibilidad ancho completo.
• Funciones extra para que las páginas sean más atractivas aún.

Ahora, sí, entramos en la parte divertida. ¡Vamos a por ello! 🙂

Cómo crear y personalizar una página con Beaver Builder

Cuando estamos en nuestra nueva página, nos vamos abajo del todo. Ahí verás que están disponibles las opciones de Genesis Dambuster.

Lo primero que haremos será activar los trucos («Enable Tweaks»), que son:

• Poner la página a ancho completo.
• Quitar la cabecera y los menús (principal y secundario).
• Quitar todo el contenido.
• Quitar el footer.
• Quitar el background.

Con todo esto activo, guardamos los cambios y hacemos clic en Page Builder.

Verás que se abre un lienzo en blanco. Puede que la primera vez que lo uses te pregunte si quieres usar alguna plantilla. Aunque puedes trabajar directamente a partir de la página en blanco, el plugin te facilita la vida porque hay plantillas diseñadas por el propio equipo de Beaver Builder que están listas para usar.

Si eliges cualquiera de ellas, directamente tendrás un diseño y solo tendrás que personalizarlo.

Pero eso no es todo, porque a la plantilla que elijas puedes añadirle nuevos elementos de entre los posibles que verás en la columna de la derecha.

Además, cada fila que añadas tienes la opción de moverla o de configurarla para cambiar el color de los enlaces, del texto o del fondo. En las posibilidades de personalización, también puedes seleccionar tus propias imágenes y ponerlas de fondo, jugar con efectos de la imágenes, añadir márgenes, modificar el espacio interior…

Las posibilidades son tremendas.

Aparte, por supuesto, puedes añadir texto y personalizarlo a tu gusto.

Tú eliges si duplicas ese mismo formato de texto o añades una nueva caja para escribir el texto como tú quieras.

Lo importantes es que te quedes con la idea de que cualquier elemento que incluyas puedes modificarlo, duplicarlo o moverlo donde te interese usarlo.

¿Y qué opciones brinda la columna de la derecha? 

Ahí encontrarás módulos básicos y avanzados para que personalices tu página en función de lo que busques. Además, como tenemos UABB, las posibilidades de creatividad y funcionalidad se multiplican.

Por ponerte un ejemplo, una de las opciones más interesantes que verás es que en una fila puedes incluir un efecto de separación para hacer transiciones entre las distintas partes de la página de forma más atractiva. Fíjate en la siguiente imagen para verlo más claro (en este caso, he elegido una transición con forma de triángulo).

Respecto al color de este efecto, si tienes intención de usarlo varias veces, si haces clic en el símbolo «+» se guarda automáticamente en los colores preestablecidos. Es una buena manera de tener tu paleta de colores personalizada cuando la necesites.

Como ves, Beaver Builder es un plugin muy sencillo y que ofrece muchos tipos de módulos que puedes usar. Para sacarle el máximo partido, basta con trastear un poco y jugar con las diferentes opciones.

¿Tienes ganas de probar más plantillas? 

Perfecto.

Dentro de Ajustes y UABB, verás una pestaña que se llama «Template Cloud», que es como un almacén de plantillas que puedes añadir. Al seleccionar una y hacer clic en ella, se añade directamente para que la puedas usar.

Otra de las cosas buenas es que no solo hay plantillas para contenido, sino que también hay prediseños para testimonios, llamadas a la acción, etc.

Como te decía al principio, para conseguir un resultado espectacular con Beaver Builder solo dependes de tu imaginación y de tu creatividad.

Una vez que termines, guarda los cambios y ya tienes tu página terminada.

Pues bien, ahora que sabes cómo crear una página con este plugin, vamos a ponernos con la página de inicio.

Pero antes de empezar déjame hacerte una recomendación: construye primero una home de prueba para que te familiarices con las opciones y no la líes.

Diseña tu página de inicio con Beaver Builder

Ya sabes que la página home debe perseguir un objetivo claro: convertir visitas en clientes o suscriptores.

Para eso, lo ideal es que la propia estructura de la página guíe a los usuarios.

Uno de los diseños habituales que habrás visto muchas veces incluye estos elementos:

• Invitar a la suscripción (destacando el beneficio que conseguirán).
• Mostrar los servicios y soluciones.
• Prueba social (testimonios, logos de empresas con las que has colaborado…)
• Las últimas entradas del blog (o las más destacadas).
• Llamada a la acción más resumida que en la parte superior.

Yo mismo utilizo esta estructura en mi propia web (venga, haz un descanso en la lectura y compruébalo) y si navegas por los sitios de otros bloggers conocidos, verás que la composición sigue esta línea. ¿Por qué? Porque con solo 5 elementos estás respondiendo a la pregunta que se harán tus lectores (y posibles clientes) cuando aterricen tu web: «¿qué hay aquí para mí?».

Veamos los pasos para crear una página de inicio.

#1. Define los parámetros

Tal y como hicimos en la página de prueba, una vez que estamos dentro de la home nos vamos a la parte inferior y activamos las casillas de Genesis Dambuster.

Al ser una página de inicio, es interesante poner el ancho completo, pero mantener el header y los menús, por lo que les quitaremos los tics a esas casillas. Además, vamos a mantener el footer.

Lo hacemos así porque no estamos creando un landing, sino una página que debe contener toda la información relevante.

Actualizamos y nos vamos a Page Builder.

Una vez dentro, verás que a diferencia de lo que ocurría con la página de prueba, ahora sí tienes una cabecera, un menú un un pie de página.

Pues, ha llegado el momento de pasar a la acción y empezar a construir tu página de inicio definitiva.

Recuerda que puedes partir de un lienzo en blanco, de una de las plantillas disponibles que incluyen un diseño específico para páginas de inicio o elegir una de contenido o de Template Cloud.

Elementos que no pueden faltar en una buena página de inicio

Independientemente de la plantilla que elijas, hay ciertas característica que van a determinar que tu home sea una chapuza que no transmita confianza o una página estratégica que convierta.

#1. Foto llamativa

Incluir una buena foto de ti, sonriente, te hará un gran favor, porque además de humanizar  tu marca, te ayudará a transmitir confianza y cercanía. No tengas miedo a mostrarte tal y como eres, porque puede ser el detonante de generar ventas.

Otra opción es incluir una imagen de tu lead magnet o de algo representativo que despierte el deseo de tus usuarios.

#2. Beneficio claro, específico y concreto

¿Qué puede conseguir el usuario? Deja claro desde el primer momento qué puede esperar y por qué tu solución es la adecuada para su problema o necesidad.

¡Ah! Y acuérdate de acompañarlo de una llamada a la acción, un botón que derive a un formulario de contacto o de suscripción a la newsletter. También puedes incluir un formulario de suscripción que puedes conectar a uno de los servicios disponibles a través de tu API.

#3. Destacar tus servicios

¿Cómo puedes ayudar a tus clientes?

En este apartado presenta las soluciones que ofreces.

No existe un límite, aunque sí te recomiendo que seas moderado. Aunque lo ideal es que muestres 3, si incluyes más, no pases de 8. Ten en cuenta que presentar demasiadas opciones puede sobrecargar al usuario y provocar que no se decida por ninguna.

#4. Llamada a la acción

Incluye de nuevo una llamada a la acción: concreta y específica.

#5. Prueba social

Testimonios, logotipos, apariciones en medios y prensa… Todos esos elementos son un aval para confiar en ti y generan autoridad.

#6. Llamada a la acción

Sí, de nuevo animas a que tu usuario pase a la acción.

En definitiva, si te fijas, lo que conseguimos con esta estructura es guiar al usuario en todo momento: le muestras un beneficio y qué puedes hacer por él, lo detallas un poco más, le das una prueba para confiar en ti y rematas con una llamada a la acción para que, de un modo u otro, contacte contigo o se suscriba.

Con una home así, conseguirás más suscriptores, más clientes o más peticiones de presupuestos.

Cómo crear una página de inicio a partir de un lienzo en blanco

Ya hemos comentado antes que si no quieres usar tu página de inicio a partir de una plantilla, puedes partir de la página en blanco.

Vamos a ver qué pasos tienes que seguir para ello.

Es tan sencillo como elegir, en la columna de la derecha, las secciones que te interesen y arrastrarlas hasta la página.

Te habrás fijado en que hay una tendencia muy de moda (sobre todo en las páginas de negocios unipersonales) según la cual las entradas del blog solo se muestran en la pestaña del menú superior.

Ahora bien, si quieres incluir tus últimos posts, puedes hacerlo de 2 maneras:

• A partir de las plantillas
• Desde Añadir contenido
• Desde módulos avanzados, seleccionando la opción de carrusel de entradas.

¡Ojo! Si incluyes un módulo con entradas del blog,  acuérdate de añadir debajo una nueva llamada a la acción.

Cuando termines, pinchas en «Hecho», guarda los cambios y tienes lista tu página home sin haber tocado ni una sola línea de código.

Sin embargo, aún no hemos acabado.

Últimos pasos

Para que se convierta en una página de inicio real, tenemos que ir a «Escritorio», «Ajustes» y hacer clic en el menú de «Lectura».

Una vez ahí, marcamos «Una página estática» y elegimos página de inicio como página de inicio (valga la redundancia).

Guardamos los cambios y ya sí, tienes tu nueva página de inicio. 🙂

¿Y si alguien lo hiciera por ti?

Ahora ya sabes cómo crear una buena página de inicio, pero… ¿y si en lugar de perder  tiempo en temas de diseño y montaje técnico lo hiciera alguien por ti? Mientras tú podrías dedicarte a otras tareas estratégicas de tu negocio.

¡En Hormigas en la Nube podemos ayudarte!

En 5 días, tendrás, no solo la página de inicio, sino toda la web de tu negocio optimizada y lista para captar clientes.

¿Quieres conocer los detalles?

¡Sí! Quiero que montes mi web en 5 días

Es tu turno. ¿Qué te ha parecido? ¿Tu página de inicio contiene todos los elementos para que sea una home de alto impacto? ¿Conocías Beaver Builder? Te espero en los comentarios.

Foto: Shutterstock