To achieve this functionality in Webflow's CMS and Editor, you can follow the steps below:
1. Create a Collection: Start by creating a new Collection for your blog articles or use an existing one. Let's assume you have a field called "Relationship Status" in your Collection, which can have values like "Single," "In a Relationship," or "Married".
2. Create a Tag Field: Add a new field to the Collection called "Tag" or any name you prefer to store the relevant relationship status tag for each article.
3. Set Up Template Design: Design your blog article template in Webflow and include an image element where you want to display the relationship status tag.
4. Conditional Visibility: Select the image element and go to the settings panel. Click on the "Visibility" tab and choose the option for conditional visibility.
5. Define Conditional Rule: In the conditional visibility settings, you'll create a rule that specifies when the tag should be displayed. For example, set up a condition that states "Display if Relationship Status is not empty."
6. Display Tag: Inside the image element, add a text element to display the relationship status tag. Connect this text element to the "Tag" field in your Collection. This will populate the tag dynamically based on the article's relationship status.
7. Style the Tag: Style the text element to match your design requirements. You can adjust the font, size, color, and positioning to make it visually appealing.
8. Publish and Test: Save your changes, publish your site, and test the functionality. Make sure to set different relationship statuses and relevant tags for your blog articles in the CMS editor to observe how the conditional visibility works.
By following these steps, you can set up the Webflow CMS and Editor to display a specific tag on the blog article's image based on a relationship status category. The tag will only be shown if it is relevant to the specific relationship status and hidden if the article is relevant to all relationship statuses.