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