Markdown Tools
Markdown is a simple language that adds formatting elements to your text. It will allow you to implement various designs within your text.
Markdown Guide
The /markdown-guide* shows how-tos for formatting your text.
*Type in the URL slug “/markdown-guide” after your website’s URL to see your website’s styled markdown guide.
Here are a couple of examples of what you’ll find in the Markdown Guide;
Adding links
*You only need to include the URL slug in the parenthesis when linking to another page from your website.
Adding different level headers
More Markdown tools
The Markdown Guide shows great ways to style your text and pages. But you may need more formatting tools to make the layout exactly how you want it.
To use these elements, you will add them to the following line of your text. There are screenshots following the examples below showing exactly how the example is entered in the text pod.
PLEASE use caution when using these markdown elements. Changing styling elements too much can make your website look broken and sloppy.
Some advice from the great Dr. Ian Malcom;
Your scientists were so preoccupied with whether or not they could they didn’t stop to think if they should.
Extra styling Markdowns
Here are some elements to change the color and size of your text.
How to use the following Markdown values:
- For copy text, enter the syntax on the following line of the text you wish to style
- For headers, include a space after the header and before the syntax
See examples below.
Changing text color
{style=color:green} and {style=color:#0baf81}*
*You can type the name of a color or add the hex value.
This is an example with green text.
Changing text size
{.text-larger}
{.text-smaller}
{style=font-size:2em} and {style=font-size:20px}*
*You can use the em value or pixel size.
This example text is a little larger than the designated copy text size.
This example text is a little smaller than the designated copy text size.
This example text is set to a specific size of 20px.
Changing text placement
{.text-center}
{.text-right}
This example text is centered.
This example text is right aligned.
Adding color behind your text
{style=background-color:grey} and {style=background-color:#eff0f0}*
*You can type the name of a color or add the hex value.
The color behind this text is #eff0f0.
Adding and removing margins with Markdown
Sometimes, when you add elements, they can look like they need more space between them – some breathing room. Or maybe the elements have too much space, and you want them closer together. You can add margins with markdown to help with that.
Adding margins
{.top-margin} and {.top-double-margin}
{.bottom-margin} and {.bottom-double-margin}
{.left-margin} and {.left-double-margin}
{.right-margin} and {.right-double-margin}
If a margin is already applied to the styling, adding the Markdown will not make a change. For example, this text already has a top and bottom margin applied to it, so adding {.top-margin} or {.bottom-margin} will not make any changes.
The text has an added left margin.
A screenshot showing the margins around the text.
The text has a double top margin added.
A screenshot showing the margins around the text.
Removing margins
{.no-margins}
{.no-top-margin}
{.no-bottom-margin}
{.no-left-margin}
{.no-right-margin}
The text has no bottom margin.
The text has no top margin.
A screenshot showing the margins around the text.
Combining Markdown elements
You can combine Markdown elements by adding a space between them.
*Not all markdown element combinations will work.
The text has an added left margin and a grey color behind it.
The image below has a double left margin.
*Learn more about how to add images in our Adding Media article.
Save and publish
To see your updated content on your website, you need to publish your page. In the Websites App, click on the Publish tab. Once there, click the Create button. On the next screen, you will select the website you want the page to publish to (if you have multiple websites) and check the Pages checkbox. Click Save at the top, then click Start.
