How to Make a Photo Slideshow Popup for Text and Buttons

How to Make a Photo Slideshow Popup for Text and Buttons

For everyhome.org/wp-admin,

MetaSlider is the plugin that allows us to create photo slideshows.

It provides a link id that can be imbedded as a hyperlink for text and buttons using the Popup Maker plugin.

On the left, scroll down to and select the MetaSlider plugin.

A blue and white signAI-generated content may be incorrect.

Here, you can Add a New Slideshow, Edit an existing slideshow, or for the “Shortcode” link for a photo slideshow.

A screenshot of a computerAI-generated content may be incorrect.

When creating a new slideshow, photos can be added using the “Add Slide” button.

A screenshot of a web pageAI-generated content may be incorrect.

You can select or upload a folder to the WordPress library.

A screenshot of a computerAI-generated content may be incorrect.

On the right, you can select Themes, edit the slideshow size, and more.

A screenshot of a websiteAI-generated content may be incorrect.

Once the slideshow created,

Scroll to the bottom, and copy the "Shortcode". We're going to imbed it in our Popup.

A screenshot of a messageAI-generated content may be incorrect.

To imbed the slideshow as a link in a popup,

Navigate to the Popup Maker plugin on the left of WordPress. You can either Create a New Popup, or you can edit an existing Popup.

A screenshot of a phoneAI-generated content may be incorrect.

When editing/creating a Popup, the Id name for the popup is required. The popup title is optional.

A screenshot of a pop upAI-generated content may be incorrect.

Paste the Shortcode for your specific slideshow, copied from the MetaSlider plugin, anywhere in the text body.

Excluding the metaslider id tag, the text entered in the body here will show when the user opens the popup to view the slidshow. However, additional text isn’t required.

Next, Scroll down to the "Triggers" section, and press "Add New Trigger".

Triggers cause a popup to open.

A screenshot of a social media postAI-generated content may be incorrect.

A blue rectangle with white textAI-generated content may be incorrect.

Here, add a name so the popup can be selected through CSS.

The name can be anything, as long at it begins with a period and has no spaces.

A screenshot of a computerAI-generated content may be incorrect.

Ensure the Trigger type is set to "Click Open" so the text or button can be clicked to open the photo slideshow.

A screenshot of a computerAI-generated content may be incorrect.

You can now have anything that accepts a CSS Selector trigger the photo slideshow!

For example, you can have text trigger the slideshow when clicked.

For a Text Block, press the Edit button.

Under the Text Block Settings…

A blue background with white textAI-generated content may be incorrect.

Add the CSS Selector name from the Popup Maker to the Extra Class Name text box.

A close-up of a screenAI-generated content may be incorrect.

Save then Preview the page, and your text will now be a clickable, pulling up the photo slideshow you created in MetaSlider and imbedded with Popup Maker.

A close up of a signAI-generated content may be incorrect.

You can edit the style of the slideshow back in MetaSlider.