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

Comments

• 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
  

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• busterw

  January 2018 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!
• 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.
  

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• 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.
  

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• busterw

  January 2018 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!
• Bryan

  January 2018

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

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• 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
  

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• 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.
  

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next