How to Customize the Dropcap Design Element

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

TABLE OF CONTENTS

• Prerequisite
• Option 1: Add the Dropcap Design Element using the Page Builder
  • Step 1: Edit the ShortPoint Web Part
  • Step 2:Insert the Dropcap Design Element
  • Step 3: Add content
  • Step 4: Customize the Dropcap’s Design
  • Step 5: Insert the Text Design Element
  • Step 6: Save
• Option 2: Add the Dropcap Design Element using the Rich Text Editor
  • Step 1: Edit the ShortPoint Web Part
  • Step 2: Open Rich Text Editor
  • Step 3: Add the Dropcap
  • Step 4: Customize the Dropcap
  • Step 5: Save
• Dropcap Features
  • Dropcap Settings Window
    • A. Content tab
    • B. Design tab
    • C. Custom CSS Tab
  • Dropcap Rich Text Editor Options

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 Dropcap 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 Dropcap Design Element using this option:

NOTECheck out Dropcap 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.

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

Step 2:Insert the Dropcap Design Element

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

Step 3: Add content

NOTEThe Dropcap Design Element’s main purpose is to place emphasis on the first letter of a sentence or paragraph. In the Dropcap content field, write the first letter of the sentence you want to display. You will then add the rest of the content in Step 5.

• Add a Dropcap content.

Step 4: Customize the Dropcap’s Design

• Navigate to the Design tab.
• Customize the look of the Dropcap according to your preference.
• Once satisfied, click the green check mark.

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

Step 5: Insert the Text Design Element

• Click the plus icon.
• Use the search box to look for Text and click it.
• Add the rest of the content. 
• Once done, click the green check mark.

Step 6: Save

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

• Click Save to apply all your changes.

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

Dropcap 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 Dropcap 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.

• 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.

• Select the cogwheel icon.

Step 3: Add the Dropcap

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

• Select the Show Dropcap icon.

Step 4: Customize the Dropcap

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

NOTECheck out Dropcap 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.

• Click Save to apply all your changes.

Dropcap Features

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

Dropcap Settings Window

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

A. Content tab

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

B. Design tab

The Design tab allows you to customize the look of the Dropcap Design Element. 

	Solid	when enabled, the Dropcap will change to Solid style.
	Color	allows you to change the color of the Dropcap. You can do so by [1] writing the HEX code, [2] using the drop-down, or [3] using the color picker.

C. Custom CSS Tab

This tab allows you to use your own CSS, HTML, and Javascript code to customize the Dropcap 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.

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

Dropcap Rich Text Editor Options

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

	Dropcap Content	allows you to modify the content of the Dropcap.
	Solid	when enabled, the Dropcap will change to Solid style.
	Color	allows you to change the color of the Dropcap.

That’s it! You now know the two ways to insert the Dropcap Design Element.

Related articles:

• How to Customize the Popover Design Element
• How to Customize the Label Design Element
• How to Customize the Note Design Element
• How to Customize the Tooltip Design Element