Try ShortPoint nowMany ShortPoint Design Elements, like News Cards, Tiles, and Image List, show several items at once. You manage those items from the Items tab. This article shows you how to add, edit, duplicate, rearrange, and remove Design Element items in ShortPoint Page Builder.
TABLE OF CONTENTS
- Prerequisites
- What Is the Items Tab?
- Interactive Tutorial
- Step-by-step Tutorial
- Editing Connected Items
- Frequently Asked Questions
Prerequisites
- You have the latest version of ShortPoint SPFx installed on your SharePoint environment.
- You are a ShortPoint Designer with an active license.
- Your page has a Design Element that supports multiple items, like News Cards, Tiles, Image List, Icon List, etc.
What Is the Items Tab?
The Items tab is the first tab in the settings window of Design Elements that hold multiple items. It lists every item in the Design Element, in the same order they appear on your page. The number next to the tab name shows how many items there are.
Each item has its own controls:
- Drag handle: drag the item up or down to change its order.
- Duplicate icon: creates an exact copy of the item.
- Cogwheel icon: opens the item so you can edit its content and design.
- Delete icon: removes the item.
- Add New: adds a new item to the bottom of the list.
The tabs you can modify for a specific item depend on the Design Element you're editing:
Additionally, the fields you see when editing the content of an item depend on the Design Element. For example, a News Cards item has fields for the author, date, title, image, description, and link:
Interactive Tutorial
Click Get Started to try it yourself:
Step-by-step Tutorial
Step 1: Open ShortPoint Page Builder
- Go to the SharePoint page you want to use and click Edit.
- Close the SharePoint Toolbox by clicking the X icon.
- Click the Edit properties icon on the ShortPoint web part toolbar. This opens ShortPoint Page Builder.
Step 2: Go to the Items Tab
- Click the EasyPass tag of the Design Element you want to change. In this example, we're using News Cards.
- Click the cogwheel icon. This opens the Design Element's settings window.
- Go to the Items tab. This is where you manage all the items inside the Design Element.
Step 3: Add a New Item
- Click Add New. A new item appears at the bottom of the list and on your page, with placeholder content you can replace.
Step 4: Edit an Item
- Click the cogwheel icon of the item you want to edit. In this example, we're editing the new item.
- Make your changes. Your page updates as you type.
TIPUse the Search options bar at the top of the item settings to quickly find a field.
- When you're done, click the back arrow icon to return to the list of items.
Step 5: Duplicate an Item
- Click the duplicate icon of the item you want to copy. An exact copy of the item appears in the list.
TIPDuplicating is a quick way to create a new item that uses the same design as an existing one. Just duplicate it, then edit the copy's content.
Step 6: Remove an Item
- Click the delete icon of the item you want to remove. In this example, we're removing the copy we just made.
NOTERemoved the wrong item? Click the undo arrow at the bottom of the settings window to bring it back.
Step 7: Rearrange Items
- Hover over the drag handle (the six dots) of the item you want to move. Drag the item up or down to the position you want, then let go.
- The items on your page follow the new order right away. In this example, we moved Unlocking Smarter Workdays from fifth to third place.
Step 8: Apply, Save, and Publish
- When you're happy with your items, click the green checkmark to apply your changes.
- Click Save to save your changes and leave Page Builder.
- Click Publish changes to publish your page.
Great work! You can now add, edit, duplicate, rearrange, and remove Design Element items.
Editing Connected Items
If your Design Element is connected to a data source, you will need to edit the items directly from the source to change its content. In the Items tab, you'll only be able to configure the actual connection.
For example, if the Design Element is connected to the Employee SharePoint List, you will need to edit that SharePoint List to change any content.
Frequently Asked Questions
Which Design Elements have an Items tab?
Design Elements that show more than one item, such as News Cards, Tiles, Image List, Icon List, etc. Single-item Design Elements, like Text or Button, don't have one.
I can't find the Items tab. What should I do?
First, check that your Design Element supports multiple items. In most of them, the Items tab is the first tab in the settings window.
Where does a new item appear?
At the bottom of the list, which means it shows last. Drag it to a new position if you want it to appear earlier.
Does duplicating an item copy its design too?
Yes. The copy has the same content and settings as the original. Edit the copy to change its content.
Can I undo a change in the Items tab?
Yes. Click the undo arrow at the bottom of the settings window. To drop all your unsaved changes in Page Builder, click Discard instead of Save.
I made changes, but visitors still see the old items. Why?
Your changes only go live after you click the green checkmark, Save, and then Publish changes. If you skip publishing, visitors will keep seeing the last published version of your page.
Can I manage connected items?
If your Design Element pulls its items from a data source with ShortPoint Connect, update the content in that source instead.
Related articles:
