To embed iFrame code from a Collection onto your Webflow site, you can follow these steps:
1. Create a Collection: First, create a Collection in your Webflow project. Make sure to include a field for the iFrame code, such as a rich text field or a plain text field.
2. Add items to the Collection: Add items to the Collection and fill in the iFrame code for each item. Each item will represent a separate iFrame that you want to embed on your site.
3. Design your Collection page: Design the layout of the Collection page where you want to display the iFrames. You can choose a Collection List or create a custom design using Collection fields.
4. Use dynamic elements: Add a dynamic element to the Collection page where you want to display the iFrame. You can choose a rich text element or a custom embed element.
5. Connect dynamic content: Connect the iFrame field from your Collection to the dynamic element you added. This will populate the iFrame code from each Collection item onto the page.
6. Style the dynamic element: Style the dynamic element to match your design preferences. You can adjust the size, position, and other visual aspects to fit your desired layout.
7. Preview and test: Preview your Collection page to see how the embedded iFrames appear. Make sure to test it on different devices and browsers to ensure optimal display and functionality.
By following these steps, you can effectively embed iFrame code from a Collection onto your Webflow site. It allows you to manage and update the iFrames easily through the Collection, giving you the flexibility to showcase dynamic content on your website.