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