How can we help you today?

How to Customize the Frame Design Element

This article will walk you through customizing the Frame Design Element and its basic features.


Frame


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 Frame Design Element:



NOTE Frame is a content-holder Design Element, meaning you can choose to showcase other Design Elements inside the Frame. You can do so by selecting the Frame tag and clicking the blue plus icon.

Check out Frame Features to learn more about the OOTB options you can customize.


Add Design Elements


Step-by-step Tutorial

Follow the steps below for a detailed guide on how to customize the Frame Design Element:


Step 1: Edit the ShortPoint Web Part

  • Go to the SharePoint page you want to use and click Edit.


Edit


  • Click the ShortPoint tag.
  • Select the pencil icon.

Step 2: Insert the Slideshow Design Element

  • Click the plus icon.
  • Use the search box to look for Frame and click it.

Step 3: Edit the Frame’s content

  • Delete the default content.
  • Click the folder icon to add an image or simply paste the URL of the image you want to display.


NOTEThe type of content you want to display inside the Frame depends on your preference. You can opt to showcase only text, only an image, or even a combination of text and image. For this guide, we will showcase an image. 

Also, Frame is a content-holder Design Element, meaning you can choose to showcase other Design Elements inside the Frame. You can do so by selecting the Frame tag and clicking the blue plus icon.



Add Design Elements


Step 4: Customize the Frame’s design

  • Navigate to the Design tab.
  • Customize the look of the Frame according to your preference.


NOTECheck out Frame Features to learn more about the OOTB options you can customize.

Step 5: Insert and Save

  • Once satisfied, click the green checkmark.
  • Then, click the eye icon to see your page in real-time.


eye icon


  • Click Save to apply all your changes.


Save


Frame Features

Below are the tabs you can find in the Frame Settings window:


A. Content tab

The Content tab allows you to customize the content displayed on the Frame. It has the following options:


content tab


ContentContent
allows you to add text content to display inside the Frame.
image linkImage Link
allows you to display an image inside the Frame.

B. Design tab

The Design tab allows you to customize the design of the Frame Design Element. It has the following options:


Design tab


ColorColor allows you to customize the color of the Frame.
ResponsiveResponsivemakes your Frame responsive.
DecorationDecorationallows you to choose the style of the Frame. You can choose from Simple or Solid.
WidthWidthallows you to modify the width of the Frame.

C. Custom CSS Tab

This tab allows you to use your own CSS, HTML, and Javascript code to customize the Frame Design Element. 


NOTECheck out our support article on How to Insert Custom CSS into a ShortPoint Design Element (Basic Tutorial) to know more about Custom CSS.


Custom CSS tab


NOTEThe Visibility and Connect tabs are currently unavailable in Live Mode.


That’s it! You can now use Frames to create beautiful and unique sections on your SharePoint pages.


Related articles:













Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

World's best intranet sites are designed using ShortPoint

Get started today! Learn more
See all 62 topics

Start a trial

Ignite your vision. Install ShortPoint directly on your site, or play in sandbox mode. No credit card required.

Get started today

World’s best intranet sites are designed using ShortPoint

Thousands of companies using ShortPoint everyday to design, brand and build award winning intranet sites.

Get started Learn more