Cómo añadir una barra flotante en Elementor

Una barra flotante es un banner que se fija en la parte superior o inferior de una página web y suele utilizarse para mostrar información promocional, anuncios importantes o llamadas a la acción (CTA) para atraer la atención de los visitantes sin interrumpir la experiencia de navegación.

Tenga en cuenta que la barra flotante es una plantilla, no un widget (Widget) u otros elementos. Debe estar en el WordPress Añádelo en el backend, no puedes añadirlo en el Elementor creados directamente en el editor.

Escenarios comunes de uso

Un ejemplo:
Jan tiene una tienda de ropa. La previsión meteorológica indica que lloverá en las próximas semanas, por lo que añade una barra flotante a su sitio web para recordar a los visitantes que venden paraguas. Esta barra flotante aparece en la parte inferior de todas las páginas.

Otros escenarios de uso::

• Promociones: los códigos de descuento pueden mostrarse en la barra flotante
• Saltos de navegación: dirigir a los usuarios a nuevas secciones o páginas especiales.
• Acción desencadenante: Configuración CTA botón que dirige al usuario a suscribirse o hacer clic en la función de chat

Añadir una barra flotante: Guía paso a paso

A continuación se muestra un ejemplo completo donde creamos una barra flotante que dirige al usuario a chatear con el servicio de atención al cliente. Esta barra flotante se realiza en base a una plantilla predefinida proporcionada por Elementor.

Atención:

• La barra flotante se crea a partir de una plantilla existente
• El contenido puede personalizarse, pero la estructura debe seleccionarse de la biblioteca de plantillas

Paso 1: Crear una plantilla flotante

Como la Barra Flotante es un tipo de plantilla, primero tiene que crear una plantilla.

• Regístrese WordPress Entre bastidores:
  Plantillas > Elementos flotantes

• Haz clic en el botón de la derecha:Añadir nuevo elemento flotante

• Seleccione en el menú desplegable:Barras flotantes

• (Opcional) Nombre la barra flotante, por ejemplo, "Barra promocional Umbrella".

• golpe (en el teclado)Crear elemento flotante

El sistema abre automáticamente Elementor biblioteca de plantillasy vaya a la categoría Barras flotantes. En este punto debe seleccionar una plantilla de la lista.

Consejo: Las plantillas marcadas con "Pro" sólo están disponibles para Elementor Pro Uso del usuario.

Paso 2: Insertar la plantilla

• Pase el ratón por encima de una plantilla favorita y haga clic en el iconoInserte

• La plantilla se carga en el editor de Elementor.

Paso 3: Editar el contenido de la barra flotante

La barra flotante puede ajustarse libremente en función de la plantilla seleccionada en la pantallaicono (informática)texto, botones CTA y posiciones, entre otras cosas.

A continuación se muestra la operación del ejemplo:

1. Modificación del icono

• Encuentre el panel en el Icono Campo de iconos

• Haz clic en el botón de iconos de la derecha para abrir la galería de iconos

• Busca y selecciona el icono del paraguas y haz clic en "Insertar".

2. Modificación del texto de la pancarta

• localice Campo Anuncio (contenido del anuncio)
• La modificación dice:Eche un vistazo a nuestros paraguas.(¿Se avecina tormenta? Ven a ver nuestros paraguas).

3. Configuración del botón CTA

• mostrar (una entrada) Campo del botón CTA

• Modifica el texto del botón a:Mantente seco.

• Añadir enlaces de páginas de salto a enlaces de botones

4. Modificación de la ubicación de la pantalla

• Cambiar a Ficha Avanzado

• Haga clic en el icono inferior (que representa la colocación de la barra flotante en la parte inferior de la página)

• Verá la barra flotante en la parte inferior del navegador durante la vista previa.

Paso 4: Publicar y establecer las condiciones de visualización

• Pulse el botón Publicar en la esquina superior derecha.

• En la ventana emergente, haga clic enAñadir condición

Si utiliza el Elementor ProPuede establecer en qué páginas, artículos, categorías se mostrará la barra flotante. Por ejemplo: mostrarla sólo en la página de inicio, o mostrarla en la página de producto.

• Tras establecer las condiciones, haga clic enGuardar y cerrar

En este caso, la barra flotante aparecerá en la página especificada para atraer la atención del visitante.

corto

Floating Bar es una solución front-end no intrusiva para mostrar promociones, anuncios y botones interactivos. Se basa en plantillas para crear, pero tiene libertad de contenido y estilo. Utilice Elementor Pro los usuarios pueden establecer las condiciones de visualización y los intervalos de páginas para que se ajusten mejor al estilo del sitio web.

Contacte con nosotros
¿No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de pequeñas empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) Correo electrónico: [email protected]
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres