Simply copy and paste the following command line in your terminal to create your first Strapi project.
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:
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
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:
SecondButton. Each button will have a
Link, and an
Outline Icon). The Enum enables us to easily style the buttons later on.
TwoButtonCTA creates both
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
Date, and an
Icon (Media Field). This entire structure forms the skeleton of the article section on the landing page.
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
Description (Long Text), and
Background (Enum). Additionally, we'll attach an existing
Button component as
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.