Inline callout between CMS items

Design help CMS
1

Hello guys,

I’d love to achieve something similar to what Webflow’s blog does with the inline callout. Similar to a blog post, I also have multiple steps that can be included in a rich text.

Right now I have 6 different wrappers for each step, but I know this can be optimized. I would like to have only one rich text field for the Execution section.

I could think of two ways to achieve something similar to Webflow. Split the Execution steps into 2 large chunks (first 3 steps, rest of the steps; much similar to the Webflow’s code) or add an embed element with code for the whole inline callout. I would not go for the custom code element for now, cause it just adds some complexity to the current version.

Are there any other ways of achieving this?

Thank you!

image
image960×931 57.3 KB

image

Here is my public share link: Webflow - Advisable Insights

1 Like
2

The bad way to do this is:

  • You have two rich text fields
  • One CMS field for the advert

You place the advert in between the two rich text fields.

A good way to do this would have to involve some sort of code embed. Has anyone figured out a solution to do this (perhaps with jquery .load() ?)

3

Have used the bad way.

Couldn’t find any other solution at that moment so I went for two different rich text fields and designed a banner.

Not sure if it helps too much to have the callout there. Will check the analytics when put in place.

4

Have you found a solution?

I found a turnaround, I don’t know if it’s bad or whatever but whenever you want to use a callout, here’s what you can do:

  1. Design your callout in a new project.
  2. Export the code
  3. Insert an embed into your article
  4. Paste the code (HTML, and CSS)
  5. Voila.
5

There is an easier solution, using Finsweet’s Powerful Rich Text tool

  • Create the callouts separately, outside of the rich text
  • Add a custom attribute to identify them
  • in your Rich text, you identify them with {{ my attr name }}
  • They are inserted at load time

You can also store components on other pages and share them, e.g. share CTA’s directly from your style guide page, or reference specific “related item” cards directly from collection pages.

Handy tool when you need it.