Cómo crear un tapete de bienvenida para su sitio de WordPress (+ ejemplos)

Publicado: 2023-03-18


¿Desea agregar un tapete de bienvenida de pantalla completa a su sitio web?

Un tapete de bienvenida es una superposición dinámica de pantalla completa que puede ayudarlo a obtener más suscriptores de boletines, descargas de libros electrónicos, ventas de sus productos y más.

En este artículo, compartiremos cómo crear un tapete de bienvenida para su sitio de WordPress, junto con algunos excelentes ejemplos de tapetes de bienvenida para aprender.

How to create a welcome mat for your WordPress

Por qué una alfombra de bienvenida puede aumentar sus conversiones

Más del 70% de los visitantes que abandonan su sitio web de WordPress nunca regresarán a menos que los convierta en suscriptores de correo electrónico o clientes.

Un tapete de bienvenida es un intersticial grande de pantalla completa que bloquea la vista del resto del contenido de su sitio web para captar la atención del usuario.

Eso puede sonar como una mala idea, pero es una excelente manera de hacer llegar su mensaje a los visitantes de inmediato.

Si los visitantes no quieren lo que ofreces, simplemente pueden cerrar la alfombra de bienvenida.

Por supuesto, querrá darles a las personas una buena razón para registrarse si muestra una alfombra de bienvenida en lugar de una ventana emergente con intención de salida, como un código de descuento o incluso un obsequio.

Por ejemplo, es posible que haya visto tiendas de comercio electrónico populares que ofrecen un descuento especial utilizando un tapete de bienvenida de pantalla completa con ludificación.

Gamified Spin a Wheel Campaign

En otros casos, es posible que haya visto a blogueros populares que usan una alfombra de bienvenida de pantalla completa para hacer crecer su boletín informativo por correo electrónico.

Goins writer welcome screen mat

Dicho esto, echemos un vistazo a cómo agregar fácilmente una alfombra de bienvenida a su sitio web.

Cómo crear un tapete de bienvenida para su sitio web

La forma más fácil de crear una alfombra de bienvenida en WordPress es usar OptinMonster. Es el mejor software de generación de prospectos del mundo y le permite crear fácilmente formularios de suscripción, incluidas las alfombras de bienvenida.

Primero, deberá visitar el sitio web de OptinMonster y registrarse para obtener una cuenta. Necesitará al menos el plan Básico para crear superposiciones de pantalla completa.

OptinMonster

A continuación, deberá instalar y activar el complemento OptinMonster WordPress. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.

El complemento conecta la aplicación OptinMonster a su sitio web. Una vez que haya activado el complemento, verá el asistente de configuración en su panel de control de WordPress. Continúe y haga clic en el botón 'Conectar su cuenta existente'.

Connecting an OptinMonster account to WordPress

A continuación, se abrirá una nueva ventana.

Simplemente haga clic en el botón 'Conectarse a WordPress'.

Connect OptinMonster to WordPress

Ahora, está listo para crear su alfombra de bienvenida.

Creación de un tapete de bienvenida para su sitio web

Puede dirigirse a OptinMonster » Campañas para crear una nueva campaña.

Continúe y haga clic en el botón 'Crear su primera campaña' para comenzar a crear su alfombra de bienvenida.

Create first OptinMonster campaign

Aparecerá una nueva ventana en la que podrá seleccionar plantillas prediseñadas o elegir campañas listas para usar e imanes de prospectos inspirados en marcas exitosas. OptinMonster también te da la opción de contratar a un especialista para personalizar tus campañas.

Para este tutorial, utilizaremos la opción 'Plantillas'.

Choose a template or playbook

Esto lo llevará al creador de campañas de OptinMonster.

A continuación, elija 'Pantalla completa' para su tipo de campaña.

Select fullscreen template and campaign

Deberá elegir una plantilla para su campaña. Usaremos la plantilla 'Entrada', pero puede elegir una diferente si lo desea.

Una vez que haya seleccionado una plantilla, continúe e ingrese un nombre para su campaña y haga clic en el botón 'Comenzar a construir'.

Click start building

A continuación, puede personalizar su campaña utilizando el generador de arrastrar y soltar. Puedes cambiar lo que quieras aquí.

Hay diferentes bloques que se pueden agregar a la campaña, como imágenes, texto, botones y más. También querrá editar el texto para que corresponda a su oferta.

Customize your fullscreen campaign

Simplemente haga clic en cualquier elemento y verá que puede editarlo en el panel de la izquierda.

Por ejemplo, cambiaremos el título del tapete de bienvenida a pantalla completa para nuestra campaña de demostración.

Edit the text of welcome mat

El siguiente paso es dejar que su tapete de bienvenida se deslice hacia adentro. Puede hacer esto haciendo clic en el icono de engranaje de Configuración en la parte inferior izquierda.

Desde aquí, debe alternar la opción '¿Mostrar una diapositiva de página?' opción para habilitarlo.

Display a page slide

Esto significa que su alfombra de bienvenida se deslizará hacia abajo desde la parte superior de la pantalla en lugar de desaparecer a la vista.

A continuación, debe cambiar a la vista "Éxito" de su tapete de bienvenida. Esto es lo que verán sus usuarios después de realizar la acción deseada. Si lo desea, puede personalizar la vista de éxito o usar la plantilla predeterminada.

View the success view of welcome screen mat

Una vez que esté satisfecho con su alfombra de bienvenida, puede configurar cómo se mostrará en su sitio.

Mostrar el tapete de bienvenida en su sitio de WordPress

Puede configurar cómo mostrar la ventana emergente de su tapete de bienvenida cambiando a la pestaña 'Reglas de visualización' en OptinMonster.

Hay muchas opciones de personalización y orientación, como la ubicación de los usuarios, qué artículos tienen en su carrito de comercio electrónico, qué han hecho anteriormente en su sitio, intención de salida y más.

De forma predeterminada, las campañas de OptinMonster se muestran en todas las páginas de su sitio después de que el visitante haya estado allí durante 5 segundos.

Select display rules

Dado que se trata de un tapete de bienvenida, probablemente querrá que se muestre de inmediato. Simplemente cambie este valor a 0 segundos.

De forma predeterminada, el tapete de bienvenida se mostrará en todas las páginas de su sitio. Puede incluir o excluir fácilmente páginas específicas utilizando las reglas de personalización de OptinMonster.

Choose display rules for welcome mat

Puede hacer clic en el botón 'Siguiente paso' cuando haya terminado.

A continuación, verá más opciones para mostrar su campaña. Por ejemplo, puede agregar un efecto o reproducir un sonido cuando la campaña aparece en la pantalla de un usuario.

Para este tutorial, usaremos la configuración predeterminada y haremos clic en el botón 'Siguiente paso'.

Add effects to campaign

En la siguiente pantalla, verá un resumen de la configuración de sus reglas de visualización.

Puede editar la configuración antes de publicar la campaña.

Summary of display rules

Una vez que esté listo para publicar su alfombra de bienvenida, simplemente vaya a la pestaña 'Publicar' en la parte superior de la pantalla.

Continúe y cambie el Estado de publicación de 'Borrador' a 'Publicar'.

Publish welcome screen campaign

No olvide hacer clic en 'Guardar' para almacenar sus cambios y cerrar el creador de campañas.

A continuación, verá la configuración de salida de WordPress para su campaña. Asegúrate de que tu campaña esté publicada.

Si no es así, simplemente haga clic en el menú desplegable Estado y seleccione la opción 'Publicado'. No olvides hacer clic en el botón "Guardar cambios" cuando hayas terminado.

Change the status of welcome mat campaign

Para ver su campaña, puede visitar su sitio web en una nueva ventana del navegador de incógnito.

Debería ver su tapete de bienvenida deslizarse sin problemas desde la parte superior de su pantalla.

Fullscreen welcome mat preview

Ejemplos de excelentes tapetes de bienvenida

Echemos un vistazo a algunos ejemplos de alfombras de bienvenida de diferentes industrias. Para cada uno, revisaremos lo que están haciendo bien, además de cualquier cambio menor que podamos sugerir.

1. Singularidad

Este tapete de bienvenida de Singularity incitó a los usuarios a registrarse y ver la transmisión en vivo de la Cumbre Global de la Universidad de Singularity. Tuvo un gran éxito y capturó más de 2000 nuevos registros de correo electrónico en menos de 9 días.

Singularity fullscreen mat preview

Nos gusta especialmente el gran uso del logotipo, las fuentes claras y el brillante "¡Recuérdame!" botón.

2. Goins, escritor

Esta alfombra de bienvenida de Goins, Writer ofrece una guía gratuita. Es una oferta clara y sencilla, y el diseño minimalista está en consonancia con el resto de la web.

Goins writer welcome screen mat

Creemos que los botones "Sí" y "No, gracias" son claros y fáciles de usar, y el uso de números en el título lo convierte en una oferta atractiva.

3. AVweb

Este tapete de bienvenida tiene una imagen grande y clara de un pequeño avión. Es instantáneamente llamativo.

Welcome mat example AVweb

Nos gusta la gran imagen y el claro "¡Inscríbeme!" llamada a la acción. Un pequeño ajuste posible sería acortar el eslogan para evitar que cubra la parte superior de la imagen.

4. Paisajes cargados

Este tapete de bienvenida de Loaded Landscapes es un poco diferente de otros ejemplos. El fondo es ligeramente transparente.

Loaded landscape

Nos gusta la oferta clara y el entusiasmo del botón rojo de llamada a la acción. El fondo del sitio debajo de la alfombra de bienvenida podría distraer un poco, por lo que podría valer la pena cambiarlo para que sea completamente opaco.

5. OptimizeMyBnb

Este tapete de bienvenida se usó en una página específica, que se incluyó como un enlace en el que se puede hacer clic dentro de un libro que el propietario del sitio web vendió a través de minoristas externos. Sin embargo, estos minoristas no transmitieron los detalles de los clientes. El uso de una alfombra de bienvenida de esta manera ayudó a capturar las direcciones de correo electrónico de los clientes.

Optimize your Airbnb thank you

Creemos que el título, el subtítulo y el texto de llamada a la acción muy claros funcionaron bien, y que el botón "no, gracias" se usa bien para darle al usuario una sensación de FOMO.

Hay docenas más de ejemplos de tapetes de bienvenida a pantalla completa que puede ver, pero no los agregamos todos en esta guía.

Si está buscando más inspiración, aquí hay algunas cosas que puede hacer con una alfombra de bienvenida de pantalla completa:

  • Presentar una oferta o cupón dirigido
  • Mostrar nuevos productos y servicios
  • Permita que los visitantes sepan qué esperar del sitio
  • Gana nuevos suscriptores destacando su mejor contenido
  • Dirija a los visitantes a sus perfiles de redes sociales
  • Recopile suscriptores de correo electrónico como parte de una fase de prelanzamiento

Si se toma en serio la mejora de las conversiones de su sitio web, entonces el tapete de bienvenida e incluso los intersticiales de pantalla completa de salida son algunos de los elementos de mayor conversión que puede agregar a su sitio web.

Esperamos que este artículo le haya ayudado a aprender a crear una alfombra de bienvenida para su sitio web y que los ejemplos le hayan resultado inspiradores. También puede echar un vistazo a nuestra comparación de los mejores servicios de marketing por correo electrónico y nuestra lista de complementos de WordPress imprescindibles.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para videos tutoriales de WordPress. También puede encontrarnos en Twitter y Facebook.