Linking to a section on the same page, different page, and another website

Hello! Although I spent countless hours researching the topic on links, I am complete lost and could use your help with

  1. linking to a section on the same page
  2. linking to a different page
  3. linking to another web site

I am using Cornerstone for editing my website.

Also, I am not a web developer so please take me step by step when answering my questions. It’s GREATLY appreciated!

#1. Linking to a section on the same page.

Here is an example of what I am trying to accomplish.

At the top of my “Services” page on my website, in what I am calling my “Introduction” section, I mention 4 services I offer:

Writing Services
Editing Services
Proofing Services
Imaging Services

What do I need to do to create a link so that if someone clicked on Writing Services in my “Introduction” section, readers are taken to the “Writing Services” section found toward the bottom of my services page?

How do I do this?
Do I need to create a button?
Can the words writing services in the Introduction section be highlighted in a different color and when one clicks on it, that person will be taken to the “Writing Services” section found toward the bottom of my services page?

#2. Linking to a section on a different page.

Here is an example of what I am trying to accomplish.

At the top of my “Services” page on my website, in what I am calling my “Introduction” section, I mention 4 services I offer:

Writing Services
Editing Services
Proofing Services
Imaging Services

What do I need to do to create a link so that if someone clicked on Writing Services in my “Introduction” section, readers are taken to a new page “Writing Services?”

And, how does this link relate to a drop down menu? For example, in my header I have services and under services are the four subsets:

Writing Services
Editing Services
Proofing Services
Image Services

#3. Linking to another website
In an instance, I mention a specific blog found on another’s site and I want to link to that site’s blog so the reader can read the blog.

How do I accomplish this?

Thank you for your help!
Karen V.

1 Like

Hi there,

Thanks for writing in.

You can easily implement that with anchor names or IDs. I’ll provide a bit information on how to implement them :slight_smile:

Please note that it has two important parts, the link, and the ID. And there are two kinds of link, the relative, and the absolute URL. The relative URL is something like /post-slug-name/ or #post-section-id, and absolute URLs are like http://example.com/post-slug-name/ and http://example.com/#post-section-id

  1. Linking to a section on the same page, this is where you use the relative URL. Let’s say you inspect your Writing Services section and added an ID of writing-services (no #), then your menu or button should have the URL of #writing-services. Example, <a href="#writing-services">Click Me</a>

  2. Linking to a section on a different page, this is where you use the absolute URL. Let’s say you inspect your Writing Services section and added an ID of writing-services (no #), then your menu or button should have the URL of http://example.com#writing-services. Example, <a href="http://example.com/#writing-services">Click Me</a>

  3. Linking to another website, it’s the same with number 2. You’ll need to use the absolute URL of another site. The question is how you add it. It can be a button with links, menu, width, the image with URL and etc. But the idea is just adding the full URL of that another website.

The most important and where most users fail is using and matching the proper ID. So please always use a unique ID and match the section and URL. You can use the ID as URL multiple times, but you shouldn’t use the same ID for multiple sections. Example, you can have a desktop menu, a widget menu, a mobile menu, and intro buttons with the same URL of http://example.com#writing-services or #writing-services, but there should be ONLY ONE page section that has the ID of writing-services (no #).

If you’re working with header menu then you’ll need to set of menu, one menu with absolute URL and one menu with relative URL. Example, menu1 has absolute URL and menu2 has relative URL, then you have a home page and a services page (where your services sections are). Then simply assign menu1 to your home page (since it needs absolute URL to link to services page) and assign menu2 to your services page (since it needs relative URL to link within itself).

If you’re using buttons instead of menus, simply create the buttons on your home page with absolute URL, then buttons in services page with relative URL.

But if your question is how to create the buttons and menus, then please check our knowledge base for further information and Wordpress documentation for menu which is available here https://codex.wordpress.org/WordPress_Menu_User_Guide and https://theme.co/apex/forum/t/customizer-button-options/140, https://theme.co/apex/forum/t/shortcodes-button/151

It’s up to you on how you’ll create them, menu, sub-menus, buttons, and etc. But the linking should follow the standard as described above.

Hope this helps :slight_smile:

2 Likes

Thank you so much for the detailed reply, but as a newbie, non-web developer, I am still having trouble and I need you to take me a step or two back.

For simplicity, let’s just look at the advice you gave me on linking to a section on the same page.

  1. Linking to a section on the same page, this is where you use the relative URL. Let’s say you inspect your Writing Services section and added an ID of writing-services (no #), then your menu or button should have the URL of #writing-services. Example, href="#writing-services">Click Me … Note: I do see the <a before href and the code to close the <a loop after Me (when I write the code here, it doesn’t show up in the text.

Here is what I tried and it failed.

Rough outline of my “Service” Page.

Top of Service page lists my 4 services.

Writing Services
Editing Services
Proofing Services
Image Services

Then, let’s say I talk about the benefits of my service.

Then, below talking about benefits of my services the next section is Writing Services discussed in detail.

Steps I took to create the link

  1. I created a button next to writing services on the top of my “Service” Page

  2. I clicked on the “Writing Services” section toward the bottom of the page.

  3. Clicked Customize

  4. And in the ID box typed Writing Services

  5. Hit save

  6. Then I went back and click on the button for writing services and in the URL typed href=“#Writing Services”>Click Me. I did add <a before the href and I did add the code to close the <a loop after Me (when I write the code here it doesn’t show up in text.

When I clicked on the button, nothing happened.

What am I doing wrong?

Is there a way to add the link without the button? For instance, can I make the words “Writing Services” on the top of the page the link?

Thanks,
Karen V.

Hello There,

Thanks for updating in! When adding an element ID, it should be in one word and no spaces. In your case, it should be “WritingServices”, or “Writing_Services” or “Writing-Services” so that you can use it as the target link (href) like “#WritingServices” or “#Writing_Services” or “#Writing-Services”.

When inserting the href for the button, only the ID is need. No need to add <a because the button element is already wrap with it.

For classic button:

For v2 button element:

And if you just want to have a link test, you can use this:

<a href="#Writing-Services">Writing Services</a>

Hope this helps.

Yes! I got it to work!!! I was able to link to a section on the same page!!! Thank you so much for your help!

However, I wanted to add a note regarding another mistake I was making, which was addressed to me originally, but I missed the point (this information may help another user.).

I was using #Writing-Services for the button link and #Writing-Services for the ID descriptor for the Writing Services section.

I learned to use #Writing-Services for the button link and only Writing-Services for the ID descriptor for the Writing Services section.

Now, I am going to work on linking to a section on a different page and linking to another website.

I will contact you again if I have any further issues.

Thank you again.

Karen V.

Hi there,

Glad that you have managed to overcome the problem and thank you for sharing your experience with our customers.

If you have additional questions I suggest that you open up a separate thread which will help us focus on the matter better and give you a better service. Also, it will help us maintain the thread, whenever the thread is getting too long it prevents us to give a good support and the information gets cluttered.

Thank you for your cooperation and understanding.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.