Hoe je footer verbergt in mobiele weergave

Aangepaste voetteksten met meerdere kolommen, links en brandingelementen zijn ontworpen voor brede desktopschermen. Op smalle mobiele schermen kan dezelfde voettekst krap lijken, overlopen of een onevenredig grote hoeveelheid ruimte innemen, wat allemaal afbreuk doet aan de leeservaring. Door de footer op mobiel te verbergen, kun je een rijke desktopfooter behouden terwijl je een schone, ongefilterde lay-out aan lezers op kleinere schermen presenteert.

OPMERKING

Dit geldt alleen voor aangepaste footers. Het heeft geen effect op de standaard Document360-voettekst. Voor informatie over het instellen van een aangepaste footer, lees het artikel over Custom footer.

Wanneer dit te gebruiken

Gebruik deze aanpassing wanneer je wilt:

• Voorkom dat een complexe, meerkoloms custom footer kapot of krap lijkt op mobiele schermen.
• Verbeter de mobiele leeservaring door footer-inhoud te verwijderen die niet nuttig of toegankelijk is op kleine schermen.
• Pas een responsieve lay-out toe waarbij de footer zichtbaar is op desktop maar onderdrukt op mobiel.

Voordat je begint

• Je hebt toegang nodig tot Instellingen (
  ) > Kennisbanksite > Site-aanpassing > Custom CSS & JavaScript in het kennisbankportaal.
• Een aangepaste footer moet al geconfigureerd zijn op je kennisbasissite. Deze CSS verbergt de footer op mobiel, het maakt er geen aan.

Hoe de footer in mobiel zicht te verbergen

1. Navigeer naar Instellingen (

   ) > Kennisbanksite > Site-aanpassing > Custom CSS & JavaScript in het kennisbankportaal.

   

2. Selecteer in het linker navigatiepaneel het CSS-tabblad en plak het volgende fragment.

Verbergt de voetvoet op schermen tot breed 767px (smartphones en kleinere tablets).

@media only screen and (max-width: 767px) {
    site-footer-section {
        display: none;
    }
}

3. Klik rechtsboven op Opslaan .

   

Uitkomst

De footer is verborgen op mobiele schermen en blijft zoals gewoonlijk op desktopschermen verschijnen.

Best practices

• Pas het breekpunt aan zodat het bij je indeling past indien nodig. Als je aangepaste footer problematisch begint te lijken bij een bredere of smallere breedte dan de standaard, verander dan de max-width waarde in het fragment. Bijvoorbeeld om max-width: 1024px ook de footer op tablets te verbergen.
• Test op een echt apparaat na het opslaan. Browserontwikkelaarstools bieden een redelijke mobiele preview, maar testen op een echte smartphone bevestigt dat de footer verdwijnt op het juiste breekpunt en de paginalay-out correct blijft.
• Denk na over wat je verbergt. Als je aangepaste footer belangrijke links bevat, zoals contactinformatie, juridische kennisgevingen of supportlinks, zorg er dan voor dat deze toegankelijk zijn voor mobiele lezers via andere middelen, zoals de siteheader of de navigatie van het artikel.
• Om terug te draaien, verwijder je het fragment. Ga terug naar het CSS-tabblad in Custom CSS & JavaScript, verwijder het fragment en klik op Opslaan. De voetvoet verschijnt onmiddellijk weer op mobiel.