can you make an image create a simple popup beside or below the image

busterw · January 2018

I ran across a site that has done something I would like to do.

The site is here:

The particular thing I'm wondering if can be done with the BeTheme is towards the bottom of the page, above the purple and grey boxes, there are 6 images. When you click on any of them, a little box opens that has a brief bit of info. Is that possible with this theme with any of the muffin builder options?

Thanks for any help you can provide.

Bryan · January 2018

Hi,
we do not have an item like this but you can use HTML to do it. For example:
[button title="Button" link="#you-custom-id" target="_blank" class="" download="" rel="lightbox" onclick=""]
<div id="you-custom-id" style="display:none">CONTENT HERE</div>

So what you need is a link with rel="lightbox"
thanks

busterw · January 2018

That seems like a pretty good start. How would I alter that code to use an image rather than a "title" for the buttons? Also, If I want one of the buttons to link to a pdf file that will open in a new tab, how could I do that, or could I? In other words, if I had code like this:

[button title="Button 1" link="#you-custom-id" target="_blank" class="" download="" rel="lightbox" onclick=""]

<div id="you-custom-id" style="display:none">CONTENT HERE</div>

[button title="Button 2" link="#you-custom-id" target="_blank" class="" download="" rel="lightbox" onclick=""]

<div id="you-custom-id" style="display:none">CONTENT HERE</div>

[button title="Button 2" link="#you-custom-id" target="_blank" class="" download="" rel="lightbox" onclick=""]

<div id="you-custom-id" style="display:none">CONTENT HERE</div>

How could I make each of them use an image rather than a title and make "Button 2" link to a PDF file?

Thanks!

Bryan · January 2018

What do you mean? Do you mean that you want an image to link to a popup?

If you want to link to a PDF file in the second button simply link to the PDF URL and do not use the popup DIV.

busterw · January 2018

I figured out how to use and image and text for the button. I did it like this:

[button title="<div align='center'><img src='https://url-to-image-file'></img>; <br>LABEL<br>HERE</div>" size="small" color="#EEE7E3" link="#you-custom-id" target="_blank" class="" download="" rel="lightbox" onclick=""]

<div id="you-custom-id" style="display:none">CONTENT NEEDED</div>

Thanks for the info on the link to PDF. That should do the trick.

Thanks for your help!

Bryan · January 2018

You could just have done it like this:
<a href="#your-custom-id" rel="lightbox><img src="URL" /></a>
You do not need to use the button shortcode.

busterw · January 2018

Is there a way to format these so they have a border and you tell it the color of the border? I don't want a border just around my image. I want it around the entire button.

Thanks!

Bryan · January 2018

Can you please send a link to this button and also send a screen of what it would look like ?
thanks

busterw · January 2018

The button is on this page: http://verandapensacola.com/develop20/ below the slider.

I would like it to look like this:

Bryan · January 2018

Please add a custom class or ID to the section, then we will be able to target those buttons with CSS. Otherwise it would work for every button on the website.
thanks

busterw · January 2018

Can you provide additional info on how to do this?

Thanks!

Bryan · January 2018

Yes, locate those buttons in your Muffin Builder and edit the section that they are located in. Then find the custom class or custom ID field and type in a name, for example 'apples'. This can be anything, it will be used to target those elements and give them borders.

can you make an image create a simple popup beside or below the image

Comments