Streaming live at 10am (PST)

Dynamic / custom design per CMS item


#1

Hi there,

I was wondering if there is a way to also create a custom layout per CMS item?
So for example now I can only a custom colour, but I would also like to be able to decide between a text-alignment (centered / left aligned) per CMS item, or even a custom background block width.

Added a screenshot with multiple examples that I would like to be able to pick between in the blog post editor somehow:

Is something like that possible or is there a workaround?

Thanks!
Thomas


Here is my public share link: LINK
(how to access public share link)


#2

Hi, @thomas123 welcome to the forums.

Natively there is not a feature that would allow you to do this. However, since webflow generates HTML you could achieve the desired outcome a couple of different ways. How you approach this will be based on who will be adding/editing collection items.

  1. You could add a text field to the collection in question, that stored CSS styles targeting the element(s) you want to modify. This style(s) could be applied to the template by adding a <style>yourcollectionfieldname</style> to the inside head tag area, inside the template settings.
  2. You could style the alternative with a combo class in the designer to create a style you could then apply to the element using JavaScript or JQuery (It is loaded automatically). You would remove it from the element in the designer, and apply it on page load, by adding the combo class to be a variable used in your new script tag that you would need to add to the template > Custom Code> before body tag area.

#3

CMS items are going to follow the same CSS styles. Although you could create a specific field for something like this like a dropdown menu with let’s say “Right”, “Center” and “Left” and include some javascript if you know it. But if you don’t I would reach out to someone who is well versed with javascript to help you out there. I’m sure future updates and features will allow for more customization to create different layouts for various CMS items.


#4

Haha man, right on the money. We must have posted at the same time.


#5

There are convoluted methods of achieving this goal, if you’re not into JavaScript, but they lead down murky paths of extra markup and confusion for people who take over your project/ or even yourself once you forget the reasoning behind the doubled-up collections lists, or duplicate link blocks with different conditionals on each, for example.


#6

I add notes to pages that are in a dev folder and saved as draft, to document custom code and processes within a webflow site.

The example of using some JQuery to add a class to an element would be very easy to maintain. Don’t delete the class, and you can update the styles in the designer. There should be other supported things in the pipeline. The wishlist is a good place to vote on existing ideas or create new ones.


#7

Hi everyone,

Thanks for the great responses! It’s a shame that currently no CSS styles are supported by the custom fields. I don’t have any scripting knowledge, so for now I’ll think of another design.
But can imagine it would open up a bunch of new design options if it would be possible.

Thanks for you time and consideration!