Vamos a ver en este post, cómo podemos añadir una ventana deslizante o Fly-ins en WordPress utilizando el plugin Bloom.

Las ventanas deslizantes, Fly ins o Slide ins son mucho menos intrusivas que las ventanas emergentes, también conocidas como Pop Ups. Al mismo tiempo, al ser menos utilizadas, llaman más y mejor la atención del visitante a la web, que es de lo que se trata con este tipo de avisos.

 

 

 

DISFRUTA DE TODOS MIS CURSOS PREMIUM POR SOLO 10€/MES


VER CURSOS

 

 

 

 

1.- ¿Qué es y cómo funciona una Fly-ins, Slide-ins o ventana deslizante?

 

Accede a esta página, espera unos 6 o 7 segundos y verás que en la parte inferior derecha, de repente, aparece una ventana deslizándose desde el footer de la web hacia arriba.

Pues eso es una ventana deslizante, Fly-ins o Slide-ins. Como puedes observar, tiene la misma finalidad que un Pop-up pero es mucho menos intrusiva. Es decir, molesta menos al visitante y por tanto le predispone menos a cerrarla sin leer su contenido.

Además, al ser un sistema mucho menos usado que el pop-up o ventana emergente normal, está mejor visto por el visitante a la web y llama la atención de igual manera.

Ten en cuenta, que el pop-up es un sistema que se ha masacrado en las webs y que el usuario asocia habitualmente con el Spam e información no deseada.

En el ejemplo, aparece en el Fly-ins un formulario de suscripción. Pero nosotros veremos en este post cómo crear una ventana deslizante con un texto e imagen. Pero, sin formulario de suscripción.

DESCUENTOS DIVI + BLOOM

 

 

2.- El Plugin Bloom y el triggers Fly-ins

 

Si tienes una cuenta de Elegant Themes, además de disfrutar de la super plantilla Divi y el Divi builder, también podrás utilizar el plugin Bloom para WordPress.

 

 

Este plugin Bloom para WordPress, está orientado al email Opt-in. Es decir, está orientado a la creación de formularios de suscripción para email marketing.

El plugin Bloom permite conectar la herramienta con la inmensa mayoría de plataformas de email Marketing como: MailChimp, Active Campaign, Aweber, etc.

El plugin, también permite la utilización de tipologías de ventanas: Pop-up, fly-ins, inline, widget, etc.

Nosotros, utilizaremos el tipo de ventana Fly-ins (ventana deslizante). Pero, quitaremos el formulario de suscripción y pondremos un texto personalizado.

SUPER DESCUENTO DIVI

 

 

3.- Cómo configurar una ventana deslizante, Fly-ins o Slide in con Bloom y WordPress

 

Vamos a ver ahora el proceso de configuración de la ventana deslizante con el plugin bloom. Dividiremos el proceso en una serie de apartados.

 

 

3.1.- Crear una nueva ventana deslizante (Fly-in) con Bloom / pestaña “SETUP”

 

En primer lugar, vamos a crear la ventana deslizante para WordPress. Para ello, seguiremos los siguientes pasos:

 

i.- Pantalla de Bloom: Una vez instalado y activo el plugin Bloom, para crear una nueva ventana iremos a: “Bloom > Optin Forms”, en el menú lateral izquierdo del panel de administración de WordPress.

 

ii.- Crear nueva ventana: A continuación, haremos clic en el botón: “NEW OPTIN”.

 

iii.- Seleccionar tipo de ventana: Haremos clic en el tipo de ventana “FLY IN”.

 

seleccionar ventana fly-in

Seleccionar tipo de ventana emergente Fly-in

 

A continuación, estaremos en la primera pestaña de configuración, denominada: “SETUP”. Las diferentes pestañas las puedes ver en el lateral izquierdo de la interface.

 

iv.- Optin Name: en el campo “Optin Name” pon un nombre que te sirva para identificar esta ventana de otras que puedas crear posteriormente. Este nombre no se mostrará públicamente.

 

vi.- Form Integration: en el selector denominado “Select Email Provider”, seleccionaremos la opción “Custom HTML Form”. Es decir, para que no se nos muestre ningún formulario de suscripción, elegiremos la opción “Formulario con HTML Personalizado” (Custom HTML Form) y luego aquí podremos el texto que queramos.

Este texto aparecerá en el bloque inferior de la ventana deslizante en WordPress.

 

 

3.2.- Personalizar texto inferior ventana deslizante en WordPress con Bloom

 

En el área de texto situado debajo del selector de proveedor de email marketing (Select Email Provider) podrás introducir texto HTML o texto normal sin formatear. Pero, cualquier tipo de formateo del texto lo tendrás que hacer vía HTML.

Si no tienes muchos conocimientos de HTML, puedes escribir un texto con el editor de WordPress, formatearlo, y después copiar el código HTML y pegarlo en esta ventana de Bloom.

Este texto se mostrará en la parte inferior de la ventana de aviso.

A continuación, haz clic en el botón: “NEXT: DESIGN YOUR OPTIN” para ir a la pestaña de diseño de la ventana. Es lo mismo, que si hacemos clic en la pestaña lateral izquierda: “DESIGN”

 

Personalizar texto de la parte inferior del fly-in

Texto parte inferior de la ventana deslizante o Fly-ins

 

SUPER DESCUENTO DIVI

 

 

3.3.- Personalizar diseño parte superior de la ventana deslizante

 

Vamos a ver los apartados más importantes de la pestaña “DESIGN” de la personalización de la ventana deslizante o Fly-in.

i.- Optin Title: Aquí podremos establecer el título que se mostrará en la ventana deslizante. Este título aparecerá en la parte superior de la ventana. Aunque, podemos hacer que aparezca una imagen por encima de este título

 

ii.- Optin Message: texto que aparecerá debajo del título, del apartado anterior

 

texto título ventana emergente y descripción

Personalizar texto título de la ventana fly-in y del texto bajo el título

 

iii.- Image settings: si ponemos el selector en “No image” no se añadirá ninguna imagen. Pero si ponemos el selector en cualquier otra posición, se añadirá una imagen a la ventana.

En nuestro ejemplo, hemos seleccionado: “Image above text” para que la imagen se muestre por encima del título.

A continuación, con el botón: “Upload image” he subido la imagen. La opción “Image Load-in Animation” sirve para elegir con qué efecto va a aparecer la imagen.