â–Ľ
Streaming live at 10am (PST)

Individual layout of blog posts

Hey everyone,

I have a magazine section inside my website. Therefore, I use the Webflow CMS system to write and manage my blog articles.

The problem I have is this: In some articles there are more elements than in others. For example: quotes, statistics, buttons, pictures etc. When I add such an element into an article, this element is obviously also visible in every other article (because the article template is used).

The other possibility is to get the text, images, etc. out of the CMS system, like how it is done normally. But since not every article has the same structure and the same content, this does not help either. While e.g. the quote box looks good in one article, the quote box is empty in another article - the empty quote box is visible because the template consists of this box but no quote is used for this specific article.

Is there any way besides creating a static site for every article?

Thanks in advance!


https://preview.webflow.com/preview/new-website-cathago-juni?utm_medium=preview_link&utm_source=designer&utm_content=new-website-cathago-juni&preview=656e533d6c84f85080aee84a3f12e414&pageId=6128fa8cc3500f1a87eb7e39&itemId=6128fa8cc3500fc072eb7f4a&workflow=preview

Hey there!

To solve this you can use a combination of “Conditional Visibility” and the “Switch Field”. For example, within your CMS collection settings you could add the switch field above any individual or group of collection fields that you would like to have the ability to switch on or off. The positioning of the switch field above the target field does not affect functionality but is merely for organizational purposes. You could label this switch field, “Toggle Quote On/Off” for instance. You would then go to the template page connected to the CMS collection and use the conditional visibility settings in the Element Settings panel to configure the element, in this case a quote block to be visible only when the switch that you placed in you CMS collection fields list is “On”. You can do this for any number of elements on a page. For example, I used this recently for a client in the Home Services business for their Services pages. Some services required the addition of and FAQ section and others did not. I used the “Switch Field” and “Conditional Visibility” to control this.

These tutorial form Webflow University are a bit older and feature the old UI but still should be relevant and help you deploy this solution.

https://university.webflow.com/lesson/switch-field

https://university.webflow.com/lesson/conditional-visibility

Hey Kyle,

thanks for your super swift response. I am going to try that!

Best

1 Like

You’re welcome!! Best of luck with your project!