Try ShortPoint nowNOTEThis Design Element is still in development and will be released soon.
This article will demonstrate how to customize the Image Boxes 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 Is an Image Box?
The Image Boxes Design Element is one of the newest additions to ShortPoint's Design Elements library. Available in ShortPoint SPFx version 8.6.0.0 and up, these handy content containers make it easy to display your information alongside stunning images. You'll love how these beautifully crafted boxes grab attention while keeping everything organized and user-friendly.
Image Boxes offer incredible flexibility when it comes to your content. You can effortlessly tailor the content in each box to fit exactly what you need, offering endless possibilities.
The best part? You can add as many Image Boxes as you want! This makes it super easy to create those engaging, well-organized layouts that really make your content pop and grab your visitors' attention.
And here's another great feature: you're completely in the driver's seat when it comes to design! You can play around with colors, experiment with different styles, and adjust layouts until everything looks absolutely perfect with your page's overall vibe.
Interactive Tutorial
Start the interactive tutorial to learn how to customize the Image Boxes Design Element:
NOTETo learn more about the features you can customize for Image Boxes, check out Image Boxes Features.
Step-by-step Tutorial
Follow the detailed guide below to start using Image Boxes:
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 Image Boxes Design Element
- Choose where you want to add the Image Boxes and click the plus icon:
- Use the search box to look for Image Boxes and click it:
Step 3: Add content
- Go to the Items tab.
- Click Add New to add an Image Box:
- 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 Image Boxes to external or internal sources to create dynamic content. To learn how, check out ShortPoint Connect: Basic Tutorial.
Step 4: Customize the Style
- Select the Image Boxes style you want to use.
Step 5: Customize the Design
- Go to the Design tab.
- Customize the look of the Image Boxes according to your preferences.
- Once satisfied, click the green check mark.
NOTETo learn more about the features you can customize for Image Boxes, check out Image Boxes Features.
Step 6: Save
- Click the eye icon to see your page in real-time:
- Save your changes:
That's it! You now know how to customize the Image Boxes Design Element.
Image Boxes Features
Below are the options you can find in the Image Boxes Settings window
A. Style Tab
The Style tab allows you to choose the style of the Image Boxes.
B. Items Tab
The Items tab allows you to add new items and organize the content inside the Image Boxes. 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 a title. |
 | Image URL | allows you to choose an image to display. To add an image, you can paste the URL of the image or click the folder icon. |
 | Image Horizontal Position | allows you to change the horizontal position of the image. |
 | Image Vertical Position | allows you to change the vertical position of the image. |
 | Description | allows you to add a description. |
 | Link Label | allows you to modify the link label. By default, it is set to 'Learn More'. |
 | Link URL | allows you to add a clickable link. |
 | Linking Option | allows you to specify how the link will be opened. You can choose from the following:
|
C. Design Tab
The Design tab allows you to customize how the Image Boxes will look. It has the following options:
COLOR
 | Color | allows you to modify the primary color of the Image Boxes. You can change the color by [1] adding a hex code, [2] using the drop-down, or [3] using the color picker. |
SETTINGS
 | Link Label | allows you to modify the link label. By default, it is set to 'Learn More'. |
 | Content Alignment | allows you to change the alignment of the content. You can choose from Left, Center, or Right. |
 | Image Height | allows you to customize the height of the images in px, %, or em. |
 | Description Color | allows you to modify the description color of the Image Boxes. You can change the color by [1] adding a hex code, [2] using the drop-down, or [3] using the color picker. |
 | Link Color | allows you to modify the link color of the Image Boxes. You can change the color by [1] adding a hex code, [2] using the drop-down, or [3] using the color picker. |
CONTENT
 | Title Size | allows you to modify the size of the title in px or em. |
 | Description Size | allows you to change the size of the description in px or em. |
 | Link Size | allows you to modify the size of the link label in px or em. |
BACKGROUND SETTINGS
 | Background Color | allows you to modify the background color of the Image Boxes. You can change the color by [1] adding a hex code, [2] using the drop-down, or [3] using the color picker. |
 | Roundness | allows you to adjust the roundness of the Image Boxes' corners. |
D. Advanced Tab
The Advanced tab allows you to customize the margin values around the Image Boxes 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 Image Boxes 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:
