How to Customize the Blockquote Design Element

This article will demonstrate how to customize the Blockquote Design Element and expound on its modifiable features. 

TABLE OF CONTENTS

• Prerequisite
• Interactive Tutorial
• Step-by-step Tutorial
  • Step 1: Edit the ShortPoint Web Part
  • Step 2:Insert the Blockquote Design Element
  • Step 3: Add content
  • Step 4: Customize the Map’s Design
  • Step 5: Save
• Blockquote Features
  • A. Content tab
  • B. Design tab
  • C. Custom CSS Tab

Prerequisite

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

Interactive Tutorial

Click Get Started to learn how to customize the Blockquote Design Element:

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

Step-by-step Tutorial

Follow the steps below for a detailed guide on how to customize the Blockquote Design Element:

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 Blockquote Design Element

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

Step 3: Add content

• Add a Quote.
• Add the name of the Quote’s Author.

Step 4: Customize the Map’s Design

• Navigate to the Design tab.
• Customize the Blockquote’s design according to your preferences.
• Click the green check mark once you are satisfied.

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

Blockquote Features

Below are the options you can find in the Blockquote Settings window:

A. Content tab

The Content tab allows you to edit the quote inside the Blockquote Design Element. It has the following options:

	Quote	allows you to modify the quote displayed inside the Blockquote Design Element.
	Author	allows you to modify the author of the quote.

B. Design tab

The Design tab allows you to customize the design of the Blockquote Design Element. It has the following options:

	Position	allows you to modify the placement of the Blockquote. You can choose from Default, Left, or Right.
	Align	allows you to change the text alignment of the quote. You can choose from Default, Left, or Right.
	Color	allows you to choose the color of the Blockquote. 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 Blockquote 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 Visibility tab is currently unavailable in Live Mode.

That’s it! You now know how to customize the Blockquote Design Element. 

Related articles:

• How to Customize the Dropcap Design Element
• How to Customize the Label Design Element
• How to Customize the Popover Design Element