There are two ways to apply highlights to text in the Text widget depending on what you are wanting to highlight. Both ways are covered below.
How do I add a highlight to the text within a paragraph?
- Click Source while in the Text widget.
- Locate the text you would like to highlight
- Enter <span class="text-label-primary"> before the text that you would like to highlight.
Note - The class that you enter will depend on the color you want to highlight the text in. - Enter </span> where you would like the highlight to end.
- Click on Source again to preview.
- When you are finished adding the highlights, click on the green Create button located at the bottom of the screen
- Make sure to click either the Publish or the Save Draft option just as you would when you're editing pages.
What are the styles (colors) that are available for highlighting text within a paragraph?
Below you will find a list of styles that have been created that you can use to highlight text. The colors associated with each style below is different per site. You can locate examples of the colors by going to the style guide for your site, which can be found in Inner Layouts in the Themes & Layouts section on the dashboard.
- text-label-gray
- text-label-dark
- text-label-primary
- text-label-secondary
- text-label-tertiary
- text-label-accent
- text-label-success
- text-label-info
- text-label-warning
- text-label-danger
How do I highlight or 'callout' an entire paragraph?
- Click Source while in the Text widget.
- Locate the text you would like to highlight
- Enter <div class="callout-primary"> before the paragraph that you would like to highlight.
Note - The class that you enter will depend on the color you want to highlight the paragraph in. - Enter </div> after the paragraph.
- Click on Source again to preview.
- When you are finished adding the highlights, click on the green Create button located at the bottom of the screen
- Make sure to click either the Publish or the Save Draft option just as you would when you're editing pages.
What are the styles (colors) that are available for highlighting entire paragraphs?
Below you will find a list of styles that have been created that you can use to highlight blocks of text. The colors associated with each style below is different per site. You can locate examples of the colors by going to the style guide for your site, which can be found in Inner Layouts in the Themes & Layouts section on the dashboard.
- callout-secondary
- callout-tertiary
- callout-accent
- callout-success
- callout-info
- callout-warning
- callout-danger