Via knop of link naar onderdeel op pagina scrollen (inhoudsopgave maken)

Het is mogelijk om vanuit een knop of link direct naar een specifiek onderdeel op een pagina te linken, of naar een deel op een andere pagina. Je kunt dit ook gebruiken om een inhoudsopgave te maken bij een blog. 

In dit artikel laat ik zien hoe je dat kunt doen. Volg de stappen nauwkeurig!

1. Schakel de 'Visual Builder' in op de pagina waar het onderdeel staat waar je heen wilt linken.
2. Open de instellingen van de sectie of rij waar je direct heen wilt linken vanuit het menu. In dit voorbeeld open ik de instellingen van de rij, maar dit kan ook met een specifieke sectie.    

             

3.    

           Onder '        Geavanceerd' vind je de 'CSS-id en -klasses'.    

4.    

           Vul bij '        CSS ID' een unieke naam voor de sectie of rij in.
   (LET OP: hier mogen geen spaties in gebruikt worden en geen hoofdletters. Mocht je meerdere woorden willen gebruiken, gebruik dan een '-' tussen de woorden. Dit is puur voor de link, dus houd dit kort. Voor dit voorbeeld gebruik ik 'prijspakketten-dienst')    

5.     

      Klik op het groene vinkje.        
      

6.            Voor op dezelfde pagina scrollen: 
   
   a. Open de instellingen van de knop die naar de sectie of rij moet linken (Of voeg een knop toe door op het grijze '+' icoon te klikken, en te zoeken naar de module 'Knop')  

              Wanneer je gebruik maakt van een link, kun je de 'link' van de tekst toevoegen.         

               b. Onder '            Link' bij 'Knop URL' vul je nu alleen het CSS-ID die jij hebt aangemaakt (met een # ervoor). In mijn geval dus;  #prijspakketten-dienst.
   * Anders zal de pagina 'herladen' wat meer tijd kost dan nodig is.c. Klik op het groene vinkje en sla de pagina op!
   
               d. Controleer even of het juist werkt!        

7.     

          Voor op een andere pagina scrollen: 
   (in principe moet je hier dus de hele link van de pagina inclusief de /#CSS-ID toevoegen.)
           
   a. Sla de pagina op en verlaat de ' Visual Builder'.
   
   b. Voeg achteraan de url balk van de pagina waar je net een CSS-ID hebt toegevoegd, een /# toe met daarachter het CSS-ID dat je hebt toegevoegd aan de sectie of rij. In mijn geval was dit ' prijspakketen-dienst' dus mijn link wordt:        https://voorbeeld.bloomsite.nl/dienst/#prijspakketten-dienst
   
   c. Druk op enter. Als het goed is springt je beeld naar de sectie of rij waar je het CSS-ID hebt ingevuld.
   
   d. Kopieer de URL die je net hebt gecheckt.
   * Dit is de URL die je op alle andere pagina's kunt gebruiken om naar dit stukje op deze pagina te linken    

          e. Ga naar de pagina waar je vandaan wilt linken en open de instellingen van de knop (Of voeg een knop toe door op het grijze '+' icoon te klikken, en te zoeken naar de module 'Knop')
   Wanneer je gebruik maakt van een link, kun je de 'link' van de tekst toevoegen. 
   
   f. Onder ' Link' bij 'Knop URL' vul je nu de nieuwe link in die je zojuist hebt gekopieerd. (Je kunt dus ook een link maken van tekst, een gehele module of een rij; daar voeg je dan bij 'Link' de #CSS-ID toe)    

8. Klik op het groene vinkje om de wijziging op te slaan.  
9. Vergeet niet de pagina op te slaan wanneer je klaar bent.  
10. Check even of de knop of link juist werkt!
    Herlaad de pagina opnieuw en is dit niet nodig? Bekijk dan stap 7 nogmaals!

    ---