Overslaan en naar hoofdcontent gaan
English (Europe)

Portals - Menu, logo en header inrichten

Youri Dechesne
Bijgewerkt

Dit artikel bevat de volgende secties:

 

Tutorial

Benieuwd hoe je het menu van Social inricht en landingspagina's/schermen zelf kunt bouwen? Bekijk dan snel deze tutorial. 

 

portals menu.png

 

Menu-item toevoegen

In onderstaande video legt consultant Daan je uit hoe je onderdelen toevoegt aan het menu. 

 

De header in beeld houden

Wil je dat het navigatiemenu met het logo altijd bovenaan in beeld blijft (sticky header), ook als gebruikers scrollen? Dit stel je zo in:

  1. Ga naar Portals en open het portaal waarvan je de header sticky wilt maken. 

  2. Open links onder Templates de template waar de header-widget op staat. Dit is vaak de Base template, maar kan een andere naam hebben.

    Sticky header.png
  3. Klik op het nummer van de rij waar de header-widget in staat (meestal rij 1). De rij kleurt donkerder zodra je erop klikt, en rechts verschijnt het instellingenmenu.
  4. Klik op het blokje bij Deze rij altijd in beeld laten? (Engels: Is row sticky) zodat het gevuld is.
  5. Klik op Opslaan.
  6. Klik rechtsboven op Publiceren.

Let op: Als de header blijft meescrollen (sticky header) en geen achtergrondkleur heeft, blijft deze vaak transparant. Dit kan ervoor zorgen dat het logo en de navigatie-opties moeilijk leesbaar worden, vooral als gebruikers over een lichte of juist drukke achtergrond scrollen. Door een vaste achtergrondkleur te geven, blijft de header altijd goed zichtbaar. Onder De header een achtergrondkleur geven lees je hoe je dit instelt.

 

De header een achtergrondkleur geven

Standaard heeft de header een transparante achtergrond. Je kunt deze dezelfde kleur geven als de achtergrond van het scherm, zodat de header subtiel opgaat in de pagina. Dit zorgt voor een rustige uitstraling. Wil je juist dat de header opvalt als vast menu? Kies dan een afwijkende kleur, zoals wit (#ffffff), voor een neutrale en goed leesbare balk.

Stap 1: De achtergrondkleur van het scherm opzoeken

Wil je een afwijkende kleur, dan kun je deze stap overslaan.

  1. Ga naar Theme editor en open het thema van je omgeving.
  2. Klik rechtsboven op de kwast.
  3. Klik op Kleuren.
  4. Kijk bij Achtergrond voor de huidige achtergrondkleur van de schermen.
  5. Kopieer de kleurcode, bijvoorbeeld #f2f2f4, zodat je deze straks kunt plakken.

Stap 2: De header een achtergrondkleur geven

  1. Ga naar Portals en open het portaal waarvan je de header wilt bewerken. 

  2. Open links onder Templates de template waar de header-widget op staat. Dit is vaak de Base template, maar kan een andere naam hebben.

    Achtergrondkleur header.png
  3. Klik op de area waar de header-widget in staat. De rand van de area wordt donkerder en rechts verschijnt het instellingenmenu.
    • Let op: Klik niet op de widget zelf. Dan verschijnen de instellingen van de widget in plaats van de area. Zie je een donker kader rond de widget? Klik dan twee keer in de area (één keer om de widget te deselecteren en één keer om de area alsnog te selecteren).
  4. Klik op de kwast.
  5. Scroll naar beneden tot je de optie Achtergrond ziet.
  6. Vul de kleurcode in bij Achtergrond, bijvoorbeeld #ffffff voor wit. Het bolletje achter het invulveld verandert naar de nieuwe kleur.
  7. Klik op Opslaan.
  8. Klik rechtsboven op Publiceren.

Stap 3: De hele rij een achtergrondkleur geven

Als je de achtergrondkleur van het scherm gebruikt, is deze stap niet nodig. Gebruik je een andere kleur? Dan is het mooi om de hele bovenste rij, van links tot rechts, één afwijkende kleur te geven. Dit zorgt voor een mooier resultaat.

  1. Klik op het nummer van de rij waar de header-widget in staat (meestal rij 1). De rij kleurt donkerder zodra je erop klikt, en rechts verschijnt het instellingenmenu.

    Sticky header.png
  2. Vul de kleurcode die je koos voor de area van de header-widget in bij Achtergrond. Het bolletje achter het invulveld verandert naar de nieuwe kleur.
  3. Klik op Opslaan.
  4. Klik rechtsboven op Publiceren.

 

Snelkoppeling toevoegen in het menu

  1. Navigeer naar het dashboard dat je wilt bewerken.
  2. Klik op + en voeg een scherm toe.
  3. Klik op bevestigen. Je nieuwe scherm is aangemaakt.
  4. Aan de rechterzijde kun je het scherm bewerken. Kies het tandwiel icoon. 
  5. Vul externe link in met de hyperlink waar je naartoe wilt linken.
  6. Sla op en publiceer. 
  7. Je herkent een snelkoppeling in het menu aan het 'externe link' icoon. In onderstaande afbeelding zie je dit aan de rechterzijde naast 'Dashboard'. 

dashboard.png

 

Zoekmachine toevoegen in menu

  1. Navigeer naar het dashboard dat je wilt bewerken.
  2. Ga naar templates -> base template. Hier zie je alleen de header/het menu. 
  3. Selecteer de header. Aan de rechterzijde openen nu instellingen. 
  4. Onder header opties, vink 'Toon zoeken' aan. De zoekmachine toont nu ook in het menu. 
  5. Sla op en publiceer. 

Zoekmachine.png

 

Logo aanpassen

  1. Navigeer naar het dashboard dat je wilt bewerken.
  2. Ga naar templates -> base template. Hier zie je alleen de header/het menu. 
  3. Selecteer de header. Aan de rechterzijde openen nu instellingen. 
  4. Onder logo opties, maak je de volgende keuzes:
    • Organisatie/bedrijfnaam: Maakt logo toegankelijk voor screen readers (optioneel)
    • Afbeelding uploaden
    • Logo breedte en logo hoogte
    • Logo wel/niet tonen op mobiel. Als je het logo helemaal niet wilt tonen, kun je dit uitschakelen aan de bovenzijde van het instellingen menu. 
  5. Sla op en publiceer (zie ook onderstaande afbeelding).

Menu uitlijnen.png

 

Menu links/rechts uitlijnen

  1. Navigeer naar het dashboard dat je wilt bewerken.
  2. Ga naar templates -> base template. Hier zie je alleen de header/het menu. 
  3. Selecteer de header. Aan de rechterzijde openen nu instellingen. 
  4. Onder menu opties, selecteer rechts of links bij uitlijnen van menu-items.
  5. Sla op en publiceer (zie ook bovenstaande afbeelding). 

 

Menu zelf opbouwen

Standaard bouwt de Header-widget het menu op uit de schermen en subschermen van het portaal. Als je in een menu vooral wilt verwijzen naar kennisonderwerpen, kennisartikelen, nieuwsitems of externe links, kost die aanpak veel tijd: voor elk item moet je een scherm aanmaken en onderhouden. Zeker als je tien of meer menu-items wilt, is dat veel werk. Lees hoe je het menu zelf opbouwt in de documentatie.

 

Geschreven tekst Menu inrichten

Hoe voeg je schermen aan het menu toe en richt je nieuws- en kennisbank-landingspagina's in?

  1. Welkom in Portals! Menu-onderdelen vul je vanuit 'Schermen' aan de linkerkant. Het algemene dashboard heet hier 'Home', en daaronder vallen nieuws, kennisbank, documentatie en support.
  2. Om het scherm 'Nieuws' een andere naam te geven, selecteer je het onderdeel en pas je de instellingen aan.
  3. Aan de rechterzijde open je de instellingen van het scherm. Door de naam en titel aan te passen, verander je het item in de menubalk. Voeg ook een interne omschrijving en trefwoorden toe. Het pad — het laatste deel van de URL — kun je eveneens aanpassen zodat de link herkenbaar blijft voor gebruikers.
  4. Nieuws-template: Dit template is geschikt voor (organisatie)nieuws. Je kunt de weergave van nieuwsberichten naar wens aanpassen:
  • Pas de titel aan en kies of je deze wel of niet toont
  • Kies de indeling van de lay-out, bijvoorbeeld standaard (grote afbeeldingen) of als lijst
  • Kies het aantal nieuwsberichten
  • Kies uit welke bronnen het nieuws opgehaald wordt
  • Kies of je reacties en emoji's wil tonen
  1. Naast nieuws kun je ook de kennisbank hernoemen en de bijbehorende landingspagina aanpassen.
  2. Hernoemd! Pas vervolgens de inhoud van de landingspagina aan door de instellingen van de kennisbank-widget te selecteren.
  3. Kennisbank-template: In het kennisbank-template pas je de gebruikerservaring op maat aan. Kies:
  • Paginatype: op onderwerp of alfabetisch
  • Of gebruikers kunnen schakelen tussen alfabetische en onderwerp-weergave
  • Of afbeeldingen worden getoond
  • Of er een zoekmachine in de kennisbank zit
  1. Widgets: Bouw een landingspagina op met widgets om een scherm helemaal op maat te maken.
  2. De beschikbare widgets stel je ook in in Portals.
  3. Externe URL's: Wil je dat gebruikers direct naar een externe URL of andere plek in Social navigeren in plaats van naar je zelfontworpen landingspagina? Vul dan de externe URL in bij Instellingen. Aanvullende opties:
  • Verberg in het menu: voorkomt dat dit scherm wordt weergegeven in de navigatie-elementen
  • Onzichtbaar: een onzichtbaar scherm heeft zelf geen inhoud, maar dient als kapstok voor onderliggende schermen
  • Bovenliggend scherm: bepaalt de positie van het scherm binnen de Portals-navigatiestructuur
  1. Wil je een nieuw scherm aan het menu toevoegen? Klik op + en vul in:
  • Naam & Titel
  • Pad: een herkenbare URL, bijvoorbeeld /scherm
  • Bovenliggend scherm (bepaalt de navigatie in Portals)
  • Template: Base (header), Home (startpagina's), Knowledge (kennisbank) of News (nieuws)

Klik op 'Bevestigen' om het nieuwe scherm aan te maken en in te richten.