Rich Text Elements - Webflow for Frontend Developers

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
system.

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

alike.
And the subscribe was welcome. Thanks guys,

we'll see you next time.