[Resolved] Clickable Containers

Home Forums Support Clickable Containers

Viewing 15 posts - 1 through 15 (of 28 total)
  • Author
    Posts
  • #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

    #1473820
    Elvin
    Staff
    Customer Support

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

    #1473826
    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.

    #1473843
    Elvin
    Staff
    Customer Support

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

    #1473848
    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?

    #1473849
    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.

    #1473850
    Elvin
    Staff
    Customer Support

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

    #1473851
    Elvin
    Staff
    Customer Support

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

    #1473869
    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?

    #1473871
    troyw

    Screenshot below

    #1473875
    Elvin
    Staff
    Customer Support

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

    #1473882
    troyw

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

    #1473884
    Elvin
    Staff
    Customer Support

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

    #1473887
    troyw

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

    #1473893
    Elvin
    Staff
    Customer Support

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

Viewing 15 posts - 1 through 15 (of 28 total)
  • You must be logged in to reply to this topic.