Skip to content

Layouts

Layouts in Experience Builder are essential for defining a common structure for multiple pages, ensuring consistency in look and feel across the website. They act as templates, reusable by multiple pages, and define common elements like headers, footers, CSS, and JavaScript.

Example Layout Resource: main.layout

<!doctype html>
<html lang="en-us">
<head>
    <title>{{ page.title }}</title>
    {% rendersnippet 'meta-tags.snippet' %}
    {% renderinline header %}
</head>
<body>
    <main id="MainContent">
        {% renderbody %}
    </main>
    <footer>
        {% renderinline footer %}
    </footer>
    {% renderinline scripts %}
</body>
</html>

In this example: - The layout includes the head section with meta tags and stylesheets. - The body contains the main content area, which will be dynamically rendered by the page that uses this layout. - Inline sections for footer and scripts are included for additional customization.

Area-Specific Content

All liquid resources can use the inlinesection feature to strategically inject content into specific areas during the render process.

Example: sample-component.component In this example we will use the inline header definition from the liquid layout page in the previous example to place global.css into he <head></head> tag of the HTML document. 

{% inlinesection header %}
  {% asset "global.css" %}
{% endinlinesection %}

<div>  
  Welcome to Experience Builder
</div>
Output

<!doctype html>
<html lang="en-us">
<head>
    <title>{{ page.title }}</title>
    <link href="/assets/en/us/global.css" />
</head>
<body>
    <main id="MainContent">
        <div>
            Welcome to Experience Builder
        </div>
    </main>
    <footer>
    </footer>
</body>
</html>

Best Practices

  1. Consistent Naming: Use consistent and descriptive names for layout files.
  2. Reusable Components: Extract common elements into includes or components to maintain a DRY (Don't Repeat Yourself) approach.
  3. Inline Section Usage: Use inline sections effectively to customize specific parts of the layout for different pages.
  4. Asset Management: Manage CSS and JavaScript centrally in the layout to ensure uniformity across pages.