mailmodo-hamburger

How to Use amp-lightbox in Your AMP Emails

Suryanarayan Pal
BySuryanarayan Pal

3 mins read

Have you seen an effect where an element comes to the screen center when you click on it while putting a dark shade on everything else?

It is known as the lightbox effect and is generally done to highlight an element and get a better view of it. With the amp-lightbox component’s help, you can now create lightbox effects right inside your AMP emails.

This guide will discuss what amp-lightbox is and how to use it in your AMP emails.

  • What is an amp-lightbox?

  • Applications of amp-lightbox

  • Features of amp-lightbox

  • Wrapping up

What is an amp-lightbox?

The amp-lightbox is an AMP email component that shows elements in a lightbox effect. It is when the elements come to the screen center and generally, an overlay of transparent black shade covers everything else. There may be any elements inside a lightbox such as buttons, images, and containers.

amp lightbox in action

Applications of amp-lightbox

Here are some ways in which you can use the amp-lightbox:

1. Reveal discount offers

We all have seen pop-ups on eCommerce websites where after we spend some time, it shows a pop-up with a discount offer. They do it for a reason, as discounts trigger buying decisions. So it may be beneficial to use that in your AMP emails by adding your discount pop up inside the amp-lightbox.

2. Give feedback

You shouldn’t leave your clueless and give them feedback if something is important. Pop-ups are one of the ways in which you can give feedback. Create a pop-up with amp-lightbox that’ll notify the users.

For example, you are probably aware of the iPhone’s storage full pop-up. With the help of that pop-up, Apple gives feedback to its users that their storage is full.

Maximize your email performance with our free ebook

Optimize the right email metrics for higher ROI

3. Make your emails appealing

The lightbox effect makes your emails stand out because it is rare for people to see a lightbox effect in their emails. So if you include one, users will find your emails appealing and they will remember you. So it is totally fine to use this effect just to make your emails look appealing.

Related guide: How to Use amp-image-lightbox in Your AMP Emails

Features of amp-lightbox

With the amp-lightbox component you can create the following lightbox effects:

✅ Mention the animation type

You can set how the lightbox will animate with these animation attributes: fade-in, fly-in-bottom, and fly-in-top. The default value is set to fade-in, making the lightbox slowly appear in view.

✅ Style your lightbox with standard CSS

The standard CSS allows high customizability, and you can use this functionality to customize your AMP lightbox effect as well. You can customize both the lightbox effect and the elements inside it to make it look exactly the way you want.

Other attributes of amp-lightbox include: id, layout, autofocus, data-close-button-aria-label, etc. Visit amp.dev for more information.

Wrapping up

The lightbox effect has many applications, and we have discussed some of them in this guide. Similar to the amp-lightbox, we have also covered other AMP email components like the amp-accordion, amp-sidebar, amp-image-lightbox. These also provide some cool effects to use and make your emails more appealing.

Share this article
copy link
like/dislike
Linkedin logo
Twitter logo
Facebook logo
Whatsapp logo
Pinterest logo
mail logo

What should you do next?

Thanks for reading till the end. Here are 3 ways we can help you grow your business:

2_e7e11ef835
Get smarter with our email resources

Explore our email marketing guides, ebooks and other resources to master email marketing.

1_6f8cd1f355
Do better email marketing with Mailmodo

Send app-like interactive emails with forms, carts, calendars, games, etc. to boost email ROI.

3_44e5481591
Talk to an email expert

Get a 30-min. free email consultation with a Mailmodo expert to optimize your email marketing.

3X
conversions
with interactive emails

Group_1110166309_87722e1553

Get 3X conversions
with interactive emails

Check.svg

Create & send interactive emails without coding

Check.svg

Put revenue on auto-pilot with pre-built journeys

Check.svg

Save time with AI-powered email content creation

1000+ businesses grew with Mailmodo, including

Frame_1110165681_3_b26b1a7573
Group_1110165532_1_bf39ce18b3
Ellipse_Gradientbottom_Bg
Ellipse_Gradientbottom_Top
gradient_Right