Poner un banner HTML Elementor código WordPress fijo abajo

Poner un banner HTML Elementor código WordPress fijo abajo.

Si solo tienes acceso a un elemento HTML dentro de Elementor (sin acceso al backend de WordPress ni a funciones avanzadas), puedes insertar un banner fijo en la parte inferior de la pantalla utilizando HTML + CSS directamente en ese widget HTML.

Aquí te paso un código que puedes copiar y pegar en tu widget HTML de Elementor:

htmlCopiarEditar<div id="banner-fijo">
  📢 ¡Oferta especial por tiempo limitado! <a href="https://tuenlace.com">Haz clic aquí</a>
</div>

<style>
  #banner-fijo {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #ff4d4f;
    color: white;
    text-align: center;
    padding: 15px;
    font-weight: bold;
    z-index: 9999;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.3);
  }

  #banner-fijo a {
    color: #ffffff;
    text-decoration: underline;
    margin-left: 10px;
  }

  #banner-fijo a:hover {
    text-decoration: none;
  }
</style>

¿Qué hace este código?.

El <div id="banner-fijo"> es el banner que estará fijo al fondo de la pantalla.
Está estilizado para ser visible, llamativo y estar siempre abajo, sin importar el contenido de la página.
El enlace es personalizable. Puedes cambiar el texto, color o el enlace según lo que necesites.

Recomendaciones:

Asegúrate de colocarlo en una página o plantilla que se cargue en todo el sitio (si es lo que deseas).
Si no aparece, asegúrate de que el widget HTML esté visible y no dentro de una sección con visibilidad condicional.

Aquí tienes un código listo para insertar en tu widget HTML de Elementor. Muestra un banner fijo abajo con tu mensaje, y un botón “OK” que puedes dejar funcional o incluso hacer que desaparezca el banner si quieres más adelante.

✅ Código HTML + CSS:

htmlCopiarEditar<div id="banner-fijo">
  <p>Estamos acondicionando nuestra tienda virtual para la promoción virtual del sábado. Por favor, tenga paciencia.</p>
  <button id="boton-ok">OK</button>
</div>

<style>
  #banner-fijo {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #222;
    color: white;
    text-align: center;
    padding: 20px 10px 15px;
    font-family: sans-serif;
    z-index: 9999;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.3);
  }

  #banner-fijo p {
    margin: 0 0 10px;
    font-size: 16px;
  }

  #boton-ok {
    background: #ffffff;
    color: #222;
    border: none;
    padding: 10px 20px;
    font-weight: bold;
    border-radius: 5px;
    cursor: default;
  }
</style>

¿Qué hace este código?.

Muestra el mensaje fijo al fondo de la pantalla, centrado y claro.
Tiene un botón “OK” que por ahora no hace nada al hacer clic (solo está visual).
Es responsive y visible tanto en PC como en móviles.

¿Quieres que el botón “OK” oculte el banner al hacer clic?.

Aquí tienes la versión interactiva con un poco de JavaScript:

htmlCopiarEditar
<div id="banner-fijo">
  <p>Estamos acondicionando nuestra tienda virtual para la promoción virtual del sábado.</p>
  <button id="boton-ok">OK</button>
</div>

<style>
  #banner-fijo {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #222;
    color: white;
    text-align: center;
    padding: 20px 10px 15px;
    font-family: sans-serif;
    z-index: 9999;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.3);
  }

  #banner-fijo p {
    margin: 0 0 10px;
    font-size: 16px;
  }

  #boton-ok {
    background: #ffffff;
    color: #222;
    border: none;
    padding: 10px 20px;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
  }
</style>

<script>
  document.getElementById('boton-ok').addEventListener('click', function() {
    document.getElementById('banner-fijo').style.display = 'none';
  });
</script>