Click the PLAY button below to watch this video.
Webflow's components are moving forward in leaps and bounds, with lots of new capabilities. However, one of the limitations, as of September 2024, is that there's no easy mechanic for styling individual component instances differently.
I'll show you a technique we really like, which we've used on various client projects. For instance, when we need to adjust the positioning of a hero image on a per-instance basis, we can do so to control where the center of the activity is. Often, images get cropped, leading to non-ideal situations. We obviously want to move it down, but only for a particular CMS item or page.
Here, you can see I'm on a CMS page, working on a specific instance with a component representing the hero. The hero is bound to the CMS photo, but there's no implicit way to control the position. So, we've added an additional field and some custom CSS to control the position.
If we want to adjust the camera position in this image, we can move it up slightly, to the very top, bottom, or left. This image is already covering at 100%, but if it were landscape-oriented, we could adjust it to start left, middle, right, or end positions. You can also combine them, like top-left, to change the camera's position.
This technique is versatile. While I’m focusing on this particular solution, which we’ll likely add to the SA5 library, this approach can be applied to many different needs. You can define classes and apply them to content, or even define style strings as component properties for more control, especially if your admins are comfortable with CSS.
Inside the component, the outer wrapper is a custom element, allowing us to bind class or style attributes directly to a property, providing a lot of flexibility. This can be done for any element, but I prefer to pre-engineer components to work a certain way, often making the outer element a custom element, binding style or class attributes, and using a code embed within it to define custom CSS.
In this case, I wanted to avoid using classes for positions like top, left, right, bottom, etc., to prevent design conflicts. Instead, I used a custom attribute and based the CSS on that. The outer element has a custom attribute, and the elements to be affected by positioning also have a custom attribute. For example, in SA5, we use the attribute WFU component position item for this purpose.
The item's position is bound to a text property. To do this, create the attribute first, then define its value by creating a property bound to the attribute. Unfortunately, you can’t bind an attribute to a generic text field in Webflow yet, so creating attribute-bound properties from this panel is easier.
Finally, all items have an object position set with horizontal and vertical percentage positioning. Since CSS’s object position rule doesn’t support separate X and Y controls, we use CSS variables to keep the controls discreet while combining them. We define X and Y, defaulting them if variables aren’t specified, progressively setting the X and Y positions from 0% to 100%, and combining them with styling.
You can do a lot more with this, like injecting RGBA values directly into a field. This will become even more powerful once Webflow allows field binding to component properties inside custom code, enabling you to pull CSS pieces directly into custom code more efficiently. Very interesting things are on the horizon.
