Kop- en voetteksten¶
De header van de website is het bovenste gedeelte van een webpagina en bevat doorgaans elementen zoals het logo, het navigatie:ref:menu <website/header_footer/header-content>, de zoekbalk en de knop voor aanmelden of klantenaccount. De footer wordt onderaan een webpagina weergegeven en bevat meestal contactgegevens, links, juridische informatie en andere nuttige gegevens. Beide kunnen naar wens worden aangepast.
Headerinhoud¶
De header bevat bedrijfsinformatie, sneltoegangsknoppen en websitemenu’s om gebruikers te helpen efficiënt door de website te navigeren. Goed gestructureerde, gebruiksvriendelijke headers en menu’s spelen ook een belangrijke rol bij het verbeteren van de positie in zoekmachines.
Menu-editor¶
Met de menubewerker kun je de websiteheader bewerken en menu-items en megamenu’s toevoegen.
Ga naar Website ‣ Site ‣ Menubewerker om de menubewerker te openen. Van daaruit kun je:
Wijzig de naam van een menu-item of pas de URL aan met het pictogram (Menu-item bewerken).
Verwijder een menu-item met het pictogram (Menu-item verwijderen).
Verplaats een menu-item door het naar de gewenste locatie in het menu te slepen.
een gewoon vervolgkeuzemenu maken door de submenu-items naar rechts te slepen, onder het bovenliggende menu.
Tip
Je kunt de menu-editor ook openen vanuit de website-editor. Dit kan als volgt:
Selecteer een menu-item en klik op Menu bewerken, of
Ga naar het tabblad Stijl en klik op Menu bewerken naast de titel van de sectie Koptekst.
Voeg menu-items toe¶
Standaard worden pagina’s als vervolgkeuzemenu-items aan het menu toegevoegd wanneer ze worden aangemaakt. Volg deze stappen om een nieuw menu-item toe te voegen:
Klik in de menu-editor op Menu-item toevoegen.
Voer in het pop-upvenster de Titel in die in het menu moet worden weergegeven.
Typ in het veld URL of e-mail
/om te zoeken naar een bestaande pagina op de website of#om te zoeken naar een bestaand aangepast anker.Notitie
Om een menu-item toe te voegen voor een pagina die nog niet bestaat, voer je de nieuwe URL of het nieuwe anker in en klik je op Pagina aanmaken in de pop-up Menu bewerken. Als je het menu-item toevoegt zonder de bijbehorende pagina aan te maken, leidt de link naar een 404-foutpagina.
Klik op Doorgaan.
Pas indien nodig de menustructuur aan.
Klik op Opslaan.
Ontwerp van menu-item¶
Om het ontwerp van de menu-items te wijzigen, klik je in de rechterbovenhoek op Bewerken en selecteer je de koptekst. Ga vervolgens naar het tabblad Stijl en navigeer naar de sectie Navigatie. De volgende opties zijn beschikbaar:
Pas de uitlijning van het Desktopmenu aan voor desktopapparaten.
Pas de uitlijning en positie van het Mobiel menu aan voor mobiele apparaten.
Kies of Submenu’s openen Bij aanwijzen of Bij klikken.
Selecteer een Linkstijl om de huidige pagina in het menu te markeren.
Notitie
De beschikbare opties in de sectie Navigatie kunnen variëren afhankelijk van het geselecteerde sjabloon.
Verberg een dynamisch menu-item voor niet-ingelogde gebruikers¶
Om het menu-item Shop voor niet-ingelogde gebruikers te verbergen, beperk je de e-commercetoegang tot ingelogde gebruikers.
Volg deze stappen om andere menu-items gerelateerd aan dynamische pagina’s (d.w.z. een menu-item dat automatisch door Odoo wordt gegenereerd, bijvoorbeeld bij het installeren van een app of module, zoals Evenementen, Cursussen, enz.) voor niet-ingelogde gebruikers te verbergen:
Ga naar Website ‣ Configuratie ‣ Menu’s.
Vouw indien nodig de lijst met menu’s voor de betreffende website uit.
Selecteer het menu-item dat je wilt verbergen.
Klik in de sectie Zichtbare groepen op Regel toevoegen.
Zoek naar de groep Naam Rol / Portaal en klik op Selecteren.
Bewaar.
Tip
Je kunt de menu-items op dit menu-itemformulier verder aanpassen. Bijvoorbeeld:
Vink het selectievakje Nieuw venster aan om de pagina in een nieuw tabblad te openen wanneer erop wordt geklikt.
Voeg een Gerelateerde pagina of Gerelateerde modelpagina toe.
Wijs een Bovenliggend menu en/of Onderliggende menu’s toe om een hiërarchie te maken.
Megamenu’s¶
Megamenu’s zijn vergelijkbaar met vervolgkeuzemenu’s, maar in plaats van een eenvoudige lijst met submenu’s tonen ze een paneel dat is onderverdeeld in groepen navigatieopties. Ze zijn vooral nuttig voor websites met grote hoeveelheden inhoud of e-commercewebsites, omdat ze kunnen helpen om alle webpagina’s of e-commercecategorieën in het menu op te nemen, terwijl alle menu-items tegelijkertijd zichtbaar blijven.
Volg deze stappen om een megamenu te maken:
Klik in de menu-editor op Megamenu-item toevoegen.
Voer in het pop-upvenster de Titel van het megamenu in.
Klik op Doorgaan.
Pas indien nodig de menustructuur aan.
Klik op Opslaan.
Megamenu’s worden opgebouwd met standaard bouwstenen, waardoor elk onderdeel afzonderlijk moet worden aangepast. Klik hiervoor in de rechterbovenhoek op Bewerken en selecteer vervolgens het megamenu. Daarna:
Bewerk de tekst rechtstreeks in de bouwsteen.
Bewerk de URL van een menu-item door het megamenu-item te selecteren en op de knop Bewerken te klikken.
Verplaats een menu-item door het gerelateerde blok naar de gewenste positie in het megamenu te slepen.
Verwijder een menu-item door op het (Verwijderen)-pictogram van het bijbehorende blok te klikken.
Megamenu ontwerpen¶
Om de algemene lay-out van het megamenu en de afzonderlijke bouwstenen aan te passen, open je de website-editor, ga je naar het tabblad Stijl en navigeer je naar de sectie Megamenu. De volgende opties zijn beschikbaar:
Kies een sjabloon.
Kies de Grootte: Volledige breedte of Smal.
Schakel E-commercecategorieën in of uit, indien van toepassing.
Ontwerp van kop- en voettekst¶
Om het ontwerp van de kop- of voettekst aan te passen, klik je op Bewerken in de rechterbovenhoek en selecteer je de kop- of voettekst. Ga vervolgens naar het tabblad Stijl en navigeer naar het gedeelte Koptekst of Voettekst. De volgende opties zijn beschikbaar:
Kies een Sjabloon uit het vervolgkeuzemenu.
Selecteer een Achtergrond kleur door een thema stijl, een Aangepast kleuroptie of een Verloop te definiëren.
Stel de Inhoudsbreedte in.
Voeg een Rand toe aan de voettekst en pas de grootte, stijl en kleur aan.
Pas Afgeronde hoeken aan om bij het ontwerp te passen.
Selecteer een Schaduw optie. Kies Geen, een vooraf gedefinieerde themaschaduw, of configureer een Aangepaste schaduw door de Outset/Inset, Kleur, Verspringing, Vervaging, en Spreiding te definiëren.
Gebruik de volgende ontwerpopties specifiek voor de koptekst in het gedeelte Koptekst om de koptekst van de website verder aan te passen:
Voeg een Schuifeffect toe om te bepalen hoe de koptekst zich gedraagt tijdens het scrollen op de pagina. Beweeg met de muis over een effect om een voorbeeld te bekijken.
Schakel de optie Disclaimer weergeven in om een banner boven de koptekst weer te geven. Je kunt de bannertekst en de Achtergrond kleur naar wens aanpassen.
Kies de Koptekstpositie voor de geselecteerde pagina: Normaal, Verborgen of Over de inhoud. Wanneer Over de inhoud is geselecteerd, kun je ook de Achtergrond en Tekstkleur aanpassen.
Tip
Om de koptekst op alle pagina’s te verbergen, ga je naar het tabblad Thema van de website-editor. Scroll naar beneden naar het gedeelte Geavanceerd en zet Koptekst weergeven uit.
Verborgen elementen, inclusief de koptekst indien van toepassing, zijn beschikbaar onder Onzichtbare elementen.
Wijzig de Standaard Accentkleur naar de Primaire of Secundaire kleur om vervolgkeuzeknoppen in de koptekst visueel te onderscheiden.
Definieer een lettertype.
Stel de Opmaak grootte in en voeg indien nodig een kleur toe.
Navigeer naar de sectie Elementen tonen/verbergen van het tabblad Stijl om de zichtbaarheid van specifieke elementen te regelen en klik op de optie met betrekking tot het element dat je wilt tonen of verbergen. Je kunt de volgende elementen tonen of verbergen:
Visuals, zoals het Bedrijfslogo, Tekstelementen (bijv. een telefoonnummer), en Sociale links voor het koppelen van alle accounts op sociale media.
Acties, zoals de Zoekbalk, de Taalkiezer, de knop Inloggen en de Koptekstknop (standaard een Contacteer ons-knop).
eCommerce-specifieke elementen: de knoppen Toevoegen aan winkelwagen en Toevoegen aan verlanglijst.
Je kunt een Achtergrond inschakelen voor navigatie-iconen, zoals het verlanglijst- of zoekbalkicoon.
Gebruik de volgende voettekstspecifieke ontwerpopties in de sectie Voettekst om de voettekst van de website verder aan te passen:
Kies een Uitschuifeffect: Normaal (dus geen effect), Zweefuitschuiving of Schaduw.
Schakel de optie Knop naar boven scrollen in om een -knop (Naar boven scrollen) toe te voegen en kies vervolgens de positie ervan.
Gebruik de schakelaar Copyright om de copyrightvermelding te verbergen of weer te geven. Voeg indien ingeschakeld zo nodig een kleur toe in de sectie Copyright.
Verberg of toon de voettekst voor de huidige pagina met de schakelaar Paginazichtbaarheid. Verborgen elementen, inclusief de voettekst indien van toepassing, zijn beschikbaar onder Onzichtbare elementen.
Tip
Je kunt ook Interne inhoud blokken toevoegen aan de koptekst of voettekst voor verdere aanpassingen, zoals e-commercespecifieke voettekstopties.