Layouts

Layouts are a specific kind of page. They are very useful in the back-office (Locomotive UI) when you want your users to create new pages from a layout other than one used for the parent page.

Create a layout

By convention, layouts are located under the app/views/pages/layouts folder.

+- app/views/pages/
    +- index.liquid
    +- layouts/
        +- default.liquid
        +- simple_column.liquid
        +- double_columns.liquid

📘

You can also apply page inheritance with layouts.

In other words, a layout can inherit from another layout.

---
title: Double columns
---
{% extends layouts/default %}
{% block main %}
  <div class="left-column">
     {% block left_column %}
        {% editable_text content %}Lorem ipsum{% endeditable_text %}
     {% endblock %}
  </div>
  <div class="right-column">
     {% block right_column %}
        {% editable_text content %}Lorem ipsum{% endeditable_text %}    
     {% endblock %}
  </div>
{% endblock %}

In some situations, you may want a layout to be listed in the list of layouts in the back-office. Just put is_layout: true in the header of your layout content.

🚧

Layouts are not listed as pages in the back-office

However they can be chosen when creating a new page in the backoffice:

Use layouts

There is not much to do, simply pass the path of the layout to the extends liquid tag.

---
title: My awesome page
editable_elements:
  "main/left_column/content": "<p>This is my awesome left column</p>"
  "main/right_column/content": "<p>This is my awesome right column</p>"  
---
{% extends layouts/double_columns %}

If you write liquid code below the extends statement and the end-user changes the layout of that page in the back-office, your code will be erased.

If you don't want users to change the layout of a page, insert allow_layout: false in your page header.