Up next, we need to add the post body. Adding this is relatively simple. 1
We just need to drag a rich text element. Why rich text? Because that's the field type inside CMS. 2
We need to add this inside a different container. 3
The image container is wider than the rest. 4
So, we need the same container that we created above for the header. And drop rich text inside that. 5
Alright. 6
That's better. 7
And let's add a bottom margin to the image element to create a separation. 8
Bind the CMS field, like you would do with anything else. 9
And there you go, the content from CMS gets loaded. 10
Now here's the fun part, we need to make some style changes to our rich text element. For example, match 11
the text color to what we have in designs. 12
We decided to go with a darker color in the design. And also we need some spacing between different paragraphs 13
and different text styles. 14
Let's start with the color. 15
The obvious way would be to give it a class and change the font color. 16
This does style some of the text, but not all of it. Especially not the main one, 17
the paragraph. The paragraph has its own style. And it's being overridden by the All paragraphs 18
HTML tag. Something that we styled early on, on our home page. 19
Since rich text is just the parent element, a paragraph, which is the child element, can override any of 20
the styles from the rich text. 21
This means we need to style the paragraph directly. But right now we have no access to it. 22
Once it's connected to the CMS, we can't select individual elements inside. 23
We need to disconnect it from the CMS, style it and then connect it back. Alright, now elements inside 24
are selectable. 25
You'll notice, that unlike other things, elements inside rich text, have a different styles panel. 26
There are some set of instructions on it as well. 27
And if you enter the selector field, you'll notice you can't type. 28
You can't create a class. 29
This is because we cannot style an individual element, but the type of element. 30
So instead of this particular paragraph that I'm selecting, we are going to style all paragraph types 31
inside this rich text. Or all headlines, or all bullet points, or all images, and so on. 32
That's why we only have one option. To select an appropriate tag, 33
like all paragraphs or all H4. And third step is to enable Nest Selector. 34
This is this little plus icon that we get underneath the selector. 35
Now what this does, is lets us choose if we want to style all paragraphs across the website, no matter 36
where they are placed. Or only those paragraphs that are nested inside 37
rich text. But not any rich text, but this particular rich text, with the class that we just created. 38
So, make sure to select this and enable the nesting, otherwise, all paragraphs across the website will 39
be styled. 40
Now we can change the color. 41
Perhaps we could also increase bottom margin, so there is better separation between paragraphs. 42
If you connect this back to CMS, you will see that the style is being applied to it as well. 43
There are more types of text content inside that we need to style. To style that, we need to repeat the 44
same process. 45
Not all of them are showing right now. To show them just edit text directly inside. 46
Remember, you have to unlink it from CMS to be able to edit and style them properly. 47
For example, this is a quote type of text. 48
It's a nice element inside blogs when you want to quote someone. So we can style them differently like 49
make it italic, that's more suitable for quotes. 50
Bigger line height, a little more space around. 51
We can even style the border. 52
We can style images too. 53
For instance, the spacing is a little too tight around images. 54
Just keep one thing in mind, the image is inside another thing called Figure. 55
Better to add spacing on that one. 56
It includes Caption inside too. 57
We can style bullet points too. 58
They are really small right now. 59
I would keep it same size as the paragraph text. 60
And be careful when deleting something from the rich text block. 61
It's going to delete the whole thing, if you have an element selected. 62
You need to edit it like a text, so double click on it to enter inside and then remove text directly. 63
You gotta style H3 headings because right now they're white. 64
I guess we have styled them white somewhere on the home page. 65
Alright. 66
We don't know how to change everything. 67
Let's connect it back to CMS and see how the real content looks like 68
And maybe add a bit more spacing for H2 headings. 69
All right, let's connect it back and see how it all looks. 70
So that's rich text. 71
Maybe a little tricky to understand in the beginning, but with a little bit of practice, you'll get 72
the hang of it. 73
Unlike regular paragraphs, or headlines, or text blocks, rich text can take many sort of content types 74
inside. 75
Obviously all the different headlines that we have, we can put them inside. 76
We can put images, videos, we can quote, we can put bullet points and numbers and all that stuff. 77
And inside Webflow, styling rich text elements have their own specific instructions that we just went 78
through. Those instructions are always there inside Webflow. So whenever you're trying to style rich 79
text, the Webflow always showed that style in the styles panel. 80
So, no need to memorize them or anything. But basically the way it goes is step 1 is that you have to give 81
the rich tax a class. So it has a very specific class, right? 82
You have to style that, that particular rich text first, right? So you're not able to basically say that, 83
"every single rich text on this page, and paragraph within all those rich text blogs are going to 84
have this sort of specific style." 85
Instead, what you are doing, is you're saying that, "a rich text that has this particular style, lets say super 86
nice rich text, 87
the paragraphs in those classes, will always be like this". Right? 88
That's what you're doing in reality. And in the 2nd step, you select the appropriate tag. 89
So when you are for example want to style paragraph, you select all paragraphs, right? 90
And then in the Step 3 you select this nesting option. 91
Basically you are saying that, "I'm not styling all paragraphs across the website, I am styling paragraphs 92
that are nested within this class". Right? 93
You are saying, "Okay this is the class, 94
and if I'm applying this class to a rich text then every time that happens all paragraphs inside will 95
be like this." 96
So that's the rich text fields, how to style and how to work with them. 97
The example that I gave was inside the CMS and inside the blog post. Usually, this is a place 98
where we use rich text. Inside like a blog or articles. 99
Most of the time we are using it inside the CMS. 100
However, that doesn't mean that we cannot use it in other regular static pages. 101
The whole styling, everything works exactly the same. And you can add that to a regular page and style 102
them with exact the same instructions. So these instructions on how to style text has nothing to do 103
with the CMS it's just the way rich text works.