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.

 

 

suscripción 10€/mes cursos joaquin barberá horizonweb

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.

 

 

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.

DESCUENTOS PLANES ELEGANT THEMES

 

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.

 

 

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

 

 

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.

 

poner imagen en ventana fly-in

Añadir imagen a la ventana emergente tipo fly-in

 

iv.- Vista previa: puedes hacer clic en el icono en forma de ojo, que aparece en la parte superior derecha de la interfaz, para ver cómo está quedando la ventana deslizante o ventana fly-in en WordPress.

 

vi.- optin styling: en este bloque tenemos varios selectores de configuración, que se refieren a opciones de diseño de la parte superior de la ventana. Es decir, la parte en la que aparece la imagen, el título y el texto situado bajo el título.

Las opciones más importantes son la de “Background” para elegir el color de fondo de esa parte superior del formulario, y la opción de “Text color” para seleccionar un color oscuro o claro sobre ese fondo.

 

Parte superior de la ventana fly-in

Diseño parte superior de la ventana slide in

 

v.- Form styling: en este apartado personalizaremos el diseño de la parte inferior de la ventana deslizante Fly-in.

Las opciones relacionadas con botones no las tengas en cuenta, pues no estamos creando un formulario de suscripción.

Te interesan las opciones: “Form text color” para establecer el color del texto que aparece en la parte inferior de la ventana deslizante y que escribimos en la pestaña “SETUP”. Con el selector “Form Backgroung color” estableceremos el color de fondo de esta parte inferior de la ventana deslizante con WordPress.

 

vi.- Choose Form Edge Style: aquí podremos elegir el diseño que separará la parte superior de la ventana deslizante, de la parte inferior.

 

colores parte inferior ventana slide in

Diseño parte inferior de la ventana deslizante

 

vii.- Form footer text: aquí puedes poner el texto que aparecerá en la parte inferior de la ventana fly-in de Bloom.

 

viii.- Custom CSS: en esta área de texto podremos añadir código CSS para realizar modificaciones en el diseño de la ventana deslizante o emergente.

En el punto 4 de este post, veremos algún truquillo para añadir a esta ventana CSS

 

 

3.4.- Configurar condiciones de visualización de la ventana deslizante o fly-ins

 

En la pestaña: “DISPLAY SETTINGS”, configuraremos cuando se va a mostrar la ventana emergente tipo Fly-in.

 

Vamos a ver las principales opciones de configuración:

i.- Choose Orientation: aquí seleccionaremos si queremos que la ventana Fly-in aparezca desde la parte inferior izquierda, derecha o central de la pantalla.

 

ii.- Intro Animation: en este selector elegiremos que tipo de animación reproducirá la ventana emergente mientras aparece en pantalla.

 

Lo habitual es que la ventana deslizante se muestre cuando pase un determinado lapso de tiempo desde que el visitante accede a la web, para lo cual realizaremos la siguiente configuración. Aunque, existen más posibilidades de configuración del lanzamiento de la ventana Fly-in

iii.- Trigger After time Delay: marcaremos esta opción para que la ventana se muestre después de un determinado tiempo trascurrido desde que el visitante accede a la web.

 

iv.-  Delay (in seconds): tiempo a partir del cual se mostrará la ventana emergente. Es decir, si ponemos “3”, cuando el visitante lleve 3 segundos en la web aparecerá la ventana.

Desactivaremos las opciones: Trigger After Inactivity, Trigger At The Bottom of Post, Trigger After Commenting, Trigger After Scrolling, Trigger After Purchasing y Trigger On Click, que son otras opciones de lanzamiento de la ventana.

v.- Display once per session: es importante marcar esta opción, para que la ventana emergente solo se muestre a cada visitante 1 vez por sesión. Es decir, para que no se muestre al visitante cada vez que cambia de página en nuestro sitio web.

 

vi.- Session Duration (in days): en este apartado estableceremos el tiempo de duración de una sesión. Es decir, si ponemos “1”, la ventana emergente solo se mostrará 1 vez a un determinado visitante durante el mismo día.

 

vii.- Display on: aquí podemos establecer en qué páginas se ha de mostrar la ventana Fly-ins. Si marcamos “Everything”, la ventana se mostrará en cualquier página o entrada de WordPress.

 

 

4.- Trucos código CSS para personalizar diseño ventana deslizante o Fly-ins con Bloom

 

Para personalizar los elementos de la ventana emergente es necesario añadir código CSS al área de texto “CUSTOM CSS” situada en la pestaña “DESING”.

Voy a indicaros algunos códigos interesantes que he encontrado en sitios webs especializados sobre Bloom

 

i.- Código para personalizar el título de la ventana emergente: Este código se debe añadir al área de texto CUSTOM CSS. Con este código podéis cambiar el tamaño del texto, en el ejemplo está en 30px, pero lo podéis cambiar por el que queráis:

 

.et_bloom .et_bloom_form_header h2 {font-size:30px!important;}

 

NOTA: si tenéis conocimientos de CSS, podéis añadir más elementos de personalización del texto, a parte del tamaño.

 

ii.- Código para personalizar el texto bajo el título: Este código se debe añadir al área de texto CUSTOM CSS. Con este código se puede personalizar el tamaño del texto que aparece bajo el título. En el ejemplo está en 17px, pero lo podéis cambiar por el que queráis.

 

.et_bloom .et_bloom_form_header p {font-size:17px;}

 

NOTA: si tenéis conocimientos de CSS, podéis añadir más elementos de personalización del texto, a parte del tamaño.

 

iii.- Añadir botón de acción en la parte inferior: Este código se debe añadir en la pestaña: “SETUP”, en el área de texto bajo el selector “Select Email Provider”.

<a href="https://cursotiendaonline.com/escritorio-noticias/" target="_blank" style="border: 1px solid #EA9738; padding: 10px; background-color: #EA9738; color: #ffffff; text-decoration: none; border-radius: 50px; /*bordes redondos*/">VER VÍDEOS DE NOTICIAS</a>

 

NOTA: modificar la url de destino en href, y el texto de enlace o anchor text: VER VÍDEOS DE NOTICIAS

 

 

Compártelo ya!!

RECIBE GRATIS CURSO WORDPRESS/DIVI Y MÁS:

 1.- CURSO WORDPRESS Y DIVI (22 vídeos)

2.- GUÍA PARA CREAR UNA PÁGINA WEB PROFESIONAL

3.- VÍDEO TRAINING, MIS PLUGINS IMPRESCINDIBLES WORDPRESS

4.- GUÍA TALLER SEO PARA WORDPRESS

Consentimiento

Vé a tu buzón de correo y confirma la suscripción. Si no encuentras el correo de confirmación mira en la carpeta de SPAM.

ACCEDE A TODOS MIS CURSOS POR SOLO 10€/MES

1.- CURSO WORDPRESS (44 Clases)
2.- CURSO DIVI (33 Clases)
3.- CURSO ELEMENTOR (14 Clases)
4.- CURSO BLOOM + MAILCHIMP (7 Clases)
5.- CURSO SEO (19 Clases)
6.- CURSO BLOG WORDPRESS (32 Clases)
7.- CURSO WOOCOMMERCE (39 Clases)
8.- CURSO FLATSOME WORDPRESS (36 Clases)
9.- CURSO COLORES WEB (9 Clases)
10.- CURSO ANALYTICS (10 Clases)
11.- CURSO SEO PARA TIENDAS ONLINE (12 Clases)
12.- ETC. ETC.
*** ADEMÁS TIENES MI SOPORTE VÍA EMAIL***

IR A LOS CURSOS

Vé a tu buzón de correo y confirma la suscripción. Si no encuentras el correo de confirmación mira en la carpeta de SPAM.