How to Webflow: Styling Rich Text Elements for Webflow CMS template pages - Tutorial (2019)

[@AlbertoRizzoli]

You are the best Webflow tutorial guy. Straight to the point

[@pixelgeek]

many thanks! :D

[@EchoKids]

I've been trying to find this solution for so long - thank you so much!!

[@zunalter]

Just wanted to jump in and offer my thanks. It was very frustrating trying to figure this out, your tutorial was a huge help and now I feel like it is clicking for me!

[@matthewac21]

I'm not one to comment on videos (or anything really) but styling CMS RTE content had me over the top frustrated. I wish your video would have been the fist one that came up... Hope fully commenting and liking will drive it higher. THANK YOU!!!

[@vicphillipssinglemaltteapo6199]

So glad this video popped up when I went looking for info on this. Explains it so clearly and instantly makes it all make sense, perfect tutorial. Thank you thank you.

[@pixelgeek]

Glad it was helpful!

[@MartinAlejandro]

2 years after, this is still solid advice 💪. Thank you for sharing, Nelson!

[@megancarson2289]

This is exactly what I was looking for! I'm just struggling with formatting images next to text, like alternating image on the left, text on the right, and vice versa.

[@mirac0621]

Genius! You've always had the best Webflow tutorials, PixelGeek. So easy to follow.

[@none1615]

Webflow is improving every day and Nelson as well . Glad to see you shorten your videos and providing laser focused videos with crystal clear content , crispy and to the point . Thanks a a lot !

[@pixelgeek]

Thanks for the support 👍🙇🏽‍♂️

[@TheKetoSurvivor]

THANK YOU FOR CLARIFYING THAT!! 👍 It looks like another good reason to make a style guide and include this on it.

[@pixelgeek]

glad to help :)

[@olehansen6568]

Nelson you are a life saver. A true champion. Thanks so much 😉

[@pixelgeek]

dawwwwww. My pleasure :)

[@SurajRhere]

You saved my day! Thank you for the workaround.

[@crooker2]

That was driving me crazy! Thanks for clearing that up for me. :)

[@pixelgeek]

glad to have helped :)

[@zibilic]

You're amazing man. This has been super useful!

[@pixelgeek]

Glad to help 😁👍🙇🏽‍♂️

[@Psyda]

Awesome Nelson! That's a really clean way of doing it while keeping everything clean and organized.

[@pixelgeek]

Yup :) a style guide is a great way to start all of your projects. Glad this video helped you.

[@sjquakes17]

magic. Thank you for your help, I did not know where to start and was going to do the ridiculous thing of changing all the rich text in my CMS to regular text. You rock

[@pixelgeek]

Thanks for watching 😁 glad the video helped you ♥️🙇🏽‍♂️

[@Feldspar__]

This really helped me figure out how to build blog posts.

[@pixelgeek]

Glad it helped 😁

[@johnleighdesigns]

ive not had to tackle this yet but great to know the approaches for potential projects thanks again loving your helpful guides and knowledge sharing!

[@pixelgeek]

Thanks for watching. 😁🙇🏽‍♂️ Glad to know my videos are helping you.

[@jesuspastr]

Thanks! I am taking my first steps with Webflow and your videos help me a lot. Greetings from Peru

[@M1NTFR3SH]

You sir, are a legend, was able to find my workaround perfectly! :) Ive been designing my portfolio projects as one long image, like Behance... and was doing it page by page, which is caveman spec! Basically because of the 20px padding on either end on the Rich Text I wasn't able to keep the same format, until now! Bigs ups Pixel Geek Massive!

[@chrisgarin1]

This was incredibly helpful. Thank you!

[@nathantrost7649]

Thank you. This was perfect for what I needed.

[@pixelgeek]

Glad it was helpful!

[@alansilvestri8299]

Exactly what I needed!! thank you so much for the video!

[@pixelgeek]

Glad it was helpful!

[@TheLastGen]

you are awesome!!!! thanks for this video! You always make things so easy and you're so pleasant to watch. I feel like you're my patient teacher helping me when i get frantic and start blaming Webflow for my problems. lol

[@greer3322]

Super helpful. Exactly what I needed for an issue I was running into. Keep it up.

[@justicepostman7702]

This was super helpful Nelson! Thanks!

[@pixelgeek]

Glad to have helped 😁👍

[@pixelgeek]

Happy to help 😁

[@poncardas]

This is such an ultimate time saver! Thank you so much!

[@chayland3328]

I wish it was all just possible through the CMS page and we didn't have to create a separate page. Your video really helped. I was so frustrated until now!

[@alzibaba]

Thank you 🤩This is such a useful tutorial, one of the areas I've found most frustrating in otherwise excellent Webflow is now sorted ✅😁

[@pixelgeek]

Great to hear!

[@elliotharrison-roberts9658]

Thanks, Nelson for posting this tutorial, just what I needed. BTW, I'm enjoying all the videos you upload making learning Webflow really fun. All the best and Happy New Year

[@pixelgeek]

thanks for watching :) I'm glad you find my tuts enjoyable. Let me know what else you'd like to learn.

[@brunobel9270]

Hi Nelson, thanks for doing this video. It's pretty awesome. And, you know how at the end of your video you're asking for other ideas to make more videos? another topic that hasn't been clearly answered in the web flow forums is how to create a website that has multiple locations. From a technical point of view, how to structure the CMS and the pages. So at the end, the url has the location with the information that is needed. Thank you again for your time.

[@jaymf]

Webflows tutorials are tip top - BUT - this is the CMS Styling video they need to publish. They do not have anything on styling CMS content... thank you!

[@pixelgeek]

Thanks for watching. Glad this video helped you 😁🙇🏽‍♂️

[@ЗероЭндорфин]

Thank you, Nelson! As always, you rock!!!

[@pixelgeek]

thanks for your support :D

[@Installator1]

Thank you Nelson, you rock! 🙏🏼

[@pixelgeek]

thanks! :D

[@GalTesler1]

Thank you! finally a clear tutorial!

[@BB-wh1nr]

Thanks! Super Helpful

[@thewhitleycaptures3734]

Needed this, awesome tutorial thanks !

[@pixelgeek]

Glad to hear the video helped you 😁👍

[@ahmedmaher9090]

Amazing 😮 thank you do much mate. That’s super helpful ❤

[@victorianoranci7723]

love this video man👏

[@pixelgeek]

Thanks for watching 😁🙇🏽‍♂️

[@MikeElrod1]

You are wonderful. Thank you.

[@pixelgeek]

Wow, thank you!

[@rafaelspring190]

Nailed it! Thanks a ton!

[@reueljonesgraphicdesign]

This was *very* helpful, thanks

[@grantemerson5932]

love this!

[@lorenzosciotti6868]

Hi, thank you for your video. I'm having trouble removing content inside the RTE, every time I try to do so it removes the whole RTE. Thank you for your help !

[@MikeLatham-z6t]

Hey Nelson, Any chance you've figured out a way to put two images side by side within an RTE? Keep up the solid work and great content!

[@juniocesar2212]

Saving my life every day!

[@pixelgeek]

glad to have helped 😁

[@josephgraham6098]

THANKS NELSON!

[@pixelgeek]

my pleasure! 😄

[@chandrapartain786]

Thank you so much for this video! I really like your teaching style and easy to follow tutorials. If only I could figure out now why the font following my bullet points still shows as a smaller font...

[@wonga07]

Thanks for the help. Are there any negatives to having a RTE static page?

[@joeovip]

You rock! Thanks Nelson!

[@noahsscott]

HI Nelson, like the others I was banging my head on how the heck I could utilise RTE fields within CMS.Your video help get me 90% of the way there. The only gap for me left though is wondering if it is possible to have more than one style of each selector configured within a single RTE class? Eg. default h1 and a h1.yellow for example? This is a bit of a blocker for me as the client needs more flexibility from the CMS.

[@patricia-rodriguez]

Thanks for the video! But I'm trying to create a dark mode on my site, and I'm having issues changing the text colour on Rich text. Can I add animations to a Rich Text?

[@Neo237]

Excelente tutorial!

[@pixelgeek]

Thank you! 😁

[@sophielowe2175]

This video was super helpful, thank you! I did wonder though, is there anyway of having two stylings of Rich Text elements for different backgound colours? I need a dark version and a light version.

[@Xeos77]

Thank you Nelson ...BIGt question is HOW TO PREPARE THE EXEL DOC FOR RICH TEXT ?

[@pixelgeek]

Not sure what you mean. Are you trying to embed an Excel sheet into a rich text block?

[@guilhermepreviati2517]

I LOVE YOU! THANKS

[@siikcreative3810]

Awesome Video!

[@t_dubz]

Thanks for this!!

[@pixelgeek]

my pleasure :) Thanks for watching.

[@nicolasmarquez5956]

Woow! Thank you so much!!!

[@pixelgeek]

My pleasure 🙇🏽‍♂️😁

[@pingping8536]

How does cms recognize what style to use for what elements?? Thanks for your help🙏

[@FutureCitizenNews]

Great Job!

[@synchronistory]

Hey! Thanks! I really hope Webflow will add more styling possibility to the editor though. E.g. styling a specific paragraph different from others, centered for example. no way to do that (even not with Finsweet´s Sweet Text extention).

[@IKMaksimov]

Awesome Bro!

[@FlowmanDEV]

Is there any way of adding a span class within a Heading that is in a Rich Text Field?

[@hal-zeitlin]

Nice video set

[@pixelgeek]

Thanks!

[@andrewklotz1402]

Thanks for the tutorial, that definitely helps. On the Rich Text Style page, there is an H2 and two H4's. My page has the same thing. How do I add an H3 and style it?

[@maryamaljomairi2501]

wonderful, thanks for the tutorial. Is there a way to add an element trigger to the link (hover -> changes color) when I tried doing that - it just worked on the parent paragraph link and not on the rest. Any thoughts?

[@pixelgeek]

yes, using the CSS hover state instead of using Webflow interactions.

[@AntonyNorthcutt]

Brilliant!!!

[@BigStig2point0]

So IMO, one of the reasons for a rich text editor is so that it keeps styles when you paste things into it and can handle those different elements and such, but then those styles don't usually match rest of website design, so I appreciate knowing how to do this. But my question would be, is there any advantage to doing it this way and allowing your CMS client to insert multiple different elements within a single rich text field as opposed to simply separating out the fields in the CMS (ex. having just a heading field, then a paragraph field, then an image field, etc.) I mean I know it might make it a tad bit slower for the client to put in each individual field, but I think it feels like a nice step by step process when they are just working from top to bottom, and I feel like one of the points of the CMS is to allow clients to post dynamic content while having as little styling capabilities as possible, because thats what our job is and we don't want them to break it...and all the rich text editor does is hand some styling over to client?

[@andriib7569]

Hello, Nelson! Thank you so much for your helpful videos! If you have time please make a video about dynamic Tabs content. There is 1) Clients Collection - 8 items; 2) Services Collection (= categories) - 6 items. On a Client Template Page there are tabs named by the Service Collection names. The service information (pics&texts; already there, tried to put into both collection and use via refs) should be displayed by clicking on each tab, but of course unique for every generated Client page. I just can't wrap my head around it for almost 40 hrs, please give a direction if you can. Many thanks!

[@pixelgeek]

Thanks for watching :) Do you have a visual example for me so I can look into this question more?

[@andriib7569]

@@pixelgeek Watching is fun and helpful, so don't mention that :)

[@andriib7569]

@@pixelgeek preview.webflow.com/preview/jens-website?preview=16d1a0f5f6fde9a4479c0c0b6a37d07f&pageId=5da6f2d7c102b9fea534ea65&itemId=5da6f2d7c102b9145434eabe&mode=preview - The Previews link. Thing is, that on each of 8 pages, for example, "Website" tab shows the same info, which is not the desired behavior. Thank you so much for reaching out!

[@malamadreable]

is it possible to set ineractions triggers for RTE parts in CMS? maybe Scroll into view for example

[@stanislavosipov2838]

Please tell me how to connect cms elements now after the update in webflow. Previously, they were connected by clicking on the gear of an element (for example, text or a picture), but now they are not there 🙏

Wow, thank you!

[@pixelgeek]

You're welcome!

[@grahamtaylornyc]

Can you have different rte styles for different collection item? So for instance could you style your blog pages in one way, and say staff bios in another and perhaps case studies in another? Or do all H2 Headings etc need to be the same throughout?

[@evabarnhart5986]

What I am trying to figure out is if I can separate text up into 3 divs.. I want to create content-heavy CMS for a few very detailed case studies, but I cannot figure out how to do this and not go over the 30/30 cms collection item max. Just custom add things for each CMS collections page?

[@writtenbyhumans]

Dear Pixel Geek, just curious, is it possible 'without code' to adjust floats in the rich text alterations for CMS in this way? If not, it would help for a more customizable CMS, regarding rich text, especially for walk-throughs. In my own opinion, if rich text could be more customizable over all in CMS, it would make for a better experience.

[@r-e-s-o-n-a-n-t]

Hi, is there a tutorial somewhere how to implement justify and hyphens?

[@AndrewChinco]

Thank you so much

[@pixelgeek]

My pleasure 😁🙇🏽‍♂️

[@gabriella2186]

Ur my hero dude…

[@timog9257]

thank you sir!

[@pixelgeek]

My pleasure 😁🙇🏽‍♂️

[@SergiyHavriluk]

Thank you :) maestro !

[@tomriley1492]

Thank you!! So much!!

[@pixelgeek]

You're very welcome

[@Andy-dn1vq]

Any idea on how to add triggered interaction to these binded CMS rich texts ? I basically created a Dark/Light Mode Switch button to a blog post page. So obviously I used the "Mouse Click/Tap" trigger to trigger the background + texts color change in interactions. Everything slid fine for all static contents until I faced the dynamic rich texts binded to CMS lools Since we can't select the individual specific RTE to add interaction to, nor have/add any class to target that interaction to, nor any ways to use the "selected element" I'm kinda out of idea if by any chance you guys have any tips or workaround, I'm a taker!

[@pixelgeek]

this might help you :) sweet-text.finsweet.com/

[@samueljaramillo7144]

yes that all makes sense, but the dummy content that you bring up has already assigned the different classes so your the title is h2 the body is body, etc. my problem is when I bring my content and want to assign, for example, h2 to the title it applies to the entire content. how does that work?

[@aleksandarradovanovic9082]

You need a combo class for that man.

[@generationsarising]

How can I create a menu in the top of my rich text that will link to different sections in my rich text document for CMS.

[@mr-be3sw]

Hello thanks for the video! I have asked this before, and this is not concerning this video. But Is there a way to change or customise the menu button in tablet and mobile. for example instead of 3 lines 2 lines or one line smaller than the other or a totally different icon etc.. :) I can't find it anywhere

[@stevengunn2506]

Under the Menu Button (in the navigator on the left), where it has the image / icon, you can add your lines in here (as div blocks) and style as you wish. Then delete the image / icon. Hopefully that makes sense.

[@DrAnnaSchwartz]

Hi Nelson, quick question- how do you hide the “Rich Text Style” page so it stays invisible from public view? Thanks!

[@pixelgeek]

save the page as a draft :) hope this helps

[@yumaheymans]

I love you man

[@pixelgeek]

glad i can help :)

[@kierrereeg]

How can we store a users state data on the front end and back end for web applications? Is this possible with Webflow currently? If not will it be something they are working on in your opinion? Thanks!

[@pixelgeek]

When you say "state" data, are you talking about their physical location?

[@kierrereeg]

pixelgeek no I mean user state data as in I have changed this or that aspect of the interface I am working with, so they changed the “state” of the application, by clicking a button, entering an amount, selecting something, anything of that nature

[@tienpham-cj1wl]

Hello, I tried to style interaction for image only. Can I do it in Rich text?

[@isabelwhite3478]

Hi Pixelgeek, I like your Tutorials most! Could you please make a Tutorial how to convert HTML-Text to the rich text element? I know how to do it with csv from wordpress. But does it work, if I have some Text in HTML and just to want to keep the headlines and paragraphes? Greetings ;-)

[@dishasharma3885]

How do you change color inside the rich text field?

[@spagbowlsparmacheese629]

Is this good for just blogs but not design portfolios where any image can vary in dimension?

[@pixelgeek]

Yes. This is just good for blogs that don't differ in page layout

[@BlakeCDouglass]

Thank you for the video. Your video is perfect. The way this has to be done in WebFlow is literally the dumbest most illogical thing I have ever seen. Another GUI web builder that makes life harder for devs so clients can believe "they'll be able to manage the site after handoff".

[@saasuidesign]

How can we ad Bullet pointers?

[@melaniejumaga]

Do i have to rebuild content to style it?

[@umairahmadmalik]

Could you save the class rte as a symbol and then delete that page you created to style rte and use the symbol on the CMS template page? To avoid leaving a dummy page for a client project?

[@pixelgeek]

I think setting a classname would be better than a symbol. But you can try out a symbol and let me know what you find out. :)

[@umairahmadmalik]

@@pixelgeek the only reason to make the symbol is to save the class even if initially unused becuase if the class remains unused it won't be automatically deleted by WF? Picked up this technique by guys over at Edgar Allen

[@generationsarising]

How to you make RTE responsive from one device to another?

[@zoharlindenbaum]

I want your shirt!

[@sonrics1993]

Thanks!!!