I am trying to link a headline, text or image from one page to another on my website. I have no idea where to add which url.
I want to click on a text/headline/image and be transferred to another page (like yahoo or the likes f.ex. – click on an image or headline and get to another page to read it.
How could I do that with free version of elementor?
Specifically, the How to Use the Heading Widget (@ 0:45) but many widgets provide a “link” field where you can type out the name of the page you would like to link to and a list will populate based on the real-time search results or you can manually paste any full url or relative url.
I took all the steps you recommended and ran into the following problem: I have a 3 column grid of small summary texts on one page (let’s call them 1, 2 and 3). I want my readers to see the longer texts on the next page, but when I set the link for 1, 2 and 3 on the next page, it shows the top of the page and leaves me looking for the actual longer text section.
Is there a way to link 1, 2 and 3 to the specific headings? with elementor? (I found a very good tutorial for the wp editor, but those changes are gone when I edit with elementor)
So you don’t want to just link to another page, you want to link to a specific place on another page. This is possible using anchors but passing data from one page to another means you need to put the anchor in the URL of the link. Look up Query Strings…
Another alternative might be to add the expanded explanation to the bottom of your page and just anchor to those on the same page. Not sure how much info you are planning for the second page. Look up WP anchors on Youtube, you will see how easy it can be.
Just as @lestexas60 said, it sounds like what you want are anchors. Anchors are used to “link” a click-able action to a specific place on a web page based on the ID assigned to a tag. You can link to an anchor that exists elsewhere on the same page or an anchor that exists on a completely different page (url).
For example, Let’s say I have a 3 column section each containing a Heading element at the top of my page and the longer descriptions are further down the page.
1) I would give each of the longer descriptions a unique ID found on the Advanced tab of all Elementor widgets. (DO NOT USE A HASH IN THE UNIQUE ID NAME)
For example, let’s say the id’s are: text1, text2, text3…
I would then add a “link” to each of the titles in my 3-column section at the top of the page and respectively link them to #text1, #text2 and #text3 where you want to include the hash telling the browser this link is an “anchor” link.
Additionally, to anchor link to a different page, just include hash and ID in the full or relative url, i.e. https://www.mysite.com/page2/#text1 or simply /page2/#text1
Also, just a helpful hint, if you add the class “scroll” to the elements which provide the anchor links (i.e. the click-able headings in this example), when you click the headings, they will smooth scroll to the anchor on the page.
Ok, it’s offical, I can’t do it.
Here’s an example. Let’s take this particular page we are on right here and now.
Let’s say “Philip Ingram” is my headline. If I click on it here, another page opens up and there’s the info.
That’s basically what I want to do.
This description below might contain the information of exactly that, right?
“1) I would give each of the longer descriptions a unique ID found on the Advanced tab of all Elementor widgets. (DO NOT USE A HASH IN THE UNIQUE ID NAME)
For example, let’s say the id’s are: text1, text2, text3…
I would then add a “link” to each of the titles in my 3-column section at the top of the page and respectively link them to #text1, #text2 and #text3 where you want to include the hash telling the browser this link is an “anchor” link.
Additionally, to anchor link to a different page, just include hash and ID in the full or relative url, i.e. https://www.mysite.com/page2/#text1 or simply /page2/#text1”
My brain refuses to process the information. I watched tons of videos for anchor links most of which mean you can set them up on a one page. I definitely don’t want to do that.
So I need to learn about ID and Hashtags and relative url, no?
I’ll keep looking. If by any chance what I am writing makes sense to you I’d appreciate any useful comments whatsoever.
Ah ok I now see what you’re trying to do. At first it very much seemed like you wanted to link to a specific “position” on the page or another page but instead you want it to open another browser tab? If so, you need to activate the “target” attribute for the anchor tag.
So I basically need to insert this code and the replace “Your Heading” with the words I want linked and then it would work? Yay!
I am desperately trying to set up a blog page with this. But since I don’t know what I am doing I followed a very good tutorial that set up an overlay image at the first half of the page and I created all my pages that way. Beautiful! But as soon as I went to the blog post page in the wp dashboard and created a blog post my entire design for that page disappeared. So not knowing how to fix that,
I’m thinking, can’t be so hard to enter a few images in one of my pages (I called Blog like Philip Ingram) and link each one separately to a subpage (All Posts Here like the new page that opens up where I can read the actual info) and create the actual blogpost with elementor.
However, if I link the images to the subpage I want to save my readers the time to scroll endlessly for that post they were interested in and instead (like with the anchors) to have them land right there at the post.
See what I mean? I’m taking the long way round, I guess. Like LA to NY via Africa or something 😀
You can still link to anchor tags on other pages regardless if another tab opens for it. So we have two mechanisms here that are completely independent of each other.
-Anchor scroll (a link to a position/element on any page, same page or another targeting a unique ID)
-Target – “_blank” (opens any link in a new browser tab)
Say you want to provide a heading such as “Blog Post – About Topic A” and when clicked it opens a new browser tab and scrolls to that specific blog post.
To do this you’ll need to ensure your blog page, where that specific post is listed among many others, contains some element that has an ID you can target. Say for example that blog post’s Title is a heading with an ID of #topicA, I would then link to it as follows:
<h2><a href="//mysite.com/blog/#topicA" class="scroll" target="_blank">Blog Post - About Topic A</a></h2>
That’s such great news, you are helping me solve a problem I’ve been trying to crack for weeks now… I understand 90% of what you said. I just don’t know where to insert the code, would I need 2 plugins, then? “Page scroll to id” looks promising?
Elementor only shows Menu Anchor and that’s not the right one to use here?
The fact that you’re wanting to link to a blog page complicates things because the WordPress blog listing is difficult to style without custom code in your theme or an advanced page builder feature like that of Elementor Pro which let’s you build out your posts list. It’s much more involved than say linking 2 pages both built in Elementor.
The latter is easy, you’d build out the target page in Elementor giving each section a heading and a unique ID. On the other page, say your home page maybe, you’d link to that other page targeting the ID as described in my post above. it would then open a new browser tab and scroll to the specific content location on that page.
The other is very involved in which I’d probably go about it with the Elementor Pro modules and Advanced Custom Fields for the dynamic url and ID parts.
No, no, I want to do the latter: “linking 2 pages both built in Elementor” I just call it the Blog page. Ok, so that’s my task for today: heading and unique id and then targeting the id.
