Section
Sections can be configured by:
- setting a background: None (default), Neutral, Soft, Strong
- setting a section template: OneColumnFullWidth (default), TwoColumn, ThreeColumn, TwoColumnRight, TwoColumnLeft, OneColumnVerticalSection, TwoColumnVerticalSection, ThreeColumnVerticalSection, TwoColumnLeftVerticalSection, TwoColumnRightVerticalSection
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<Site Url="{url}" Title="{title}" OwnerLogin="{siteowner}" Template="STS#3" LCID="1033" StorageQuota="1024" TimeZoneId="4">
<RootWeb Title="{title}" Url="{url}" Description="{description}" LCID="1033">
<Properties>
<Property Name="WebTemplate">ModernSite</Property>
<Property Name="WebTemplateVersion">1.0.0.0</Property>
</Properties>
<ClientSidePages>
<ClientSidePage Name="ModernPage1.aspx" HeaderAuthor="megan.bowen@contoso.onmicrosoft.com" HeaderImageUrl="/sites/ModernPage/SiteAssets/sample-image.jpg" Promoted="PromoteOnPublish" >
</ClientSidePage>
<ClientSidePage Name="ModernPage2.aspx" HeaderAuthor="megan.bowen@contoso.onmicrosoft.com" HeaderImageUrl="/sites/ModernPage/SiteAssets/sample-image.jpg" Promoted="NotPromoted" >
<Sections>
<Section SectionBackgroundColor="None" SectionTemplate="OneColumnFullWidth"></Section>
<Section SectionBackgroundColor="Neutral" SectionTemplate="TwoColumn"></Section>
<Section SectionBackgroundColor="Strong" SectionTemplate="TwoColumnRight">
<TextWebpart Id="92e71a13-3a59-4091-af05-df6894518383" Column="1" Order ="1">Lorem Ipsum</TextWebpart>
</Section>
</Sections>
</ClientSidePage>
</ClientSidePages>
</RootWeb>
</Site>
|
Vertical Section
Columns are vertical groupings of webparts within a section. Webparts are designated to a column by setting the Column attribute on the webpart element, the vertical order of the webpart is set through the Order attribute, the Layout attribute can either be 1 or 2 where 2 is the vertical section. There can be only one vertical section per page and it has only 1 column:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<ClientSidePage Name="modernPageSample.aspx">
<Sections>
<Section SectionTemplate="OneColumnVerticalSection">
<TextWebpart Column="1" Order="1">
This will be the top left webpart
</TextWebpart>
<TextWebpart Column="1" Order="2">
This will be the bottom left webpart
</TextWebpart>
<TextWebpart Column="1" Order="1" Layout="2">
This will be the bottom right webpart
</TextWebpart>
</Section>
</Sections>
</ClientSidePage>
|