Archived

This topic is now archived and is closed to further replies.

  • 0

How to Make a Banner Clickable?


Question

Posted · Report post

Running framework 2.4.1

 

Have a page with a hero at the top and then 3 banners

 

Each banner has a picture of a person and 5 bullet points of text

 

I need some help to make each of the 3 banners clickable on mouseover (I don't want just the image or just the text, I'd like the whole banner itself clickable)

 

Ideally I would like each entire banner pad to be clickable (to go to another page which is more indepth about the person) and for a border to show up around the outside edges of the pad on mouseover.

 

As best I can tell from firebug, the banner pad elements are:  banner-media-pad pprand-pad

 

But I just can't figure out how to actually achieve what I'm trying to do.  I know it's a bit outside the scope of what people use this forum for, but I would greatly appreciate any help.

 

Thanks in advance.

 

 

 

 

Share this post


Link to post
Share on other sites

7 answers to this question

Posted · Report post

Banners aren't able to have a link nor can this be achieved with CSS. The simplest method to have a similar layout to the Banners section would be to to use the PageLines grid and create a two column layout. This way you can have one column for your header/text and the other for your image. Which will be added via HTML so you can add a link to it if you like.

 

For more information see our grid docs - http://support.pagelines.me/docs/miscellaneous/grid-system/

1 person likes this

Share this post


Link to post
Share on other sites

Posted · Report post

Hi,

 

I don't think you can make the banner's clickable with CSS alone.  It would require some PHP coding, which we cannot provide or support.  While you might be able, for example, to apply a transparent background image to the banner, to make that clickable you'd need to hard code the section.

 

You may, of course, clone the section, and try working on the cloned version.  You'd need the Base (child) Theme and some coding skills. Do you feel comfortable with this?

 

Alternatively, you could engage one of our Pros to help you with this customization. 

Share this post


Link to post
Share on other sites

Posted · Report post

Hey Rob, thanks for the quick reply. 

 

Thats what I figured, that it wasn't going to be possible in CSS. 

 

I do have child theme and limited coding skills, I may try that.

 

Thanks again.

Share this post


Link to post
Share on other sites

Posted · Report post

How would you clone the banner section and place it into the child theme?

Share this post


Link to post
Share on other sites

Posted · Report post

Todd,

 

Find the actual section via FTP in wp-content/themes/pagelines/sections.  Download the folder to your local computer.

 

While you're still in the site via FTP, go to the child theme, wp-content/themes/pagelines-template-themes and create or locate a sections folder.

 

Work on your changes on your local computer's downloaded version, then, when finished, upload to the pagelines-template-themes/sections folder.

 

Test it visually through your browser.

 

Remember to make additional changes the same way, consistently.

Share this post


Link to post
Share on other sites

Posted · Report post

Ok, tried that and I just don't have the skills.  Ugh.

 

Anyway, is there any way to just make the images and/or the banner titles clickable?

 

I tried doing <a href... etc in the banner title and it breaks things.

Share this post


Link to post
Share on other sites

Posted · Report post

One thing I have encountered is a bug that messes up banners.  If you add short code for font awesome in a banner title, it breaks the banner:

 

1.  Create a banner, add title, image, and text.

 

2.  Add shortcode to title, i.e.:

<i class="icon-group icon-white icon-large"></i> Title Here

And then look at what it does to the banner. 

Share this post


Link to post
Share on other sites