Try ShortPoint nowNOTEThis Design Element is still in development and will be released soon.This article will showcase how to customize the FAQs Design Element and detail all its features.
TABLE OF CONTENTS
Prerequisites
- You must have the ShortPoint SPFx version 8.6.0.0 or later installed in your SharePoint environment.
- You must be a ShortPoint Designer with an active license.
What are FAQs?
The FAQs Design Element is a new and exciting addition to ShortPoint's library of Design Elements. Available in ShortPoint SPFx version 8.6.0.0 and later, these versatile content containers make it super easy to build a polished FAQ section right on your SharePoint page.
What we love most about FAQs is how flexible they are. You can customize the content inside each toggle to fit exactly what you need.
Want to add more content? Go for it! You can create as many toggle items as you'd like, helping you build clean, organized layouts that really make your content pop.
Plus, you can tweak the colors, adjust the styles, and play with different layouts until everything looks just right with your page's vibe.
Interactive Tutorial
Click Get Started to learn how to customize the FAQs Design Element:
NOTETo learn more about the features you can customize for FAQs, check out FAQs Features.
Step-by-step Tutorial
Follow the detailed guide below to start using FAQs:
Step 1: Edit the ShortPoint Web Part
- Go to the SharePoint page you want to use and click Edit.
- Close the Toolbox:
- Click the Edit properties icon:
Step 2: Insert the FAQs Design Element
- Choose where you want to add the FAQs and click the plus icon:
- Use the search box to look for FAQs and click it:
Step 3: Add content
- Go to the Items tab.
- Click Add New to add an FAQ:
- Select the cogwheel icon:
- Customize the content according to your preferences.
- Click the back icon:
- Repeat the same steps if you need to add more items.
NOTEYou can also connect the FAQs to external or internal sources to create dynamic content. To learn how, check out ShortPoint Connect: Basic Tutorial.
Step 4: Customize the Style
- Go to the Style tab.
- Select the FAQs you want to use.
Step 5: Customize the Design
- Go to the Design tab.
- Customize the look of the FaAQs according to your preferences.
- Once satisfied, click the green check mark.
NOTETo learn more about the features you can customize for FAQs, check out FAQs Features.
Step 6: Save
- Click the eye icon to see your page in real-time:
- Save your changes:
That's it! You can now create functional FAQ sections on your SharePoint page.
FAQs Features
Below are the options you can find in the FAQs Settings window
A. Style Tab
The Style tab allows you to choose the style of the FAQs.
B. Items Tab
The Items tab allows you to add new items and organize the content inside the FAQs. It has the following options:
 | Add New | allows you to add a new item. |
 | Drag icon | allows you to rearrange the items. |
 | Duplicate icon | allows you to copy an item. |
 | Cogwheel icon | allows you to edit the content of an item. See the table below to see the options you can find inside. |
 | Trash icon | allows you to remove an item. |
COGWHEEL ICON OPTIONS
 | Title | allows you to add an FAQ Title |
When you click the cogwheel icon, it has a Rich Text Editor that allows you to customize the text will appear inside the FAQ. It has the following options:
 | Bold | makes the format of the text Bold. |
 | Italic | makes the format of the text Italic. |
 | Underline | makes the format of the text Underline. |
 | Text Color | allows you to change the color of your text. |
 | More Text | opens additional options to use. |
 | Font Size | allows you to change the size of your text. |
 | Align | allows you to change the alignment of the text. |
 | List | allows you to create a list. It has to options: Unordered List and Ordered List. |
 | Background Color | allows you to add a background color to the text. |
 | Strikethrough | allows you to add a strikethrough to your text. |
 | All Caps | capitalizes the selected text. |
 | Small Caps | turns the selected text into small letters. |
 | Paragraph Format | allows you to specify the heading of the text. |
 | Paragraph Style | allows you to choose the style of the text. You can choose from Gray, Bordered, Spaced, or Uppercase. |
 | Clear Formatting | allows you to start from scratch and remove all the changes you've made. |
 | Font Family | allows you to change the font of your text. If you have any custom fonts, previously added to the Theme Builder, check these articles on how to add custom fonts from Google Fonts, Fonts.com, Adobe Typekit, or manually. They will be displayed in the list of fonts. |
MORE RICH
 | More Rich | opens more options in the Rich Text Editor. |
 | Code View | shows the text in code view. |
 | Insert Table | allows you to add a table. |
 | Insert Video | allows you to add a video. |
 | Insert Image | allows you to add an image. |
INLINE DESIGN ELEMENTS
 | ShortPoint icon | opens the options for Inline Design Elements. |
 | Show Button | allows you to insert a button. |
 | Show Link | allows you to insert a link. |
 | Show Tooltip | allows you to insert a tooltip. |
 | Show Popover | allows you to insert a popover. |
 | Show Abbreviation | allows you to add an abbreviation. |
 | Show Dropcap | allows you to show dropcap |
 | Show Label | allows you to add a label. |
 | Show Emphasis | adds emphasis to the text. |
 | Show Icon | allows you to add an icon. |
 | Show Emoticon | allows you to add an emoticon. |
NOTECheck out Introducing Inline Design Elements to learn more about Inline Design Elements.
C. Design Tab
The Design tab allows you to customize how the FAQs will look. It has the following options:
 | Title Size | allows you to adjust the size of the title in px or em. |
 | Color | allows you to modify the primary color of the FAQs. You can choose a color by [1] writing a HEX code, [2] using the drop-down, or [3] using the color picker. |
 | Expand Icon | allows you to choose the icon to be shown when the toggles are expanded. |
 | Collapse Icon | allows you to choose the icon to be shown when the toggles are collapsed. |
D. Advanced Tab
The Advanced tab allows you to customize the margin values around the FAQs Design Element. It has the following options:
 | Margin Top | allows you to adjust the top margin value in px, %, or em. |
 | Margin Right | allows you to adjust the right margin value in px, %, or em. |
 | Margin Bottom | allows you to adjust the bottom margin value in px, %, or em. |
 | Margin Left | allows you to adjust the left margin value in px, %, or em. |
E. Custom CSS Tab
This tab allows you to use your own CSS, HTML, and JavaScript code to customize the FAQs 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.
Related articles:
