How to Customize the Well Design Element

This article will showcase the customizing options available for the Well Design Element. 

TABLE OF CONTENTS

• Prerequisite
• Interactive Tutorial
• Step-by-step Tutorial
  • Step 1: Edit the ShortPoint Web Part
  • Step 2:Insert the Well Design Element
  • Step 3: Edit Content
  • Step 4: Customize the Well’s design
  • Step 5 (Optional): Add a Design Element inside the Well
  • Step 6: Save
• Well 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 Well Design Element:

NOTECheck out Well 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 Well 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 Well Design Element

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

Step 3: Edit Content

• Add Content according to your preference.

Step 4: Customize the Well’s design

• Navigate to the Design tab.
• Customize the Well according to your preferences.
• Once satisfied, click the green check mark.

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

Step 5 (Optional): Add a Design Element inside the Well

NOTEWell is a content-holder Design Element. This means that you can add any other Design Element inside it.

• Hover over the Well tag and click it.

• Click the blue plus icon.

• Select the Design Element you want to display inside the Well.
• Customize the selected Design Element according to your preference.
• Click the green check mark once satisfied.

Step 6: Save

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

• Click Save to apply all your changes.

Well Features

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

A. Content tab

The Content tab allows you to customize the content of the Well. It has the following options:

Content

allows you to add content inside the Well. The content field also has a Rich Text Editor. Check out the table below to see its editing features.

The Rich Text Editor allows you to customize how your text will appear on your page. It has the following options:

The Rich Text Editor also has ShortPoint Inline Design Elements. You can see them by clicking the ShortPoint icon:

It has the following options:

NOTECheck out Introducing Inline Design Elements Feature for ShortPoint Page Builder Live Mode and ShortPoint Page Builder Grid to learn more about Inline Design Elements.

B. Design tab

The Design tab allows you to customize the look of the Well. It has the following options:

	Size	allows you to adjust the size of the Well.
	Color	allows you to add a background color. You can do so by [1] typing the HEX code, [2] choosing a color from the drop-down, or [3] picking a color using the color picker.
	Text Color	allows you to choose the text color. You can do so by [1] typing the HEX code, [2] choosing a color from the drop-down, or [3] picking a color using the color picker.

C. Custom CSS Tab

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

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

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

Congratulations! You can now effectively use the Well Design Element on your SharePoint page.

Related articles:

• How to Customize the Counter Boxes Design Element
• How to Customize the Textshow Design Element
• How to Customize the Image Titles Design Element
• How to Customize the Info Design Element