Way of adding pre-designed sections in the current editor/CMS?

Design help CMS
1

Hi guys!

I think it would be awesome to give the client the option to add certain pre-designed (that I made in Webflow) sections to his website in between other sections. That way the client can add a section and change the content, but not the design.

I added this idea to the Webflow wishlist here, but I wonder if there is a workaround for now? Could we do that with the current CMS? And if so, any thoughts on how?

I know it could take a while for Webflow to make this wish come true, so that’s why I wonder if there’s an alternative way of approaching this.

Thanks in advance!
Robert

1 Like
2

There are solutions to this, not just workaround. Using the CMS with conditional visibility, you can give more power to your clients to alter some of their static pages or to create, for example, dynamic landing pages on-demand, with various layouts.

Example with adding sections to their homepage.: Of course here we need a certain dose of predictability, hence the “pre-designed” aspect you were mentioning.

So, design a series of sections and bind their content to the CMS: Images, background images, titles, text, you name it, everything supported by the CMS can be dynamically added by the client, and there can be some static elements, icons, textures, etc. Logically, you’ll create a Collection for it but only use one or a few Collection Items for it (as it’s only going to populate 1 or a few extra sections, right?)

Use contitional visibility to decide when each section is visible, or hidden. For example, you can bind the visibility to any field, and use the “is set” or “is not set” attribute. For example, “If Title is set then the section is visible”. As simple as that. Or, better, add a switch in the collection fields and make this witch decide if the section is visible or not.

You can then create a whole system of dynamic landing pages. Design the Template page with a lot of various sections, for example 12, but they’re all hidden by default. As soon as the client put data for those sections in the CMS, they get activated. So The client can push a landing page with section 1, 2, 4, 11, another one with 1, 8, 9, 10, 11, 12, etc.

You, as a designer, must concentrate on making those sections work well visually whatever the content (kind and lenght) the client will input.

5 Likes
3

Thanks Vincent, it comes very close to what I meant, so I think it will help anyway, but…

One issue though: I want the client to be able to put a pre-designed section 1 in between section A and B, or in between D and E on that same page. Does that make sense? With your system the client wil only be able to put pre-designed sections between section A and B.

Or am I missing something here?

1 Like
4

The way to do this is drop in a Collection List. Each of the collection items should be Page Sections so the client can add them in whatever order they want. Then you add a dropdown in the Sections CMS where the client can select what type of section they want to add to the page (Image + Heading + Button, Full-Width Video, Three Column Section, etc.). Once the client selects one of the predesigned layouts for that section item, you use conditional visibility to reveal that design within the section item. Here’s a quick tutorial. Let Your Client to Add, Remove, & Rearrange Page Sections from the Webflow Editor - YouTube

2 Likes