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 context of your own dashboard editor.
Where the coding happens:
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)
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 firstname.lastname@example.org. 😁
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.