Una puerta de bienvenida es una forma efectiva de aumentar 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 un llamado a la acción a pantalla completa. Esto obliga al usuario a interactuar con el 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 aumentar las conversiones de sus CTA en las páginas de destino.

Descargar el tutorial GRATIS

Para descargar el fichero JSON de este tutorial, será necesario descargarlo usando el botón de descarga, suscribiendose a nuestra lista de correo electrónico mediante el siguiente formulario. 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 «volverá a suscribir» ni recibirá correos electrónicos adicionales.

Vistazo

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

puerta de bienvenida divi

puerta de bienvenida divi

puerta de bienvenida divi

Lo que necesitas para empezar

Para comenzar, deberá hacer lo siguiente:

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

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.

puerta de bienvenida divi

Diseña 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 para trabajar en el futuro.

Antecedentes

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

  • Gradiente de fondo Color izquierdo: rgba (0,17,38,0.7)
  • Gradiente de fondo Color correcto: # 001126
  • Posición de inicio: 68%
  • Coloque el gradiente sobre la imagen de fondo: SÍ
  • Imagen de fondo: [insertar imagen]

puerta de bienvenida divi

Acolchado y Animación

A continuación, salte 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 de inicio de animación: 100%;

puerta de bienvenida divi

Coloque la sección de 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 hace clic en el botón «No, gracias».

Agregue el siguiente CSS personalizado al elemento principal:

01
02
03
04
05
06
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 oculte también el encabezado, puede agregar un índice Z más alto como “99999”.

puerta de bienvenida divi

Crear el contenido de Welcome Gate

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 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:

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

puerta de bienvenida divi

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: 24 px (escritorio), 18 px (teléfono)
  • Alineación de texto: centro
  • Título 2 Fuente: Cabin
  • Título 2 Peso de la fuente: negrita
  • Título 2 Color del texto: #ffffff
  • Encabezado 2 Tamaño del texto: 66 px (escritorio), 26 px (tableta)

puerta de bienvenida divi

Agregar fila de dos columnas

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

puerta de bienvenida divi

Agregar botón izquierdo

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

  • Texto del botón: «¡mmm! Vamos a reservarlo «

puerta de bienvenida divi

  • 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 fuente del botón: negrita

puerta de bienvenida divi

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

01
display: block !important;

puerta de bienvenida divi

Añadir 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)

puerta de bienvenida divi

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)

puerta de bienvenida divi

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

  • Clase CSS: gracias

puerta de bienvenida divi

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 no gracias.

puerta de bienvenida divi

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

 

<style>
.move-gate {
arriba: -100vh! importante;
transición: todos los 1s;
}
</style>
<script>
jQuery (documento) .ready (función ($) {
$ (‘. nothanks’). click (function () {
$ (‘# welcome-gate’). addClass (‘move-gate’);
});
});
</script>

 

puerta de bienvenida divi

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áx .: 600px

puerta de bienvenida divi

Por Prunaestudio

Por Prunaestudio

Prunaestudio es un estudio de diseño web ubicado en Valencia (España). Estamos especializados en el diseño web basado en WordPress con la plantilla premium de Elegantthemes, Divi.

* Todos el contenido pertenece y se ha traducido del blog de Elegantthemes (Divi Resources)

Nuestras últimas entradas

You have Successfully Subscribed!