Try ShortPoint nowThis article will walk you through customizing the Textshow Design Element and its basic features.
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.
Interactive Tutorial
Click Get Started to learn how to customize the Textshow Design Element:
NOTECheck out Textshow 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 Textshow 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 Textshow Design Element
- Click the plus icon.
- Use the search box to look for Textshow and click it.
Step 3: Edit the Textshow’s content
- In the Items tab, click the cogwheel icon.
- Add a Title.
- Add a Description.
- (Optional) Add a Link.
- Click the back icon to edit the other items in the Textshow.
- Repeat the steps above.
- (Optional) If you want to add other items, click Add New. Then, repeat the same steps above to edit the content of the new item.
NOTEYou can also create dynamic Textshow content. Check out ShortPoint Connect: Basic Tutorial.
Step 4: Customize the Textshow’s design
- Navigate to the Design tab.
- Customize the look of the Textshow according to your preference.
- Once done, click the green check mark.
NOTECheck out Textshow 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.
Textshow Features
Below are the tabs you can find in the Textshow Settings window:
A. Items tab
The Items tab allows you to duplicate, delete, configure content, and add new items. It has the following options:
ITEMS ACTION ICONS
 | Cogwheel | opens a new window that allows you to edit the content of each item. See the table below for the cogwheel icon settings. |
 | Duplicate | duplicates the item selected. |
 | Trash | deletes the item selected. |
 | Add New | adds a new item. |
 | Drag and Drop | allows you to re-arrange the position of the item. |
COGWHEEL ICON SETTINGS
 | Title | add item title. |
 | Description | allows you to add a description |
 | Link | add a link to redirect users who click on an item. |
B. Design tab
The Design tab allows you to customize the design of the Textshow Design Element. It has the following options:
 | Color | allows you to customize the text color of the Textshow. You can do so by [1] typing the HEX Code in the field provided, [2] using the drop-down, or [3] using the Color Picker. |
 | Border Color | allows you to customize the border color of the Textshow. You can do so by [1] typing the HEX Code in the field provided, [2] using the drop-down, or [3] using the Color Picker. |
 | Background Color | allows you to modify the background color of the Textshow. You can do so by [1] typing the HEX Code in the field provided, [2] using the drop-down, or [3] using the Color Picker. |
 | Height | allows you to adjust the height of the Textshow. |
C. Custom CSS Tab
This tab allows you to use your own CSS, HTML, and Javascript code to customize the Textshow 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 and Connect tabs are currently unavailable in Live Mode.
That’s it! You now know how to customize the Textshow Design Element. Enjoy using this Design Element on your SharePoint pages.
Related articles:
