Webdesign in a CMS

Explore

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 🌶

Before we can start we need to get a good setup. This is what this step is about.Nothing super exciting, but very necessary to be able to go forward.

Steps part 1

Steps part 1

Step

Description

Pictures

Step 1

Go to

webflow.com⁠

and log in

Step 2

Go to the Dashboard and create a new project

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.

Step 4

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

Step 5

Your site is now created and should look like the picture

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

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 🌶🌶

Making your page ready to start building a CMS

Steps part 2

Steps part 2

Name

Column 2

Picture

Step 1

Open the “Navigator”

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

Step 3

In the navigator you should now have

Navigation

Section

Contact/CTA

Footer

Step 4

Open the “Add elements” menu

Step 5

Click (don’t drag) on “Section”

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

Step 6

Open the navigator again

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

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

Name

Column 2

Column 3

Step 1

Open the CMS menu

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

Step 2

Name your collection

Step 3

Adding collection fields

Click on “Add New Field”

Select Image

Name this field

Save Field

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”

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

Step 6

Now press on “Save Collection”

Step 7

You should now see this:

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 🌶🌶🌶

In the previous step you created a collectoin with several collection list items. Each list item contains a title, a thumbnail image, some text and an image collection. However we can’t see them yet on our page. In this step you can get this lists and images and texts, loaded in your page

Steps part 4

Steps part 4

Name

Column 2

Column 3

Step 1

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

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.

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

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

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

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

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.

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

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 🌶🌶🌶🌶

A collection page is a page where you can call all the data from your collection to your website. Meaning that if you just create the collection, and you have for instance 10 instances, you don’t need to create 10 pages. You can just set up 1 page layout, set up the links (which is explained in Part 4) and you will be good to go.

The things we are going to set up now, are not going to look super pretty. That is okay, the focus for now is to understand how to set up a CMS. We can add styling later.

Steps part 5

Steps part 5

Name

Column 2

Column 3

Step 1

Go to Pages

Select Your collection page (the page in purple)

Click on it and a white page should open

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

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

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

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

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 🌶🌶🌶🌶🌶

If you made it this far, good job! 🙌🏻

Feel free to now go ahead and build and style your page to your liking.

You can start from scratch or find a template to your liking.

⁠

This link can't be embedded.⁠

⁠

If you need some guidance in terms of styling in webflow you can use

this link⁠

- you can jump to the “styling” section for more info.

⁠

This link can't be embedded.⁠

⁠

Extra Tutorials

Extra Tutorials

Name

Column 2

CSS styling

https://www.youtube.com/watch?v=C-u7Br468Ds&list=PLPmnoMVpkxfjUN_6aZsEu_Vcav_tFl6JQ

paddings and margins

https://www.youtube.com/watch?v=hLvb4SBo4q0

Webstyling using classes

https://www.youtube.com/watch?v=Rrz0I0Gc5IM

flexboxes and grids

https://university.webflow.com/lesson/intro-to-flexbox

typography

⁠

https://www.youtube.com/watch?v=J2846GiZuLA⁠

⁠

Interactions and animation

https://www.youtube.com/watch?v=kDEgVDHR6Vk&list=PLPmnoMVpkxfj9ReU098A_GNXCuDJd5F2A

There are no rows in this table

⁠

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.