WEBWERKPLAATS

Wordpress en Divi specialist

anchor css id maken in tekst of menu wordpress
Hoe kun je met een menukeuze of knop scrollen naar een bepaald deel van de pagina (of bericht)
In deze uitleg gaan we alleen in op hoe je dit aanbrengt in Divi

Als je een one pager website maakt kan die vrij lang worden. De bezoeker zou vrij ver moeten scrollen om er te komen. Dat willen ze niet dus dit moet je faciliteren. Een knop of menukeuze maken die direct naar het juiste deel scrollt.

Wat je kunt doen is het blok waar men naar toe moet een ID geven en de link van de knop daar naar toe laten verwijzen.
De naam van een blok is een CSS ID of ook wel Anchor genoemd. In Divi doe je dit als volgt:
Klik in bijvoorbeeld een tekstblok (maar kan met iedere Sectie, Rij of Module) op “bewerken” en daarna (rechts) “Geavanceerd”
menukeuze bewerken
Het onderstaande scherm open zich. Zoals je ziet in het voorbeeld noem ik het CSS ID hier “voorbeeldanchor”.
Opslaan
Divi Elegantthemes knop opslaan
Nu heeft dat blok een naam en gaan we naar deel 2… zorgen dat een knop daar naar “wijst”. Dat gaan we doen met de knop zoals hieronder. Die gaan we laten wijzen naar de afbeelding daar onder.Naar Anchor “voorbeeldanchor”

Knop module plaatsen en dan onder het tabje “Content” maken we de knoptekst “Naar Anchor “voorbeeldanchor” en de link is dan naar dat anchor. Anchor naam (CSS ID)
Dus vullen we bij de Link van die knop in “#voorbeeldanchor”
Opslaan
Divi Elegantthemes knop opslaan
en uitproberen.

Een menu laten wijzen naar een CSS ID

We hebben nu een anchor (of CSS ID) in een knop gebruikt. Maar het kan ook in een menu. Eigenlijk doe je hetzelfde. Je laat een menukeuze weer verwijzen naar een anchor.

Ga daar voor naar Weergave > Menu’s en kies dan voor “Aangepaste links”. Ook hier vertel je dan WordPress dat deze menukeuze moet wijzen naar #voorbeeldanchor. Eigenlijk spreekt het onderstaande plaatje voor zich.

De URL is ook hier weer #voorbeeldanchor en de tekst van menukeuze is “menukeuze”

Nog een laatste opmerking ! #voorbeeldanchor springt dan naar het blok met dit CSS IDD. Maar alleen OP DEZELFDE PAGINA !!

Wil je dit toch naar een andere pagina ? Dan moet je ook echt naar die pagina verwijzen.
Niet #voorbeeldanchor
Maar http://www.voorbeeldsite.nl/ diepagina/#voorbeeldanchor