Logo Table Of Contents

Made by WeaverPixel

Buy At Elements Store

Table of Contents – Smart CMS Content Navigation for Rapidweaver Elements

Give long articles a map – Every heading, one click away
Table of Contents builds a clickable outline for long pages in RapidWeaver Elements, made mainly for content coming from the Elements CMS. Blog posts, documentation, knowledge base articles – text where you don't want to create and update the anchor links by hand. It doesn't matter whether you are using the Markdown component or the Typography component, and manually written text works just as well. Give your text container an ID, enter the same ID in the Table of Contents component, and the outline builds itself from the headings it finds. Pick the levels you need, from H1 to H6, and style each one separately: font, size, weight, spacing, line height, indentation and a marker from fourteen symbols. One click takes your readers straight to the section they want, smooth scrolling has an offset for sticky headers, and the whole list can be folded away.

Just drop it next to your content, enter a container ID, and publish.

A Selected Example

Working with Rapidweaver Elements

RapidWeaver Elements is a website builder for macOS that combines a visual editor with a modern, component based workflow. Instead of editing templates by hand, you drag components onto a page, arrange them in containers, and control every detail from the Inspector. This guide walks through the parts of Elements you will use most often, from the first project you create to the moment your site goes live.

Getting Started

Everything in Elements begins with a project file. It holds your pages, your resources, your theme and your publishing settings in one place, which makes projects easy to back up and easy to move between machines.

Creating Your First Project

When you start Elements, you choose a blank project or one of the included templates. A blank project gives you full control from the first pixel, while a template gives you a finished layout that you can take apart and rebuild. Both are good ways to learn, but a template usually teaches faster, because you can see how experienced designers solved a problem.

Choosing a Starting Point

Templates in Elements are complete websites, not just colour schemes. Look through the pages, open the containers, and see how the structure is built before you change anything.

Setting Up Your Pages

Pages live in the sidebar and can be nested into folders. The order you see there is the order used for navigation components, so a little planning at the start saves rearranging later.

Adding Resources

Images, fonts, videos and documents belong in the Resources area. Files placed there are copied into your project, which keeps everything together when you move the project to another Mac.

Saving and Backups

Elements projects are packages, not single files. Time Machine handles them well, but a copy in a cloud folder is a sensible second line of defence before any large redesign.

Understanding the Interface

The window is split into the page list, the canvas in the middle, the library of components and the Inspector on the right. Almost everything you do involves selecting something on the canvas and then adjusting it in the Inspector.

Navigating the Library

The library holds every component available to you, grouped into categories such as Layout, Media, Animation and CMS. Third party packs appear in the same list, so a component you bought behaves exactly like a built in one.

Working with Components

Components are the building blocks of every page. Some produce visible content like text and images, others create structure, and a few do their work entirely in the background.

Text and Typography

The Typography component handles headings and body text with full control over font, size, weight and spacing. Because the settings come from your theme, changing a font once updates every page that uses it.

Images and Media

Images can be responsive, lazy loaded and served in modern formats without any manual work. Video components support both self hosted files and embedded services.

Layout Containers

Containers hold other components and control how they behave on different screen sizes. Grid and flex containers cover most layouts, and nesting them gives you the rest.

Forms and Interaction

Form components collect input and send it wherever you need it. Buttons, modals and accordions add interaction without a single line of code.

The Elements CMS

The built in CMS turns a static site into one that clients can update themselves, without giving them access to the project file.

Setting Up Content Types

A content type describes the fields your content has: a title, a body text, an image, a date. Once defined, every entry follows the same structure, which keeps long lists consistent.

Managing Entries

Entries are edited in a browser based admin area. Authors see only the fields you defined, so there is very little they can break.

Displaying CMS Content

CMS content is placed on the page with the Markdown or Typography components, and the layout around it stays entirely under your control.

Styling and Themes

Elements separates content from styling. Your theme defines colours, fonts, spacing and shadows, and components refer to those definitions instead of fixed values.

Theme Studio Basics

Theme Studio is where you define your design system. Change a brand colour there and every button, link and heading using that colour updates at once.

Colours and Dark Mode

Every colour in the theme can have a light and a dark variant. Visitors with dark mode enabled see the dark version automatically, with no extra work from you.

Spacing and Sizing

Spacing values come from a scale rather than from arbitrary numbers. This keeps rhythm consistent across a site and makes responsive adjustments predictable.

Custom CSS

For the rare case where a utility class is not enough, you can add your own CSS. It is a useful escape hatch, but the theme should stay your first choice.

Publishing Your Site

Publishing moves your finished pages from your Mac to your server. Elements uploads only what has changed, so updates are quick even for large sites.

Server Settings

Elements supports FTP, SFTP and several cloud services. Test the connection once, and publishing becomes a single click from then on.

Preview and Testing

The browser preview shows your site exactly as visitors will see it, including animations and scripts that the canvas cannot run. Test on a phone as well as on a desktop before you publish.

Going Live

Before the first publish, check your page titles, meta descriptions and favicon. These details are easy to forget and hard to notice once the site is online.

Tips and Best Practices

A few habits make working in Elements faster and keep projects maintainable over the years.

Reusable Prefabs

Any selection can be saved as a prefab and reused in other projects. Building a small library of your own prefabs pays for itself within a few sites.

Performance Tips

Large images are the most common cause of slow pages. Resize them before importing, and let Elements handle the rest.

Accessibility

Use headings in order, write meaningful alt text, and check that your colour contrast is high enough. Accessible sites are easier for everyone to use, and search engines reward them too.

Keeping Projects Organised

Name your pages and containers clearly, group related components, and remove what you no longer need. Six months from now, you will be glad you did.

Component Settings

Container ID: The ID of the container holding your text. Enter the same ID on the text container and here, and Table of Contents reads the headings from it. It works with the Markdown component, the Typography component, whether the text is written by hand or comes from the Elements CMS. We'd recommend keeping the ID simple – good examples are "cms-text" or "post-body". Use only letters, numbers and hyphens – no spaces or special characters.

From Level and To Level: Choose which headings end up in the list. From Level 2 to Level 3 covers most articles: main sections and their subsections, without the page title and without the smallest headings. Set both to the same value for a flat list with no nesting.

Minimum Headings: The list only appears once the text contains at least this many headings. Handy for CMS pages where the length varies – a short post with two headings doesn't need an outline, so the component hides itself instead of showing a stub.

Show Title: Turns the heading above the list on or off. Switch it off if your layout already has a heading for the sidebar, or if the list should sit on the page without a label.

Title: The text itself. "Table of Contents" is the default, but "On This Page", "Contents" or "In diesem Artikel" work just as well – it's a free text field, so it also handles other languages.

Font, Size, Weight, Spacing and Line Height: The full typography set, taken straight from your theme. Pick a font from your theme fonts, a size from your theme scale, and fine-tune weight, letter spacing and line height. Because everything refers to the theme, a change in Theme Studio updates the title on every page that uses the component.

Color: The title color, with separate values for light and dark mode.

Padding: Space around the title. Useful when the list sits in a card with a border and the heading needs a bit of air, or when you want to pull the title tighter to the list than the default.

Text Color: The color of the entries, with separate values for light and dark mode. Markers use the same color unless you set a custom one below.

Accent Color: The color an entry takes when the visitor hovers over it. A clear difference from the text color makes it obvious that the entries are clickable.

Indent: How far each level is pushed to the right, in pixels. 16 is a good starting point – enough to see the structure at a glance, not so much that deeper levels run out of room in a narrow sidebar. Set it to 0 for a flat look with no indentation.

Custom Marker Color: By default the markers take the text color. Switch this on and you get a separate color picker for them – useful if you want the bullets in your brand color while the text stays neutral.

Heading 1 to Heading 6: Every level has its own settings, and they are identical for all six – so what you read here applies to each of them. The levels you selected under From Level and To Level are marked in blue, so you can see at a glance which groups actually affect your page. Settings in the other groups are kept, they simply have no effect until you widen the level range. In the screenshot on the left, "Heading 1" has no effect, while "Heading 2" does..

Font, Size, Weight, Spacing and Line Height: The same typography set as for the title, taken from your theme. Giving upper levels a larger size or a heavier weight than the ones below is the quickest way to make the structure readable.
Item Spacing: The gap between entries of the same level, in pixels.

Space After: The gap after the last entry of a group, before the next entry of a higher level starts. This is what separates the blocks visually – a small Item Spacing with a larger Space After keeps related entries together and sets the sections apart.

Marker: The symbol in front of each entry. Fourteen options, from a small bullet through circles, squares, arrows and chevrons to stars and check marks – or None if you prefer a plain list. Geometric markers are drawn at a uniform size, so a circle and a square in the same list look equally large.

Smooth Scroll: Instead of jumping to a section, the page glides there. Switch it off if you prefer the instant jump.

Scroll Offset: Distance in pixels kept above a section when jumping to it. Set this to the height of your sticky header, otherwise the header covers the heading the visitor just clicked on.

Collapsible: Adds a toggle to the title bar so visitors can fold the list of headings away.

Collapse On: Where the toggle applies – all screens, small screens only, or small and medium screens. On the sizes you leave out, the toggle disappears and the list is always open. That way you can keep the full outline in a desktop sidebar and still have a compact version on the phone.

Start Collapsed: Whether the list is already folded when the page loads, with the same three ranges plus Never. It is set independently from Collapse On, so a common setup is a list that folds on every screen but only starts collapsed below 768px.

Icon Color: The color of the toggle, again with separate values for light and dark mode.

Logo Table Of Contents

Table of Contents – Smart CMS Content Navigation for RapidWeaver Elements

Help Needed

Rapidweaver Forum Stacks4All Forum

Useful Links

Rapidweaver Elements Rapidweaver Classic

Legal Pages

Privacy Policy Imprint

© 2026

•

Mail To WeaverPixel