Splash Pages: una guía rápida y fácil

Qué es una página de bienvenida

En pocas palabras, una página de inicio es una sección de su sitio que los visitantes ven antes de ingresar a la versión principal. Por lo general, son pesados ​​​​en las imágenes, posiblemente con un llamado a la acción (CTA), y actúan como un conducto para el resto del sitio. Aquí hay un ejemplo de una página de inicio de aspecto moderno, cortesía de L’Avenir Dental Clinic :

Si bien el uso de la página de inicio ha disminuido un poco (en parte debido a  preocupaciones sobre la experiencia del usuario (UX)  , ofrecen algunos beneficios excelentes, como:

1. Atraer la atención de sus visitantes hacia un mensaje o elemento de diseño en particular.
2. Permitiéndole comunicar información crítica a sus espectadores.
3. Ofreciendo la oportunidad de aumentar sus conversiones presentándoles indicaciones para suscribirse o algo similar.

Aunque su prominencia ha disminuido, el concepto de una página de inicio ha evolucionado para incorporar encabezados de pantalla completa en estos días, ya que pueden proporcionar muchos de los mismos beneficios que las páginas de inicio independientes.

Dicho esto, las páginas de bienvenida tradicionales siguen siendo viables para algunas aplicaciones como:

1. Creando un hermoso preludio visual para el resto de su sitio.
2. Publicar descargos de responsabilidad legal para sitios web que los requieran (piense en contenido para adultos o juegos de apuestas).
3. Eligiendo tu idioma preferido.
4. Compartir noticias importantes con tus visitantes (aunque no recomendamos esta ruta a menos que sea  realmente  importante).
5. Solicitar a los usuarios que se suscriban a una lista de correo, lo que genera conversiones (sin embargo, tenga en cuenta las consideraciones de UX).
6. Ofreciendo acceso de membresía premium a su sitio de membresía o curso configurando un muro de pago usando un complemento .

Con eso fuera del camino, exploremos juntos algunos ejemplos destacados y descubramos qué los diferencia del resto.

6 ejemplos de impresionantes páginas de bienvenida

En esta sección, nos centraremos en las páginas de inicio con un diseño excepcional, una facilidad de uso sobresaliente o ambos. Como mencionamos, muchas páginas de inicio se presentan como encabezados de pantalla completa. Comencemos con un ejemplo para resaltar esta versión moderna de las páginas de inicio.

1. CoLofts

El sitio web de CoLofts muestra un encabezado de pantalla completa con un fondo apagado que resalta su logotipo. Para todos los efectos, este encabezado actúa como una página de inicio. Está ahí por razones puramente estéticas, y la única función de navegación que incluye lleva más abajo al resto de la página.

2. Hazlo perfecto

Nuestro siguiente ejemplo,  Make It Perfect  , muestra una tendencia retro en las páginas de bienvenida. Incluye una barra de carga, que rara vez aparece en los sitios web modernos en estos días, y por una buena razón. Las velocidades promedio de Internet se han vuelto más rápidas y nuestra paciencia se ha agotado con tiempos de carga prolongados . Idealmente, este sitio no lo necesitaría, pero la barra de carga sigue siendo una toma atractiva de una era pasada.

3. Unidad de simios

Esta página de inicio (cortesía de Ape Unit ) ofrece una buena combinación de usabilidad y diseño. De hecho, se podría decir que toda la página principal es una sucesión de páginas de inicio que conducen a varios estudios de casos. Si eres un profesional del diseño, toma nota: este es uno de los portafolios más singulares con los que nos hemos topado últimamente.

Sin embargo, tiene sus inconvenientes: muchas personas podrían sentirse más cómodas utilizando un sistema de navegación tradicional. En nuestra opinión, simplemente agregar un menú de hamburguesas mejoraría la usabilidad del sitio.

4. Maletín de laboratorio

Labcase es uno de los raros sitios web que hace correctamente las páginas de presentación animadas. En primer lugar, aparece el logotipo del sitio, luego se le muestra un resumen muy conciso de lo que es el producto, antes de pasar al resto del sitio.

Sobre el papel, esto no suena como el mejor de los diseños, pero funciona. Todo, desde el logotipo minimalista hasta las fuentes que usan y el momento de su animación, da en el clavo. Las páginas de bienvenida animadas no ofrecen ningún beneficio desde el punto de vista de la usabilidad, pero si se hacen bien, pueden verse muy bien.

5. Harbr Co.

En otros casos, como el de Harbr Co. , los diseñadores han optado por llevar el concepto de pantallas de presentación animadas un paso más allá mediante el uso de vídeos de fondo. Cuando se combinan con encabezados de pantalla completa, los videos de fondo crean páginas de bienvenida muy atractivas. El mayor inconveniente de esta técnica es que puede aumentar drásticamente los tiempos de carga si sus videos no están optimizados.

6. frio

En lo que a nosotros respecta, las mejores páginas de inicio modernas deben ofrecer una buena combinación de usabilidad y diseño. Debido a esto, somos grandes admiradores de los sitios web que toman el concepto de páginas de inicio y las combinan con métodos de navegación tradicionales, como llamadas a la acción y enlaces a otras secciones de su sitio, como  friiio .

Admitiremos que el ejemplo anterior no es un ejemplo tradicional de una página de presentación. Sin embargo, eso no es necesariamente algo malo. Está  claramente  inspirado en las páginas de inicio de antaño, pero ajustado para incluir tendencias modernas de diseño web. Considere este tipo de diseño híbrido para su próximo proyecto si disfruta de la estética de las páginas de inicio, pero también es un gran fanático de mantener las cosas utilizables.

Cómo construir una página de bienvenida usando Divi

Divi  incluye un  diseño de página de inicio  predefinido , que puede ahorrarle algo de tiempo al crear uno. Para cargarlo, cree una nueva publicación en su tablero de WordPress, luego habilite Divi Builder. A continuación, haga clic en Cargar desde biblioteca:

Desde aquí, elija el  diseño de la página de bienvenida  haciendo clic en  Cargar:

El diseño de la página Divi Splash  consiste en un módulo Divi Blurb , que usa el logotipo de Divi de forma predeterminada, y tres módulos de texto separados . También hay un CTA en la parte inferior (que debería conducir a tu página de inicio) y dos divisores, que podemos ignorar por ahora:

Cuando se ve en vivo, debería verse así:

Todo lo que se necesita son algunos cambios menores para personalizarlo (usando las opciones con la configuración del módulo). Es la manera perfecta de entregar información relevante antes de la página de inicio:

Por otro lado, si le gusta una página de inicio de aspecto más moderno, simplemente cree una  sección de ancho completo  con Divi Builder y agregue un módulo de encabezado de ancho completo : 

El módulo de encabezado de ancho completo incluye configuraciones para que sea de pantalla completa, agregue un botón de desplazamiento hacia abajo y un logotipo superpuesto: todos los elementos que necesita para crear una página de inicio moderna:

Conclusión

El uso de las páginas de inicio ha disminuido en los últimos años y definitivamente no son ideales para todos los sitios web. A pesar de eso, los diseñadores web han logrado darle la vuelta al concepto, reinventando el papel de la página de inicio en el diseño web moderno.

La forma en que elija implementar su página de inicio depende de usted, pero si está utilizando Divi , tome nota de los siguientes pasos:

1. Echa un vistazo al  diseño de la página  de inicio  predefinido que se incluye con Divi y ajusta su configuración a la perfección.
2. Alternativamente, use el módulo Encabezado de ancho completo , activando las  opciones del botón Pantalla completa y Desplazarse hacia abajo , y luego agregando un logotipo.

¿Qué tan importantes son las páginas de bienvenida para su sitio web? ¡Suscríbase y comparta sus pensamientos con nosotros en la sección de comentarios a continuación!

Imagen en miniatura del artículo de RedlineVector / shutterstock.com.