---
title: "Academy Article"
canonical_url: "https://academy.laioutr.com/en/artikel/images-video-popups-notifications-in-page-navigation"
locale: en
meta:
"og:title": "Academy Article"
---
[Go to home](https://academy.laioutr.com/en)
- [Storefront features](https://academy.laioutr.com/en/bereiche/storefront-features)
- [Content and navigation](https://academy.laioutr.com/en/leitfaeden/content-and-navigation)
- [Images and video, popups, notifications and in-page navigation](https://academy.laioutr.com/en/artikel/images-video-popups-notifications-in-page-navigation)
# Images and video, popups, notifications and in-page navigation
Media + Text and Media Preview show images and videos, PopUp presets present info, newsletter and offers, and toasts and alert dialogs give automatic feedback. Category Card Grid and Slider lead into product ranges within the page.
## Before you start
- Plan
- Laioutr UI licence for the project (platform edition)
- Role
- Editor or Admin in the project
- Duration
- 7 min
### Prerequisites
- Images and videos in the media library
- Categories from the connected commerce system for category tiles
Last reviewed on October 15, 2026
Besides banners and grids, Laioutr UI contains building blocks for media, popups, system notifications and navigation within a page. Editors place them in Studio, while notifications appear automatically.
### Images and video
**Media + Text** places a large image or video next to text, in a 50/50, 60/40 or 70/30 ratio, with the media on the left or right. **Media Preview** shows a single image with separate aspect ratios for mobile and desktop and an optional lightbox with zoom. Videos play in a built-in player.
### Popups
The **PopUp** comes as a preset for info, newsletter and promotion. Image, alignment and closing via the Escape key or a click on the backdrop are configurable.
### Notifications
**Toasts** report success, warnings or errors without interrupting shopping, for example after a discount code is copied. An **Alert Dialog** asks for confirmation before critical actions.
### In-page navigation
**Category Card Grid** and **Category Card Slider** lead straight into product ranges with category tiles, ideally in the first visible area.
## Step by step
1. 1 ### Step 1: Use Media + Text
Add a **Media + Text** section in Studio, choose an image or video and fill in heading, text and button. Choose ratio and media position so that the orientation alternates down the page.
2. 2 ### Step 2: Crop images for every device
Set separate aspect ratios for mobile and desktop and maintain an alt text. Only switch on the lightbox when details in the image matter.
3. 3 ### Step 3: Choose a popup preset
Choose the matching preset: info for notices, newsletter for sign-ups, promotion for an offer with a code. Keep the copy short and leave closing via a click on the backdrop enabled.
4. 4 ### Step 4: Place category tiles
Place a **Category Card Grid** or a **Category Card Slider** below the hero and choose the tile variant: basic, compact, compact-bordered or big.
5. 5 ### Step 5: Check and publish
Compare mobile and desktop in the preview and open and close popups once. Use **Save** to store the draft and **Publish** once everything looks right.
## Frequently asked questions
Can toasts be placed in Studio?
No. Toasts and alert dialogs are system notifications that the storefront triggers on certain actions. Colours and appearance follow the theme, and the notifications are labelled for screen readers and can be closed with the keyboard.
When does Media + Text fit better than a banner?
Media + Text suits content where the image carries the story, such as brand and guide pages. When the call to action is the focus, Banner Basic or Banner Showcase are the better choice.
Which tile variant fits where?
big suits image-led entry pages, basic general grids, and compact and compact-bordered pages with many categories or little space, for example above a product listing.
## Related
- [Content sections: hero, banners, grids, quotes, logos and promotion](https://academy.laioutr.com/en/artikel/content-sections-hero-banners-grids-quotes-logos)8 min
Laioutr UI ships ready-made content sections such as Hero Slider, CTA banners, card grids, testimonials, USP Banner, Logo Slider, gallery and Promotion Banner. Editors place them in Studio, fill them with their own content and adjust size, alignment and background.
- [Manage media in Cockpit and Studio](https://academy.laioutr.com/en/artikel/manage-media-in-cockpit-and-studio)5 min
Images, videos and audio files are managed centrally in the Media Library under Content in Cockpit. In Studio, the media picker selects files from every connected library, such as the shop system, and uploads new ones where the library allows it.
- [Use product tiles and product sliders](https://academy.laioutr.com/en/artikel/use-product-tiles-and-product-sliders)5 min
Product tiles show a product with image, brand, title, price, flags, colour variants and an optional add-to-cart button; the Product Slider lines such tiles up horizontally, for example for new arrivals or matching products. Which products appear comes from a query to the connected commerce app.
- [Accessibility according to WCAG 2.1 AA](https://academy.laioutr.com/en/artikel/accessibility-according-to-wcag-2-1-aa)6 min
Laioutr UI components are designed for WCAG 2.1 AA: contrast, keyboard operation, focus states and semantic structure are built in. An accessible storefront also depends on the content, such as alt texts, heading order and clear link texts.
- [Tracking and consent built into the components](https://academy.laioutr.com/en/artikel/tracking-and-consent-built-into-the-components)6 min
Laioutr components send events such as page view, product view, add to cart and purchase through one analytics layer. Each event only reaches the destinations the visitor has consented to.
## [Content and navigation](https://academy.laioutr.com/en/leitfaeden/content-and-navigation)
Search this guide
1. [Content sections: hero, banners, grids, quotes, logos and promotion](https://academy.laioutr.com/en/artikel/content-sections-hero-banners-grids-quotes-logos)8 min
2. [Images and video, popups, notifications and in-page navigation](https://academy.laioutr.com/en/artikel/images-video-popups-notifications-in-page-navigation)7 min
3. [Set up shop navigation and footer](https://academy.laioutr.com/en/artikel/set-up-shop-navigation-and-footer)10 min
4. [Build a blog with overview and article pages](https://academy.laioutr.com/en/artikel/build-a-blog-with-overview-and-article-pages)8 min
5. [Set up the store locator and store pages](https://academy.laioutr.com/en/artikel/set-up-store-locator-and-store-pages)8 min
6. [Build a pricing page with plan cards and a comparison table](https://academy.laioutr.com/en/artikel/pricing-page-with-plan-cards-and-comparison-table)9 min
## Structured Data
```json
{
"@context": "https://schema.org",
"@graph": [
{
"@id": "https://academy.laioutr.com/#website",
"@type": "WebSite",
"inLanguage": "en",
"name": "Default",
"url": "https://academy.laioutr.com/",
"translationOfWork": {
"@id": "https://academy.laioutr.com/#website"
}
},
{
"@id": "https://academy.laioutr.com/en/artikel/images-video-popups-notifications-in-page-navigation#webpage",
"name": "Academy Article",
"url": "https://academy.laioutr.com/en/artikel/images-video-popups-notifications-in-page-navigation",
"@type": [
"WebPage",
"FAQPage"
],
"breadcrumb": {
"@id": "https://academy.laioutr.com/en/artikel/images-video-popups-notifications-in-page-navigation#breadcrumb"
},
"isPartOf": {
"@id": "https://academy.laioutr.com/#website"
},
"mainEntity": [
{
"@id": "https://academy.laioutr.com/en/artikel/images-video-popups-notifications-in-page-navigation#/schema/question/1"
},
{
"@id": "https://academy.laioutr.com/en/artikel/images-video-popups-notifications-in-page-navigation#/schema/question/2"
},
{
"@id": "https://academy.laioutr.com/en/artikel/images-video-popups-notifications-in-page-navigation#/schema/question/3"
}
],
"potentialAction": [
{
"@type": "ReadAction",
"target": [
"https://academy.laioutr.com/en/artikel/images-video-popups-notifications-in-page-navigation"
]
}
]
},
{
"@id": "https://academy.laioutr.com/en/artikel/images-video-popups-notifications-in-page-navigation#breadcrumb",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"name": "Home",
"item": "https://academy.laioutr.com/en",
"position": 1
},
{
"@type": "ListItem",
"name": "Storefront features",
"item": "https://academy.laioutr.com/en/bereiche/storefront-features",
"position": 2
},
{
"@type": "ListItem",
"name": "Content and navigation",
"item": "https://academy.laioutr.com/en/leitfaeden/content-and-navigation",
"position": 3
},
{
"@type": "ListItem",
"name": "Images and video, popups, notifications and in-page navigation",
"item": "https://academy.laioutr.com/en/artikel/images-video-popups-notifications-in-page-navigation",
"position": 4
}
]
},
{
"@id": "https://academy.laioutr.com/en/artikel/images-video-popups-notifications-in-page-navigation#/schema/question/1",
"@type": "Question",
"inLanguage": "en",
"name": "Can toasts be placed in Studio?",
"acceptedAnswer": {
"@type": "Answer",
"text": "No. Toasts and alert dialogs are system notifications that the storefront triggers on certain actions. Colours and appearance follow the theme, and the notifications are labelled for screen readers and can be closed with the keyboard.
"
}
},
{
"@id": "https://academy.laioutr.com/en/artikel/images-video-popups-notifications-in-page-navigation#/schema/question/2",
"@type": "Question",
"inLanguage": "en",
"name": "When does Media + Text fit better than a banner?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Media + Text suits content where the image carries the story, such as brand and guide pages. When the call to action is the focus, Banner Basic or Banner Showcase are the better choice.
"
}
},
{
"@id": "https://academy.laioutr.com/en/artikel/images-video-popups-notifications-in-page-navigation#/schema/question/3",
"@type": "Question",
"inLanguage": "en",
"name": "Which tile variant fits where?",
"acceptedAnswer": {
"@type": "Answer",
"text": "big suits image-led entry pages, basic general grids, and compact and compact-bordered pages with many categories or little space, for example above a product listing.
"
}
}
]
}
```