Setting up a CMS in Webflow

Setting up a CMS in Webflow

Disclaimer: Webflow might have undergone some changes in their UI, if you come across one, don't hesitate to reach out and we'll figure it out together

Part 1: starting a project and getting your pages ready 🌶

Steps part 1

Steps part 1

0

Step

Description

Pictures

Step

Description

Pictures

1

Step 1

Go to

webflow.com

⁠

and log in

2

Step 2

Go to the Dashboard and create a new project

3

Step 3

You will now see a bunch of templates hover over the second one in the top row as indicated in the picture and select this template.

4

Step 4

Give your site a name and click on “Create site”

5

Step 5

Your site is now created and should look like the picture

6

Step 6

As shown in the pictures:

Click on the "Pages” in the left side menu

Hover over the “About page" until you see ⚙️

Click on ⚙️

A menu should open now where you then can delete this page (see pictures for reference)

Delete the page

7

Step 7

Delete all the other pages we don’t need for now

Start with pages: Project 1, Project 2, Project 3, Project 4

Then delete the “Work" folder exactly the same way

Lastly delete the “Styleguide” page

It should now look like this

There are no rows in this table

⁠

Part 2: The navigator, adding a section and adding a container 🌶🌶

Steps part 2

Steps part 2

0

Name

Column 2

Picture

Name

Column 2

Picture

1

Step 1

Open the “Navigator”

2

Step 2

Select the section that containes the “works grid” and a container. Just select the section Then delete it by pressing the delete button on your keyboard

3

Step 3

In the navigator you should now have

Navigation

Section

Contact/CTA

Footer

4

Step 4

Open the “Add elements” menu

5

Step 5

Click (don’t drag) on “Section”

A new section should now appear on the bottom of the page

6

Step 6

Open the navigator again

Drag the section you just added to right above “Contact”

7

Step 7

Go to “Add element” again

Click on container

Drag the container in the new section

There are no rows in this table

⁠

Part 3: Setting up a CMS collection 🌶🌶

Steps part 3

Steps part 3

0

Name

Column 2

Column 3

Name

Column 2

Column 3

1

Step 1

Open the CMS menu

Then click on “Create New Collection” - a blue button in the corner.

2

Step 2

Name your collection

3

Step 3

Adding collection fields

Click on “Add New Field”

Select Image

Name this field

Save Field

4

Step 4

Repeat step 3 but instead pick “Plain text”

make sure to also select “Multiple line”

Don’t forget to click on “Save field”

5

Step 5

Repeat step 3 again but instead pick “Multi-image”

give this field a name

Save Field

You should now have the following fields: Name, Slug, Thumbnail Image, Text, Image collection

6

Step 6

Now press on “Save Collection”

7

Step 7

You should now see this:

8

Step 8

Press on “Add 5 items”

After doing that, you should see 5 rows with some “dummy” data. Placeholder text and images. Your collection is ready!

There are no rows in this table

⁠

Part 4: adding a collection list to your page 🌶🌶🌶

Steps part 4

Steps part 4

0

Name

Column 2

Column 3

Name

Column 2

Column 3

1

Step 1

Go back to your page by clicking on the “Pages” in the menu

2

Step 2

Now click on “Add Elements” and then choose “Collection List”

Drag this element to the container we made in Part 2. You should see some purple frames appear now inside the container.

3

Step 3

Connecting your CMS with your website:

Click on “Show all settings” in the collection List Settings popover.

A new menu should appear on the right side of your screen

4

Step 4

Go to the “source” field and select the collection you just made.

You’ll see some things change, but don’t worry - we need to do a few more steps

Select in Layout the first option - it should put the collectoin in a 2 column

Select now Limit items and type in “show 4”

You should now have a 2x2 grid in a purple frame

5

Step 5

Adding your content

Go to the Add elements menu

Drag the Link Block into the first field of the purple grid

You are creating a link that will need to a collection page that we will need later but we are already setting it up

A small popover will appear: make sure to select the purple page icon and then select Current xxx collection

6

Step 6

Adding an image

Go to the Add elements menu

Choose Image and drag it into the link block you just created

A new popover will appear - now select Get image from xxx Collection

Next select Thumbnail image in the dropdown

7

Step 7

Boom! You should now see 4 images appear in your grid. Don’t worry if there are doubles or not pretty. These are placeholders. You can always go back into your collection and change it manually.

8

Step 8

Adding a title

Go to the Add elements menu

Select Name and drag it underneath the image in your Link Block

Just like before make sure to select Get text from xx Collection

And select the name field from the dropdown

All images should now have their title

Don’t worry if it all doesn’t look so pretty - we can fix that later

9

Step 9

You made it this far! You already managed to put your collection on your site and build links to the pages attached. You can try to click on the eye icon and see how it behaves.

You’ll see that if you click on the images, you’ll go to an empty page. That’s what’s next. Building that page!

There are no rows in this table

⁠

Part 5: Setting up a Collection Page 🌶🌶🌶🌶

Steps part 5

Steps part 5

0

Name

Column 2

Column 3

Name

Column 2

Column 3

1

Step 1

Go to Pages

Select Your collection page (the page in purple)

Click on it and a white page should open

2

Step 2

Adding a back navigation

Select the add element menu

Drag a section into the white area

Go to the add element menu again and drag a container into the section you just added

Go to the add element meny again and drag a button into the container you just added

In the popover, click on the white page icon

In the dropdown select Home

Close the popover

Double click on the blue button (until you can edit the text) and change the text to go back

3

Step 3

Adding the collection to your page

Select the add element menu and drag in another section (underneath the other section)

Select the add element menu and drag a container in your new section

Drag an image into that container

In the popover toggle get image from xx collection and make sure to select thumbnail image from the dropdown

The image from the collection will now appear

4

Step 4

Adding more collection fields to the page

just like in step 3, do the same but add a Heading

Make sure it is in the same container as the image

The title of your collection item will now appear

Now try to do the same with a text element

5

Step 5

Open the add element menu and drag collection list to underneath the text you just added

In the popover select source: Image collection and select the 4 column option

close the popover

Open the add element menu and drag an image into 1 of the columns you just created

In the popover select get image from xxx collection and make sure to select Image collection from the dropdown

If images appear you can close the popover

6

Step 6

you have a functional CMS website go test it out.

Click on the eye icon on the top and try to click around - go back to the home page and try out the different project pages.

To go back to edit mode, simply click on the eye icon again

There are no rows in this table

⁠

Part 6: Styling 🌶🌶🌶🌶🌶

⁠

CMS HTML5 responsive website templates | Webflow

Browse HTML5 responsive templates powered by the Webflow CMS for your business, portfolio, or blog. Then customize it in Webflow without code.

webflow.com

⁠

⁠