How To Create a Landing Page on the Fly Without the Need To Develop

This article refers to outdated Strapi information. For current Strapi v5, use the resources below:

Start here

• Strapi 5 docs (source of truth): Strapi 5 Documentation — official hub for setup, content modeling, APIs, and deployment.

Updated installation & prerequisites

• Installation prerequisites (Node v20/v22): Install requirements — Node.js v14 no longer supported; use LTS versions only.
• Create a new app (updated CLI): Installing from CLI — use npx create-strapi@latest instead of deprecated create-strapi-app command.
• Package manager support: CLI documentation — npm v6+, yarn, and pnpm all supported (not just npm v6).

Content modeling (components & dynamic zones)

• Content-Type Builder (current interface): Content-Type Builder — updated UI and workflow for creating collection types, components, and dynamic zones.
• Components documentation: Models documentation — reusable field groups that can be nested and used across content types.
• Dynamic zones implementation: Dynamic zones guide — flexible content areas with type: 'dynamiczone' and components array.

Admin panel & content management

• Admin panel access: Admin panel — still at http://localhost:1337/admin but with updated registration flow and interface.
• Content Manager (updated interface): Content Manager — current UI for managing entries, components, and dynamic zones.
• Admin panel customization: Admin customization — update logos, themes, and interface elements.

API changes & data consumption

• Population strategy (breaking change): Population — components and dynamic zones require explicit population with on fragments.
• REST API reference: REST API — updated response format and query parameters for v5.
• GraphQL API: GraphQL API — query components and dynamic zones with fragments.

CLI & development workflow

• Updated CLI commands: CLI reference — strapi develop for development, strapi start for production, and other essential commands.
• Development environment: Content-Type Builder — available in development only; disabled in production.

Database & deployment considerations

• Database support: Installation — MongoDB not supported; use PostgreSQL, MySQL, or SQLite only.
• Deployment guide: Deployment — production configuration and best practices.

Migrating from older versions

• Upgrade to v5 (step-by-step): Migration guide — comprehensive upgrade process with automated codemods.
• Breaking changes database: Breaking changes — complete list of changes between versions.

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).

1npx create-strapi-app landing-page --quickstart
2#OR
3yarn 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.

1npm run develop
2# OR
3yarn 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.