Hoe websites met één pagina te maken met Divi

Divi’s navigatie via één pagina opzij maakt het u gemakkelijk

Wanneer u een nieuwe pagina maakt, kunt u Divi’s navigatiepagina voor één pagina eenvoudig inschakelen, waardoor uw bezoekers een visuele en klikbare weergave van hun voortgang op de pagina krijgen. U kunt ook aangepaste ankerkoppelingen en sectie-ID’s gebruiken om menu’s met één pagina te maken voor het volledige pakket met één pagina.

docs afbeelding

BEKIJK EEN LIVE-DEMO VAN DEZE FUNCTIE

Navigatie op één pagina inschakelen

Navigatie met één pagina inschakelen is eenvoudig en kan per pagina worden gedaan. Wanneer u een pagina maakt of bewerkt, zoekt u naar het vak ‘Divi-instellingen’ rechts van uw teksteditor. Binnen dit vak ziet u de Dot Navigation optie. Selecteer “Aan” in het vervolgkeuzemenu en sla de pagina op. U zult nu merken dat er een zwevende navigatiebalk is toegevoegd aan de rechterkant van uw pagina. De puntnavigatiebalk voegt automatisch een klikbare link toe aan elke sectie op uw pagina. Wanneer u een nieuwe sectie toevoegt, wordt automatisch een nieuwe cirkellink (of punt) aan uw zwevende zijnavigatie toegevoegd. Gebruikers kunnen op de stippen klikken om naar verschillende secties op de pagina te gaan. Het maakt het ook gemakkelijker om te identificeren waar de bezoeker op de pagina is, waardoor langformaat pagina’s gemakkelijker te begrijpen en te navigeren zijn.

docs afbeelding

Maak aangepaste menukoppelingen voor websites met één pagina

Naast zijnavigatie is het ook mogelijk om uw hoofdheadernavigatie om te zetten in navigatie met één pagina. Als u een website met één pagina maakt, wilt u niet dat uw menulinks naar afzonderlijke pagina’s verwijzen. In plaats daarvan kunnen deze links naar relevante secties op dezelfde pagina verwijzen. Wanneer u erop klikt, kunnen ze u naar het relevante gedeelte op de pagina brengen met behulp van een soepel schuivend effect. Dit kan worden bereikt met behulp van aangepaste ID’s. Aan elk element op de pagina dat met de bouwer is gebouwd, kan een ID worden toegewezen. U kunt een ID aan een sectie toewijzen door op het pictogram voor sectie-instellingen te klikken en naar de instelling “CSS ID” te zoeken. Nadat een ID is toegewezen, kunt u er vanuit het navigatiemenu naar linken. Stel bijvoorbeeld dat u een sectie ‘Over ons’ hebt en dat u wilt linken naar het gedeelte van uw pagina dat uw bedrijf beschrijft.

Een menulink naar een ID wijzen

Om een ​​aangepaste menulink te maken, moet u een nieuwe link aan uw menu toevoegen met behulp van het tabblad “Vormgeving> Menu’s” in uw WordPress-dashboard. Als u niet bekend bent met het menu Menu’s, bekijk dan deze geweldige tutorial. Nadat u een nieuw menu hebt gemaakt en aan de hoofdnavigatielocatie hebt toegewezen, kunt u beginnen met het toevoegen van links naar uw koptekst. In dit geval maken we een aangepaste link door op het tabblad ‘Link’ aan de linkerkant van de pagina te klikken. Na het klikken krijgt u twee velden (URL en linktekst). Voor de “Linktekst” voert u eenvoudig de tekst in die u in uw menu wilt weergeven (bijvoorbeeld “Over ons”). Voor de URL moeten we linken naar de ID die we eerder aan onze sectie hebben toegewezen. In dit geval hebben we de id “aboutus” toegevoegd, maar u kunt elke gewenste ID-naam toevoegen. Omdat we de ID ‘aboutus’ hebben gebruikt, kunnen we een koppeling maken naar die ID door een URL te maken die verwijst naar ‘/ # aboutus’. U kunt dezelfde methode gebruiken om zoveel aangepaste koppelingen te maken als u wilt. Voer eenvoudig een URL in van “/ #” gevolgd door de ID die u wilt targeten.