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

Una puerta de bienvenida es una forma efectiva 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 a 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 ser útil para impulsar las conversiones de tus CTA en las páginas de destino.

¡Échale 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 en 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 nuestro boletín utilizando 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 volverá a suscribirse ni recibirá correos electrónicos adicionales.

Descárgalo gratis

Únase al boletín informativo 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 muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro 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.

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

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

Vayamos al tutorial, ¿de acuerdo?

Lo que necesitas para empezar

Para comenzar, deberá hacer lo siguiente:

Si aún no lo has hecho, instala y activa el tema Divi .
Cree una nueva página en WordPress y use Divi Builder para editar la página en la parte delantera (constructor visual).
Seleccione la opción «Elegir un diseño prefabricado».
Seleccione el paquete de diseño de bistró y, en la ventana emergente Cargar desde biblioteca, seleccione el diseño de página de destino de bistró 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.

Crear la puerta de bienvenida

Agregar nueva sección

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

Diseña la sección

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

Fondo

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

Gradiente de fondo Color izquierdo: rgba(0,17,38,0.7)
Degradado de fondo Color derecho: #001126
Posición inicial: 68%
Coloque el 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 las siguientes configuraciones 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 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 una ID de CSS personalizada de la siguiente manera:

ID de CSS: puerta de bienvenida

Esto se usará para orientar 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á en el que desea 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
Texto Color del texto: #ffffff
Texto Tamaño del texto: 24 px (escritorio), 18 px (teléfono)
Alineación de texto: Centro
Encabezado 2 Fuente: Cabina
Encabezado 2 Peso de fuente: Negrita
Título 2 Color del texto: #ffffff
Título 2 Tamaño del texto: 66 px (escritorio), 26 px (tableta)

Agregar fila de dos columnas

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

Añadir 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! Reservemoslo”

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 el ancho completo de la columna:

display: block !important;

Agregar el botón derecho «No, gracias»

Para crear el botón «No, gracias», primero copie el botón izquierdo y péguelo en la columna 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: no gracias

Este será nuestro selector en el 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:

	<style>
	.move-gate {
	top: -100vh !important;
	transition: all 1s;
	}
	</style>
	<script>
	jQuery(document).ready(function($) {
	$(‘.nothanks’).click(function() {
	$(‘#welcome-gate’).addClass(‘move-gate’);
	});
	});
	</script>

view raw

gistfile1.txt

hosted with ❤ by GitHub

Para un último toque, acerquemos los botones dando a la fila que contiene nuestros botones un ancho máximo. 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 así es como se ve la puerta de bienvenida en el móvil.

Pensamientos finales

Con suerte, esta alfombra de bienvenida será una adición útil a su página o plantilla. Divi facilita el diseño y la ubicación de la alfombra de bienvenida utilizando el generador 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 escuchar de usted en los comentarios.

¡Salud!