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.

Check out Webflow which is what we will be building everything with.

Building a SaaS website

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:

• Small: Distance 1px, Blur 3px, Size 0px rgba(0, 0, 0, 0.1)

• Medium: Distance 4px, Blur 6px, Size -1px rgba(0, 0, 0, 0.1)

• Large: Distance 10px, Blur 15px, Size -3px rgba(0, 0, 0, 0.1)

• X-Large: Distance 20px, Blur 25px, Size -5px rgba(0, 0, 0, 0.1)

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!

Creating a CMS powered Landing Page

There you have it, a landing page template which you can duplicate by simply adding new Collection items in your CMS.

Creating a blog for your startup

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:

• Name (plain text)
• Profile picture (image)

Add in some content.

Add fields to your Blog posts:

• Name (plain text)
• Body (Rich text)
• Summary (plain text)
• Author (reference)
• Tags (reference)

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.