---
title: "Academy Article"
canonical_url: "https://academy.laioutr.com/en/artikel/content-sections-hero-banners-grids-quotes-logos"
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)
- [Content sections: hero, banners, grids, quotes, logos and promotion](https://academy.laioutr.com/en/artikel/content-sections-hero-banners-grids-quotes-logos)
# Content sections: hero, banners, grids, quotes, logos and promotion
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.
## Before you start
- Plan
- Laioutr UI licence for the project (platform edition)
- Role
- Editor or Admin in the project
- Duration
- 8 min
### Prerequisites
- Project with a page set up in Studio
- Images and logos in the media library
Last reviewed on October 15, 2026
Laioutr UI ships ready-made content sections that editorial and marketing teams place on any page in Studio and fill with their own copy, images and links. Every section uses the active theme, adapts to mobile and desktop and keeps text legible on light, dark and coloured backgrounds through an automatically detected surface tone.
### The main content sections
- **Hero Slider**: the stage at the top of a page, static with one slide and a slider with several. Each slide has its own mobile and desktop images and up to two buttons.
- **Banner Basic**, **Banner Integrated**, **Banner Showcase**: call-to-action banners, from a large image banner to a compact hint inside the content.
- **Content Grid** and **Editorial Grid**: cards in a grid, with a highlighted first row in the Editorial Grid.
- **Persona Quote** and **Quote Card**: testimonials, on their own or as a slider.
- **USP Banner**: a slim strip with benefits such as shipping, returns or service.
- **Logo Slider** and **Logo Grid**: partner, brand or certification logos.
- **Content Slider** and **Media Gallery**: rotating content in a slider and images in a lightbox with zoom.
- **Promotion Banner**: a campaign band with countdown, copyable discount code and button.
## Step by step
1. 1 ### Step 1: Add a section
Open the page in Studio and add a section at the desired position in the layer tree on the left. Pick the matching content section from the list, for example **Hero Slider** or **USP Banner**.
2. 2 ### Step 2: Fill in the content
Enter heading, text, images and links in the properties panel on the right. For heroes and image banners, always add a dedicated mobile image and maintain an alt text for every image and every logo.
3. 3 ### Step 3: Set the presentation
Set size, alignment, background and overlay. A gradient or colour overlay with suitable opacity keeps headlines readable on bright photos.
4. 4 ### Step 4: Check every device mode
Switch between mobile and desktop in the preview. Check that text wraps cleanly, image crops fit and sliders show their navigation.
5. 5 ### Step 5: Save and publish
Use **Save** to store the draft and **Publish** once everything looks right.
## Frequently asked questions
When should Persona Quote be used instead of Quote Card?
Persona Quote is designed around a large profile picture and only works when a photo exists for every quote. Without photos, the Quote Card is the better choice. It optionally shows a star rating, avatar and company logo and can be aligned left or centred.
Logo Slider or Logo Grid?
The static Logo Grid suits a short, fixed list. With many logos, the Logo Slider saves space and adds navigation. Both use the same structure per logo with title, image and optional link.
What is the Promotion Banner meant for?
For campaigns with a deadline or a code, such as a sale or a shipping offer. Countdown, discount code and button can be switched on individually, and the code is copied with one click and confirmed. For brand storytelling, Banner Basic or Media + Text fit better, and for permanent messages the USP Banner.
How many USPs belong in the USP Banner?
Three work well. The banner shows one entry at a time on phones, two on medium screens and three on large screens, and adds arrows as soon as there are more entries.
## Related
- [Add and arrange sections and blocks](https://academy.laioutr.com/en/artikel/add-and-arrange-sections-and-blocks)7 min
Sections are the large areas of a page in header, body or footer, and blocks are content units inside a section's slots. Both are added and arranged in the layers tree and edited in the properties panel.
- [Build a landing page from existing sections](https://academy.laioutr.com/en/artikel/build-a-landing-page-from-existing-sections)10 min
A landing page is created in Studio as a Landing Page type page with its own path and is assembled from installed sections: hero, content, a product slider with shop data, and header and footer as global sections.
- [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.
- [Images and video, popups, notifications and in-page navigation](https://academy.laioutr.com/en/artikel/images-video-popups-notifications-in-page-navigation)7 min
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.
- [Global sections for header, footer and recurring content](https://academy.laioutr.com/en/artikel/global-sections-for-header-footer-and-recurring-content)5 min
A global section is created once and referenced on any number of pages. Changing its content changes it on every page that uses it, which is typical for headers, footers or a USP bar.
## Learn it in a lesson
- [Build a landing page from existing sections](https://academy.laioutr.com/en/lektionen/frontend-manager-build-a-landing-page)12 min
- [Apply page type recipes](https://academy.laioutr.com/en/lektionen/ux-designer-page-type-recipes)12 min
## [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/content-sections-hero-banners-grids-quotes-logos#webpage",
"name": "Academy Article",
"url": "https://academy.laioutr.com/en/artikel/content-sections-hero-banners-grids-quotes-logos",
"@type": [
"WebPage",
"FAQPage"
],
"breadcrumb": {
"@id": "https://academy.laioutr.com/en/artikel/content-sections-hero-banners-grids-quotes-logos#breadcrumb"
},
"isPartOf": {
"@id": "https://academy.laioutr.com/#website"
},
"mainEntity": [
{
"@id": "https://academy.laioutr.com/en/artikel/content-sections-hero-banners-grids-quotes-logos#/schema/question/1"
},
{
"@id": "https://academy.laioutr.com/en/artikel/content-sections-hero-banners-grids-quotes-logos#/schema/question/2"
},
{
"@id": "https://academy.laioutr.com/en/artikel/content-sections-hero-banners-grids-quotes-logos#/schema/question/3"
},
{
"@id": "https://academy.laioutr.com/en/artikel/content-sections-hero-banners-grids-quotes-logos#/schema/question/4"
}
],
"potentialAction": [
{
"@type": "ReadAction",
"target": [
"https://academy.laioutr.com/en/artikel/content-sections-hero-banners-grids-quotes-logos"
]
}
]
},
{
"@id": "https://academy.laioutr.com/en/artikel/content-sections-hero-banners-grids-quotes-logos#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": "Content sections: hero, banners, grids, quotes, logos and promotion",
"item": "https://academy.laioutr.com/en/artikel/content-sections-hero-banners-grids-quotes-logos",
"position": 4
}
]
},
{
"@id": "https://academy.laioutr.com/en/artikel/content-sections-hero-banners-grids-quotes-logos#/schema/question/1",
"@type": "Question",
"inLanguage": "en",
"name": "When should Persona Quote be used instead of Quote Card?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Persona Quote is designed around a large profile picture and only works when a photo exists for every quote. Without photos, the Quote Card is the better choice. It optionally shows a star rating, avatar and company logo and can be aligned left or centred.
"
}
},
{
"@id": "https://academy.laioutr.com/en/artikel/content-sections-hero-banners-grids-quotes-logos#/schema/question/2",
"@type": "Question",
"inLanguage": "en",
"name": "Logo Slider or Logo Grid?",
"acceptedAnswer": {
"@type": "Answer",
"text": "The static Logo Grid suits a short, fixed list. With many logos, the Logo Slider saves space and adds navigation. Both use the same structure per logo with title, image and optional link.
"
}
},
{
"@id": "https://academy.laioutr.com/en/artikel/content-sections-hero-banners-grids-quotes-logos#/schema/question/3",
"@type": "Question",
"inLanguage": "en",
"name": "What is the Promotion Banner meant for?",
"acceptedAnswer": {
"@type": "Answer",
"text": "For campaigns with a deadline or a code, such as a sale or a shipping offer. Countdown, discount code and button can be switched on individually, and the code is copied with one click and confirmed. For brand storytelling, Banner Basic or Media + Text fit better, and for permanent messages the USP Banner.
"
}
},
{
"@id": "https://academy.laioutr.com/en/artikel/content-sections-hero-banners-grids-quotes-logos#/schema/question/4",
"@type": "Question",
"inLanguage": "en",
"name": "How many USPs belong in the USP Banner?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Three work well. The banner shows one entry at a time on phones, two on medium screens and three on large screens, and adds arrows as soon as there are more entries.
"
}
}
]
}
```