Clickable Containers

[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

[Elvin]

Hi,

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?"

[troyw]

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.

[Elvin]

It 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?"

[troyw]

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?

[troyw]

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.

[Elvin]

Can 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?"

[Elvin]

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.

No problem.:)

A wise man once said:
"Have you cleared your cache?"

[troyw]

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?

[troyw]

Screenshot below

[Elvin]

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?

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/P8uyl4A2

Screenshot 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?"

[troyw]

Yes, all the CSS Class was added through the container block’s advanced options. It still has this error?

[Elvin]

Strange,

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?"

[troyw]

Here it is. Please let me know what I did wrong.

[Elvin]

Can 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?"

[Author]

Posts