In this article, we will learn how to use Strapi's content management feature to create a landing page from scratch using dynamic zone components. This is a non-technical approach to using Strapi's components and features without requiring the assistance of a developer. We would develop a homepage for Stri-Fitness, a fitness company.

Prerequisites

To build this project,

1. You must download and install Node.js (Strapi recommends version 14).
2. You need to have npm (version 6 only) or yarn to run the CLI installation scripts. Content

Step 1: Scaffolding a Strapi Project

The first step is to start a new Strapi project. There are several ways to start a new Strapi project, such as the starter CLI, but the quickest way is to install it via the Strapi Command Line Interface (CLI).

1
2
3
npx create-strapi-app landing-page --quickstart
#OR
yarn create-strapi-app landing-page --quickstart

The code snippets above will scaffold a new Strapi project. It should also open in your browser automatically. If it does not, you can start the admin panel on your browser by typing the following command into your terminal.

1
2
3
npm run develop
# OR
yarn run develop

This should launch a new browser window with the address http://localhost:1337/admin/auth/register-admin.

You can register as an administrator here to gain access to the admin panel.

Fill out the admin registration form with accurate information.

After clicking the "Let’s Start" button, you will be able to access the Strapi Admin Dashboard.

Step 2: Build the Stri-Fitness Collection.

We will navigate to the Content-Type builder under plugins and click the Create new collection link.

A form will appear, and we will use Stri-Fitness as the display name. We click the Continue button and fill out the fields that will be required for the landing page.

We would need text fields for short text called Title and long text called Description.

To add the title, click on text and enter Title into the name input with short text as the type, then click on Add another field to do the same for the description with long text as the type. Save your changes, and the Stri-Fitness collection should be accessible.

Step 3: Understanding components and dynamic zones in a non-technical term

Components consist of multiple fields grouped together. Multiple independent fields may be grouped together to create a component. There are two types of components: Non-repeatable components are, as their name suggests, groups of fields that can only be utilized once.

Repeatable components are components that can be used to generate multiple entries.

To learn more about components, it can be found in the official Strapi documentation

Dynamic zones are a more advanced application of components. It is a collection of components, each of which is made up of several independent fields.

In simplier terms, it is safe to say components are made up of fields and dynamic zones consists of components.

Step 4: Application of repeatable components and dynamic zones in the Stri-Fitness landing page

For our landing page project, we would need the following dynamic zones:

Hero section, Features, Time schedule, Pricing, Frequently Asked Questions, CTA and Footer.

This is a screenshot of the wireframe design of the Stri-Fitness landing page.

An important advantage of building components is to avoid repetition of fields while creating a collection. So in our website, we would need to to build components that are reusable across all pages/feature of the landing page.

We would require the following components:

• Image component, which will include an image and a caption.
• Text component, which will include both short text (title) and long text (description).

To create the image component, go to the Content-Type builder and click the Create new component button.

A new form appears to create a new component.

Create a new category called stri-fitness and enter Image as the display name. A new prompt will appear to select the fields for the component, as well as the media and text for the image and caption, respectively.

Save these changes while the app restarts to take effect.

Perform similar operations to create a text component that will include both short and long texts.

The final component should look like the image shown below.

The subsequent step is to add dynamic zones to our website. As shown below, navigate to the stri-fitness collection and add another field.

Here, the dynamic zone will be selected as a new field.

The Hero section will be the first dynamic zone created. Enter HeroSection in the display name field and then click the button that adds a component to the zone.

A new pop-up will prompt you to choose an existing component. These components have been created previously. For the HeroSection, only the Image component is required.

The procedure is repeated for other features of the application that will be created utilizing dynamic zones.

After including all dynamic zones, the stri-fitness collection should resemble the one displayed below.

Step 5: Populate Content for the landing page

The final step is to add content to the landing page. Create a new entry for the Stri-fitness collection within Content-Manager.

Each components will be populated accordingly. After including content across all fields in the component, we should have a view similar to this.

At this step, we have succeeded in creating a landing page from scratch without the assistance of a technical person. It is important to note that the layout and order of the page can be rearranged from the strapi admin panel.

In order to see this page on the client side, a technical person or a developer needs to consume the Strapi endpoints.

Clicking on the Publish button at the top right side of the admin panel enables the developer to consume the endpoint and show on the client side for the users.

Conclusion

Using Strapi Dynamic Zones, this article creates a fitness landing page on the fly without the need for a developer. Developers are not required to modify the front end if changes are made to the content in the dynamic zone.

In an instance where you want to include a testimonial feature in the form of an image and description. You can click on the add component to features button and include content for a testimonial feature.

To read more about how this can be easily consumed by a technical person, check out the official documentation.