We offer three ways to display a section which should cover all the different cases.
If you want to add a section that holds its content all over your site, you will have to use the global_section Liquid tag. Usually, global sections are called from a layout page that other pages will inherit from. This is useful for header, footer and nav sections for instance.
The content of the section will be shared across pages. In other words, updating the content of a global section in any page will also be applied to all the pages referencing that section.
By default, in the editor UI, global sections will appear before the section dropzone.
If you want your section to be at the bottom of the list of sections, you'll have to precise the placement option. This option takes 2 values: top and bottom.
Example:
{% global_section nav, placement: 'top' %}
{% sections_dropzone %}
{% global_section my_awesome_footer, placement: 'bottom' %}Quick reminder about the placement attribute
It controls the display of the section in editor UI (i.e.: the "back-office").
Defining content in Wagon
The content comes from the global_content property in your section definition. global_content is an alias for the default property.
Sometimes, because of how the design of the site has been thought, it doesn't really make sense to let the users add or remove sections.
That's why we provide the section Liquid tag.
Example:
<div class="left-column">
{% section photo_gallery %}
</div>
<div class="right-column">
{% section text_image %}
{% section form %}
</div>You can call multiple times the same section in a page
Just simply pass an unique identifier to the section tag. Ex.: {% section gallery, id: 'another_gallery' %}
Defining content in Wagon
In the YAML part of your page, just add the sections_content property. This property stores the content of your standalone sections in a JSON object. The keys are the ids of your sections.
sections_content
fancy
settings
greeting_wordSalutation
avatar"/samples/avatar/gentleman"
blocks
typeperson
settings
namesirsections_content
{
"fancy": {
"settings": {
"greeting_word": "Salutation",
"avatar": "/samples/avatar/gentleman"
},
"blocks": [
{
"type": "person",
"settings" {
"name": "sir"
}
}
]
}
}Here lies the true power of sections!
To let your users add, remove, update and re-order sections in a page, just add the sections_dropzone Liquid tag in the template of your page.
In the editor UI, this will display a widget allowing your users to easily manage the sections.
Only sections which own a presets attribute will be available within the sections_dropzone
dropzone_presets is an alias for presets.
<div class="page-sections">
{% sections_dropzone %}
</div>Defining content in Wagon
If there is no sections_dropzone_content property in your YAML header, no sections will be displayed within your sections_dropzone Liquid tag.
The sections_dropzone_content YAML attribute is a JSON array of objects. Each object owns 3 attributes: type, settings and blocks.
---
sections_dropzone_content
typesimple_slider
settings
blocks
typeslide
settings
titleA brand new way to excite <br>your audience
descriptionWho can visualize the sorrow and mineral
imageslide1.png
typeslide
settings
titleA meaningless form of vision is the uniqueness!
imageslide2.png
typeour_work
settings
titleOur projects
descriptionPlay with colors, animations and content.
blocks
typelist_item
settings
title'Item #1'
image"/samples/products/grid-1.jpg"
typelist_item
settings
title'Item #2'
image"/samples/products/grid-2.jpg"
---
sections_dropzone_content
[
{
"type": "simple_slider",
"settings": {},
"blocks": [
{
"type": "slide",
"settings": {
"title": "A brand new way to excite <br>your audience",
"description": "Who can visualize the sorrow and mineral",
"image": "slide1.png"
}
},
{
"type": "slide",
"settings": {
"title": "A meaningless form of vision is the uniqueness!",
"image": "slide2.png"
}
}
]
},
{
"type": "our_work",
"settings": {
"title": "Our projects",
"description": "Play with colors, animations and content."
},
"blocks": [
{
"type": "list_item",
"settings": {
"title": "Item #1",
"image": "/samples/products/grid-1.jpg"
}
},
{
"type": "list_item",
"settings": {
"title": "Item #2",
"image": "/samples/products/grid-2.jpg"
}
}
]
}
]
---Depending on which Liquid tag you use to display your sections, LocomotiveCMS will use different strategies to wrap them.
In case of the section dropzone tag, it will wrap your sections in a DIV with the locomotive-sections class name. Then, each section will be wrapped inside a DIV tag with the locomotive-section class name, along with an internal id and data attributes like data-locomotive-section-type for instance.
You can also provide additional classes to the top div of each section by setting the class property in the section JSON definition.
Regarding the standalone and global section tags, the HTML output of a section will be wrapped within a DIV tag too. The id of the DIV will be the name of the section (or its id). In this case as well, you will still be able use the class property from the JSON definition.
Updated 6 months ago