Try ShortPoint nowThere are multiple ways to customize existing Design Elements in ShortPoint Page Builder. This article will give you a detailed guide on each one.
TABLE OF CONTENTS
- Prerequisites
- Ways to Edit in Page Builder
- Conclusion
- Frequently Asked Questions
- Which Design Elements support Inline Text Editing?
- Which version of ShortPoint SPFx do I need to drag and drop Design Elements?
- Why can't I see the Layouts icon on my Design Element?
- How do I change the padding and margins of a Design Element?
- Why can't I edit a Design Element on my page?
- Where can I paste a copied Design Element?
Prerequisites
- You must have the latest version of ShortPoint SPFx installed.
- You are using a Modern page in SharePoint, and you have editing access to the page you want to edit.
- You must already have ShortPoint Design Elements on your page.
- You are a ShortPoint Designer with an active license.
Ways to Edit in Page Builder
Listed below are the multiple ways you can edit a Design Element while in Page Builder:
Drag and Drop
Starting with ShortPoint SPFx version 9.4.0.0 and later, you can now drag and drop Design Elements anywhere on your page.
To do so, simply grab an element with your cursor, drag it to its new location, and drop it in place:
Inline Text Editing
When you want to edit text content, you can use Inline Text Editing on the Design Element. This simply means you can directly edit the text without opening the Design Element's settings window.
NOTEDesign Elements that allow Inline Text Editing are Text, Alert, Note, and Panel.
To activate Inline Text Editing, double-click the text and make your edits. The Rich Text Editor will also be available, allowing you to format the text and add Inline Design Elements.
Hot Actions
When you want to customize the spacing (paddings and margins) around the Design Element, you can use the Hot Actions feature, which allows you to adjust the spacing in real time.
To do so, press the Design Element tag and hover over the side you want to change until you see a color highlight. Drag the highlight to your desired size and release when done.
EasyPass Tag Options
When you select the EasyPass tag of a Design Element, additional options will appear. Let's go through each one:
Settings Window
The Settings Window is where you can edit the selected Design Element's content, design, spacing, integrations, and so much more.
To open it, select the Design Element tag and click the cogwheel icon. From there, you'll see multiple tabs where Design Element properties can be edited. The tabs available within a Design Element may vary. Check out the dedicated article for the Design Element you want to use to know more.
Layouts
The layouts icon is only available for Row and Section Design Elements. This gives you the option to choose how many columns will be in them.
To do so, click the EasyPass tag of the Section/Row, click the Show layouts icon, and choose a layout.
Learn more about customizing Sections and Rows by checking out the articles below:
- Section Design Element: How to Add a SharePoint Section Layout
- Row Design Element: How to Add a Row in SharePoint
Delete
Removing any Design Element from your page is also very easy. Simply select its EasyPass tag and click the trash icon to delete a Design Element.
Other Actions
Other actions give you additional options to modify a Design Element.
To access it, select the EasyPass tag of the Design Element and click the ellipsis icon to open a dropdown of essential fast actions.
Here are the options you can find:
- Duplicate - allows you to create a duplicate of the Design Element. Check out How to Duplicate Design Elements for more details.
- Lock - allows you to lock the Design Element. While locked, the Design Element will not be editable.
- Unlock - allows you to unlock the Design Element.
- Copy - allows you to copy the Design Element. For more information, go to How to Copy and Paste Design Elements.
- Cut - allows you to cut the Design Element.
- Paste - allows you to paste the Design Element. There are several paste options available, including pasting before a design element, pasting after a design element, and pasting into a design element. For more information, go to How to Copy and Paste Design Elements.
Conclusion
ShortPoint Page Builder gives you several ways to edit a Design Element without leaving the page. Use Drag and Drop to move elements around, Inline Text Editing to update text directly, and Hot Actions to adjust spacing in real time. For everything else, select the EasyPass tag to open the Settings Window, change layouts, delete an element, or access Other Actions like duplicating, locking, copying, cutting, and pasting.
Try combining these methods to build and refine your pages faster.
Frequently Asked Questions
Which Design Elements support Inline Text Editing?
Inline Text Editing is available for the Text, Alert, Note, and Panel Design Elements. Double-click the text to start editing.
Which version of ShortPoint SPFx do I need to drag and drop Design Elements?
Drag and drop is available in ShortPoint SPFx version 9.4.0.0 and later. If you don't see it, make sure you have the latest version installed.
Why can't I see the Layouts icon on my Design Element?
The Show layouts icon is only available for Section and Row Design Elements. Other Design Elements don't have this option.
How do I change the padding and margins of a Design Element?
Use Hot Actions. Select the Design Element tag, hover over the side you want to adjust until you see a color highlight, then drag it to your desired size.
Why can't I edit a Design Element on my page?
The Design Element may be locked. Select its EasyPass tag, click the ellipsis icon, and choose Unlock to make it editable again.
Where can I paste a copied Design Element?
You can paste a Design Element before another Design Element, after it, or into it. These paste options are found under Other Actions in the EasyPass tag.
Related Articles:
