Structure styles allow us to create specific styles for elements in a dynamic list. This gives us the chance to highlight elements in a list to improve visual hierarchy.
In this lesson:
To apply styling to specific dynamic list positions (e.g., the first item) open the States dropdown menu in the Selector of the Style panel and select the item(s) you want to style.
You can add style to the first or last item in your dynamic list by doing the following:
This will add style properties to the first or last item in your dynamic list.
This is great to highlight these particular elements and give your design a better visual hierarchy. For example, you can draw attention to the newest blog post from your blog list by adding background and text styles to the first item.
To style odd or even items in your dynamic list:
This will add style properties to the odd- or event-numbered items in your dynamic list.
Styling your list elements like this visually breaks up your list so elements can be distinguished between each other more easily. For example, you can break up your list by adding background and text styles to the odd-numbered items (first item, third item, fifth item, etc.) so that someone can more easily see each item separately.
You can style elements like Collection lists on static pages, or a list of dynamic elements on a Template page.
You can also style dynamic elements on the Ecommerce pages.
For example, you can style the list of items added to someone's cart when they visit the Checkout and Order confirmation page.
You can also add interactivity to your elements by changing the way they look and behave in different States. Learn about interactive States.
All states inherit styles from the None state. You can see from where styles are being inherited by clicking the inheritance indicator right above the selector field.
After you’ve added styles to a state, the States menu dropdown icon will turn blue. And when you open the States dropdown menu, you will see blue circles showing that there are styles in whatever state that’s been styled.
And that’s styling specific Collection items in Webflow!