How to create a landing page design system in Webflow

Building landing pages can be a long, drawn-out process

Marketing campaigns can involve multiple people in multiple departments, from C-Suite, to marketing, to development. Webflow’s CMS makes it as easy as filling out a few fields in a database to build landing pages at scale.

Using Webflow’s CMS, it’s possible to create a landing page design system that allows you to craft multiple versions from the same building blocks, making for a quicker and more streamlined approach than building landing pages individually.

And it only takes 6 steps:

1. Design your content: Decide what elements should be dynamic so you can easily update them on the page
2. Create your Collections: Create a database in Webflow CMS that your pages will pull assets from
3. Create your Collection items: These will be your landing pages. Fill out the fields in the database to populate them
4. Design your landing page: Design the page template that will pull content from your Collection
5. Connect your Collection fields: Map elements on the page to fields in the Collection
6. Publish your site: Push your pages live to the web with a few clicks
   

To get you started, I built a landing page system template that you can clone and make your own, but it’s easy enough to start from scratch!

Step 1. Design your content

Decide what is the specific goal for your marketing campaign and what types of content and keyword focused copy need to be included to best inform your audience. Limit the content to what is essential to convey your message so that visitors aren’t confused by information overload.

• Navigation: Landing pages don’t need a full navigation menu. You don’t want to distract visitors by providing them links to leave your landing page and miss out on a conversion. A simple link to your home page through your brand logo is generally enough.
• Hero section: The section at the top of your landing page typically holds your headline, a subheading, and an image or video — all focused on quickly telling the visitor how they will benefit from your product or service and that it matches their search intent.
• Call to action: You want this to be obvious and as simple as possible to reduce friction. It should explain exactly what will happen when they click the button.
• Main benefit: Dig a little deeper to tell people what your product/service does and how it solves the problem your customer is facing. Hit the pain points that your target audience is facing.
• Features: Describe the key aspects of your product/service that help solve that problem.
• Second signup form: I’ve found having another signup form at the bottom of the landing page can increase conversion rates by not requiring your visitors to scroll back to the hero CTA, or by getting a commitment from them when they are indecisive.

Note: None of these elements are mandatory — you should add, remove, and tweak based on what makes sense for your business and how well the landing page is performing.

Step 2. Create your collections

Create a collection specific to your marketing campaign. You can call this collection by the name of your marketing campaign, or simply “landing pages.” This will be the central framework that your landing pages will be built on.

Here you’ll add in all of the necessary fields for text, images, and other elements that corresponds to the content designed in Step 1. These fields may include things such as a hero image, call to action text, product images, explainer videos, and buttons. Having this database makes it easy to generate multiple versions of landing pages by just changing the text, images, and other components that are contained within it.

Common landing page CMS fields are:

1. Heading (plain text field)
2. Sub-heading (plain text field)
3. Hero image/video (image field)
4. CTA Button text (plain text field)
5. CTA Button link (link field)
6. Form title (plain text field)
7. Form button text (plain text field)
8. SEO Meta titles and descriptions (plain text fields)
9. Features (multi-reference field)
   

Pro Tip: Webflow’s CMS gives you the power to reference a collection from another using the multi-reference field. Let’s say you create a separate collection of just your features. You can then pick and choose features from this collection to include in a separate CMS collection template that controls the layout of the web design. Webflow’s CMS allows for sophisticated connection between different collections.

Create a Features collection by adding another Collection to your CMS in the Webflow Collection panel.

1. Feature name (plain text field)
2. Feature icon (image field)
3. Feature description (rich text field)

Note: the fields you use for your features may vary, but these will provide a good starting point.

You connect the Features collection to your Landing Page collection with a multi-reference field. This just takes a few extra steps:

1. Open the Collection panel
2. Click the gear icon to the right of the “Landing pages” to open the Collection’s settings
3. Add a new field
4. Select multi-reference as the field type
5. Select the Features Collection as the source
6. Click Save

Once you’ve done this, you’ll be able to select any features you’ve added as items in your Features Collection when making a new landing page. You can also create Collections for Calls to Action, Team members, and product details and connect them in the same manner.

Step 3. Create your Collection items

Now it’s time to add the elements that will dynamically populate your landing pages.

1. Open your Collection in the Collections panel
2. Click New landing page (or whatever you named your collection)
3. Add the content that corresponds to each Collection field
4. Click Save

Step 4. Design your landing page

A landing page should look and feel like the rest of a company’s web design. The Landing Page CMS will create a blank template  that you only need to design once, and then the CMS will repeat that design for all the landing page items you added to your collection.

Design a layout that fits the content that you created in Step 1 and added to your CMS in Step 3. Break the content up into various sections so that it’s easy for your visitors to consume the content and follow the action steps to convert.

Be sure to respect HTML hierarchy by making the main Heading an H1 and the following headings H2 to H3 to H4. This improves accessibility and Core Web Vitals scores for SEO ranking.

Step 5. Connect your Collection fields to your design elements

Here’s where the magic starts to happen: connecting your page elements to the CMS Collection you built earlier. This is how your pages know where to get the content you add in the CMS.

Start by connecting the Heading and Subheading fields to the corresponding text in your hero layout. Then connect the hero image or video and CTA button text.

After that you can continue connecting dynamic elements for the other sections to their respective CMS fields.

Step 6. Publish your site

With that finished you are ready to push your pages live. Click publish. That’s it! Go visit your newly created landing page and marvel at your creation.

Now that you have a CMS collection and a template, creating a new landing page is as easy as creating a new Collection item. You can also A/B test different headings, call to actions, and images and how they relate to conversion rates as easily as updating the fields in your collection and republishing.