Hi,
Sorry for the maybe dumb question, but couldn't find it by myself.
How do I add a link on a section in SP PageBuilder (external link).
I could find ways to add a link to specific items (e.g. an image) but not on a complete section.
Thanks
Awaiting an answer
SP Page Builder
Add a link on a section
Asked by Stephane Hanrez
2 years ago
Last activity 1 year ago
15 replies
Rashida Rahman Staff
Hi there!
Thanks for reaching out. I'm not sute if I get you right. If you want to link the whole section, so that when you click on the section it redirect to your desired external link, then it is not possible, as there is no default option to achieve that.
If you want to link a section of the same page from your menu item or button , you may follow this:
- Give ROW/Section name in field: Section ID
For example: testSectionName
Remember no # or space between, only "-" if you really need to
- In menu item > External URL type > #testSectionName
If you want to link a section of a different page, you have to try using the whole URL with http(s),
For example: https://domain-name.com/#testSectionName
Hope this helps!
Best Regards
Stephane Hanrez Asked this
Indeed, what I'm looking for is to link a full section so it redirects me to an external page. Or even link only a column would already be good but I couldn't find that either.
Would it be possible for you to add it as a feature request ? As I'm sure I'm not the first one who tries to achieve that and it shouldn't be very complicated to add.
Thanks
Stéphane
Rashida Rahman Staff
Hi Stéphane,
Sure! I will add it as a feature request definitely:)
Let's hope for the best!
Have a nice day!
Stephane Hanrez Asked this
Any news about this feature request ? Getting the need again for another website, pretty annoying not to be able to add a link to a section. Thanks
Rashida Rahman Staff
Hi,
I will follow up again about it. But is it possibe for you to give an example, please? It would be helpful.
Best Regards
Stephane Hanrez Asked this
Something like this :
I'm also using css to create a zoom in effect on the section, so having a link on the text box and on the image (which is what I currently do) is counter-intuitive to the user.
Rashida Rahman Staff
Hello,
If I get you right, you want to click on any part of the section/column to be able to move to an external link.
Yes, you can do this with your text in the textblock addon as you know already. And some addons also has linking options with image and button too.
But you want to do it as a whole, right?
Best Regards
Stephane Hanrez Asked this
Yes, indeed.
at the moment, I can add a link to the image and to the text elements, but :
1/ That means adding 2 different links which is prone to errors (or more if I need several text blocks).
2/ That means some parts of the block are not clickable which makes it counter-intuitive to the user.
When coding myself, I could add wrap an href around the div element so that it appears as one clickable block to the user. unfortunately, I cannot do this using SP PageBuilder.
Thanks
Rashida Rahman Staff
Hello,
Thanks for the explanation.
I will forward it with explanation.
Best Regards
Pavel
2 years ago
· edited
Hi Stephane.
Add class to the section
Add Raw HTML Addon with link and class
Use CSS
.linking-section * {
position: static;
}
.full-section-link {
position: absolute;
inset: 0;
z-index: 3;
}
Stephane Hanrez Asked this
Thanks Pavel... that's a good tip... what I simply did is that I added a raw html before my section with <a href ="#"> and then another raw html after the section with </a> and it works fine...
Anyway, that's more of a work-around than a real solution, I hope your dev team still can add the option to add a link directly at section level (but also on a row, or on a column).
Rashida Rahman Staff
Hi,
I have added this as a feature request already.
Thanks!
Pavel
1 year ago
· edited
I added a raw html before my section with <a href ="#"> and then another raw html after the section with </a> and it works fine...
Hi.
Despite the fact that it works, this is not right. And even more so, this is not correct in the context of SPPB. Thus, you violate SEO, integrity and validity of the HTML code.
Better use my solution
I hope your dev team still can add the option to add a link directly at section level
I'm not Joomshaper team member.
However, I want to note that I am on this forum for more than 5 years and you are the first person who needed such an option. Also, I have been practicing webmaster for more than 15 years and never used such a solution, since this is not user friendly especially for mobile devices.
Of course, there are exotic situations when it is required to apply something beyond the scope of the standards. SPPB has the possibility for such customization like class name fields, values of which you can use in your CSS or JS code. Therefore, you should not hope that this will be added to the main functionality.
Stephane Hanrez Asked this
Thanks Pavel
I might be misunderstanding your solution.
If I add the html raw section with the link somewhere in my article, then add the "full-section-link" as as css class to the row, it completely breaks my design. Also what if you need more than one section with a link in the same article, how do you make the connection between the raw html and the section (row) ?
I'm surprised I'm the first one to request that feature. Before moving to Joomshaper, I used the JSN (Joomlashine) editor on my Joomla 3 websites, and in this editor, I was able to add a link to any element (I'm still using it on some older websites that I still didn't convert to J4, even tough JSN doesn't exist anymore). Might be that my request comes from the fact I have been used to it.
How do you then handle a situation like the one in my screenshot above ? To the user, it looks more intuitive to me to be able to click on the whole block than having to click on either the picture or the text.
Thanks again
Stéphane
Pavel
1 year ago
· edited
If I add the html raw section with the link somewhere in my article, then add the "full-section-link" as as css class to the row, it completely breaks my design.
Hi.
It seems you were not attentive. This class should be added to the link but not to the row. To the row (section) you should add linking-section class. Look at the screenshot in my previous post.
You can use this class not only in the section but also in the column, in the inner row, in the Div addon.
Also what if you need more than one section with a link in the same article, how do you make the connection between the raw html and the section (row) ?
You can add all this to another section and it will work the same way. Or perhaps I did not understand you correctly. Give a specific example.
I used the JSN (Joomlashine) editor on my Joomla 3 websites, and in this editor, I was able to add a link to any element
I don't know how it was realized there. But perhaps this added <a></a> as a wrapper for a section or other block elements, which should not be. Just some developers make incorrect solutions for the sake of user wishes.
I would be interested to look at the example from JSN
Stephane Hanrez Asked this
Sorry my bad, I was indeed adding the right class (linking-section)
This is the whole section around which I would like to wrap an <a> link : https://prnt.sc/rsBMNFWr6-g4
If I add the linking-section CSS class to the row, this is the result: https://prnt.sc/HnFker_T18sl
not sure what I'm missing
Here is an example of a website created with JSN, see the green block, that's what I'm speaking about: https://www.osezetre.be/index.php/a-propos/mes-partenaires
Looking at the code they are not wrapping an <a> link around the div, they are using a <div data-href="myurl">
Wouldn't it be possible to add this data-href to the <div class="sppb-row sppb-align-center"> ?
Thanks
Stéphane
Pavel
This is the whole section around which I would like to wrap an <a> link : https://prnt.sc/rsBMNFWr6-g4
If I add the linking-section CSS class to the row, this is the result: https://prnt.sc/HnFker_T18sl
Hi.
In general, this should not break the design. But the screenshot is not enough to understand the reason. I am not an employee of support and cannot see hidden content. If you provide a public link to a page with a broken design, I could establish the reason.
Wouldn't it be possible to add this data-href to the <div class="sppb-row sppb-align-center"> ?
The use of the data-href attribute in JSN indicates that the link is created through javascript. You cannot add this attribute to the <div class="sppb-row sppb-align-center"> and even if you could, it is pointless, since in SPPB there is no script itself that uses this attribute. Therefore, the easiest solution is CSS.
Of course, you can write a javascript to add link to the section/div, but you would have to write this script for each section/div separately. CSS solution is universal
Log in to reply.