Formatting your content is a fun way to add flare and style to your platform. The trouble is, the wide expanse of information on HTML and CSS formatting that's available online is MORE than overwhelming, especially if you've never done it before. Below, we've broken down a few easy tricks to help you add some extra formatting to your text within the classic/legacy editor.
Where the coding happens:
If your screen looks like the below when you're adding content to a blog post, custom page, resource, or Community static content, you're on the legacy/classic editor. Formatting your content can be done wherever you see this option:
'Visual' is the default editor of any content you add. The 'Text' version, is where the coding fun happens! This shows the back-end, HTML code that creates the visual presentation you see on the front-end.
The most important thing to note:
Any code you add must be exactly right. Forgetting even a comma or bracket can throw off an entire page. It's important to be detail oriented when adding any customizations here.
First, it's important to note that any styling you want to add, has to be done within quotations in the brackets surrounding your text: '<span style="formatting-goes-here">text</>', or it won't apply to your text. For example, in the 'text' editor, if you'd like to edit a title, you might see:
<h1>This is a title!</h1>
The 'h1' indicates that the text surrounded by the brackets follows the 'Header 1' formatting.
To add color:
If you want to add style to the formatting, you'd include something like this:
<h1 style="color: #41b277;">This is a title!</h1>
This tells the system that the text between the <h1> and </h1> will display in the color identified by the Hex code you included. (A hex code is a 6 number / letter combination that specifies a unique color in the color wheel. Here's a link where you can find the one you want to use!
In addition to color, all kinds of attributes can be added within the style=" " section of your text, to further change your formatting. Just remember to keep it within the quotations!
Other formatting options:
To center align your text: style="text-align: center;"
To make your text all uppercase: style="text-transform: uppercase;"
To add spacing between the characters of your text: style="letter-spacing: 3px;" (the higher the number you include here, the more spaced out your letters will be)
To make your text larger: style="font-size: 24px" (you can replace with a different number, for different sizing)
To add a horizontal line, add <hr> in its own line.
Remember, if not done correctly, adding any custom code can cause visible formatting issues on your front-end. Make sure to double check that your coding came out the way you want by previewing your pages before publishing! And as always, if you need help - feel free to reach out to us at support@gouconnect.com. 😁
Check out this tutorial video for a visual demonstration of how to create your own coded content:
Use this link to convert CMYK and RBG colors into hex codes.
If you notice that your screen looks different as you're editing a blog post, custom page, resource, or Community static content, you're likely on the latest version of the editor, called the block editor! You'll find an example of what this looks like below:
The key differences you may notice above are that there's no longer a text/visual tab, and you now have a blue plus sign in the top left as you're editing content on the block editor.
Through the block editor, you have the ability to add text color and other formatting options without having to code!
Instead, you can take advantage of sidebar options to change colors:
Or, for assistance in choosing a desired format for the text on your page, you can use the blue plus sign to scroll for 'blocks' or ways to format your content without needing to add any code:
For questions on the above, please reach out to us and a team member would be happy to help!