linking to a section on another page

  • Hi everyone,

    I am having trouble linking from my homepage to a section on a different page using anchors with an id. At first I used the integrated menu anchor widget with elementor and read that it was not supported for linking to another page (although it does work for one of the links??).

    I therefore tried adding an html element <div id=”my-anchor”></div> to the top of the section I want it to link to and it does not work either. It always links to the right page but doesn’t scroll down to the right section.

    The links go from most of the h3s of the homepage to the h2s of the other pages.

    Any tips here please?

    Thanks

    The page I need help with: [log in to see the link]

Viewing 10 replies - 1 through 10 (of 10 total)
  • Hi erminiadev,

You can achieve this by doing the following:

1. Go to the section where you want to be able to link to
2. click on "edit section" and go to the "advanced tab"
3. Next to "CSS ID" fill in a name, so you can recognize 
   the section, for example "address" and save.
4. See my screenshot: https://ibb.co/VL6hwfn

5. Now use this to link directly to that page (name of the page 
   you added to the CSS ID in a section) and section and use the 
   word (in this case the word is "address") you entered in 
   the CSS ID like this: 
   https://your-url.com/contact/#adres

Hope this works for you!
Annie
    • This reply was modified 3 years, 11 months ago by LogoLogics.
    • This reply was modified 3 years, 11 months ago by LogoLogics.
    • This reply was modified 3 years, 11 months ago by LogoLogics.
    • This reply was modified 3 years, 11 months ago by LogoLogics.
    • This reply was modified 3 years, 11 months ago by LogoLogics.
    • This reply was modified 3 years, 11 months ago by LogoLogics.
    • This reply was modified 3 years, 11 months ago by LogoLogics.
    • This reply was modified 3 years, 11 months ago by LogoLogics.
    Thread Starter erminiadev

    (@erminiadev)

    Hi Annie,
    Thanks for your response. I tried that too and it doesn’t work either…

    Hi erminiadev,

    Strange, I just filled all the steps as I described and over here it works.Are you sure you follewed the exact steps?

    Can you provide the url where this section is at, a screenshot of what you filled in and the url you are using to try and get to?

    Thread Starter erminiadev

    (@erminiadev)

    Hi Annie,

    The urls I need help with are, the following ( amongst 9 ):
    https://lespetitskolams.erminiadev.com/index.php/qui-sommes-nous/#il-etait-une-fois
    https://lespetitskolams.erminiadev.com/index.php/qui-sommes-nous/#nos-valeurs
    https://lespetitskolams.erminiadev.com/index.php/qui-sommes-nous/#l-equipe-pedagogique

    These links are present on the home page in the second section “qui sommes nous” and have the same name as said anchor.
    I inspected html with chrome inspector and the elements are there on the “qui sommes nous” page, with the right ids but unfortunately I cannot link to them.

    I don’t see where I can load a screenshot on this thread, is there a way?

    Hi,

    You can use this one: https://nl.imgbb.com/

    However, when I click on the links you provide, it does go to the correct section of that page of here.

    https://lespetitskolams.erminiadev.com/index.php/qui-sommes-nous/#l-equipe-pedagogique takes me directly to the section “equipe-pedagogique”?

    When I click from the homepage to L’équipe pédagogique, that does not go directly.
    Inspecting the homepage and that link shows this:
    https://ibb.co/r3KCdny

    Please try to add the full url: https://lespetitskolams.erminiadev.com/index.php/qui-sommes-nous/#l-equipe-pedagogique, not just index.php etc.

    It also is odd that there is index.php showing in your url’s?
    Before changing, make sure to make a full backup!

    By default WordPress places /index.php/ after the domain name when using permalinks. However, this is often not desirable and also for SEO reasons it is better not to include /index.php/ in the url.

You can easily remove /index.php/ from the url like this:

- Check beforehand whether you have the .htaccess file with the standard WordPress rewrite rules in the root folder of the website.
- Select 'Permalinks' in the backend of WordPress in the settings.
- Select 'Custom structure'.
- Change /index.php/%postname%/ to only /% postname% /
- Save the change.

It now says:

Adjusted Structure: https://www.uwomeinnaam.nl/%postname%/

Also see this article: <a href="https://dejanjanosevic.info/remove-index-php-permalink-in-wordpress/" rel="noopener" target="_blank">https://dejanjanosevic.info/remove-index-php-permalink-in-wordpress/</a>

When you call the website now, /index.php/ will no longer be included in the url.
    • This reply was modified 3 years, 11 months ago by LogoLogics.
    Thread Starter erminiadev

    (@erminiadev)

    Hi Logologics,

    It is weird that the links provided work, but the links on the website do not. I deleted the index.php from the url and put the whole url in the links but still no luck. Here is a short video I made to show what is happening:

    https://www.loom.com/share/92f0c23ab0304deeb609235f07cba1ef

    Thanks for your help!

    Marine

    “Hi,Since you are using our Pro features on your website, you’ll need to open a support ticket at my.elementor.com.

    www.ads-software.com rules state that commercial products are not supported here.”

    Hi Marine,

    Thanks for the video.
    I see what seems to be wrong.

    You need to put the id into a section, not a title!

    This is done with the free version + free OceanWP theme, no need for Pro.
    I do not use anchors widget for this, just add ID to the section where it needs to go, and that works just fine for me.

    • This reply was modified 3 years, 11 months ago by LogoLogics.
    • This reply was modified 3 years, 11 months ago by LogoLogics.

    I made a short video so you can see how I do this:

    • This reply was modified 3 years, 11 months ago by LogoLogics.
    • This reply was modified 3 years, 11 months ago by LogoLogics.
    • This reply was modified 3 years, 11 months ago by LogoLogics.

    This is how you add it to the OceanWP theme’s menu!

    • This reply was modified 3 years, 11 months ago by LogoLogics.
Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘linking to a section on another page’ is closed to new replies.