How can we help you today?

How to Customize the Emphasis Design Element

This article will detail the two ways you can insert the Emphasis Design Element into your SharePoint page. Follow the option that best suits your needs.


Emphasis


TABLE OF CONTENTS



Prerequisite

  • You have the latest version of ShortPoint SPFx installed on your SharePoint environment.
  • You are a ShortPoint Designer with an active license.

Option 1: Add the Emphasis Design Element using the Page Builder

ShortPoint has a library of Design Elements that ShortPoint Designers can add to their page. Follow along to learn how to insert the Emphasis Design Element using this option:



NOTECheck out Emphasis Features to learn more about the OOTB options you can customize.

Step 1: Edit the ShortPoint Web Part

  • Go to the SharePoint page you want to use and click Edit.


Edit

  • Click the ShortPoint tag.
  • Select the pencil icon.

Step 2:Insert the Emphasis Design Element

  • Click the plus icon.
  • Use the search box to look for Emphasis and click it.

Step 3: Add content

  • Add Emphasis content.

Step 4: Customize the Emphasis’ Design

  • Navigate to the Design tab.
  • Choose the Color of the Emphasis.
  • Once satisfied, click the green check mark.


NOTECheck out Emphasis Features to learn more about the OOTB options you can customize.

Step 5: Save

  • Then, click the eye icon to see your page in real-time.


eye icon

  • Click Save to apply all your changes.


Save


Option 2: Add the Emphasis Design Element using the Rich Text Editor

Emphasis is an Inline Design Element. This means that you can also insert it into your SharePoint page using the Rich Text Editor. Follow the steps to learn how to access it:



NOTECheck out Emphasis Features to learn more about the OOTB options you can customize.

Step 1: Edit the ShortPoint Web Part

  • Go to the SharePoint page you want to use and click Edit.


Edit

  • Click the ShortPoint tag.
  • Select the pencil icon.

Step 2: Open Rich Text Editor


NOTEThe Rich Text Editor can be seen in Design Elements which allows text editing. An example of a Design Element with text editing capabilities is the Text Design Element.
  • Click the Design Element tag.


Design Element tag

  • Select the cogwheel icon.


cogwheel icon


Step 3: Add the Emphasis

  • Highlight the text where you want to add the Emphasis.
  • Click the ShortPoint logo.


ShortPoint logo


  • Select the Show Emphasis icon.


Show Emphasis icon


Step 4: Customize the Emphasis

  • Customize the Color of the Emphasis according to your preferences.
  • Click Apply.
  • Once satisfied with your edits, click the green check mark.


NOTECheck out Emphasis Features to learn more about the OOTB options you can customize.

Step 5: Save

  • Then, click the eye icon to see your page in real-time.


eye icon

  • Click Save to apply all your changes.


Save


Emphasis Features

Below are the options you can find in the Emphasis Settings window and the Rich Text Editor:


Emphasis Settings Window

These are the options you will find if you used Option 1 to add the Emphasis Design Element:


A. Content tab

The Content tab allows you to edit the content inside the Emphasis. 


content tab


B. Design tab

The Design tab allows you to customize the color of the Emphasis Design Element. You can do so by [1] writing the HEX code, [2] using the drop-down, or [3] using the color picker.


Design tab


C. Custom CSS Tab

This tab allows you to use your own CSS, HTML, and Javascript code to customize the Emphasis Design Element. 


NOTECheck out our support article on How to Insert Custom CSS into a Page Builder Element? (Basic Tutorial) to know more about Custom CSS.

Custom CSS tab

NOTEThe Connect and Visibility tabs are currently unavailable in Live Mode.

Emphasis Rich Text Editor Options

These are the options you will find if you used Option 2 to add the Emphasis Design Element:


Emphasis Rich Text Editor


Emphasis contentEmphasis Content
allows you to modify the content of the Emphasis.
ColorColorallows you to change the color of the Emphasis.

That’s it! You can now effectively use the Emphasis Design Element on your SharePoint page.


Related articles:

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

World's best intranet sites are designed using ShortPoint

Get started today! Learn more
See all 62 topics

Start a trial

Ignite your vision. Install ShortPoint directly on your site, or play in sandbox mode. No credit card required.

Get started today

World’s best intranet sites are designed using ShortPoint

Thousands of companies using ShortPoint everyday to design, brand and build award winning intranet sites.

Get started Learn more