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
AÑADIR VENTANAS EMERGENTES FLY-IN CON BLOOM Y WORDPRESS
- 1.- Diferencia con el PopUp o ventana emergente ¿Qué es y cómo funciona una Fly-ins, Slide-ins o ventana deslizante?
- 2.- El Plugin Bloom y el triggers Fly-ins - slide-in
-
3.- Cómo configurar una ventana deslizante, Fly-ins o Slide in con Bloom y Wordpress
- 3.1.- Crear una nueva ventana deslizante (Fly-in) con Bloom / pestaña “SETUP”
- 3.2.- Personalizar texto inferior ventana deslizante en Wordpress con Bloom
- 3.3.- Personalizar diseño parte superior de la ventana deslizante
- 3.4.- Configurar condiciones de visualización de la ventana deslizante - fly-ins - slidein
- 4.- Trucos código CSS para personalizar diseño del slide-in o Fly-ins con Bloom
1.- Diferencia con el PopUp o ventana emergente ¿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 – slide-in
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” (Si quisieras crear un popup deberías hacer clic sobre dicha opción).
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 hubieras elegido la opción de PopUp o ventana emergente, esta parte que vamos a hacer ahora sería igual que al haber elegido la opción de ventana deslizante o slide in. 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”
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. Si hubieras elegido crear un popup, las opciones que vamos a ver ahora serían las mismas.
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
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.
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.
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.
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 – fly-ins – slidein
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.
SUPER DESCUENTO DIVI
4.- Trucos código CSS para personalizar diseño del slide-in 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”.
NOTA: modificar la url de destino en href, y el texto de enlace o anchor text: VER VÍDEOS DE NOTICIAS
DESCUENTOS DIVI Y BLOOM + REGALO
Soy Blogger y formador profesional. Me gustaría que este blog te sirviera para conocer más de cerca el mundo del diseño web y de WordPress. Mi proyecto online es una plataforma de formación online tipo membership site, denominada cursotiendaonline.com donde podrás acceder a todos los cursos por solo 10 €/mes
