We are building a SaaS website with a CMS powered landing page and a blog. What is a CMS powered landing page? Here is a great look at why CMS landing pages are so powerful but in a nutshell... This allows people to launch new landing pages in minutes by just using a CMS item. No need to wait for developers!
For this tutorial we are building a landing page for our SaaS startup and we will take buffer.com as inspiration for our layout and content.
First you need to set up your Webflow account, create a new project and select blank canvas.
We are going to add a navbar first and give it a background colour of White (Webflow automatically assigns #ddd). The navbar automatically includes some elements which are inside a container. If we add a div block and put the elements inside then delete the container we get a navbar which stretches across the whole of the site. A container is fixed to a certain width.
Name the div block class ‘Nav Wrapper’ and select flex, align center and justify to the sides. Add padding on the left and right because we don’t want the nav elements to be touching the sides of your browser.
Select the Nav Menu element and copy and paste it into the Nav Wrapper. Add a button or two into this Nav menu and delete the links.
In the Brand element you can add your Logo and have it link to the homepage (which you are currently building) but here we’ve just added a text block.
Add/delete and rename Nav links to what you will require. These will likely lead off to pages but you can use dropdown for multiple options and many other things.
Style your buttons and give them class names.
Next we are going to set up our Hero section. So add a section and give it a class name ‘Section’ - Webflow actually will do this for you automatically if you just start styling it. Give it some padding too. This spaces things out and we will use a section class throughout the site to make it all space out nicely and evenly.
Now add a container. This helps keep all the content on the site align properly and helps with mobile responsiveness.
In that container we are going to add a Columns element (2 columns). You can adjust the size of the columns. In the first column, add a Div Block and within that add a Heading, paragraph and button element. Again add some spacing to these elements to spread them out. In column 2 add the Image element and upload+insert your image. You may need to play with the sizing/alignment etc of the image.
Select the columns element and use flex, align center.
Now style your elements and give them class names. You can do this as you go along of course.
PRO TIP: If you want to add drop shadows to elements like this button. Use the below for different sizes:
Add another section with the ‘Section’ class. Add a container again with a div block within it. Then add an image element in the div block and resize it.
Select the div block and flex align center.
Select the image, add some padding either side and opacity 15%. As you see here, Webflow automatically named the class - which you can rename at any time. Copy and paste multiple times and add in the different logos you’re using and adjust any padding/styling options you want.
(Select the container and flex, align that too.)
Next section needs a ‘Section’, container and div block to start with. But both the container and div block need flex vertical and center. For this div block we want it to be a max Width of 600px so it doesn’t go all the way across the page. In the div block add a Heading and Text block (both of which need to be centred. Then select the container and add an image. Style if appropriate.
This section has a layout similar to our hero section so you can copy/paste that and then alter the text/sizing/images etc to speed things up. However in this container we are going to add another Columns element (3 columns). With the columns element selected, add some spacing to the top so it’s not so packed together.
In column one, add a Div block and add padding. You can also re-select the columns element to center the elements inside. In the Div block, add an image, heading and text block. Style and space as necessary. Then you can copy/paste the whole div into the remaining columns to keep the same format and just change the elements.
Next section starts with a ‘Section’ class again. But we want to make it a different colour. If you add ‘Blue’ as a class name, Webflow creates a combo class which doesn’t affect the original. Now set the background colour to Blue.
Add a container and div block with max width 550px. Flex and center them as we did a couple sections ago. Add a heading and make it white to stand out (center the text) and add a button beneath. Style this as you’d like.
This section starts with some content already added. As we’ve seen previously we have a section, container, div block and centred text. This div has fixed width of 550px.
Add another container with columns (2). Add a div block with padding, make the background white with styling (borders box shadows etc). Add a heading, text and link block. Style appropriately. Copy and paste into the second column.
You can add a max width and center the columns element too to keep these tighter.
Footer section. Add a section again and then add a columns element with 4 columns. Add a div block in one column. Add a heading, and text link. Select the link and change it to ‘block’ and add some padding above and below. Copy and paste depending on what you need.
Style this section but make sure you make a combo class ‘Footer’. Add a background colour.
On the left column we’ve added a link for the logo again like the navbar.
There we have it!
First you need to set up a few CMS collections:
Go into the Landing Page collection and let’s add fields
Add these fields to the Features collection:
Add the same to your How it works collection:
Add these fields to your Testimonial Collection:
Now you need to populate your collections. Start with Features, How it works, Testimonial collections.
Add all the appropriate text/images/links etc.
Your landing page collection is what content will populate the CMS landing page. Enter the details you want to use and link features, how it works and testimonials with the collection items you just created
Head over to your ‘Landing Page Template’ page and design how you want your page to look. As we already created a bunch of sections in our SaaS website, we are going to copy/paste a lot of these and then link the content to our CMS items to populate them.
Copy the Navbar, Hero section and footer. Then select the elements and link to your Landing Page collection items
Add your logos section the same as the homepage (this content won’t change) and now we’re going to add the Features section. We’ve copied a section from the homepage with two columns, text on the left and an image on the right.
Add a Collection List Wrapper to this section and connect it to ‘Features’. Copy the container from the pasted content, select the Collection item and paste in there. Select your text and images to link with your CMS features items. You should see the separate features all with the same format - if you chose 2 features, you’ll only see 2, if you chose 4, you’ll see 4 etc. You can now delete the original content that we copied from the homepage (as we just used it as a template).
Again we’ve used a section from the homepage, this time is the Call to action section. Paste it into your Landing Page Template, connect the text to your appropriate fields (you can always keep CTA sections the same instead of using the CMS)
For this CTA section we are going to delete the button we pasted over and instead, add a form block. Delete the field labels, select the form and change the display to flex. Select the first text field and make some changes to margins, border radius etc to how you like. Also add some placeholder text in your fields because we’ve deleted the labels. When selecting the second text field, add the same class to it so it’s formatted the same. You’ll also notice there are different types for the text fields (Name, Email etc) so make sure you’re using the correct ones.
Style your button how you wish and you’re done!
This section is going to be our How it works section so I’ve used the content of 3 columns horizontally across the page. Similar to our features section, add a Collection List Wrapper to the container and link to How it works Collection List.
If you select the collection list you can choose settings and use 3 column layout. Select the div block which is wrapping the content below and paste it into the first Collection Item column. Link up the elements to your Collection items.
Delete the original content which we used as a template and add a heading to name the section ‘How it works’
Now let’s add a testimonial section. I’m using the 2 column layout we’ve used before but this time, select the content in column 2 and drag into column 1 and vice versa. Changing up the layout a little bit.
As the Testimonial items are referenced (not multi-referenced) in our Landing page item we can select the elements in this section and directly add the Testimonial images and texts.
There you have it, a landing page template which you can duplicate by simply adding new Collection items in your CMS.
This is going to show you how to put together a very simple blog and using inspiration of layout from the GitHub blog (similar to what I use on Makerpad.co)
Create CMS collections: Blog posts, Author and Tags.
Add some content to your Tags collection.
Add a field to your Author collection:
Add in some content.
Add fields to your Blog posts:
Populate some content.
We need to add a new page on our website for all our blogs to be displayed before we get into the blog post template pages.
When copy/pasting items across pages you can right-click and create symbols for elements you use often. So for Navbar and footer this is especially handy.
Create a page with a Navbar, Section and footer.
In your Blog page section, add a container and a Heading ‘All Posts’. Add a collection list wrapper and connect your blog posts collection. Select the Collection item and let’s start formatting.
Add a div block then within it put a Text link. Format it big as it is going to be the Heading but also the link to the individual blog post. So on the Link settings, link to the ‘Current Blog Post’.
Add another div block in your collection item. Give this a width of 20%, and make the width of your other div block 80%. In the left Div we can add some text and from our collection item we can use the created date (or published date).
Add elements into your div block with blog summary, author image and name. Format them as you wish. You can add a text link for the tag you’ve referenced in your blog post too. This can link to the tag page. I won’t go into detail on designing this page because it’s the same format as we’re going to do for the blog template.
Now let’s style our Blog Posts template. Start with Navbar, section and footer as before. Add a container and div block and simply add in the elements of the blog post. Format as you wish.
We’re going to add another section below. With a Collection List Wrapper, 3 columns and connected to your Blog Posts collection. Again, add in the elements of your text link (for current blog post), author details etc.
Also if you select the Collection List Wrapper and in the settings you can add a filter for “Blog Post - is not - Current blog post”. So the posts displayed will not show the current post (obviously).
And there we have it! A simple blog with blog post template.