We’ve made significant progress in our portfolio
build so far, but this is where things start to accelerate, because when we say visual
CMS, what do we mean? [Sara] Yeah, what do you mean? [McGuire] Great question, Sara. A content management system lets us set
up a database, a collection of information like client projects, or blog posts, or menu
items, but after we get all that information into a database we can design with it, visually. That means we can link parts of our design,
we can connect placeholders to that data. [Sara] Those data. [McGuire] Those data. But this means we’re able to design faster,
and we can add new items that adhere to the designs we build out. And, we’ll do this in five parts: we’ll
set up the basic structure, we’ll create our CMS collection (this is the database of
project), we’ll add content to that collection, we’ll show how we can use the CSV to more
quickly import that data -- [Sara] Those data
[McGuire] Those data. And finally we’ll build out our design referencing
the items in that collection, which really does feel like magic. Let’s start with the structure. Same basic concept as before, with the top
section, let’s grab a section element. We'll use the navigator this time to place
it at the bottom, we’ll put it right here, underneath our existing section, and with
this section we’ll use the same class. We’ll go over to the selector field here,
and we’ll type in section. And when we do, we bring along all those style
values from before. We’ve got the sixty pixels on the top, and
the sixty pixels on the bottom. This is padding, space inside that element. And we want to do something else here. We want to add a heading. Let’s drag in a heading. We can drag it right into that section. This time we want it to be an H2, our top
level heading on the page. I elevate user experiences using telekinesis,
that’s our H1, our top level heading. This one will be an H2. And, let’s double-click and edit that to
say, Selected Projects, and a few things we can change here. First off, let’s change our styling. Of course, we could use our heading style
from down below. We can also duplicate that class, so this
can be secondary heading, and decrease the font size since it’s an H2, twenty-eight
pixels. And if you notice over here on the left side,
the H2 goes all the way up to the section. And that’s because we haven’t yet added
our container. So the other part of our structure is going
to be the container element. Let’s go up and add a container. We want to add this inside the section, and
of course if we grab our secondary heading, and put it inside, we have our container,
keeping everything neatly bound. Now, notice how it does not match the container
in the nav bar, or the container in here. That’s because those are using the container
class. With our container down here selected, let’s
go up and make sure the container class is applied. Now it matches. Again, at any time, we can change something
like the maximum width, and it affects all containers using that class. We’re fine with twelve hundred. One more text element to add here. Let’s add a paragraph. This paragraph can be basic, lorem ipsum,
we can use placeholder paragraph text. Maybe get rid of some of it. Let’s stop here. And we can even set a maximum width. Over here we set a maximum width of four fifty,
so maybe on this paragraph here we can set another maximum width of four fifty, like
that. Now there’s a ton of space here, our secondary
heading has that sixty pixels that we used on this heading. So for our secondary heading let’s decrease
that maybe to twenty pixels or even ten pixels might be okay, fifteen. And, with that paragraph selected, we might
want to drop down that color. Just decrease it’s opacity maybe to, let’s
see, so we’re using our contrast ratio checker here. If it’s this low, it's a little low, let’s
put it up to maybe sixty percent looks pretty good on this paragraph. That’s looking okay, at least while there’s
a black background. If we change this later, for instance if we
change this section’s background color, or we change all our section’s background
color to red, of course that contrast won’t be high enough now. If we go in to edit that text color, we can
see it’s failing. We’d have to increase that white color,
even at full it’s failing. Also, this is hideous and it sears the retinas. Let’s change it back. Command Z, undo, very quickly, very quickly,
very quickly. Well, we built it once. Let’s build it again, but faster. Command Shift Z to redo. And we’re back. But, there’s one more thing to notice here. We created spacing here, we created padding
of sixty pixels on the top here, we created sixty pixels underneath this heading, between
the heading and the image, between here and the end of this section is another sixty pixels. But, if you look at this section, sixty pixels
doesn’t go all the way down to that heading. If we click our secondary heading here, we
can see there’s twenty pixels of margin. Let’s remove that. So it’s even and matched. But we can always change this stuff later. But for right now, let’ s move into creating
our CMS collection, and this is the part we describe as magic. So, let’s go over here to CMS on the left
side, and let’s create our collection. And our collection name is going to be Projects. And we want to add some fields. First off, this name will be the project name. Each of these collection fields will hold
the data for each project. So we want to make sure we’re listing out
fields for every type of data we want to track. So, for clients, we’re going to want a brief
description. Let’s go to plain text. And we’ll say this is a brief project description. If we want to add an image, maybe an image
for each project, let’s go to image, and let’s say project image. Let’s add another field. Maybe for each project we want a different
color. So let’s say project color. We can design with this color. It could be unique, it could be matched to
each project. Let’s add another field. This time with an option dropdown, this can
be the type of project, or project type. And, let’s add a few options. Maybe we do illustration; let’s add another
option for web design. These are all the types of projects Megan
wants to feature. Maybe prototyping. And finally let’s add one more for general
UX design. So four options, let’s save that and add
another field. We want to add the year, let’s do a plain
text field for project year. Another plain text field for the name of let’s
say, client name, the name of the client on that project. Let’s add another one for the project details,
rich text, project details. We can show these on each project page. And just two more. Let’s add a field which is a link. We want a link to the project, so we’ll
call it project link. And one more, final field, let’s add multiple
images. So for each client project, we want to be
able to add multiple images. Let’s say project images. And here’s what happens: when we press,
Create Collection, suddenly we have this blank database and we can add a new project. That’s taking the name new project, that’s
the project collection we just added, let’s press New Project. And suddenly, we can add one of Megan’s
projects. Now, for Megan’s first project let’s type,
investment-app. Slug is okay. Brief project description, we have something
on our clipboard already. Let’s drag in an image here, so we have
this investment app, we can just add the Bluerock.jpg here, we’ll just drag it right in. We can paste in a project color. The type of project is a UX design project. The project year is 2021. The client name is NewStar Dollars, and the
project details, we can type these or just paste them in from something like GoogleDocs. Let’s paste that right in. And for the project link, let’s make it
Google.com for right now. Finally, for project images, let’s go back
and add the other ones we didn’t add. So let’s deselect Bluerock, drag these four
right in, and that’s it. We’ve added four images to this multi-image
field. And that’s it. We can press Create, and now we’ve created
that investment app client. Now, there’s a faster way to do this. If we have all the data in something like
a CSV or any type of spreadsheet, let’s move over to Google Sheets here, we can say
hey, maybe we have the project names and these descriptions, we have them all written out
in a spreadsheet. So, we can say, let’s remove the investment
app right here, maybe reorganize them, although we can do it right inside of Webflow if we
want, but the important part is that we export the data, we save it as a CSV, a comma separated
values sheet. Go to File, go to Download, Comma Separated
Values. And, back in Webflow, we can import this,
right into our collection. We can just drag that CSV we just downloaded
right in. And, the reason we deleted the one we already
typed in is because we don’t want duplicate projects. We had four, all of them listed in the CSV,
but we typed out the first one together. So now we’re importing three in that CSV. We’re going to indicate that top row is
indeed the header, and we’ll hit Continue, and we’re just going to match each of these
field types. Most of them already lined up. If we have a few brief descriptions, which
we want to map to a field, sometimes this happens if it's not named exactly how we named
it when we made the collection. Let’s make sure this goes to brief project
description. And then project color, that's correct. Project type, let’s map that too. And finally let’s link that link to project,
let’s map the link to project to the project link field. When we’re ready, we can import those three
projects, and we’ve imported all our CMS content. Press Close, we have all four right here. Now, up on the top right here, we can click
this little pin icon, and we can add the project color, we can do the project year, we could
do the project link, well they’re all Google right now. Let’s do project description, and we can
preview all the data in our database inside our collection right here. Now we’re ready for the magic part. So, let’s close out of the CMS, and we’re
back in our main page. Let’s go and add a collection list. Now, a collection list references a collection. It’s just a list of things from that collection. So let’s put it under the paragraph. You can see we have three kind of placeholder
collection items, but we need to link this to our projects. This is the list of CMS collections, we have
one, our projects collection. Let’s click that. Suddenly you can see right here, we have a
list of each of the four projects. Each project we added to that database, to
that collection. Here’s the impressive part. We can go ahead and drag in something like
a heading, let’s drag that into any of these fields, doesn’t matter which ones. Put in architectural website, since it’s
in the H2 category, since this is the H2 and we’re still in the same section, let’s
make these H3s. And, nothing really impressive right now. It just says heading four times. But, if we click this little cog, and we actually
get the text from, we go to get text from, we can link this to the project name. And suddenly, we have a list of each of these. Let’s go ahead and add in a paragraph. Let’s go in, drag in a paragraph element,
again we’re placing this in the collection item. So, any of them we can put in, social network,
this one in this collection item right underneath, social network, again by default it’s just
a paragraph but we can get that text for that paragraph from the brief project description. Again, creating a link between these headings
and these paragraphs, and the data in our collection. Let’s add another one. Let’s add a text element, this time text
block right above the heading. Let’s make this the project type. And, one more text block, let’s add a text
block at the bottom here. Again, inside each of these collection items
we have a text block on the top, we have a heading, we have a paragraph, let’s put
that at the bottom, and let’s call this one, let’s just name it view project. Notice how as we’re doing this on any one
line it’s affecting all of them, and that's because when you make a change in any one
collection item, it affects all other collection items. So it affects the architectural, the social
network, the meditation app website, and the investment app. So, let’s do a couple things to design this
the way we want to design it. First, let’s make sure our collection item
is selected and what we’ll do here is do a couple things. Let’s first make sure we have a div block
inside that collection item. A div block is just a rectangle. It does what we tell it to do. We can put things inside that rectangle. We can put things outside that rectangle. It doesn’t matter. Let’s drag those four things. The div block is going to contain our text
block. Let’s put in our heading, let’s put in
our paragraph. We’re just putting that paragraph right
inside the div block, and the text block we can put that in too. So the div block now has all four of our elements. Here’s why this is important. We can select the div block, and set it’s
background color. We can go to element settings, and get its
background color from our projects, from that particular project color. We can see, we’re now styling these things. It doesn’t look great yet, but we’re now
styling these things based on each collection item's data, like the background color. So maybe with our collection items selected,
go back to element settings, let’s just add some margin at the bottom, maybe thirty
pixels. Let’s collapse this div block because we
want to do one more thing. We want to add an image. So let’s get an image element, let’s drag
it not in the div block but under the div block, and let’s get that image from our
project image field. Now, it’s kind of taking up all the space
available right now. It’s not very good looking. So, what we can use is CSS grid. We can select our collection item, this is
the parent element that contains that div block that has all of those data inside, and
it has the image. It has the image element inside. So with our collection items selected, let’s
change our display to grid. And, by default, we have four cells. Let’s remove that bottom row, right-click,
and Delete Row. Let’s increase the spacing to maybe thirty
pixels here, let’s press Done. Now we have this kind of side-by-side design. In fact, we might even want to get rid of
that. Let’s actually remove this spacing altogether. Looks good. We have this kind of side-by-side design,
so we can select our div block here, maybe add some padding, let’s do thirty pixels
on all sides. That looks pretty good. Maybe we want View Project to be at the bottom,
so with this div block selected, let’s name it. Instead of using the div block default class
name, let’s call this Project Details. And, we can add flex box to this. Flex box lets us sort things in any one of
two directions. So if we want to sort things vertically or
horizontally, we can click flex box. This is horizontal, but we can switch this
to vertical. And, what flex box allows us to do since we
set it on the project details, the div block that parent, we can select any children of
that parent,. So let’s open this up, click that text block,
and we can set it’s top margin to auto. And that pushes it all the way down to the
bottom. So, couple more things. Let’s select our Heading 3, and you can
do this on any of them our Heading 3, let’s add a class, let’s call it Project Name
Preview. And we can set a different font on this, let’s
set the font to DM Serif, let’s do a weight of four hundred, let’s decrease the font
size to twenty. Twenty looks pretty good. And for these top text blocks, let’s decrease
the opacity. Let’s drop these a little bit. That looks pretty good. Same thing here. We can apply a lower opacity. And, for organization’s sake, let’s make
sure as we’re making these new classes, as we’re changing each of these items, we’re
keeping things organized. So let’s say this is, Project
Type Preview. And we might want to change this parent element. Let’s go into the collection item, let’s
hit Edit Grid, or we can just go up to the top here, and hit Edit Grid, and maybe we
want to move this over. So let’s change this, these fraction units,
actually point seven five is pretty good. We can always click in, and point eight. That looks okay. Let’s hit Done. And so we’ve kind of offset our design here. So we have a description on the left, with
the view project button, which we’ll add in a moment. Again we should say this is button text. And we have all four projects added right
here. Now, we’ve set up a visual hierarchy here. Where our H1 is clearly the big headline,
the H2 is on a second level, and each of these H3s is on a third level. And the nature of our collection list, the
way we have each client project following the same structure, that lends itself to visual
repetition. Repetition establishes rhythm in our design,
and it makes scanning through our projects clear and easy to preview. And like we said, the great thing about building
it this way, is not only can we change the design down the road, but as we change stuff
in our database, in our collection, the design is going to update to reflect those changes. Now, we’re making huge progress, and we’re
even nearing the end of the work on the homepage. In fact, after this we’re just adding two
more parts. The contact form, and the footer. And then we’ll go through the entire homepage
to make sure it’s responsive on different devices like tablets and mobile phones. [Grimur] Hang on. I’m texting. I mean I’m reviewing some of the hero sections
and navorgations on, uh... Tweet-hir. And Insta. Using the hashtag, that we talked about — #21DayPortfolio. But I think I actually mistyped the hashtag, which
is profoundly embarrassing. But yeah. Let me know when we’re filming.
