How can we help you today?

Add Your First ShortPoint Design Element to Classic Page

Please watch this video to learn about locating ShortPoint Insert buttons:


Note: ShortPoint SPFx is now available both for Classic and Modern SharePoint sites.

So you are ready to design your first page using ShortPoint. Awesome :)



Create or Edit any page on your site where you have ShortPoint installed.

In this article, we will create new Wiki Page.


Step 1: Open Site Contents


yR7jPCjMXTaiMnHypkeEIXUEUnifH6h3TQ.png



Step 2: Open Site Pages

sq8-M3GV20HtDFz671mMBhhYD7nuFMiH1A.png

In Modern Experience:

rQpECxwo2od9PYJ9_y2LKkegNoyLQYXPng.png


Step 3: Create New Page

The page will look like this in edit mode. It has big content area. Activate the cursor inside the content area, and open Insert Tab. You will see ShortPoint Insert button waiting for you.


lP0XhgcRwWg50C8PxQJwt5zPKpwEPN0xzg.png


Step 4: Insert Background design element

In our first example, we will add a Background design element to the page, for it to become a nice header with video.


PgW0YL3H-UPq4SEeUzofQsgmBECBEdobdw.gif




Step 5: Set Background Options

Background design element is used to add a background area to your page. The background can be an image, video, or color. You can control the size, alignment, and many other options.


In Settings tab: Set the height to be 1/2 screen  height

You can add any value you want, but % values will set the height based on the device screen height, therefore we recommend this.


arDuDFbhIQKCQxT0lwbuhEW5Yl4in4p7dA.png



Open Background tab and insert the URLs for the following image and video.

Why image and video? Because auto-play video is not supported on mobile devices. When you add the image, it will be loaded when the video is not supported.



MKZ101DQcrR9KctwAPZQ4gOrQhnEyD5_tQ.gif


Step 6: Hit the Preview Button

Before you Insert this new design element to the page, you can always Preview your work.

4XiSXnaxwmmBMii3iLZJRU7DT051MCPO9A.png


Step 7: Click Insert

When you are done, press the Insert + button in the bottom right corner. This will insert ShortPoint in the editor so you can continue editing. It will look like this:

RHkJXhVwHfoceoO1RDKCccCoVDrNlwORHg.png


Step 8: Type Text Inside Background design element

Most design elements, when inserted to the editor, will contain an empty white area. You can type text inside this area, add web parts, app parts, images and anything you see in SharePoint ribbon.


We will Type a welcome message and apply some formatting:



8EEuWR6ks3JF0PQTeIgbJ0yvw70G28hr3w.gif



Step 9: Save your page

After you are done with editing, save your page to see the final results.



NEXT: Copy your first Awesome Page from ShortPoint Demos Website. Try the magic!



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 14 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