Uploaded November 2024 | Updated September 2026, 2 weeks ago

---

Let's lear about Strapi components and dynamic zones by modeling data for a here section for out website in this Strapi 5 crash course.

If you haven’t seen the previous lessons, make sure to check them out on my channel or visit our website for complimentary notes.

In this lesson, we will build a Hero Section Component for our Strapi application. This is a crucial part of your website that encapsulates essential elements like headings, subheadings, text, links, and images. Here’s what you can expect to learn:

🚀
00:00 Building the hero section data in Strapi 5 by creating a component collection for top navigation.

🎨
02:20 Building the hero section in Strapi 5 involves creating a "hero section" component with fields for subheading, main heading, and long text.

🚀
04:12 Created a Strapi landing page with a hero section featuring a heading, subheading, repeatable links, and an image

🚀
06:40 Create a dynamic landing page in Strapi by adding a Dynamic Zone for the hero section and customizing it with text, a "getting started" link, and an image.

🔍
09:19 Set up public permissions in Strapi to access homepage data via API and retrieve it using Postman.

🌟
10:11 Populate Strapi hero section by using dot notation in the query builder to include links and images while auto-populating text elements.

📊
12:47 A new HTTP request successfully retrieves and displays all data for the landing page, including the hero section components and their details.

🚀
13:45 Building a hero section in Strapi using Dynamic Zones for component selection and integrating with Next.js for data retrieval.

Recap of Previous Lessons: The video builds on earlier tutorials where components such as the top navigation were created in Strapi.

Creating the Hero Section Component: The instructor demonstrates how to create a new component called "hero section" with fields for subheading, heading, text, links (using a previously created link component), and an image.

Setting Up the Landing Page: A new single type page called "landing page" is created to host the hero section. The video explains how to use a Dynamic Zone to allow for flexible component inclusion.

Populating Data: The instructor showcases how to add content to the landing page, including the hero section's data, and explains the process of granting permissions for public access to this data.

Using API Queries: A demonstration of making GET requests using Postman to retrieve the hero section data is provided, including how to structure queries to populate associated fields like links and images.

Stay Connected:
Subscribe for more Strapi tutorials and web development tips.
Comment below with any questions or topics you want me to cover in future videos.
Thanks for watching, and I’ll see you in the next lesson!