Creating New Pages: From Scratch vs. Templates 📄

How to create pages using components in webflow so as you can see I am here in build mode.

If you don't see build here, then first go to Preview role and select Marketer.

This way you still have enough flexibility to create new content, but you can't break the underlying structure.

So there are several ways how you can add pages or create new content.

So in the CMS you can add new pages to downloads, the blogs and the case studies by just clicking here on new download, filling it out and immediately is shown into the downloads overview grid and you can publish it from here.

This always follows the same template pages in the cms but probably for products and solutions you want the pages to be a little bit different depending on the product and might want to extend some pages on a later date.

That's why they are not constrained by a CMS template.

So let's go back to build.

Click here on pages and then you see here the list of the pages you currently have and some templates here.

from there can go to create new page.

So in this case create a page, we choose the template default.

here you can fill out the name of the page, the URL it gets populated automatically which can also change it if necessary.

Have a couple of SEO settings here at the bottom and you can even add schema markups here.

So when you fill this all out can click create.

Then you see it has already a navigation bar and a footer and a slot and a video lightbox.

This always needs to be there whenever you want to display a pop up video on the website.

So when you click here on page slot, that is the container in which you can add components.

Like we said in the last video, the components are the green ones.

When you click on them you have more options on the side.

So here are all the components gathered the left side you have different groups here.

But the ones you are going to use is only the sections.

These are just smaller component elements that make up the sections.

To keep things organized I would just use the sections.

They all have a clear name and also have a preview.

Preview is not always 100% perfect, but in general you can see quite well what kind of elements there are available.

So in this case let's start with a product header.

Click on it once and immediately pops up on your page with all the information on the right side.

First you check visibility.

Do you want maybe one button?

Maybe you don't want the image in this case and also not the USB grid.

Keep it short like this you can edit settings here, change the image, the buttons and the USBs.

from there we want to maybe add a grid.

Now let's see, you can search here for grid.

We want here the pain points.

Now you can see already the pain points are here.

By double clicking you can edit.

Does not always work.

Depends a little bit on how it's built.

so if the double clicking doesn't work you can do it here on the right side.

From there you might want a long product scroll with faq of course I already know what kind of elements there are on the page so for me it is a little bit quicker.

with command K you can also search and then go through the different components.

Now this is a large important component where you scroll, you have the FAQ or the questions here on the left side and the image on the right side and every block counts as one item.

So you see here what kind of navigation name you give it that's then linked to this one.

Now the tag text, the title, the paragraph and in this case the problem, how it's solved and what the theme gets.

You can change the image here as well and here you can edit it for the second item.

You can check visibility.

In this case that is about the tag on the top, the paragraph.

And maybe you don't want a section header at all.

You can also hide a couple of items.

You can see the navigation if you have less than three.

I would not recommend using this specific section.

you can do it up to six so not to overload it with all the same kind of content.

So from here let's add a simple block.

in FAQ you can add a call to action but make sure to create a section call to action here.

I mean there's already one on the page but you might want one in between.

Or maybe you want to call out instead.

Then you can delete this one.

Can change the text here as well, can switch to different components around and it all already works fully responsive so you don't have to worry about that.

Can set things in dark mode.

Make sure that you connect them nicely.

Not all of them can go in dark mode, but smaller sections definitely can.

And then one that you're probably going to use a lot is the text based image.

That is just a basic two column grid where you can add content on the left and images on the right.

Now you have some extra options here for the bullets.

You can add a check mark or check Large to add a little bit of extra styling and character.

This is an interesting block.

If you go here to text, you see instead of editing it here immediately like the other ones, you have a rich text element you can see here that that plus that you also have in the blog comes out here as well.

That means this is a way more Flexible block than for example here this is just a simple paragraph where you can't add like images or quotes here.

because we want to keep this pretty basic in terms of the content.

But here in the block we are currently building you can you can add more diverse.

sorry, more diverse content.

Check here we've got a long page already.

so then you click on here and it pops up a different editor because it's a little bit easier.

you can add subheadings, different quote blocks, images, numbers, etc.

So this is a little bit more flexible.

That also is for the content long.

That is also a block that looks like this in the beginning and the heading scrolls with.

But here when you open this up you could really make here a sort of long form type of content.

Just like we have on the product page.

I'll show that actually immediately just to show how flexible this is.

On the complaints management you can see on the left side on all the components I used.

So you have the product header.

We just used the pain points here.

This is the meetspartiva, highlighted text.

So this has a nice animation effect.

The USB grid we saw.

And then this is the long form.

So you can see that there's a lot of content here on the right side with subheadings etc.

That is actually the same as this one.

But here's just a bullet list with a bullet style to check large.

One other element I want to explain is the slider here.

And this is where components come in very handy because you can't see all the content directly in your screen.

So that's why it's a component.

And on the right side you can edit all the content very easily without having to see it all.

You can also hide some cards.

This specific slider goes up to five cards just to not overload it and keep it minimal.

So that is how you build pages from scratch.

As you can see here there also is a product template.

Later there will also be solutions template.

You can can choose those as well.

So when you go new page you choose product page.

Let's give this a quick name create and then you see there's already a lot in this, page as well.

Here you can add more component blocks to the page.

You can move them around, edit the content, and.

And this way, you already start with a base, and you can very quickly duplicate pages like this.

And that is all the different ways of creating new pages from scratch or using templates.