If you’ve been following this series on the CodeLights plugin called SiteOrigin Widgets by CodeLights, you’ve probably already explored more than just its flipboxes and the hover effects I covered in parts 1 and 2. This time around I’m going to show you the Modal Popup component.

A modal popup by definition is a window that forces a visitor to interact with it before they can go back to the page that triggered the popup. With this plugin, a popup can be triggered in a number of ways including:

  1. Automatically on page load,
  2. by clicking a button,
  3. by clicking text,
  4. and also by clicking on an image.

The Demo

Let’s begin with a quick demo of what the modal popup component of this plugin does. Click on the button below and you’ll be presented with a neat little window which can be interacted with or closed either by clicking on the X top right or anywhere outside of the popup itself.

READ MORE
SiteOrigin Widget Demo
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id libero non erat fermentum varius eget at elit. Suspendisse vel mattis diam. Ut sed dui in lectus hendrerit interdum nec ac neque. Praesent a metus eget augue lacinia accumsan ullamcorper sit amet tellus. Duis cursus egestas hendrerit. Fusce luctus risus id elit malesuada ac sagittis magna tempus. Sed egestas fringilla turpis at ullamcorper. Pellentesque adipiscing ornare cursus. Aliquam a nulla sapien. Sed facilisis ultricies purus, sed dapibus eros auctor vel. Phasellus et est nibh. Sed sagittis neque vel magna euismod ut vulputate sapien tempus. Fusce feugiat condimentum nulla. Aliquam quis convallis nunc. Nulla eu eros quam.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id libero non erat fermentum varius eget at elit. Suspendisse vel mattis diam. Ut sed dui in lectus hendrerit interdum nec ac neque. Praesent a metus eget augue lacinia accumsan ullamcorper sit amet tellus. Duis cursus egestas hendrerit. Fusce luctus risus id elit malesuada ac sagittis magna tempus. Sed egestas fringilla turpis at ullamcorper. Pellentesque adipiscing ornare cursus. Aliquam a nulla sapien. Sed facilisis ultricies purus, sed dapibus eros auctor vel. Phasellus et est nibh. Sed sagittis neque vel magna euismod ut vulputate sapien tempus. Fusce feugiat condimentum nulla. Aliquam quis convallis nunc. Nulla eu eros quam.

 

For more examples of what this modal popup can do, visit codelights own demonstration page where you’ll find an example of each trigger as well as all the different options that are possible with this component. This ranges from photo galleries to frameless videos and many more to dazzle your visitors and wow your clients.

Throw In A Little Elegant Themes Love

Although you can’t use the Divi Page Builder inside these popups, you can still squeeze in some ET love by using a variety of shortcodes that are available by default wherever you have a WYSIWYG HTML editor in Divi or Extra and, as you’ll see, in the editor of the Modal Popup settings screen. For the full list and examples, head on over to the page detailing these shortcodes on the Elegant Themes website, and discover what’s available to you in situations like this.

Setting It Up

Getting the modal popup up and running is quick and easy. Begin by installing and activating the plugin and then, when you’re in the HTML editor of the page or post you want to add the popup to, click on the little blue Codelights icon in the toolbar, then choose Modal Popup from the next screen, and you’re set to go.

Next you’ll be presented with the settings windows where you will find a pretty self explanatory set of tabs which you’ll use to configure the popup.

SiteOrigin Widgets Modal Popup Settings

Once you’ve finished configuring it, simply click on the Save changes button and a new shortcode with all the settings you’ve just configured will be generated and inserted into the editor you were originally working on. And that’s all there is to it. Hit preview and you’ll find your modal popup ready and waiting for you to click on its trigger.

Wrapping It Up

And there you have it, a quick and easy way to create a neat little modal popup in Divi. These popups are great for a variety of things including giving visitors more information without them needing to navigate away from the page they’re on. Go ahead and get popping!

Oh, and if you want to take this to a whole new level, check out the premium Divi Overlays plugin on divilife.com. With Divi Overlays you can create full screen overlays, popups, or modals using the Divi Builder.

Featured image by Alex Munsell on Unsplash