Locating ShortPoint Insert Buttons




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 ShortPoint

In our first example, we will add background ShortPoint to the page to show nice header to our page with a video.


PgW0YL3H-UPq4SEeUzofQsgmBECBEdobdw.gif



Step 5: Set Background Options

Background ShortPoint is used to add background area to your page. The background can be of an image, video, and color. You can control size, alignment, and many another thing.


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 ~we recommend this.


arDuDFbhIQKCQxT0lwbuhEW5Yl4in4p7dA.png



Open Background tab and 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 ShortPoint to the page, you can always Preview your work.

4XiSXnaxwmmBMii3iLZJRU7DT051MCPO9A.png


Step 7: Click Insert

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

RHkJXhVwHfoceoO1RDKCccCoVDrNlwORHg.png


Step 7: Type Text Inside Background ShortPoint

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


We will Type the welcome message with some formatting:



8EEuWR6ks3JF0PQTeIgbJ0yvw70G28hr3w.gif


Step 8: Save your page

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


NEXT: Visit Demos Website

Open demos.shortpoint.com

The site contains many examples we created using ShortPoint. Spend some time navigating through pages. If you like any sample, you can copy and paste directly into your page.


Watch the magic:




To more about the available ShortPoint demos, click here.