Creating a Section

At the heart of the Sections concept is the Section Break, a special Control element that marks where a section begins, where it ends, and what elements should belong to it. Here's how it's used:

  1. Click Add Element

  2. Click Control to create a new Control element.

  3. Set Type to Section Break.

  4. Give it a short, descriptive Name composed of only lowercase letters, numbers, and hyphens (eg. work). This will uniquely identify the section and allow you to link to it (see below).

  5. Drag the section break to where you'd like to divide the site, release click to drop it, and ... that's it. While the effects won't be apparent in the builder, here's what happens to the published version of the site:

    • Creates a new section with the name you just set (eg. work) that contains all elements after the section break (up to either another section break, a footer marker, or the bottom of the site).
    • Assigns all elements before the section break (up to either another section break, a header marker, or the top of the site) to the previous section.
    • ... and if no previous section exists, automatically creates one by the name of home.

  6. Link to the section with a button, a link, or pretty much anything else that takes a URL using a hash # followed by the section's name (eg. #work).

  7. (Optional) Select the site's Page element, click the Animation tab, then select an On Section Change effect to use when the site changes sections.

  8. You're done! Clicking a link to the section will now immediately open it and reveal its contents (and do so using a section change effect if one was selected), and each section can be deep-linked by simply appending its hash-prefixed name to the site's URL (eg. foo.carrd.co/#work). You can also link to the following special URLs to navigate between your sections:

    section:nextOpen the next section.
    section:previousOpen the previous section.
    section:firstOpen the first section.
    section:lastOpen the last section.

... and that's all there is to it! Simply repeat the process to create more sections, or optionally take the concept a step further and add a header and footer.