This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

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

Resolved 4 replies premiumthemetheme-vantage
Nigel Wiggins
10 years ago · Last reply by Andrew Misplon 10 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.

Need fast email support? Get SiteOrigin Premium

Replies

4
  1. Greg Priday Staff 10 years, 9 months ago

    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. Nigel Wiggins 10 years, 9 months ago

    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. Nigel Wiggins 10 years, 9 months ago

    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. Andrew Misplon Staff 10 years, 9 months ago

    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.

Have a different question or issue?

Start New Thread