Skip to content
Change language EN
  1. WebAcappella Tempo help
  2. The editor
  3. Sections, separators and seams

Sections, separators and seams

How the Separator cuts the page into sections, what happens to components when you place it, move it or delete it, and how the seam draws the boundary between two sections. With diagrams.

A page is built from three parts: sections, components placed inside them, and separators that mark the boundary between two sections. The seam draws that boundary: a straight edge, or a wave, a curve… This page explains each part with a diagram.

Sections, components and separators

Diagram of a page with three sections, light, dark then beige, numbered 1 to 4: a section, a component, a separator and the purple bar of the section being hovered over.
  1. The section is a horizontal band running right across the page. It is what carries the background: light, dark, gradient, image or video.
  2. The component is a block of content (heading, text, photos, form…) placed in a section. It has no background of its own: it takes that of its section, and on a dark background its text turns light all by itself.
  3. The separator is the boundary between two sections. Everything below a separator, up to the next one, belongs to the same section.
  4. The section bar appears at the top left when you hover over a section: Section background (the swatch shows the current background), Top seam, Move this section and Delete the separator.

Cutting a section in two: the Separator

  1. Click Separator, the purple button on the toolbar.
    The editor toolbar: the purple Separator button, next to the orange Component button.
  2. Purple lines appear between the components, with a last one right at the bottom of the page: these are the places where the boundary can go. Click one of them. Esc cancels.
  3. A new section begins at that spot. The component just below the line, and all those that follow it in the same section, move into it.
Before: a light section with three components, and a click on the purple line placed between the first and the second. After: two sections separated by the purple boundary, the first component above, the other two below.

The new section starts with a Light background, margins of 80 pixels at the top and bottom, and no seam. So if the section you cut was already light, nothing changes on screen, which is normal: open Section background in the new section's bar to give it a background of its own. The line right at the bottom of the page adds an empty section, ready to receive components.

Deleting or moving a separator

The bin on the bar, Delete the separator, deletes no content. It removes the boundary: the section's components join the section above and take on its background. The background and seam of the deleted section disappear with it.

Before: a light section with one component, then a dark section with two components, with its bin circled. After: a single light section with all three components, all now light.

The arrows on the bar, Move this section, move the boundary, not the content. The purple lines reappear: click where the section should now begin. The background and seam stay attached to the separator. The components themselves do not move, but any that end up on the other side of the boundary change section, and therefore background.

Before: a light section with two components, the second carrying an orange image, then a dark section. A purple arrow runs from the dark section's Move button to the line placed between the two light components. After: the boundary has moved up and the component with the orange image is in the dark section.

Moving a component to another section

To move a single component, hover over it, click Move this component in its small orange bar, then click the spot you want, in any section. Once in its new section, it takes on that section's background: its dark text on a light background becomes light text on a dark background, with no setting to change on your part.

Before: the component with the orange image is in the light section, and an orange arrow takes it right to the bottom of the dark section. After: it is in the dark section and its text has turned light.

A component is always wholly within a single section, never straddling two. A section from which you have removed every component stays in place with the Empty section badge: place a component back in it, or delete its separator.

The seam: the shape of the boundary

By default, two sections meet along a straight edge. The seam replaces that edge with a shape: a wave, a curve, mountains… It is always set on the section below, using its Top seam button: it is the top edge of that section that it draws.

A dark section above a light section. Below the purple boundary, a wave in the colour of the dark section runs down into the light section. In the light section's purple bar, the Top seam button is circled: its small image shows the same wave.
  1. The Top seam button, in the bar of the section below. Its small image shows the chosen shape; a crossed-out circle means "no seam".
  2. The shape, painted in the colour of the section above: that colour seems to flow down into the section below.

The button opens the Seam (separator) panel. It offers the straight edge (the crossed-out circle) and eleven shapes: click one and the page changes at once, there is nothing to confirm.

The panel's twelve choices, numbered 1 to 12, each shown between a dark section and a light section. Shapes 2, 3, 5, 10 and 11 have additional lighter, semi-transparent layers.

In order: 1 straight edge, 2 wave, 3 soft wave, 4 diagonal, 5 curve, 6 asymmetric curve, 7 triangle, 8 asymmetric triangle, 9 zigzag, 10 mountains, 11 clouds, 12 drops.

Overlap: where the shape is drawn

The shape has a height. The Overlap setting says where to place it in relation to the boundary. In the diagrams that follow, the purple line marks the boundary, and the hatching marks the sections' margins: the free space each section keeps above and below its content.

Overlap "none" (the default setting)

The shape takes up its own space, at the top of the section below: the page grows taller by the height of the shape, and nothing is covered. This is the safest choice.

The dark wave occupies a band added just below the boundary; the margin and component of the light section have moved down by the same amount.

Overlap "below"

The shape moves down into the section below, into its top margin. The page does not grow taller, and the background from above seems to flow down into the section.

The dark wave runs down below the boundary, into the hatched margin of the light section, without touching its component.

Overlap "above"

The shape moves up into the section above, over its bottom margin, with the background of the section below: it is the lower section that seems to spill upward.

A light wave rises above the boundary, into the hatched margin of the dark section, without touching its component.

Overlap "centre"

The shape sits astride the boundary, half in each section.

The wave is cut in two by the boundary: one half in the margin of the dark section, the other in that of the light section.

When the shape hides a component

With above, and for its upper half with center, the shape rises over the bottom of the section above. As long as it fits within the margin, all is well. If it is taller than the margin, it hides the bottom of the component. With below, the component sits on top of the shape, but if it touches the shape, its text is harder to read.

On the left, red cross: the light wave rises higher than the small hatched margin of the dark section and hides the bottom of its component. On the right, green check mark: the same wave, with an enlarged margin, no longer touches the component.
  • Enlarge the margin: in Section background, under Margins, the Top field of the section below for overlap below, the Bottom field of the section above for overlap above, both for centre.
  • Reduce the height of the seam.
  • Switch the overlap to "none": the shape then takes up its own space and no longer covers anything.

Layers, height, width and mirror

Layers: the wave, the soft wave, the curve, the mountains and the clouds are made up of several layers: a solid shape at the front, and behind it one or two shapes in the same colour, semi-transparent. The Layers setting chooses how many to keep, starting from the front one: 1 gives a simple, crisp shape, the maximum (3 for the wave, 2 for the others) gives depth. It only appears for these five shapes, and choosing another shape restores all of its layers.

The same wave with one, two then three layers, numbered 1 to 3: each added layer draws a lighter, semi-transparent wave beneath the previous ones.

Height: the height of the shape, in pixels (60 by default, up to 200). On a mobile, it shrinks all by itself, down to half.

The same wave, low then tall.

Width %: at 100%, the pattern fits exactly within the width of the page. Beyond that (up to 300%), it stretches: the waves lengthen and only the central part of the pattern remains visible.

The same wave at 100% then at 200%: stretched, it becomes gentler.

Horizontal mirror: flips the shape from left to right. Handy with asymmetric shapes, to alternate the direction from one section to the next.

An asymmetric curve, then the same one flipped from left to right.

Why my seam isn't showing

The shape draws the boundary between the background of one section and that of the other. If both sections have the same background, it is indeed there, but invisible. The panel warns you: "Invisible seam: this section and the previous one have the same background." Give one of the two sections a different background.

On the left, two light sections: the wave, drawn here as a dotted line, cannot be seen. On the right, the section above is dark: the wave appears.

A wave beneath the header

The header has no Top seam button: there is no section above it. To draw a wave beneath the header, set the seam of the first section on the page, with the below overlap: the shape takes on the color of the header and falls into the page. If the header stays visible while scrolling, above is grayed out: the header would cover the shape.

A dark header, then the first section on the page, light. A wave in the colour of the header runs down into that section. In the first section's bar, the Top seam button is circled.

The same logic applies at the bottom of the page: the footer's seam is set on the footer, and takes on the background of the last section of each page. As that background changes from one page to another, the footer editor replaces it with a checkered band, "End of page".

Setting a section's background →