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

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.

Comments

  • 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
  • edited 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!
  • 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.
  • 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!
  • 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.
  • edited 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!
  • Can you please send a link to this button and also send a screen of what it would look like ?
    thanks
  • The button is on this page: http://verandapensacola.com/develop20/ below the slider.

    I would like it to look like this:
    image
  • 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
  • Can you provide additional info on how to do this?

    Thanks!
  • 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.
Sign In or Register to comment.