In Webflow, is it possible to have a CMS content page with a title that is the full address while still keeping the fields for address, city, state, and zip separate?
Published on
September 22, 2023
In Webflow, it is possible to have a CMS content page with a title that displays the full address while keeping the fields for address, city, state, and zip separate. This can be achieved by utilizing the power of Dynamic Embeds in combination with Collection fields.
Here are the steps to set it up:
- First, create a new Collection called "Addresses" in the CMS section of your Webflow project.
- Add the necessary fields to the Collection: "Address", "City", "State", and "Zip". Make sure to set the appropriate field types for each of them.
- Next, create a new Collection Template page or open an existing one, where you want to display the address.
- Add a Dynamic Embed element to the page. This element allows you to inject custom code into your design.
- Within the Dynamic Embed element, you can write custom HTML, CSS, or JavaScript code to format and display the address.
- In the Dynamic Embed code, use the Collection fields to populate the address. You can access the fields using the "current" object in the code. For example, to display the address, use
{{current.Address}}, and for the city, use{{current.City}}, and so on. - To create a dynamically generated page title with the full address, you can use the "h1" or "h2" tags and insert the Collection fields into the title. For instance,
<h1>{{current.Address}}, {{current.City}}, {{current.State}}, {{current.Zip}}</h1>.
By following these steps, you can have a CMS content page in Webflow with a title that displays the full address while still keeping the individual fields for address, city, state, and zip separate. This setup provides flexibility and allows you to organize and display the address information in a customized way.
Example Code:
<DynamicEmbed> <h1>{{current.Address}}, {{current.City}}, {{current.State}}, {{current.Zip}}</h1> <!-- Additional HTML/CSS code for styling/address formatting --></DynamicEmbed>Feel free to modify the code and styling according to your design preferences and requirements.
Additional Questions:
- How do I create a new Collection in Webflow?
- Can I use CSS classes and styles within the Dynamic Embed element?
- Is it possible to filter and sort CMS items based on address information in Webflow?
