{"id":13844,"date":"2018-03-10T20:30:59","date_gmt":"2018-03-11T01:30:59","guid":{"rendered":"https:\/\/wpdeveloper.net\/?p=13844"},"modified":"2019-06-27T07:08:47","modified_gmt":"2019-06-27T11:08:47","slug":"create-lightbox-in-wordpress","status":"publish","type":"post","link":"https:\/\/wpdeveloper.com\/create-lightbox-in-wordpress\/","title":{"rendered":"Create Lightbox with Simple Easy Steps"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Do you have a WordPress website? If you do, then you know how hard it is to create engaging content. But, here’s a catch – only good content are not enough to bring you traffic. Much of it depends on how you present it on your website.\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Lightbox- Making Your Content Interactive<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Lightbox lets you present video, image or other media in a pop-up. When a certain task is performed the Lightbox gets triggered and takes up the display screen. In short the Lightbox remains dormant and hidden until it is triggered, which makes it a great tool to grab reader’s attention.\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Create Lightbox for Your WordPress Site<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Elementor <\/a><\/b>does not have a dedicated element for creating lightbox. But\u00a0Essential Addons for Elementor<\/b>\u00a0<\/a>does! You get EA Lightbox &\u00a0Modal<\/b><\/a>\u00a0<\/b>with the Creative Elements bundle of Essential Addons.<\/p>

Undoubtedly, the\u00a0EA Lightbox & Modal for Elementor<\/b>\u00a0can help you add the right amount of action to your content. Similarly, you will not be wrong thinking of <\/b>it as a tool to extend the display area of a device. When the Lightbox triggers it takes up the full screen, leaving the original content behind. Your readers can get back to the original content at any time, using the close button.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

EA Lightbox & Modal for Elementor<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Trigger Options<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

This blog will guide you to exploit the three Trigger options <\/b>for the EA Lightbox & Modal Element. At the end of the blog you will also find a brief description of the three different Content Source<\/b> for the element.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

First thing first! Lets focus on the available trigger options. You can pick a Trigger option for the element from Content>Lightbox\/Modal Settings>Trigger button on. <\/b>There you will see three options.<\/p>

1. Button click<\/b><\/p>

2.External Element<\/b><\/p>

3.Page Load<\/b><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

1.Button Click<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

To trigger the Lightbox element on button click navigate to Content>Lightbox\/Modal Settings>Trigger button on>Button Click.<\/b><\/p>

As soon as you do so, you will see the customization options change accordingly.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"Create\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Why use Button Click?<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

By using this trigger option, you are letting your readers choose<\/b> to open the lightbox. It may not seem that big of a deal, but it is!\u00a0 Remember, interruption is annoying. Nobody wants unnecessary content on their screen.\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Customization options<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

You will have all the customization options available from the Content tab.<\/b> You can add styling from here too.You can adjust the normal and hover styles<\/b> for the button.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Button Text- <\/b>In this field, simply type in the title you want to place on the button.<\/p>

Icon- <\/b>From the drop-down menu pick a icon for the element. There are thousands of readily available icons for use.<\/p>

Alignment- <\/b>Set the alignment for the button- Right,Center,Left.<\/p>

Padding- <\/b>Adjust the padding for the button area only.<\/p>

Radius-<\/b> From here you can reshape the button area.\u00a0<\/p>

Typography-<\/b>Click on the Pencil icon to open the typography pop-up. Remember, you can only have one text on the button. From this option adjust the Font size, Family, Weight, Line-Height and Letter-spacing.<\/p>

Normal\/Hover Settings- <\/b>From here you can adjust the Text, Background and Border color for both the Hover and Normal state of the button area.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

External Element<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

To trigger the Lightbox & Modal element using another Elementor element, navigate to\u00a0Content\u2192Lightbox\/Modal Settings\u2192Trigger button on\u2192External Element.<\/span><\/p>

As soon as you do so, you will see the customization options change accordingly.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"Create\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Why use External Element?<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

This option lets you connect Lightbox & Modal with other Elementor <\/a><\/b>Elements. This a great technique to interlink your content.\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Customization Options<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Well, there is no customization option for it, apart from the identifier key. And the identifier is generated automatically. So, you only need to learn how to use this key to link other Elementor elements. Once you choose this option a identifier key will be generated automatically. Copy this key and paste it in the CSS ID field<\/b> of any other Elementor element. Also note that, every Elementor element has a\u00a0CSS ID option<\/span>\u00a0in the Advanced Tab.<\/b><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Lightbox and Modal linked with Button Element<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

We are going to link the EA Lightbox & Modal <\/b>element with the Button element <\/b>of Elementor.\u00a0<\/p>

Step1-Drop the Lightbox element on top of the Button element.<\/p>

Step 2-Select the\u00a0EA Lightbox & Modal <\/span>and navigate to\u00a0Content\u2192Lightbox\/Modal Settings\u2192Trigger button on\u2192External Element.<\/span><\/p>

Step 3-Copy the Identifier Key without the hash.<\/p>

Step 4-Select the Button element and navigate to\u00a0Advanced\u2192Element Style\u2192CSS ID.<\/span><\/p>

Step 5-Paste the Identifier key in the CSS ID field.<\/p>

Step 6-Save and Publish!<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"Create\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

3.Page Load<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Suppose you want to insert the modal in the middle of your blog post. No worries! That is also possible. Drop the element inside your blog, no matter which position. Then navigate to Content\u2192Lightbox\/Modal Settings\u2192Trigger Lightbox on\u2192Page Load.<\/b><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Why use Page Load?<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Use it to surprise your readers. You can insert an offer or announcement in the pop-up. In short, this is the exact opposite of the Button Click trigger.\u00a0<\/b><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Customization Options<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

There is only one customization option that lets you adjust the delay for the element. Use the bar and drag it left-right to pick the delay duration in seconds. Additionally, you can directly type into the field to use a negative delay duration<\/b> as well.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Now lets focus on content source for the EA Lightbox & Modal element.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t

Content Source<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

You will have three available sources to choose from.<\/p>

Image- <\/b>If you choose to use an image, use this option. You can either select an already existing picture from the media library or upload a new one.<\/p>

HTML Content-<\/b> if you choose this option you will see a smalll version of the WordPress Ediotr appear below. From there you can insert any HTML Content.<\/p>

External URL-<\/b> You can link videos, images, maps or other online content with this element. All you have to do is copy the link to that web page and insert it in the link field.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Wrapping Up<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Why take all the trouble if the final result will not be good, right? If you are asking this question to yourself, then see the\u00a0Demos<\/a>\u00a0<\/b>and decide for yourself.\u00a0<\/p>

Please let us know if we missed out on anything. If you want us to do a similar blog for any of the other Essential Addons elements, please leave a comment below. In the meantime,\u00a0here is a blog on the EA Content Timeline element.<\/b><\/a><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"

Do you have a WordPress website? If you do, then you know how hard it is to create engaging content. But, here’s a catch – only good content are not enough to bring you traffic. Much of it depends on how you present it on your website. Lightbox- Making Your Content Interactive Lightbox lets you […]<\/p>\n","protected":false},"author":2045,"featured_media":278016,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","inline_featured_image":false,"_eb_data_table":"","footnotes":""},"categories":[108,88],"tags":[136,654,121,137,138,135],"class_list":["post-13844","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-elementor","category-tutorials","tag-drag-and-drop","tag-elementor-lightbox","tag-essential-addons","tag-lighbox-element","tag-modal-element","tag-page-builder"],"nelio_content":{"autoShareEndMode":"never","automationSources":{"useCustomSentences":false,"customSentences":[]},"efiAlt":"","efiUrl":"","followers":[2045],"highlights":[],"isAutoShareEnabled":true,"networkImageIds":[],"permalinkQueryArgs":[],"series":[],"suggestedReferences":[]},"views":4319,"_links":{"self":[{"href":"https:\/\/wpdeveloper.com\/wp-json\/wp\/v2\/posts\/13844","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpdeveloper.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpdeveloper.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpdeveloper.com\/wp-json\/wp\/v2\/users\/2045"}],"replies":[{"embeddable":true,"href":"https:\/\/wpdeveloper.com\/wp-json\/wp\/v2\/comments?post=13844"}],"version-history":[{"count":42,"href":"https:\/\/wpdeveloper.com\/wp-json\/wp\/v2\/posts\/13844\/revisions"}],"predecessor-version":[{"id":279274,"href":"https:\/\/wpdeveloper.com\/wp-json\/wp\/v2\/posts\/13844\/revisions\/279274"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpdeveloper.com\/wp-json\/wp\/v2\/media\/278016"}],"wp:attachment":[{"href":"https:\/\/wpdeveloper.com\/wp-json\/wp\/v2\/media?parent=13844"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpdeveloper.com\/wp-json\/wp\/v2\/categories?post=13844"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpdeveloper.com\/wp-json\/wp\/v2\/tags?post=13844"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}