Aggiungere un header e footer fissi

Sviluppatore
1

Ciao ragazzi,

Sto pensando di ospitare alcuni annunci pubblicitari. Sto usando il plugin ufficiale per gli annunci, che è ottimo perché ti permette di aggiungere risorse in vari punti del sito.

Tuttavia, parlando con l’agenzia pubblicitaria, sembra che per ottenere la migliore visibilità degli annunci sui dispositivi mobili, che costituiscono la maggior parte del mio traffico, sia necessario utilizzare annunci “sticky” (fissi) nell’intestazione o nel piè di pagina.

Il problema, ovviamente, è che un annuncio fisso lungo il piè di pagina si sovrapporrà a pulsanti importanti e influenzerà l’esperienza utente (UX), il che è inaccettabile.

Esiste un modo per aggiungere un padding sul fondo del sito all’altezza di un banner, in modo che il banner fisso non influenzi gli elementi UX importanti? Non voglio che gli utenti debbano chiudere l’annuncio banner prima di poter rispondere o utilizzare il conteggio dei post per scorrere un thread.

Inoltre, con l’intestazione fissa su Discourse, questa sarà influenzata da un banner fisso o il banner potrebbe posizionarsi sopra la barra di navigazione di Discourse?

O questa è una cosa che l’agenzia pubblicitaria dovrebbe essere in grado di risolvere con la propria tecnologia pubblicitaria?

Grazie,

Shane

2

Sto pensando che potrei aggiungere un po’ di padding in fondo al body in modo che il banner pubblicitario fisso in fondo non si sovrapponga ai pulsanti di risposta e poi sulla casella di controllo della risposta che appare potrei impostare un z-index in modo che appaia sopra il banner pubblicitario?

Mi stavo chiedendo se qualcuno ha implementato con successo banner pubblicitari fissi nell’header e/o nel footer su dispositivi mobili senza influire sull’esperienza utente.

3

Ciao :wave:

È possibile ma dipende da molte cose. Puoi condividere l’URL del tuo sito?

Userei un plugin outlet e inserirei il banner all’interno. Imposta l’altezza del plugin-outlet uguale all’altezza del banner, questo aggiungerà gli spazi necessari.

Qualcosa del genere. Nota: questo è solo un esempio veloce, spero che ti dia qualche idea per realizzarlo. Possiamo fare di più se condividi maggiori informazioni e l’URL del tuo sito per verificarlo, ecc… :slightly_smiling_face:

Mobile / Header

<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>

Mobile / 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);
  }  
}

3 Mi Piace
4

Ciao @Don - grazie per la risposta, stavo pensando che qualcosa del genere sarebbe stato necessario.

1 Mi Piace
5

Ciao @Don Come funzionerebbe quell’implementazione quando provi a rispondere da dispositivo mobile?

6

Funziona, ma il banner in alto rimpicciolisce il composer.

Probabilmente è meglio nascondere il banner quando il composer è aperto.

C’è una classe .composer-open che puoi usare qui per nascondere il banner quando il composer è aperto.

Mobile / CSS 
body {
--banner-height: 40px;
  // Header
  .d-header-wrap {
    top: var(--banner-height);
    transition: top 0.25s ease-in;
    .composer-open & {
      top: 0;
    }
  }
  // Top banner
  .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;
    }
  }
  // Bottom banner
  .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;
    }
  }
  // Move topic progress wrapper the top of the bottom banner
  #topic-progress-wrapper:not(.docked) {
    margin-bottom: var(--banner-height);
    .composer-open & {
      margin-bottom: 0;
    }
  }
  // Add banner height to composer max height calculation
  &:not(.ios-safari-composer-hacks) #reply-control.open {
    max-height: calc(100vh - var(--header-offset) + var(--banner-height));
  }
}

Modifica: Ho apportato alcune correzioni al codice.

3 Mi Piace
7

Ah grazie mille per questo aiuto, roba brillante!

2 Mi Piace
8

Ciao @Don - ho un test che funziona benissimo sul cellulare, lo sto aggiungendo al desktop e sembra che dovrebbe funzionare ma c’è un piccolo problema quando si risponde, a differenza del cellulare dove l’area di aggancio scompare, sul desktop rimane al suo posto, c’è un hook CSS per l’apertura del composer sul desktop?

9

Ciao @Don - hai idea di come chiudere il footer quando sei sul desktop? La versione mobile funziona benissimo, ma non riesco a capire come rimuovere l’elemento fisso quando apri la casella di risposta sul desktop premendo rispondi. È CSS al di là delle mie capacità.

Grazie

Video previews no longer show up since 3.2.0.beta3
10

Ciao @Shaneod :wave:

Mi scuso per il ritardo. Il codice che ho scritto sopra è stato inserito nella sezione mobile, quindi funzionava solo su mobile. Ho modificato il codice per adattarlo anche al desktop. Devi inserirlo nella sezione comune e rimuovere quello esistente dalla sezione mobile.

Ecco l’aggiornamento che funziona sia su desktop che su mobile.

Comune / Intestazione 
<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>
Comune / 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));  
}

5 Mi Piace
11

Gli annunci di Google possono essere mostrati in queste aree? @Don

12

Grazie @Don, molto apprezzato amico! :+1:

1 Mi Piace
13

Sì, ho posizionato un annuncio fisso nell’area del piè di pagina. Il nascondiglio di Don dell’area fissa quando rispondi significa che l’annuncio non interferisce con l’usabilità del sito!

2 Mi Piace
14

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.