How to build a landing page design system

Avani Shah
December 18, 2018

Landing pages can be a long, removed process that involves multiple people in multiple sections. Take a look how easy to fill out a form. 

Conversion Optimization, Search Engine Optimization and other marketing campaigns have great success with some fast-growing companies in the world to build personalized landing pages. But these landing pages can now come back to your investment and lower prices. Companies like Intercom have also created custom, internal devices to build landing pages. But we do not have to use valuable engineering resources to build those tools. Or those pages In this guide, I show you how to create a landing page design system which gives you quick (power! In seconds) and easily publish a great deal like a custom landing page.

And I’ll show how to do that without a bad landing-page builder and a pre-style template (or if you prefer) not everyone else.

And it only takes 6 steps:

1. Design your content: Select the element on the page

2. Create your archive: Create a database in the web flow CMS that extends the assets of your pages

3. Create your archived content: Create your collection items – which create your landing pages

4. Design your landing page: Design a real page that pulls content from your collection

5. Connect your storage field: In the field in the Map Elements collection window

6. Publish your site: Pressing your pages directly on the web with a few clicks

To help you, I created a landing page system template that you can clone and make your own but welcome to start from scratch!

Step 1. Design your content

Here, you will select the content component that you need to run the convergence. It will map to a database that includes page copy, image, video etc.

For this, we rely on some standard parameters discussed on how to design a high-volume landing page in our article.

€¢ Navigation: While you are general knowledge, you do not have to include navigation on your landing pages, I think it is disputed. I have not seen each other consistently doing well.

Hero Department: The hero usually holds his headline, sub-continent and image or video – all focus on what your visitor says, what your company/product is. It should be advantages-centric, not feature-focused.

€¢ Call to action: You feel it is as easy as possible to reduce friction.

€¢ Overview / Remedy: Find out what your product does and make a little deeper to tell your customer how the problem is resolved. It should also be advantages-oriented – not feature-focused.

€¢ Features: Describe the main aspects of your product that help solve that problem.

€¢ Second signup form: I found that there is another signup form below which can increase conversion rates for specific pages.

It probably does not appear to be as much content, but as time goes by, when you add complexity (Hick Act), decision-makers find it more effective to bring down the information needed by these vendors.

Step 2. Create your collection in CMS

Okay, now we’ve come to an engine that makes the entire system purr – web flow CMS (content management system) It stores assets (page copy, image, video, etc.) that will remove your landing pages.

To get started, go to the web, open the CMS panel, click create the archive and name it as “landing pages”.

Now create a field related to the content type of each content item you create and save your archive.

The areas we used in the template are as follows:

1. Header (plain text field)

2. Subheader (plain text field)

3. Hero Image / Video (Image Field)

4. Button Text (plain text field)

5. Button Link (Link Field)

6. Form Title (Plain Text Field)

7. Form Button Text (plain text field)

8. Features (Multi-Reference Field)

If you want to change the features displayed on each page based on the target audience, then you can use CMS to create it. To do so, you will need to create another collection named “Features” with the following fields:

1. Feature name (plain text field)

2. Feature icon (image field)

3. Feature Description (Rich Text Field)

Remember that the fields you use for your features may be different but this provides a great starting point.

Now that you have your feature collection, you need to connect to your landing page collection:

1. Open the archive panel

2. Click the gear icon to the right of “Landing Pages” to open the archive settings

3. Add a new field

4. Select multi-reference as the field type

5. Select the collection of features as the source

6. Save

Once you have done this, you will be able to choose any of the features added as an item in the collection of your features when you create a new landing page.

Step 3. Create your archived content

The part that you’ll take for every landing page that you want to build now comes: Create your archive item.

1. Open your collection in the collection panel

2. Click the new landing page

3. Add content for each archive field

Step 4. Design your landing page

Now comes the familiar parts: the actual landing page design. Most of you would like the designer to do this for you. The good news is that they only need to do this once and what they really will work for. They do not need to first distribute them to developers – as the web flow design, the actual code will be written in the background.

If you do not have a design source, you have a few options:

1. Use a template

2. Clone the UI Kit (or any cloning web flow site) to copy and paste pre-designed components into your final page

3. Rent an expert

At this level, do not worry about certain copies and images. Just style the style of the page you want based on the components of your collection.

Step5. Connect your design elements to your collection field

Here’s what magic starts here: Connecting your page’s contents to the CMS archive you created before. Your pages know where to find the content you created in CMS.

Step6. Publish your site

Now to push your pages. Click Publish. Just that. Visit your page now. From here, it is easy to create a new collection item to create a new landing page.

Check out all the marketing conjunctions you have for hooking up in your form, running ads, integrating analysis, running an email campaign, and more.

Here’s another cloning landing page system template to help you get started faster.

About the Author

Avani Shah

Avani Shah is a Marketing Manager at Template Trip. She is a resident of India. Avani is also experienced in Prestashop Responsive Themes, WordPress E-commerce Themes, Opencart Parallax Theme. She also likes to share her thoughts, on SEO, Digital Marketing, Email Marketing , Web Development.

Share this article