A frontend developers approach to Rich Text in Webflow. Rich text blocks allow non-technical website editors edit text, images, and other block elements.
Rich Text elements in Webflow empower content editors to add inline and block elements to a div. Did you know they can also be used as a parent div block for global child class selectors? In this short video we'll explore the ways you might leverage this nearly hidden feature in Webflow.
This video is for experienced frontend developers investigating Webflow as a way to accelerate their workflows and integrate a CMS editors love. As an experienced developer, I'll translate and map the interfaces to get you up and running with speed.
In this video I'll cover:
- Adding Rich Text elements
- How to add nested elements
- Adding a class to Rich Text
- Adding child selectors to Rich Text elements
Unicorn Road is on a mission to accelerate entrepreneurs and early-stage startups. Based in Chicago, we specialize in designing and developing custom and low-code websites, MVP web apps, and MVP mobile apps. Unicorn Road is a Chicago Webflow Developer & Certified Webflow Professional Expert.
Hey everybody. Welcome to part three of WebfFlow
for frontend devs. I'm John Osler, ceo, founder
of Unicorn Road.
We do a lot of web flow and we have to train
up a lot of folks on how to use web flow,
who are front end developers.
So I thought let's put this together so we
can share it with you guys and hopefully speed
up your workflows a little bit.
So in part three we're gonna be talking about
rich text and rich text. You could think of
it as like mark down.
It's basically a block with nested ch children
elements in it. And usually what it's used
for is for on a, a blog, blog detail page
or within a section of a page where you want
to give the editor of the content somebody
who's a little bit less technical, they'd
be able to add inline images or do onward
list and things like that.
So let's dive into the interface and have
a look at like what this looks like. So again,
it's, you're gonna add it through this ad
menu, the add elements menu, and it's right
down here in typography.
And so I've inserted one already here, and
you'll see as I mouse through it, uh, there's
a H two a head or two followed by paragraph
by, followed by header four.
And if I wanna add to this, whether I'm a
creator or an editor, so this can be within
the designer and the editor side.
If I just double click and hit return, this
little insert plus icon's gonna show up. And
if I hit that, this is where I can add some
of those in line or block elements.
So let's say I wanna do an unordered list,
I can add those bullets here. And you could
imagine that, you know, for a blog or a section,
it's pretty useful to have that.
So this is where I think it gets a little
bit tricky and where we, we felt like we were
fumbling a bit when we first got into the
So when we click on, let's say a paragraph,
and we've decided we do want to affect what
this paragraph looks like, when you select
all paragraphs and do the styling on this,
what's gonna happen is you're globally going
to affect all paragraphs in the system.
Which, if you're doing a very, if you have
a a design system that's really tight, that's
probably fine, but most cases, I think we've
seen that blogs a lot.
Lot of times a design of a blog looks a bit
better when you bump up the font specific
to that blog.
But it could also be the case that if you're
just adding one of these into a section, there's
almost always gonna be some differences in
terms of either padding or layout.
So there's another way. So effectively what
you need to do is select the block, the rich
text, block the container element, and give
it a a a class.
Now we're gonna call this one rich text. I've
already started, uh, the class here just in
preparation. And so now that I've done that,
I can go back to my paragraph tag.
And if I add, uh, this HTML tag to, for all
paragraphs, there's this additional line that
shows up, which is kind of tricky and hidden,
which is nest selector inside of rich text.
So I'm gonna click that and effectively what
it's gonna do now is say, Hey, every time
there's a paragraph within the rich text blocks,
follow this formatting.
So maybe we might say, um, and this isn't
maybe the totally the best example, but you
can effectively say how now it's gonna affect
everything that this, that is, um, nested
inside a rich text element.
So one thing that's kind of interesting about
this, this is the only case that We've seen
where you can do select a child element within
a block, within web flow, everything else,
if you, if you're watching these tutorials
through, you realize that you're effectively
putting the class right on the element itself.
If you add a paragraph, you need to add the
class to that. You can't say, Oh, in this
d of all these paragraph style in a certain
way, but with rich texts, you can do it.
And it's, it's this way. So you could start
to think about rich text as a little bit more
of a powerful organism if you're wanting to
do a little bit more of that nested selecting.
Um, so I'll just, uh, do some more here just
real quick, put some rems going and see what
that looks, looks like.
So that's effectively how you do it. And like
I said, when you double click or when the
content enter double clicks, then they can
of course add the elements and, and affect
them as such.
So that's a mini lesson there. Hopefully you
got something out of it. The key here is putting
a class on the parent container and then you
can select all the ne the child elements and
that's the best way to go.
Uh, hopefully you like this one. I wanted
to keep it kind of short because rich text
is its own little beast.
And obviously web flow has good tutorials
for how these things work, but I think when
you're in this kind of front end developer
mindset and you're looking for those child
selectors, you're like, Wait a second.
Like, how, how am I doing this? Uh, so hopefully
that's helpful. If it wasn't helpful for,
I was missing something that you thought was
pretty cool, definitely leaving in the comments
And the subscribe was welcome. Thanks guys,
we'll see you next time.