[design-elements-header icon="https%3A%2F%2Fassets-global.website-files.com%2F60953231b313b56665e6e317%2F6156fdb2459f18e2a6fa0886_section.svg" title="Section" description="The%20main%20building%20block%20of%20the%20ShortPoint%20web%20part%2C%20use%20Section%20Design%20Element%20to%20organize%20your%20content%20into%20different%20parts%20and%20to%20define%20the%20main%20structure%20of%20your%20page%20layout.%20Gear%20up%20your%20intranet%20with%20flexibility%20on%20layouts%20and%20advanced%20customizations." /]

SECTION IS THE BIGGEST CONTAINER

Used to organize your content in the page. Think about it as powerpoint presentation slides, but sections for a web page. Section organize anything inside it. You can add many rows inside the section, and define any layout.

[frame image="https%3A%2F%2Fwww.shortpoint.com%2Fwp-content%2Fuploads%2F2017%2F03%2Fsection_default.jpg" responsive="true"]
[/frame]

Define your layout by adding rows and columns into the section

Add columns and rows to the section. You can add columns to every row as well. After you define your layout, you can add anything inside the columns.

[button lightbox text-color="white" title="ShortPoint%20Sections%2C%20Rows%20and%20Columns" link="https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D_ajKHl1N0-Y" color="red" icon="youtube-play" /]

[frame image="https%3A%2F%2Fwww.shortpoint.com%2Fwp-content%2Fuploads%2F2017%2F03%2Fsection_layouts.jpg" responsive="true"][/frame]

Section Pre-defined Layouts

[frame image="https%3A%2F%2Fwww.shortpoint.com%2Fwp-content%2Fuploads%2F2017%2F03%2Fsection_layouts.gif" responsive="true" decoration="undefined"][/frame]

Not Just Layout Options, but tons of settings and features

In every section you can control the height, layout, add background, move the section to the top of the page and much more.

Settings Tab

[frame image="%2FPublishingImages%2FPages%2FShortPoints%2FSection%2Fsettings.png" responsive="true"][/frame]

Background Tab

[frame image="%2FPublishingImages%2FPages%2FShortPoints%2FSection%2Fbackground.png" responsive="true"][/frame]

Section Examples and Demos

Example 1

[section class="shortpoint-copy%20shortpoint-disable-copy-all"]

[section-item]

[row center middle layout="standard" height="77%25" image="https%3A%2F%2Fwww.shortpoint.com%2Fwp-content%2Fuploads%2F2017%2F02%2Fgradient-wallpaper.jpg"]

[column 12]

[background color-transparency="0.4" layout="standard" color="white"]

Section ShortPoint

The Flexibity of Creative Layouts

[/background]

[/column]

[/row]

[row center middle layout="standard"]

[column 3]

The standard Lorem Ipsum passage, used since the 1500s

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

[/column]

[column 3]

The standard Lorem Ipsum passage, used since the 1500s

[/column]

[column 3]

The standard Lorem Ipsum passage, used since the 1500s

[/column]

[column 3]

The standard Lorem Ipsum passage, used since the 1500s

[/column]

[/row]

[row]

[column 12]

[background height="70%25" image="https%3A%2F%2Fwww.shortpoint.com%2Fwp-content%2Fuploads%2F2017%2F02%2Fheader_brand_2.jpg" parallax="medium"]

Section ShortPoint

The Flexibity of Creative Layouts

[/background]

[/column]

[/row]

[/section-item]

[/section]

Example 2: Split Screen

In this example, the section has two columns and its full width.

[note color="info" title="Before%20you%20copy%20and%20paste"]This example here has force full width option in section settings enabled. So if you paste it in your page, it will cover everything from left to right. It will cover SharePoint side navigation. You can switch it off if you do not want this behavior.[/note]

[section vertical-alignment="middle" full-screen="true" alignment="center" class="shortpoint-copy"]

[section-item 6]

[row center middle layout="standard" height="100%25" image="https%3A%2F%2Fwww.shortpoint.com%2Fwp-content%2Fuploads%2F2017%2F01%2Ftiles_bg.jpeg"]

[column 12]

Section Documentation

SECTION SHORTPOINT

The Flexibity of Creative Layouts

[/column]

[/row]

[/section-item]

[section-item 6]

[row left middle layout="standard" height="100%25" color="primary-dark"]

[column 12]

Its Awesome and Great

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

[button title="READ%20MORE" link="%23" color="white" icon="angle-right" /]

[/column]

[/row]

[/section-item]

[/section]

[section vertical-alignment="middle" full-screen="true" alignment="center" class="shortpoint-copy"]

[section-item 6]

[row left middle layout="standard" height="100%25" color="primary-dark"]

[column 12]

Its Awesome and Great

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

[button title="READ%20MORE" link="%23" color="white" icon="angle-right" /]

[/column]

[/row]

[/section-item]

[section-item 6]

[row center middle layout="standard" height="100%25" image="https%3A%2F%2Fwww.shortpoint.com%2Fwp-content%2Fuploads%2F2017%2F01%2Ftiles_bg.jpeg"]

[column 12]

Section Documentation

SECTION SHORTPOINT

The Flexibity of Creative Layouts

[/column]

[/row]

[/section-item]

[/section]

Example 3: Big Call To Action

[section vertical-alignment="middle" full-screen="true" color-transparency="0.6" layout="standard" alignment="center" height="33%25" class="shortpoint-copy" image="https%3A%2F%2Fwww.shortpoint.com%2Fwp-content%2Fuploads%2F2015%2F02%2FUp.jpg" video="https%3A%2F%2Fwww.shortpoint.com%2Fwp-content%2Fuploads%2F2015%2F02%2FUp.mp4" color="white"]

[section-item]

[row]

[column 12]

Creative Full Width Call to Action

This section is full width, so it will cover the whole page from right to left. It has a ShortPoint button and nice background.

[button large title="CONTACT%20US" color="primary" /]

[/column]

[/row]

[/section-item]

[/section]

Example 4: Combination

[section class="shortpoint-copy"]

[section-item]

[row equalize-columns="true" separator="none"]

[column 6 layout="standard" color="primary"]

SHORTCUTS

Organize All Your Digital Documents in One Place

[tiles medium text-size="16" shape="square" style="default"]

[tile title="Database" icon="ion-android-folder" image="https%3A%2F%2Fwww.shortpoint.com%2Fwp-content%2Fuploads%2F2016%2F11%2F8.4.jpg"] [/tile]

[tile title="Services" icon="ion-ios-cog" image="https%3A%2F%2Fwww.shortpoint.com%2Fwp-content%2Fuploads%2F2016%2F11%2F8.5.jpg"] [/tile]

[tile title="Team" icon="ion-person-stalker" image="https%3A%2F%2Fwww.shortpoint.com%2Fwp-content%2Fuploads%2F2016%2F11%2F8.6.jpg"] [/tile]

[tile title="Planner" icon="ion-android-calendar" image="https%3A%2F%2Fwww.shortpoint.com%2Fwp-content%2Fuploads%2F2016%2F11%2F8.7.jpg"] [/tile]

[tile title="Contacts" icon="ion-android-call" image="https%3A%2F%2Fwww.shortpoint.com%2Fwp-content%2Fuploads%2F2016%2F11%2F8.8.jpg"] [/tile]

[/tiles]

[/column]

[column 3 layout="standard" color="alternate-1"]

DOCUMENTS

Organize All Your Digital Documents in One Place

[icons-list icon-size="3" icon-style="square" vertical-alignment="middle" no-icon-style="letter" icon-color="primary-dark" title-color="white" separator="none" spacing="thin"]

[icon-list-item title="Salary" /]

[icon-list-item title="Employee%20Documents" /]

[icon-list-item title="Company%20Agreements" /]

[icon-list-item title="Terms%20and%20Conditions" /]

[icon-list-item title="Business%20Plan" /]

[icon-list-item title="Contacts" /]

[/icons-list]

[button large text-color="alternate-1" title="View%20All" color="white" /]

[/column]

[column 3 image="https%3A%2F%2Fwww.shortpoint.com%2Fwp-content%2Fuploads%2F2015%2F02%2F1.4.jpg"][/column]

[/row]

[/section-item]

[/section]

Section Options Documentation

Understanding Layouts

Layouts are settings in section, row, column and background ShortPoints. They are responsible for the spaces between content and the container.

[frame image="https%3A%2F%2Fwww.shortpoint.com%2Fwp-content%2Fuploads%2F2017%2F03%2Flayouts.png" responsive="true"][/frame]

Section Layout: Full

[section layout="default" color="border-light"]

[section-item]

[row]

[column 12]"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?""Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"[/column]

[/row]

[/section-item]

[/section]

Section Layout: Standard

[section layout="standard" color="border-light"]

[section-item]

[row]

[/row]

[/section-item]

[/section]

Section Layout: Full Height

[section layout="full-height" color="border-light"]

[section-item]

[row]

[/row]

[/section-item]

[/section]

Section Layout: Full Width

[section layout="full-width" color="border-light"]

[section-item]

[row]

[/row]

[/section-item]

[/section]

Content Alignments

By default, the section will position the content on the top left. You can change this using horizontal and vertical alignment options

[frame image="https%3A%2F%2Fwww.shortpoint.com%2Fwp-content%2Fuploads%2F2017%2F03%2Falignment-1.png" responsive="true"][/frame]

Default Alignment

[section layout="default" color="primary-light"]

[section-item]

[row]

[column 12]

[/column]

[/row]

[/section-item]

[/section]

Default Alignment + Section Height 30%

[section layout="default" height="33%25" color="primary-light"]

[section-item]

[row]

[column 12]

[/column]

[/row]

[/section-item]

[/section]

Horizontal Alignment: Center

[section layout="default" alignment="center" color="primary-light"]

[section-item]

[row]

[column 12]

[/column]

[/row]

[/section-item]

[/section]

Horizontal Alignment: Right

[section layout="default" alignment="right" color="primary-light"]

[section-item]

[row]

[column 12]

[/column]

[/row]

[/section-item]

[/section]

Horizontal Alignment: Center + Vertical Alignment: Middle + Section Height: 30%

[section vertical-alignment="middle" layout="default" alignment="center" height="33%25" color="primary-light"]

[section-item]

[row]

[column 12]

[/column]

[/row]

[/section-item]

[/section]

Horizontal Alignment: Right + Vertical Alignment: Bottom + Section Height: 30%

[section vertical-alignment="bottom" layout="default" alignment="right" height="33%25" color="primary-light"]

[section-item]

[row]

[column 12]

[/column]

[/row]

[/section-item]

[/section]

Section Height

By default the section height will be based on its content height. You can change this by setting a height to the section.

[note color="info" title="Height%2C%20Layout%20and%20Alignment"]You need to master content layout, alignment and height. They are all related. Section by default will position all its content at the top left. You can change this as you wish by setting different layout and alignment options[/note]

[frame image="https%3A%2F%2Fwww.shortpoint.com%2Fwp-content%2Fuploads%2F2017%2F03%2Fsection_height.png" responsive="true"][/frame]

Auto Height

The height of the section will be based on the content height by default

[section vertical-alignment="middle" layout="default" alignment="center" color="primary-light"]

[section-item]

[row]

[column 12]

[/column]

[/row]

[/section-item]

[/section]

Half Screen Height

The height of the section will be 50% of any screen height.

[section vertical-alignment="middle" layout="default" alignment="center" height="50%25" color="primary-light"]

[section-item]

[row]

[column 12]

[/column]

[/row]

[/section-item]

[/section]

Full Screen Height

The height of the section will be 100% of the height of any screen

[section vertical-alignment="middle" layout="default" alignment="center" height="100%25" color="primary-light"]

[section-item]

[row]

[column 12]

[/column]

[/row]

[/section-item]

[/section]

Custom Height

You can set a height in any value you want

[section vertical-alignment="middle" layout="default" alignment="center" height="350px" color="primary-light"]

[section-item]

[row]

[column 12]

[/column]

[/row]

[/section-item]

[/section]

[sp-demo-doc] Rows Layout – choose the size of the rows inside the section. The background size will not be affected here:

Full
Standart
Full Height
Full Width

Horizontal alignment – content horizontal alignment:

Left
Center
Right

Vertical alignment – content vertical alignment:

Top
Middle
Bottom

Force Top – Force this ShortPoint to move all the way to the top of the page. It will cover the header by default. Make sure to enable this option only if this ShortPoint is the first in the page. And activate only one

Transparent Header – do not cover SharePoint header

Height – row height in pixels or persentage

Force full screen width – Force this ShortPoint to fit the whole browser width. Page left or right columns will be covered. This option works better when force responsivefeature is enabled. Enable it from ShortPoint Dashboard - Change The Look page. Enabling this option will disable horizontal scrolling on the page
Force full page width – Enabling this option will force the width of this ShortPoint to page same as page width. Page left or right columns will be covered. Enabling this option will not disable horizontal scrolling and will respect the page minimum width. We recommend using Force Full screen along with force responsive feature enabled in ShortPoint Dashboard
Image – add the url for the image that you would like to use as background
Enable advanced image settings – if you dont like how image fit the row, you can activate advanced setting
Image Size – pre-defined image sizes:

Actual Size – will show the exact image size without any resizing, while maintaining the image aspect ratio (useful if you want to show the exact dimentions of the image)
Cover – will resize the image to fill the whole container from all edges, while maintaining the image aspect ratio (useful if you want to apply a background to the whole container, and you are fine with having parts of the image being cropped)
Contain – will resize the image to make the whole image fill the container, while maintaining the image aspect ratio (useful if you want the whole image to be shown without any cropping)
Custom – will enable you to set your desired values of height and width

Image Horizontal Position

Left
Center
Right

Image Vertical Position

Top
Center
Bottom

Image Repeat

Repeat
Don't Repeat
Repeat Horizontally
Repeat Vertically

Video – add the url for the video that you would like to use as background
Color – this color will be used as background. All ShortPoint Colors are supported
Color Transparency – by default the color will not be transparent, value is 1 and it It will cover the image
Blur Effect – when supported, make the image or video blurry

None
Light
Medium
Strong

Enable spacing between columns – how much space you want to add between columns

Padding – adjust the inner spacing for ShortPoint content. By default values are in px, you can add %

Keep custom padding on mobile – in most cases, we do not need to apply or change padding on small screens

Margin – adjust the outer spacing between ShortPoint and other content in the page. By default values are in px, you can add %

Keep custom margin on mobile – in most cases, we do not need to apply or change margin on small screens

[/sp-demo-doc]

Section ShortPoint // <![CDATA[ _spBodyOnLoadFunctionNames.push("setupPageDescriptionCallout"); // ]]>

SECTION IS THE BIGGEST CONTAINER

Define your layout by adding rows and columns into the section

Section Pre-defined Layouts

Not Just Layout Options, but tons of settings and features

Settings Tab

Background Tab

Section Examples and Demos

Example 1

Section ShortPoint

The Flexibity of Creative Layouts

The standard Lorem Ipsum passage, used since the 1500s

The standard Lorem Ipsum passage, used since the 1500s

The standard Lorem Ipsum passage, used since the 1500s

The standard Lorem Ipsum passage, used since the 1500s

Section ShortPoint

The Flexibity of Creative Layouts

Example 2: Split Screen

Section Documentation

SECTION SHORTPOINT

The Flexibity of Creative Layouts

Its Awesome and Great

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Its Awesome and Great

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Section Documentation

SECTION SHORTPOINT

The Flexibity of Creative Layouts

Example 3: Big Call To Action

Creative Full Width Call to Action

This section is full width, so it will cover the whole page from right to left. It has a ShortPoint button and nice background.

Example 4: Combination

SHORTCUTS

DOCUMENTS

Section Options Documentation

Understanding Layouts

Section Layout: Full

Section Layout: Standard

Section Layout: Full Height

Section Layout: Full Width

Content Alignments

Default Alignment + Section Height 30%

Horizontal Alignment: Right

Horizontal Alignment: Center + Vertical Alignment: Middle + Section Height: 30%

Horizontal Alignment: Right + Vertical Alignment: Bottom + Section Height: 30%

Section ShortPoint