Cómo diseñar una puerta de bienvenida para su página en Divi

Una puerta de bienvenida es una forma eficaz de impulsar las conversiones de cualquier llamado a la acción en su sitio. De hecho, las puertas de bienvenida son una característica popular con complementos como OptinMonster para crear opciones de correo electrónico de alta conversión. La idea básica detrás de una puerta de bienvenida es ocultar el contenido de la página web con una llamada a la acción en pantalla completa. Esto obliga al usuario a interactuar con la CTA antes de ver la página deseada.

En este tutorial, le mostraremos una manera rápida y fácil de agregar una puerta de bienvenida personalizada a su página web sin usar un complemento. Esto puede resultar útil para impulsar las conversiones de sus CTA en las páginas de destino.

¡Echale un vistazo!

Vistazo

Aquí hay un vistazo rápido a la puerta de bienvenida que construiremos en este tutorial.

Descarga el diseño GRATIS

Para poner sus manos sobre los diseños de este tutorial, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante el formulario a continuación. ¡Como nuevo suscriptor, recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No se le volverá a suscribir ni recibirá correos electrónicos adicionales.

Descarga los archivos

Descárgalo gratis

Únase al boletín de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.

DESCARGAR

Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!

Para importar el diseño a su página, simplemente extraiga el archivo zip y arrastre el archivo json al Divi Builder.

Vamos al tutorial, ¿de acuerdo?

Lo que necesitas para empezar

Para comenzar, deberá hacer lo siguiente:

1. Si aún no lo ha hecho, instale y active Divi Theme.
2. Cree una nueva página en WordPress y use Divi Builder para editar la página en el front-end (constructor visual).
3. Seleccione la opción "Elegir un diseño prefabricado".
   
4. Seleccione el paquete de diseño Bistro y, desde la ventana emergente Cargar desde la biblioteca, seleccione el diseño de la página de destino Bistro y haga clic en el botón "Usar este diseño" para importar el diseño a la página.
   

Después de eso, tiene una página de destino para usar al crear la puerta de bienvenida personalizada.

Creando la puerta de bienvenida

Agregar nueva sección

Primero, cree una nueva sección regular y arrástrela a la parte superior de la página. Luego agregue una fila de una columna a la sección.

Diseñar la sección

Antes de comenzar a agregar módulos / contenido a la sección, agreguemos un diseño personalizado para que tengamos un buen lienzo en el que trabajar en el futuro.

Fondo

Para comenzar, agregue un degradado de fondo y una imagen de la siguiente manera:

• Color de degradado de fondo a la izquierda: rgba (0,17,38,0.7)
• Gradiente de fondo Color derecho: # 001126
• Posición inicial: 68%
• Colocar degradado sobre la imagen de fondo: SÍ
• Imagen de fondo: [insertar imagen]

Relleno y animación

A continuación, vaya a la pestaña de diseño y actualice la siguiente configuración de relleno y animación:

• Acolchado (escritorio): 28vh arriba, 28vh abajo
• Acolchado (tableta): 18vh arriba, 18vh abajo
• Acolchado (teléfono): 10vh arriba, 10vh abajo
• Estilo de animación: diapositiva
• Dirección de animación: Abajo
• Opacidad inicial de la animación: 100%;

Coloque la sección de la puerta de bienvenida

Ahora estamos listos para darle a nuestra sección una posición fija con un índice z más alto para que la puerta de bienvenida llene la pantalla del navegador hasta que el usuario haga clic en el botón "No, gracias".

Antes de agregar nuestro CSS de posicionamiento, agreguemos un ID de CSS personalizado de la siguiente manera:

• ID de CSS: puerta de bienvenida

Esto se utilizará para apuntar a la sección con jQuery para moverla hacia arriba fuera de la vista cuando el usuario haga clic en el botón "No, gracias".

Agregue el siguiente CSS personalizado al elemento principal:

height: 100vh;
position:fixed;
width: 100%;
top: 0px;
display:flex;
flex-direction: column;

Luego actualice el índice Z de la siguiente manera:

• Índice Z: 11

NOTA: si desea que la puerta de bienvenida también oculte el encabezado, puede agregar un índice Z más alto como “99999”.

Creación del contenido de la puerta de bienvenida

Ahora que nuestra sección está lista, comencemos a agregar el contenido de la puerta de bienvenida. Puede agregar cualquier contenido que desee a esta puerta de bienvenida. Por ahora, creemos un CTA simple con dos botones. El botón de la izquierda será el que desee que los usuarios hagan clic. El botón de la derecha será el botón "No, gracias" que cerrará la puerta de bienvenida.

Módulo de texto

Dentro de la fila de una columna, agregue un nuevo módulo de texto con el siguiente contenido:

<h2>Free Dessert for First Timers</h2>
Book a reservation today and get your choice of any dessert on us!

Diseño de texto

Luego actualice el diseño del texto de la siguiente manera:

• Fuente de texto: cabina
• Color del texto del texto: #ffffff
• Texto Tamaño del texto: 24px (escritorio), 18px (teléfono)
• Alineación de texto: centro
• Fuente del título 2: Cabina
• Peso de fuente del encabezado 2: Negrita
• Color del texto del encabezado 2: #ffffff
• Tamaño del texto del encabezado 2: 66 px (escritorio), 26 px (tableta)

Agregar fila de dos columnas

Para nuestros botones, creemos una fila de dos columnas debajo del texto.

Agregar botón izquierdo

En la columna de la izquierda, agregue un módulo de botones y actualice la configuración de la siguiente manera:

• Texto del botón: “¡Yum! Reservémoslo "

• Alineación de botones: centro
• Color del texto del botón: #ffffff
• Color de fondo del botón: # bd8f52
• Ancho del borde del botón: 0px
• Peso de la fuente del botón: negrita

Luego agregue el siguiente CSS personalizado para que el botón abarque todo el ancho de la columna:

display: block !important;

Agregar botón derecho "No, gracias"

Para crear el botón "No, gracias", primero copie el botón izquierdo y péguelo en la columna de la derecha.

Luego actualice el contenido de la siguiente manera:

• Texto del botón: no, gracias
• URL del enlace del botón: # (esto es importante para que el botón no actualice la página)

Luego actualice el diseño del botón de la siguiente manera:

• Color del texto del botón: # 333333
• Color de fondo del botón: rgba (255,255,255,0.4)

Luego agregue la siguiente clase CSS al botón de no, gracias:

• Clase CSS: nothanks

Este será nuestro selector en jQuery que cierra la puerta de bienvenida al hacer clic.

Agregar el código personalizado

Ahora agreguemos el fragmento de código personalizado necesario para agregar la funcionalidad que cierra la puerta de bienvenida cuando un usuario hace clic en el botón "No, gracias". Para hacer esto, agregue un módulo de código debajo del módulo del botón de no gracias.

Luego pegue el siguiente código en el cuadro de código del módulo de código:

Para un último toque, acerquemos los botones dando un ancho máximo a la fila que contiene nuestros botones. Abra la configuración de la fila y actualice lo siguiente:

• Ancho máximo: 600px

Resultado final

Así es como se ve el diseño final.

Y así es como se ve la puerta de bienvenida al actualizar la página.

Y aquí cómo se ve la puerta de bienvenida en el móvil.

Pensamientos finales

Con suerte, este tapete de bienvenida será una adición útil a su página o plantilla. Divi facilita el diseño y la colocación del tapete de bienvenida con el constructor visual y solo se necesita un pequeño fragmento de jQuery para completar la funcionalidad. Entonces, si está buscando una alfombra de bienvenida rápida para su página sin usar un complemento, esto debería ser útil.

Espero tener noticias tuyas en los comentarios.

¡Salud!