Cómo añadir una barra de anuncios para todo el sitio y una notificación superior utilizando el código personalizado de Elementor

¿Sabes cómo usarlo?Elementor ¿Debería añadirse un banner de anuncios destacado en la parte superior del sitio web? La función Código personalizado de Elementor ofrece un método seguro y flexible para implementar un banner en todo el sitio sin modificar los archivos del tema. Este artículo le guiará paso a paso desde cero sobre cómo utilizar el Código personalizado para añadir una notificación superior totalmente funcional y visualmente atractiva.

I. ¿Por qué utilizar el código personalizado de Elementor para crear banners de anuncios?

En comparación con los plugins o la modificación manual de los archivos de temas, el código personalizado es más adecuado para principiantes y ofrece mayor seguridad y estabilidad. Presenta las siguientes ventajas:

• Aplicable a cualquier tema, y no quedará obsoleto debido a las actualizaciones del tema.
• Se puede cargar en todo el sitio de una sola vez, lo que elimina la necesidad de editar la página repetidamente.
• Compatible con HTML, CSS y JavaScript, lo que ofrece amplias capacidades de personalización.
• Se pueden controlar las condiciones de visualización, como mostrar solo en la página de inicio.
• Ligero y eficiente en cuanto a recursos, ofrece mayor eficiencia que la instalación de complementos adicionales.

Extremadamente útil para situaciones como campañas de marketing, promociones navideñas y anuncios logísticos.

II. Cómo funciona la función de anuncios en todo el sitio

Los elementos de aviso suelen constar de tres partes:

• Bloque HTML como contenido del anuncio
• CSS controla el estilo y el posicionamiento fijo.
• Al inyectar código personalizado, este aparece en la parte superior de cada página.

Solo tienes que escribirlo una vez y Elementor lo cargará automáticamente en todo el sitio.

III. Trabajo preparatorio para crear código personalizado

Necesitarás:

• Instalado Elementor(La versión gratuita será suficiente)
• Privilegios de administrador de backend
• Especifique el texto de los anuncios promocionales, como «Envío gratuito para pedidos superiores a X £» o «Novedades ya disponibles».

No se requieren conocimientos de programación; simplemente copie el código.

4. ¿Cómo añadir un anuncio utilizando código personalizado?

4.1 Acceder a la página Código personalizado

En el backend, abre lo siguiente en orden: Elementor → Código personalizado → Añadir nuevo. Introduce un nombre, como «Barra de anuncios para todo el sitio».

4.2 Configuración de la ubicación de colocación del código

Seleccionar en Ubicación:Extremo del cuerpo (recomendado)Este enfoque no afectará a la velocidad de carga de la página y facilita la implementación de un efecto de encabezado fijo.

4.3 Añadir estructura HTML para elementos de anuncio

Pega lo siguiente en el editor de código:

<div class="site-announcement-bar">
  <span>🎉 Envío gratuito en todos los artículos por tiempo limitado: ¡oferta ya disponible!</span>
  <a href="/es/tienda/" class="notice-btn">Ver ahora</a>
</div>

Se trata de una estructura sencilla, adecuada para mostrar eventos, avisos o enlaces de salto.

4.4 Añadir estilos CSS

Para mantener la barra de anuncios fija en la parte superior, aplica los siguientes estilos junto con los ya existentes: HTML Colocados juntos:

.site-announcement-bar {   posición: fija;   arriba: 0;   izquierda: 0;   ancho: 100%;
  background: #155111; colour: #ffff; padding: 10px 0; text-align: centre; font-size: 15px; z-index: 9999; } .site-announcement-bar .notice-btn { margin-left: 12px;
  relleno: 6px 14px; fondo: #f4c21d; color: #000; radio del borde: 4px; decoración del texto: ninguna; peso de la fuente: negrita; }

Mostrará una barra de notificaciones superior con fondo negro y texto blanco, con botones amarillos para lograr un efecto visual claro y llamativo.

V. Añadir un botón de cierre a la sección de avisos (opcional)

Para permitir a los usuarios cerrar manualmente la barra de anuncios, incorpore el siguiente contenido.

5.1 Añadir botón Cerrar HTML

×

Coloca este botón dentro de la barra de anuncios.

VI. Evite que el contenido quede oculto por barras de anuncios.

Las secciones de anuncios fijadas en la parte superior pueden ocultar el contenido de la página; se puede aplicar el siguiente estilo:

cuerpo { relleno superior: 50 píxeles; }

Ajuste las cifras según la altura del panel de avisos.

VII. Método para mostrar elementos de anuncio solo en páginas específicas

Si no desea que la barra de anuncios aparezca en todas las páginas, puede establecer condiciones:Elementor Código personalizado → Condiciones

Selecciona:

• Todo el sitio
• Portada
• Singular (página de un solo artículo)

Esto permite una configuración más precisa para eventos, días festivos y colecciones de productos.

VIII. Soluciones a problemas comunes

1. ¿No se muestra la sección de anuncios?

Verificable:

• ¿Se ha publicado el código personalizado?
• ¿Se ha seleccionado correctamente la posición de carga (siendo la parte trasera del vehículo la más estable)?
• ¿Hay algún estilo que esté siendo anulado por el tema?

2. ¿La versión móvil tiene un diseño deficiente?

Optimiza las fuentes y los diseños utilizando consultas de medios:

@media (ancho máximo: 768 píxeles) {   .site-announcement-bar {     tamaño de fuente: 13 píxeles;     relleno: 8 píxeles 0;   } }

3. ¿Quieres que la barra de anuncios sea más visible?

Se puede añadir:

• Fondo degradado
• Efecto de texto desplazable
• Módulo de cuenta atrás
• Icono de actividad

Simplemente ajuste el CSS para mejorar la apariencia visual.

IX. Resumen

Código personalizado de Elementor Una herramienta potente y ligera, que solo requiere unas pocas líneas de HTML y CSS para crear un banner de anuncios para todo el sitio. No es necesario modificar los archivos del tema ni instalar plugins adicionales, lo que la hace ideal para sitios de comercio electrónico, plataformas de contenido y páginas de marketing. Siguiendo los pasos de este artículo, podrás configurar rápidamente tu propio sistema de notificaciones para el sitio web, diseñar libremente su estilo y ámbito de visualización, y garantizar que los usuarios vean el contenido importante de un solo vistazo.

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: info@361sale.com
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres