I need the ability to be able to embed pre-designed blocks within posts.
My use case will help:
See this page: https://davefoy.co/tools
Notice the dark blue box a few times down that page, with the yellow ‘Yes, Keep Me Updated’ button? It’s the same box each time.
That page is a static Webflow page, so embedding that box was easy. It’s just a symbol - I can drop it in wherever I like on the page.
So far, so good.
Of course, this is a great solution for pages. But I need to do something similar for posts.
Let’s say I have a blog post, an article. I need to be able drop in something like that dark blue box (or whatever - just something I’ve pre-built in the designer that I couldn’t possibly build in the CMS editor). To be clear, NOT the exact same blue box as on the page I linked to above - I’ll need to create many different similar boxes.
I’ve come from WordPress, and in WP I’d achieve this with a shortcode. I’d create the blue box template with a page builder plugin (same idea as Webflow’s page designer). Then this would give me a little bit of code to copy/paste wherever I like, displaying the template.
I don’t think I can do this with CMS custom fields… the needs for every post will be different. On some posts, I might want to drop one in every other paragraph. On another post, maybe after the 5th paragraph only… you get the idea. It’s too random to be able to code this into a CMS template.
Here is my site Read-Only: [LINK][https://preview.webflow.com/preview/davefoy?utm_medium=preview_link&utm_source=designer&utm_content=davefoy&preview=3773f9fdf7d07c332531ae40bfc330e8&mode=preview]
The only option currently is to use custom code embeds inside a rich text field. This is a limitation of the product. I choose a different CMS when this is a requirement, as clients are usually not coders.
Thanks Jeff. Would you mind helping me understand where the custom code would come from?
This would only be for my own use and I’ve 22 years hand-coding experience.
You could create a page “widgets” that has styled elements (components) that you maintain. When needed you could launch that page in your browser, with dev tools copy the element you wish to reuse, then head over to the designer. In the collection item’s rich text field you can place an embed code anywhere you wish. The value being the content you copied from the “widgets” page. You would then edit the text values as needed.
By doing it this way you have elements (components) you can update (design) on the “widgets” page that will affect all usage. I went down this path for a client but ended up needing unique layouts per item and nested folders so I abandoned Webflow for that project and used another CMS.
Great stuff, Jeff. That’d be very easily doable. I also wondered about trying a responsive iframe - the advantage would be having a ‘master’ editable template for that particular instance of the embed; disadvantage would be having to create a separate individual template for every post’s embed ‘box’. It’s six of one and half a dozen of the other, I suppose.
I’ll give both a go!
Thank you again for your time. Glad I’m not missing a trick here.