Home>Support>Make the whole div class area created by Visual Editor widget clickable

Make the whole div class area created by Visual Editor widget clickable

By Nigel Wiggins, 9 years ago. Last reply by Andrew Misplon, 9 years ago.

I’m using the Visual Editor widget in Page Builder to hold an image, title and some text. I am able to add separate identical links to each of these elements. However, I would prefer to have the whole rectangle widget area clickable.

This website has the effect which I’m looking for:

http://www.visitengland.com/

URL: http://www.amsterdamforvisitors.com/

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 9 years, 5 months ago Greg Priday
    Hi, I Work Here

    Hi Nigel

    Sorry for the late reply here. I can see what you’re after, what you’d need to do is edit the visual editor using the text tab and make the link “A” tag wrap around the image, title and text. You’d also need to assign a custom class to the wrapper. Let’s say that class is front-item-wrap.

    The following custom CSS should take care of all the styling.

    a. front-item-wrap {
   display:block;
}
a. front-item-wrap * {
   color: inherit;
   text-decoration: none;
}

    Let me know if that does the trick.

  2. 9 years, 4 months ago Nigel Wiggins

    Hi Greg

    The method you suggested created hyperlinks on the text in the widget. However, the background area was not clickable.

    However, I found another solution on this site. In Visual Editor I assign a Widget Class of “front-page-box” under Widget Styles-> Attributes.

    The following custom CSS is added in Admin -> Appearance -> Custom CSS

    div .myfeatures {
 position: relative; 
}

div.myfeatures a {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    text-decoration: none; /* No underlines on the link */
    z-index: 10; /* Places the link above everything else in the div */
    background-color: #FFF; /* Fix to make div clickable in IE */
    opacity: 0; /* Fix to make div clickable in IE */
    filter: alpha(opacity=1); /* Fix to make div clickable in IE */
}

    This “almost” worked but also removed image . I took the link out of the image and added it to some dummy text. I now get the desired effect.

    Thanks to you and your colleagues for taking the time to answer and for a great theme!

  3. 9 years, 4 months ago Nigel Wiggins

    Note – the code above should not have a space between “div .myfeatures” – it should be “div.myfeatures”.

    Also, “myfeatures” should be “front-page-box” in my case

  4. 9 years, 4 months ago Andrew Misplon
    Hi, I Work Here

    Hi Nigel

    Awesome, really glad to hear you made progress on this. Thanks for sharing. I’m sure someone else will find it useful.

    All the best.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More