Clickable Containers

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.

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.

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.

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?

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.

Can you link me to the part of the site you're applying this on? So we can check what's causing this issue.

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.:)

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?

Screenshot below

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.

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

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.

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

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.