About Layouts

A layout defines how content is arranged on a site page. Different layouts can contain a different number of named slots. A slot is a region that spans the width of the page and can contain one or more types of content.

Every theme has several page layouts. See About Themes.

When you add a page to a site, you select a layout to use for that page. Each layout has areas on the page—known as slots—where you can drag and drop content. What content goes into these slots is completely up to you. It can be anything from titles, text, and dividers to multimedia, galleries, and social media.

A layout contains valid HTML constructs as well as special markup understood by the Oracle Content Management renderer. A layout must begin with a DOCTYPE statement in order to configure the browser to render the page in a standards-compliant mode; for example: <!DOCTYPE html> This statement is required by certain components to achieve best results.

This sample code shows a minimal layout:

1  <!DOCTYPE html>
3  <head>
4          <meta http-equiv="X-UA-Compatible" content="IE=edge">
5
6          <script src="/_themes/[!--$SCS_THEME_NAME--]/assets/js/topnav.js"></script>
7          <link rel="stylesheet" type="text/css"
8                 href="/_themes/[!--$SCS_THEME_NAME--]/assets/css/main.css">
9          <link rel="stylesheet" type="text/css"
10                href="/_themes/[!--$SCS_THEME_NAME--]/designs/[!--$SCS_DESIGN_NAME--]/design.css">
11
12         <!--$SCS_RENDER_INFO-->
13         <!--$SCS_SITE_HEADER-->
13         <!--$SCS_PAGE_HEADER-->
14  </head>
15  <body>
16         <div id="topNavigation"></div>
17         <div id="mainContentSlot" class="scs-slot scs-responsive"></div>
18
19         <script data-main="/_sitescloud/renderer/renderer.js"
20                src="/_sitescloud/renderer/require.js"></script>
21         <!--$SCS_SITE_FOOTER-->
22  </body>
23  </html>

Various tokens are expanded when a page is rendered in the browser.

[!--$SCS_THEME_NAME--]

This expands to the name of the theme currently chosen for the site. Using this token allows the theme to be copied, because URLs that use this token will reference the current theme.
[!--$SCS_DESIGN_NAME--]

This expands to the name of the design currently chosen for the site. This allows the layout to be used by multiple designs within the theme.
[!--$SCS_RENDER_INFO--]

This expands to a script tag that holds the page hierarchy and component rendering information for the page. This should be placed in the <head> section of the layout.
[!--$SCS_SITE_HEADER--]

This expands to the site header value that is specified in the Header field in the Search Engine Optimization (SEO) properties. Site-wide markup that you want placed on all pages can be entered here. See Set Search Engine Properties.
[!--$SCS_PAGE_HEADER--]

This expands to the page header value that is found in the Page Header field in the Page Settings properties in Site Builder. Page-specific markup that you want placed for this page can be entered here.
[!--$SCS_SITE_FOOTER--]

This expands to the site footer value that is found in the Footer field in the Search Engine Optimization (SEO) properties. Site-wide markup that you want placed on all pages can be entered here. See Set Search Engine Properties.

Note:

The tokens can also use the  suffix as delimiters in place of [!--$ and --].

When a site is online, the following tokens in the link are replaced with real values that are aware of the context in which they are being used. This enables the link to function when a site is being edited and in the published site when it is online.

/_sitescloud/ is replaced with /_sitesclouddelivery/
/_themes/ is replaced with /_themesdelivery/

Slots are DIV elements in the layout that have the value "scs-slot" in the class attribute. A slot is where users can add components to fill in the site content. Multiple DIV elements can be designated as slots by assigning the "scs-slot" class attribute. Each slot must have a unique id attribute.

Note:

Slots can’t be nested, but you can give the suggestion they are by using CSS to overlay them. If you want to do this, use a component group or section layout. See Create a Section Layout.

Slots that additionally have a class attribute value of "scs-responsive" will refresh their content as the browser viewport changes resolution. This allows slots to render responsively for a large desktop display or a small mobile device.

The final <script> tag (line 19 in the example) loads the Oracle Content Management rendering code. This code is responsible for drawing the components on the page, and it also allows custom code to access the Render API. Without this <script> tag, pages based on the layout can’t be changed by Site Builder.