Understanding Sections and Articles in Composer 2

In Composer 2, website pages are built using Sections and Articles — the foundational layout components of the platform.
Sections act as horizontal containers, while Articles are the individual content blocks inside those sections.

This modular structure allows for flexible, customisable, and easily maintained page designs.

✨ Key Features

🧱 Page Structure

• Flexible design using Sections and Articles

• A Section is a horizontal row that holds one or more Articles

• Sections and Articles are fully independent in both layout and styling

🎨 Section Features

Each Section supports the following options:

• Custom backgrounds — solid colour, image, gradient, video, or repeating pattern

• Visibility controls — hide or show per device (e.g. hide on mobile)

• Adjustable margins (space between sections) and padding (space inside section edges)

• Optional borders — top, bottom, left, right, with custom colour, thickness, and style

• Entry animations (optional visual effects on load)

🧾 Article Features

Each Article supports:

• Any type of content — text, images, buttons, widgets, etc.

• Full font styling — size, family, weight, case, and colour

• Staggered layout options for dynamic alignment (requires 3+ articles)

Content-level overrides available:

• Override global design settings at the section level

• Fully customise layout appearance for each section or article

⚙️ How to Use Sections and Articles

1️⃣ Go to Your Back Office

1. Navigate to Pages

2. Select the page you’d like to edit

2️⃣ Set Up Your Section

1. Click the Section gear icon ⚙️ to access options

2. In the Content tab:

   • Show or hide the section title

   • Add top or bottom text around the title

   • Toggle the section active/inactive (useful for future publishing)

3. In the Settings tab:

   • Set outer and inner width

   • Adjust margins (space between sections) and padding (space within section)

   • Choose a background:

     • 🎨 Colour (from palette or custom)

     • 🌈 Gradient (select direction and colours)

     • 🖼️ Image (with optional parallax and overlay)

     • 🎥 Video background

     • 🧩 Pattern (small repeated image)

   • Add borders and set animations on section load

   • Toggle visibility per device (e.g. hide on mobile)

3️⃣ Customise Section Design

In the Design / Appearance tab:

• Override global fonts, colours, and spacing

• Choose staggered layouts (left-to-right, centered offset, etc.)

4️⃣ 💾 Save Your Changes

• Click Insert Widget (if using one)

• Click Save to finalise your changes

Watch the Video Demo:

Video Transcript:

A standard website page is comprised of various different elements.

In our platform, we refer to these as sections and articles.

The horizontal row that you see is the section and the items inside are the articles.

So here we have one section, two different articles inside.

Below it I have one section with three articles inside, and the sections have different controls and they are completely independent.

The sections have controls that include being able to set an image as your background, a colour as a background, a gradient, or a video.

To edit this, please go to the back office and go to the Pages section.

Find the page you wish to edit, and then go to the section Options of your item.

The first tab controls the content, so whether titles appear or not. You can add in text above your title and you can also add in text below your title.

On this page you are also able to set whether this section is active or not.

This can be very useful in preparing content.

So you can prepare some content now, hide it, and then display it later on.

Or you can archive things so it's always available for you later on.

In the settings tab we can control various things.

These include the width and margins and paddings.

Website content has different widths.

We have an outer width and an inner width.

The outer width refers to the width that goes from the edge, of your screen to your menu or the edge of the screen.

The inner width is where your content appears.

So for example, from here to here is my inner width.

If for example I wanted the inner width to be full width, I can change it quite easily.

The next option we have are the margins and the padding.

The margin is the gap that will appear between each section.

And the padding is the gap that will appear between your content and the top or bottom, left or right of the section.

If I look at this page here, we can see we have a white gap that appears above my stand packages.

This part is the margin.

The gap between the edge of my background and my content is the padding.

So, for example, if I would like to add a little margin between these two sections, I can go into either the top or the bottom and add in relevant top or bottom margin.

So let's find that section.

I'm going to add in a little bit of margin at the top.

There we go.

So we have a gap between the two sections.

And just to illustrate, I'm going to take away the padding that appears at the top of the green section.

As you can see, this doesn't look great, so always please bear in mind your margins and your paddings and put the appropriate ones on when necessary.

Other settings will include what background you want.

You can set the colour, gradient, image, video or pattern.

If you choose colour, the colours from the colour palette will appear, or you can set the custom one.

If you choose gradient, you can choose which direction you would like the gradient to go in, left to right and top to bottom.

Once again the colours from your colour palette will appear, or you can select your own custom colours.

The other option is an image.

If you do add an image, you will also get the option to turn on the parallax view, and add an overlay.

To video, you also have an option for the overlay.

This allows you to add content over the top, and make it legible.

Final option is a pattern.

This is where we add a small picture that repeats itself.

So for example, at the top here I have a repeating pattern of leaves.

Other things you can do is add on borders.

So you can add a border to repeat at the top, bottom, left or right of your section.

You can choose the style of the border and the colour and thickness.

We can choose also if this animates.

So this means that when the section loads, it will animate.

If you also have animation on the articles, I would recommend not to have this on the section as well.

And finally, we have an option to hide this section on different screen sizes.

So, for example, you may potentially not want this section to appear on mobile views.

It could be content heavy, it could be a video or something.

If you tick the box here, it will hide this on your mobile.

Final tab is the content.

This is where you can overwrite the default settings, that are set up for you in the Design and Appearance.

For more instructions on how to change the default settings in the Design and Appearance,  please refer to that training video.

In the content, we can change everything in here.

So the font family, the sizes, the boldness, the colours, the uppercase, etcetera.

We can also choose to have staggered content.

Now normally content will appear in a straight line.

So if you add three boxes, three boxes will appear in a straight line.

We use the staggered option.

Our articles will appear staggered.

We have different options whether, they're going from left to right, right to left, centre offset top or centre offset bottom.

Please note this will only work if you have three or more articles or columns.

We have set up a sample page for you to view these different staggered options.

You also have set up a sample page for you to view how your sections and articles can look and examples of what they could look like.