Skip to content
maka-img_mm_marketplace
maka marketplace

Discover Products to help you POWER up with CMS Hub

maka-img_mm_power-pro
Power Pro Theme

Check out the POWER demo and see all the latest features

maka-img_mm_performance
Performance

POWER is optimized to perform, review the results

maka-img_mm_customer-showcase
Customer Showcase

See how our customers used the POWER Theme

POWER Pro V34 released on November 2nd 2023 – Read Changelog

maka-img_mm_documentation_3
Getting Started

Follow our guide to save time and avoid missing a step

maka-img_mm_module-library
Module Library

From page speed impact to set up instructions, you'll find it all

maka-img_mm_video-tutorials
Video tutorials

Find all POWER videos in the same spot for quick answers

maka-mm_faq-2
FAQs

Have questions?
Search for answers

Experiencing an issue with POWER? Submit a support ticket here

maka-img_mm_about-us
About us

“Would I rather be feared or loved? Easy. Both. I want people to be afraid of how much they love me.”
– Michael Scott, not us

maka-img_mm_blog
Blog

This is mostly a demo right now. We are working on some really cool things around the office.

maka-img_mm_career
Career

Quite possibly the most fun you will have at work, ever. Did we mention how cool we are?

Having issues with POWER?
SUBMIT A SUPPORT TICKET


Schedule a Q&A or Demo
PREPURCHASE CONSULTATION


Looking for Custom Development?
REQUEST A QUOTE


Other questions?
CONTACT US / CHAT BOT

Text Highlights

How to use mark and em tags to highlight text on your website pages

pwr-icon_maka-text-highlight

TEXT HIGHLIGHTS

Add emphasis to your text with your choice of two styles that you can configure to match your brand guidelines.

text-highlights-example

FAQ

Where can I add Text Highlights?

Add the em or mark HTML tags to any of the text fields, from Titles to Intro Titles to Descriptions, and more!

Setup Instructions

Helpful Links: Settings for Theme Styles

Text Highlights are set up in two steps. First, the highlight styles have to be defined (what it looks like); then the HTML tag has to be placed (where the highlight should show).

Text Highlights Styles for POWER Theme

Theme Settings → Styling → Text Highlights

Two Text Highlight styles can be configured in the Theme Settings, which will then be applied to any text you have added the corresponding HTML tag to.

theme-settings-text-highlights

Within the Styling Theme Settings, you can modify the font properties and choose how the highlight will look.

Theme Settings → Styling → Text Highlights → Style 01

To apply highlights using the "mark" HTML tag, check Activate Style.

text-highlights-style-01-activate-style

This setting is not activated by default, adding the HTML tag before the style is activated will cause any predefined CSS to apply.

Theme Settings → Styling → Text Highlights → Style 02

To apply highlights using the "em" HTML tag, check Activate Style.

theme-settings-style-02-activate-style

This setting is not activated by default, adding the HTML tag before the style is activated will cause any predefined CSS to apply (most commonly Italics if not overwritten with custom CSS).

Two-tone Colored Text

To create a color change within your text, you can configure a Color for the Text Style.

Underline or Highlight Text

To create a highlight effect or underline text, you can configure the Underline/Mark Style.

Add Text Highlights to Your Website Text

Each style that you set up in the Theme Settings has a corresponding HTML tag that you can use in text fields and rich text editors throughout the modules.

Page Editor  → Module → Text Box

For Title, Intro Title, and other text elements in POWER modules, you can add the code directly to the text box.

mark-tag-in-title-website

Page Editor  → Module → Rich Text Editor → Advanced → Source Code

For Descriptions and other text elements using the Rich Text Editor, you will need to add the tag via the Source Code.

edit-source-code-rich-text-hubspot

Code for Style 01: HTML mark Tag

To add Style 01 to your text, you will need to add the mark Tag around your text:

Code for Style 02: HTML em Tag

To add Style 02 to your text, you will need to add the em Tag around your text:

Next Steps

Now that you have mastered Text Highlights, take things up a notch by adding Code Highlighting to automatically apply syntax highlighting to programming languages.

Next up:

NEVER MISS A POWER UPDATE

We are continuously improving our modules and updating our documentation. Stay in the loop.