Añadiendo una cabecera y un pie de página fijos

[Shaneod (Shane)]

Hola a todos,

Estoy pensando en alojar algunos anuncios. Estoy usando el plugin oficial de anuncios, que es genial porque te permite agregar activos en varios puntos del sitio.

Sin embargo, hablando con la agencia de publicidad, parece que para obtener la mejor visibilidad de los anuncios en dispositivos móviles, que es la mayor parte de mi tráfico, es usar anuncios “sticky” (fijos) en la cabecera o en el pie de página.

El problema, por supuesto, es que un anuncio fijo en el pie de página se superpondrá a botones importantes e impactará la experiencia del usuario, lo cual es un no-no.

¿Hay alguna forma de agregar un relleno en la parte inferior del sitio, del tamaño de un banner, para que el banner fijo no afecte a los elementos importantes de la experiencia del usuario? No quiero que los usuarios tengan que cerrar el anuncio del banner antes de poder responder o usar el contador de publicaciones para desplazarse por un hilo.

Además, con la cabecera fija en Discourse, ¿se verá afectada por un banner fijo o el banner podría colocarse encima de la barra de navegación de Discourse?

¿O es algo que la agencia de publicidad debería poder resolver con su tecnología publicitaria?

Gracias,

Shane

[Shaneod (Shane)]

Creo que podría agregar un poco de relleno en la parte inferior del cuerpo para que el banner de anuncios fijo en el pie de página no se superponga a los botones de respuesta y luego, en el cuadro de control de respuesta que aparece, podría establecer un índice z para que aparezca sobre el anuncio del banner.

Solo me pregunto si alguien ha implementado con éxito anuncios de banner fijos en la cabecera o en el pie de página en dispositivos móviles sin afectar la experiencia del usuario.

[Don]

Hola

Es posible pero depende de muchas cosas. ¿Puedes compartir la URL de tu sitio?

Usaría un “plugin outlet” y colocaría el banner dentro. Establece la altura del “plugin-outlet” igual a la altura del banner, esto agregará los espacios necesarios.

Algo como esto. Nota: Este es solo un ejemplo rápido, espero que te dé algunas ideas para lograrlo. Podemos hacer más si compartes más información y la URL de tu sitio para revisarlo, etc…

Móvil / Encabezado

<script type="text/x-handlebars" data-template-name="/connectors/above-site-header/top-banner">
  <div class="test-top-banner"></div>
</script>

<script type="text/x-handlebars" data-template-name="/connectors/below-footer/bottom-banner">
  <div class="test-bottom-banner"></div>
</script>

Móvil / CSS

body {
  --banner-height: 40px;
  
  .d-header-wrap {
    top: var(--banner-height);
  }

  .above-site-header-outlet.top-banner {
    @include sticky;
    top: 0;
    width: 100%;
    height: var(--banner-height);
    z-index: z("header");
    .test-top-banner {
      width: 100%;
      height: var(--banner-height);
      background: red;
    }
  }

  .below-footer-outlet.bottom-banner {
    @include sticky;
    bottom: env(safe-area-inset-bottom);
    width: 100%;
    height: var(--banner-height);
    z-index: z("header");
    .test-bottom-banner {
      width: 100%;
      height: var(--banner-height);
      background: red;
    }
  }
  
  #topic-progress-wrapper:not(.docked) {
    margin-bottom: var(--banner-height);
  }  
}

[Shaneod (Shane)]

Hola @Don: gracias por tu respuesta. Estaba pensando que algo así podría ser necesario.

[Shaneod (Shane)]

Hola @Don ¿Cómo funcionaría esa implementación al intentar responder en el móvil?

[Don]

Funciona, pero la barra superior hace que el editor sea más pequeño.

Probablemente sea mejor ocultar la barra cuando el editor está abierto.

Hay una clase .composer-open que puedes usar aquí para ocultar la barra cuando el editor está abierto.

Móvil / CSS

body {
--banner-height: 40px;
  // Encabezado
  .d-header-wrap {
    top: var(--banner-height);
    transition: top 0.25s ease-in;
    .composer-open & {
      top: 0;
    }
  }
  // Banner superior
  .above-site-header-outlet.top-banner {
    @include sticky;
    top: 0;
    width: 100%;
    height: var(--banner-height);
    transition: height 0.25s ease-in;
    z-index: z("header");
    .test-top-banner {
      width: 100%;
      height: var(--banner-height);
      background: red;
      transition: height 0.25s ease-in;
      .composer-open & {
        height: 0;
      }
    }
    .composer-open & {
      height: 0;
    }
  }
  // Banner inferior
  .below-footer-outlet.bottom-banner {
    @include sticky;
    bottom: env(safe-area-inset-bottom);
    width: 100%;
    height: var(--banner-height);
    z-index: z("header");
    .test-bottom-banner {
      width: 100%;
      height: var(--banner-height);
      background: red;
    }
  }
  // Mover el contenedor de progreso del tema a la parte superior del banner inferior
  #topic-progress-wrapper:not(.docked) {
    margin-bottom: var(--banner-height);
    .composer-open & {
      margin-bottom: 0;
    }
  }
  // Añadir altura de banner al cálculo de la altura máxima del editor
  &:not(.ios-safari-composer-hacks) #reply-control.open {
    max-height: calc(100vh - var(--header-offset) + var(--banner-height));
  }
}

Editar: Hice algunas correcciones en el código.

[Shaneod (Shane)]

¡Ah, hombre, mil gracias por esta ayuda, es genial!

[Shaneod (Shane)]

Hola @Don: estoy probando que eso funcione perfectamente en el móvil, solo lo estoy añadiendo a escritorio y parece que debería funcionar, pero hay un pequeño problema cuando respondes, a diferencia del móvil donde el área fija desaparece, en escritorio permanece en su lugar, ¿hay un gancho CSS para que el compositor se abra en escritorio?

[Shaneod (Shane)]

Hola @Don: ¿tienes alguna idea de cómo cerrar el pie de página en la versión de escritorio? La versión móvil funciona muy bien, pero no logro averiguar cómo eliminar el elemento fijo cuando abres el cuadro de respuesta en la versión de escritorio al hacer clic en responder. Está más allá de mis habilidades de CSS.

Gracias.

[Don]

Hola @Shaneod

Lamento la demora. El código que escribí anteriormente se colocó en la sección móvil, por lo que solo funcionaba en dispositivos móviles. Cambié el código para que también se ajuste a los ordenadores de escritorio. Debes colocar esto en la sección común y eliminar el existente de la sección móvil.

Aquí está la versión actualizada que funciona tanto en ordenadores de escritorio como en dispositivos móviles.

Común / Encabezado

<script type="text/x-handlebars" data-template-name="/connectors/above-site-header/top-banner">
  <div class="test-top-banner"></div>
</script>

<script type="text/x-handlebars" data-template-name="/connectors/below-footer/bottom-banner">
  <div class="test-bottom-banner"></div>
</script>

---

Común / CSS

body {
  --banner-height: 40px;
}

.d-header-wrap {
  top: var(--banner-height);
  transition: top 0.25s ease-in;
  .composer-open & {
    top: 0;
  }
}
  
.sidebar-wrapper {
  html:not(.composer-open) & {
    height: calc(var(--composer-vh, var(--1dvh)) * 100 - var(--header-offset, 0px) - var(--banner-height));
  }
}

.above-site-header-outlet.top-banner {
  @include sticky;
  top: 0;
  width: 100%;
  height: var(--banner-height);
  transition: height 0.25s ease-in;
  z-index: z("header");
  .test-top-banner {
    width: 100%;
    height: var(--banner-height);
    background: red;
  }
  .composer-open & {
    height: 0;
  }
}

.below-footer-outlet.bottom-banner {
  @include sticky;
  bottom: env(safe-area-inset-bottom);
  width: 100%;
  html:not(.composer-open) & {
    height: var(--banner-height);
  }
  z-index: z("composer", "content") - 1;
  .test-bottom-banner {
    width: 100%;
    height: var(--banner-height);
    background: red;
  }
}
  
#topic-progress-wrapper:not(.docked) {
  margin-bottom: var(--banner-height);
  .composer-open & {
    margin-bottom: 0;
  }
}
  
body:not(.ios-safari-composer-hacks) #reply-control.open {
  max-height: calc(100vh - var(--header-offset) + var(--banner-height));  
}

[ozkn (Mathx)]

¿Se pueden mostrar anuncios de Google en estas áreas? @Don

[Shaneod (Shane)]

¡Gracias @Don, muy apreciado amigo!

[Shaneod (Shane)]

@ozkn

¿Se pueden mostrar anuncios de Google en estas áreas? @Don

Sí, he colocado un anuncio fijo en el área del pie de página. El ocultamiento del área fija por parte de Don cuando respondes significa que el anuncio no interfiere con la usabilidad del sitio.