In this post, we'll explore how to build a landing page using Strapi. We'll dive into the Content-Type Builder and see how to construct a landing page using single types with components and dynamic zones. We will be replicating the newsroom landing page in Strapi.
Before we work with our single type, we're going to create the components. These components will later be stitched together inside of a dynamic zone in order to create our single type page, which will provide the data to power this landing page. Below is the breakdown of the components we will be creating:
Let's start building the components, one by one.
Starting with the header, we'll create a new component called Header
. This component will have two text fields: title
and subtitle
.
Once done, the new Header
component should appear in the Components tab. Save it and move onto the next one.
Since our landing page reuses the title in different places, we'll create a Title
component. This will simply be a text field named title
.
After saving this, we proceed to create the third component, which is the call to action with two buttons.
To create this dynamic call to action component we will create two button components nested inside of a parent component. To do this, we'll create the parent TwoButtonCTA
with two components: FirstButton
and SecondButton
. Each button will have a Title
, Link
, and an Enum
(Primary
, Secondary
, Outline
, Outline Icon
). The Enum enables us to easily style the buttons later on.
Saving our TwoButtonCTA
creates both FirstButton
and SecondButton
automatically as separate components.
We now move onto creating an ArticleList
component. This will hold multiple Article
sub components, which themselves will include a Title
, Date
, and an Icon
(Media Field). This entire structure forms the skeleton of the article section on the landing page.
Saving our ArticleList
automatically generates the subcomponent Article
for us, making these components reusable in future pages.
Our final component is the InfoCard
. Here, we need to include a Title
(Text), Image
(Media), Description
(Long Text), and Background
(Enum). Additionally, we'll attach an existing Button
component as CTA button
.
This is the last component that we needed to create.
With our components ready, we will build the Newsroom
single type page. Here, we leverage Strapi's feature of dynamic zones.
Adding a dynamic zone called PageContent
, to our Newsroom
single type allows us to add all our created components. This gives content editors the flexibility to use these components in any order they prefer, omitting some, arranging some, and styling based on the enumerations we've set up.
With this done, a content editor can construct the Newsroom
page. They can add any number of Article
components inside an ArticleList
. They can specify a date, title, and icon for each Article
added. Similarly, they can add any number of InfoCard
components, each with their unique title, image, description, background color, and button.
In this step-by-step guide we illustrated the power of Strapi's content type builder. We've gone from multiple simple Components
to creating a dynamic single type page
. The key to this is the use of dynamic zones. This feature provides flexibility, allows for the rearrangement, styling, and adding/removing sections from the single type page, enabling you to build intuitive, user-friendly interfaces.
You can checkout out the video walk though here
I'm currently working full-time as the CTO at Arctic Leaf. I'm an Entrepreneur & Full-stack developer who likes to keep busy building cool stuff.