- This topic has 27 replies, 3 voices, and was last updated 4 months, 3 weeks ago by
Elvin.
-
AuthorPosts
-
October 5, 2020 at 4:00 pm #1473808
troyw
`Hey guys,
I need to make some clickable containers which link to other pages on the website.
I am looking at support thread #1361912, which suggests adding the following to CSS;.clickable-container {
position: relative;
}
.clickable-container a:before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 999;
}I then added ‘clickable-container’ to the containers CSS Class, but don’t understand where to put the < a>.
It says “Add a Button or ‘< a>’ element inside the container”. Where does ‘< a>’ go?
Also, how do I then add a link to the container?If I edit the container as html and place <a > at the start followed by url and put </a > at the end, I get a message to ‘resolve’ and it re-writes the html and erases all the content in the block?
Thanks
October 5, 2020 at 4:15 pm #1473820Elvin
StaffCustomer SupportHi,
I then added ‘clickable-container’ to the containers CSS Class, but don’t understand where to put the < a>.
It says “Add a Button or ‘< a>’ element inside the container”. Where does ‘< a>’ go?
Also, how do I then add a link to the container?You add buttons to the container similar to adding any blocks like text or headings.
A wise man once said:
"Have you cleared your cache?"October 5, 2020 at 4:32 pm #1473826troyw
So does it have to be a button? I would prefer that the entire container be clickable. I would prefer not to have a button.
October 5, 2020 at 5:13 pm #1473843Elvin
StaffCustomer SupportIt doesn’t have to be a GB button. You can add a custom HTML with
<a href="url">
in it.What you basically have to do is add the
clickable-container
class on your GB container and then add custom HTML block with<a href="url">
.You then add this.
.clickable-container { position: relative; } .clickable-container a { position: absolute; height:100%; width:100%; top: 0; right: 0; bottom: 0; left: 0; z-index: 999; }
I’ve added
height:100%; width:100%;
so that the actual anchor tag takes the whole container space making the whole container clickable.A wise man once said:
"Have you cleared your cache?"October 5, 2020 at 5:41 pm #1473848troyw
Hey Elvin,
That has worked but for some reason, when I add the to some blocks, it messes up the spacing. Can’t quite see what would be causing this?October 5, 2020 at 5:45 pm #1473849troyw
Ignore that. It only sometimes messes it up if I put the html over the content. If I place it under the content it works.
Many thanks.
October 5, 2020 at 5:46 pm #1473850Elvin
StaffCustomer SupportCan you link me to the part of the site you’re applying this on? So we can check what’s causing this issue.
A wise man once said:
"Have you cleared your cache?"October 5, 2020 at 5:46 pm #1473851Elvin
StaffCustomer SupportIgnore that. It only sometimes messes it up if I put the html over the content. If I place it under the content it works.
Many thanks.
No problem.:)
A wise man once said:
"Have you cleared your cache?"October 5, 2020 at 6:36 pm #1473869troyw
Sorry,
I now have a message on all of the blocks to which I have added the html and it says “This block contains unexpected or invalid content”. It then has boxes to ‘resolve’ or ‘Convert to HTML’.
This is affecting all of the containers?If I resolve, I lose all of the html and the containers go out of size?
October 5, 2020 at 6:42 pm #1473871troyw
Screenshot below
October 5, 2020 at 7:01 pm #1473875Elvin
StaffCustomer SupportI now have a message on all of the blocks to which I have added the html and it says “This block contains unexpected or invalid content”. It then has boxes to ‘resolve’ or ‘Convert to HTML’.
This is affecting all of the containers?If I resolve, I lose all of the html and the containers go out of size?
This shouldn’t happen unless you added the classes through code editor.
You should add the CSS classes on through the container block’s advanced options shown here:
https://share.getcloudapp.com/P8uyl4A2Screenshot below
The link for the screenshot doesn’t work.
OOPS! THAT PAGE CAN’T BE FOUND.
error.A wise man once said:
"Have you cleared your cache?"October 5, 2020 at 7:16 pm #1473882troyw
Yes, all the CSS Class was added through the container block’s advanced options. It still has this error?
October 5, 2020 at 7:21 pm #1473884Elvin
StaffCustomer SupportStrange,
This error usually occurs when the container block has its HTML code edited. (edit html or code editor)
Can you provide us temporary site credentials so we could check what’s causing this?
You can add the details on the Private Information textarea. Thank you.
A wise man once said:
"Have you cleared your cache?"October 5, 2020 at 7:27 pm #1473887troyw
Here it is. Please let me know what I did wrong.
October 5, 2020 at 7:38 pm #1473893Elvin
StaffCustomer SupportCan you also include the login link for the admin? Thank you. 🙂
adding the usual /wp-admin or /login returns
This site has been moved to a new server.
error even when added to hosts file.A wise man once said:
"Have you cleared your cache?" -
AuthorPosts
- You must be logged in to reply to this topic.