How To Structure Your Landing Page Data in Strapi | Step-by-Step Tutorial

How To Structure Your Landing Page Data in Strapi | Step-by-Step Tutorial

In this video, Brayden Gerard demonstrates how to create a landing page using Strapi, a headless CMS.

He discusses how to use Single Types in Strapi using a mix of Components and Dynamic Zones. We go through replicating a page on the Strapi website inside of the Strapi admin. You will learn how to build components and dynamic pages in the Strapi admin.

Key topics summary:
- Creating a landing page using Strapi
- Using the content type builder to create a single type
- Building components for the page, such as headers, titles, call to actions, articles, and info cards
- Creating a dynamic zone for flexible customization by content editors

-----------------------------------------------------------------------------------------------------------------------
Chapters
------------------------------------------------------------------------------------------------------------------------
0:00 - Intro
0:34 - Creating the header component
1:15 - Creating the title component
1:43 - Creating CTA button components
3:55 - Creating a list of article card components
5:18 - Creating an info card component
7:44 - Creating the single type page using a dynamic zone
9:07 - Building a page in the content editor
12:39 - Wrap up

-----------------------------------------------------------------------------------------------------------------------
Resources
------------------------------------------------------------------------------------------------------------------------

------------------------------------------------------------------------------------------------------------------------
Strapi
------------------------------------------------------------------------------------------------------------------------

[Manuel_Schoebel]

Great video 🎉 Though I’d rather create a landingPage or just page collection and not create a single page type for a landing page since it won’t scale very well. Or are there benefits of using a single page in that context 🤔

[Levi-lur]

Great Video! What would you recommend for frontend? I'm new to this and I really like the simplicity of Strapi but ideally I would like to use a frontend framework that has TailwindCSS and is easy to implement Strapi with.

[AliSajidCS]

I thought he was building the UI :| And these are the frontend components. I was waiting when he will start adding designs :D

[anastasialysenko]

Hi, thanks for the video. Please, help me to understand, why in some video examples pages are created as Single Types, whereas in some other cases those pages are created under 'Page' Collection Types?

I'm trying to create a content structure for an Angular application and as I understand Collection Types provide the endpoints to fetch the data both for one of the collection item (/pages/:id) and for the whole collection (/pages) and Single Type provides one endpoint for one item (/page-name). It makes sense for me when the page is structured as a Single Type but I cannot think of a case when I need to fetch the content for all pages, so I cannot see the case where I need to create 'Page' collection type.

But maybe I'm missing something. This topic is very interesting to me, would be very grateful for the response.

[RishiJadaunnew]

how to get all from api please help me and suggest api formate

[gbmedia-io]

Are there any landing page templates for Strapi?

[ticworks]

But how to pull these data through API, Nested data not showing in populate=*

[RahulPanda-tj]

will you please fetch the API inside in postman, because I am unable to fetch the image inside of repetable component