RapidWeaver Elements (also called Elements) is designed for all skill levels. Whether you’re a beginner looking for simplicity or an experienced web developer who needs advanced customisation, Elements balances ease of use with powerful features.

RapidWeaver Elements includes everything you need to create a beautiful, modern website, with regular improvements shaped by our community.

New to Elements?

If you’re new to Elements, the Quickstart Guide will help you build your first website.

What is RapidWeaver Elements?

Elements is a no‑code website builder for macOS that generates fast, modern, standards‑based sites.

Behind the scenes, Elements is powered by Tailwind CSS and AlpineJS, giving you a rock‑solid, modern foundation without requiring you to write code. The app builds a custom, minimal CSS bundle for each project in real time, so your sites stay lean and performant.

Elements works great for:

• Personal and portfolio sites

• Small business and client sites

• Blogs and content‑heavy sites using the built‑in CMS

• Long‑form content, digital gardens, and knowledge bases

• Landing pages and marketing sites

If you want more detail on how Elements is structured under the hood, see Core Concepts.

Get help

You’re not on your own when using Elements. A friendly community and dedicated support team are here to help.

• Browse common questions in the FAQ.

• Follow the Support Guide for tips on reporting issues and getting them resolved quickly.

• Join the Elements Community Forum to ask questions, share projects, and learn from other users.

• Watch behind‑the‑scenes development in the regular Web Dev Talk series and other videos listed below.

Get more from Elements

Explore our collection of useful resources to help you build even better websites with Elements.

QuickStart Guide

This is the fastest way to get started building your new website with Elements for macOS.

Community

Ask questions and learn more about building websites from our vibrant Elements community. See you there!

YouTube

Watch our regular YouTube videos to learn more about using Elements, and the latest releases.

Video Tutorials

Learn how to build websites with our growing collection of video tutorials for Elements.

Elements CMS

The Elements CMS is a simple, flexible, and fast way to manage your website content using plain Markdown files.

API Reference

The Elements API is a powerful templating language allowing everyone to build exciting new components.

The demo mode in Elements lets you explore the full app and build up to three pages, giving you a feel for the design workflow and features. While export and publishing are disabled in the trial, everything else is fully functional, so you can see exactly how Elements works before committing.

Download Elements

When the download is complete double-click to unzip the file, then move Elements.app to your Applications Folder.

System Requirements

In order to run Elements you will need to meet the minimum requirements:

• Requires macOS 13 Ventura or newer.

• Apple Silicon or Intel based Mac.

Elements is built to work on all modern macs, so long as they meet the minimum requirements you'll be good to go.

Trial Mode Limitations

The trial mode in Elements has the following limitations:

• No publishing: You can’t upload or publish sites in trial mode.

• No export: Exporting project files is disabled.

• Maximum of 3 pages: You can only add up to three pages per project.

Got Questions?

Should you have any questions about installation or registration you can post on the Elements Support Forum and someone from the team will get right back to you.

To control the timing and easing when scrolling to an anchor, use the Smooth Scroll JavaScript library.

To add Smooth Scroll to your project, place the following code in your project's Template, immediately before the closing </head> tag.

  <!-- Load the Smooth Scroll library -->
  <script src="https://cdn.jsdelivr.net/gh/cferdinandi/smooth-scroll@15/dist/smooth-scroll.polyfills.min.js"></script>

  <!-- Initialize Smooth Scroll -->
  <script>
    document.addEventListener('DOMContentLoaded', function () {
      var scroll = new SmoothScroll('a[href*="#"]', {
        speed: 1000
      });
    });
  </script>

Note the speed option in the docs say this:

[speed] is a number representing the amount of time in milliseconds that it should take to scroll 1000px. Scroll distances shorter than that will take less time, and scroll distances longer than that will take more time. The default is 300ms.

If you need/want your Anchor link to stop (or leave some space) before a Component on the page you can use the Scroll Padding Tailwind Utility class.

Place the following class scroll-mt-[300px] in the CSS Classes box under Advanced on the Component you're scrolling too. This class will set a offset of 300px, but you can change it to the pixel value you require.

To reset Elements, remove the preferences file by following these steps.

A digital garden is a personal online space where you cultivate and organise your thoughts, ideas and knowledge over time. Unlike a traditional blog, a digital garden is dynamic and non-linear, allowing its content to grow continuously. It gives you space to explore interlinked topics, make connections and develop ideas organically, away from the constraints of typical social media platforms.

RapidWeaver Elements is the perfect tool to build your own Digital Garden.

Articles on Digital Gardening

A Brief History & Ethos of the Digital Garden

Gardening is about claiming a small patch of the web for yourself, one you fully own and control.

This patch should not live on the servers of Facebook, LinkedIn, Twitter, Instagram (aka. also Facebook), or Medium. None of these platforms are designed to help you slowly build and weave personal knowledge. Most of them actively fight against it.

If any of those services go under, your writing and creations sink with it (crazier things have happened in the span of humanity). None of them have an easy export button. And they certainly won't hand you your data in a transferable format.

Read the full article over on maggieappleton.com

Digital Homeownership

You deserve a home on the World Wide Web that’s built to keep you safe; a magical place for virtual living that‘s yours for life, existing in a sociable web. Read the full article over on Muni Blog.

Chris Biscardi's Digital Garden

Chris Biscardi describes his site as a digital garden where some posts are sketches or works in progress while others are complete. Explore the garden on christopherbiscardi.com.

Whether you’re coming from Stacks, Blocs or WordPress, Elements combines the flexibility of code with the simplicity of visual editing. These comparisons explain what to expect, how to recreate common setups and where the Elements workflow differs.

From familiar layout patterns to modern web standards, you’ll find cleaner ways to build with fewer dependencies.

Choose a comparison below to get started.

Templates and Globals both help you reuse groups of components, but they solve different problems.

Templates

Templates are reusable starting points. After adding one to a page, its components become an independent layout that can be changed without affecting the original Template or other copies.

Globals

Globals remain linked wherever they are used. Update the Global once to keep shared structures and content consistent throughout the project.

Recommended Workflow

1. Build and test the component layout on a page.

2. Decide whether future copies should remain linked.

3. Save independent starting points as Templates.

4. Save site-wide or repeatedly maintained content as Globals.

5. Preview changes on every page where the layout appears.

These components add the primary written and visual content to a page.

Add descriptions, captions, transcripts, and semantic headings wherever the media needs an accessible text equivalent.

The Elements Badge component displays a small “Made in Elements” badge in the bottom-right corner of the published page. The badge links to the Elements website and adapts to light and dark mode.

How to Use Elements Badge

You’ll find Elements Badge under Utility in the Components list.

1. Drag Elements Badge onto the page.

2. Preview or publish the page.

3. Confirm that the badge appears in the bottom-right corner and does not cover important controls or content.

The badge appears after a short delay and remains fixed to the viewport.

Component Settings

Elements Badge has no configurable Inspector settings.

Accessibility

The badge includes an accessible label and opens the Elements website in a new browser tab. Check that it does not obscure other fixed interface elements, especially on small screens.

Related Components

• Button — Creates a fully customisable call-to-action link.

Welcome to the official FAQ for RapidWeaver Elements. This resource is designed to provide you with clear and concise answers to the most common questions.

Whether you’re just getting started or you’re an experienced user, our goal is to make sure you have all the information you need to build stunning websites with confidence.

Elements offers flexible licensing options for casual users, hobbyists, professional web designers and teams.

Purchase a License

Each license includes:

• Unlimited websites

• Templates, Themes, and Components

• One year of updates

• Installation on up to three Macs simultaneously per user license

• 1 GB of cloud storage for projects while the license is active

• Unlimited support by email and through the forum

• Continued use of the latest eligible version if the subscription expires; resubscribe to receive later updates

Every Elements license includes everything you need to build a website, with a few key differences between plans.

.

The Plus license is designed for users who need or want more than the Base license but don’t require the full commercial permissions of the Pro license.

The Base license allows three Custom Components per project. Plus and Pro allow an unlimited number of Custom Components per project.

The Base license allows two Globals per project. Plus and Pro allow an unlimited number of Globals per project.

The Base license places a small floating badge in the corner of the published website. Plus and Pro do not add visible Elements branding.

An active Pro license is required for developing and selling websites to third-party clients.

With the Plus license, your sites are free from any Elements branding. This allows for a more professional and polished look, whether you’re building personal projects, websites for friends, or community sites.

Beyond branding, Plus also unlocks additional features, including unlimited globals and unlimited custom components, giving you more flexibility in designing and managing your websites. While this license allows for a wide range of non-commercial use, it does not permit selling websites to clients.

If you ever decide to take on paid web design work, upgrading to Pro ensures you have the proper license for commercial projects.

An active Pro license is required for those using Elements as a professional tool. It ensures that as a Pro user you have everything you need to meet the demands of client work, from the freedom to sell websites to the reliable support and advanced features required to excel in a competitive market.

The Pro license pricing reflects the added value, flexibility, and commercial rights that the Pro license provides compared to the Base license.

The Pro license includes additional developer tools for building Dev Packs.

Resell Websites and Client Projects — An active Pro license is required to develop and sell websites to third-party clients. It is intended for freelancers, agencies and anyone who builds websites as part of a business.

The Base license is meant for personal projects or hobbyists, while the Pro license is designed for freelancers, agencies, and businesses who are making money from reselling websites.

Priority Support — Pro users receive priority assistance to help keep client projects moving.

If you have further questions about licensing, email .

Follow our step-by-step guide to building your first website in Elements.

5-Minute Quick Start Guide

If you’re new to Elements, this five-minute video shows you how to build a page using Templates and explore a ready-made project.

Building Your First Website: A Brief Outline

This walkthrough was written by Tom Hogan on the Elements Forum — Thanks Tom 👋

In a new blank project:

1. Choose your fonts (family and sizes).

2. Establish your brand colours and add other colour choices if necessary.

3. Choose your breakpoint sizes.

These are all design choices, but defining them in the theme early will prevent inconsistencies later. Explore other websites and the free Elements projects for ideas.

1. On your home page, create a Menu, Container and Footer. Refine the menu and footer, then convert them to Globals. If every page will use the same Flex or Grid structure inside the Container, add that too.

2. Establish your basic page structure (you can add to it later) with blank pages that are named (home, blog, gallery, contact, etc.). You can add sub-pages later. Add the Header/Container/Footer construct to each page.

3. Add the SVG, JPG, PNG and other assets you expect to use. Organise Resources with a folder structure that reflects your pages, such as /resources/images/page/resource.xxx.

Use lowercase names for files, folders, pages and resources. Avoid spaces; use hyphens between words instead.

While the following video does not cover every feature, it provides a high-level overview of the app’s layout and workflow. You’ll see how to add components, navigate the editor and begin building a website.

Use this as a quick tour of the basics before exploring the rest of the manual.

Elements includes a selection of free, ready-made projects. Use them to launch a site quickly or learn by exploring how their pages were built.

Prepare and optimise media for the web before importing it, particularly video, audio and high-resolution images. Uncompressed or oversized files can increase the project size and slow down both Elements and the published website.

We recommend:

• Compressing images with tools such as Squash, TinyPNG or ImageOptim.

• Optimising videos as MP4 (H.264), reducing their resolution or bitrate where appropriate.

• Hosting large files externally, including video, audio and PDFs, then linking to their URLs. This keeps the project smaller and easier to manage.

We also run a dedicated hosting service built specifically for Elements websites. No unnecessary complexity. Just fast, reliable hosting that works flawlessly and gets out of your way. .

The Let’s Build series of tutorials walks you through building real-world websites using Elements. Each tutorial breaks down a popular design or layout you might find online and shows you how to recreate it step-by-step inside Elements.

Whether you’re looking to sharpen your design skills, learn new layout techniques, or see how Elements handles different styles of sites, these tutorials are a great place to start.

If there’s a specific website, layout, or design trend you’d like to see us cover in a future tutorial, visit the Elements Forum and share your ideas. We’re always open to community suggestions!

These practical guides show how to solve common design and website-building tasks in Elements. Start with the general tutorials, or choose a focused recipe below.

Design Basics

• How-to Tutorials — Quick answers to common layout and design questions.

• Create a Card — Build a flexible card from standard components.

• Site Banner with Text — Place text over a background image.

• Add an Icon Inside a Button — Add and animate an icon within a Button.

Navigation and Scrolling

• Build a Sticky Menu — Keep a menu visible and optionally change it while scrolling.

• Apply Anchor Scroll Padding — Leave space above an anchor destination.

• Adjust Smooth Scroll Speed — Customise anchor scrolling with JavaScript.

Custom Effects

• Add Snow to Your Website — Build a configurable snow effect as a Custom Component.

The following tutorials answer many common design questions for people who are new to Elements.

👉 You can find even more tutorials on our YouTube channel.

Centre an Image or Component

To change the alignment of a built-in component, use the Margin setting under the Spacing control. Watch the video below to learn how to align an object, including how to centre it.

Create a two column layout

The following tutorial shows you how to make a two-column layout in Elements using either the Flex or Grid component.

Design a photo banner

In this tutorial, you’ll learn how to design a bold, eye-catching photo header or banner using Elements. We’ll walk through adding background images, adjusting overlays, and layering text to create a professional hero section that captures attention right from the top of your page.

Change how things look on mobile (Responsive Design)

The responsive breakpoint system in Elements allows you to change component properties at different user defined breakpoints (i.e. Mobile, Table, Desktop, etc).

On the first “mobile” screen size you do not have any blue dots. As you move up to the next size (SM) you'll see grey dots beside the controls in the Component inspector. If you click on a grey dot (to turn it blue) you can override the setting for that control. Once you add a blue dot you will have that setting for everything above. It’s always left to right.

Watch the video below to see how this works in practice.

You can use a to add html code snippet anywhere on your website or page.

If you’d like to track traffic or integrate services like Google Analytics or Google Tag Manager, you’ll need to add their code snippets to your project. Where you add the code depends on whether you want it to apply to all pages or just one. You can of this manual.

To add a video header in Elements you’ll need to drop in a Container component, point it at your MP4 file, and then layer your text, buttons, or other components on top. This gives you a high-impact hero section that loads quickly and works across all modern browsers. Watch the video below to learn more.

Anchor tags let you create links that jump directly to a specific part of a page. This is useful for long pages where you want to give visitors a quick way to navigate to key sections. Watch the video below for a step-by-step walkthrough.

Quickly create and design a profile card using the built-in Scaffolding Templates.

To hide and show components at different breakpoints you'll need to use the responsive design system built-in to Elements.

Layout > Display > Hidden (toggle).

In this video we show you how to design a decorative divider using just the flex and divider components.

Building a Decorative Divider in Elements

The decorative divider is built entirely from standard Elements components, no custom component is required.

• Container

  • Flex

    • Divider

    • Divider or SVG

    • Divider

How it works

1. Add a Container to control the divider’s overall width and vertical spacing.

2. Place a Flex inside it.

3. Set the Flex direction to Row, alignment to Centre, width to Full, and wrapping to No Wrap.

4. Add three Divider elements to the Flex.

5. Use the first and third Dividers as the horizontal rules. Give them the same theme-backed background colour and leave their borders disabled.

6. For the centre Divider:

   • Remove its background.

   • Enable a solid border.

   • Use the same colour as the outer rules.

The two outside Dividers expand into the available space, while the centrepiece retains its natural size. This creates two balanced rules without requiring fixed widths.

Using an SVG centrepiece

For an illustrated variation, replace the middle Divider with an SVG element. Select an SVG resource, give it a fixed theme width, and apply the same theme colour used by the rules.

The SVG file should not contain a hard-coded fill colour, allowing Elements to apply the selected theme colour.

Responsive behaviour

The Flex remains on one line while the two rules automatically shorten on narrower screens. Keep the centrepiece relatively small so the rules remain visible on mobile devices.

Accessibility

Because the divider is purely decorative, its outer Container should normally render as a div, rather than a header or another landmark element.

This short tutorial will show you how to add and animate an icon inside of a button.

Adding a snow effect can bring some festive character to your website. This tutorial shows you how to create a lightweight snow animation using JavaScript in Elements.

Element Project File

The completed project file is included below for your convenience.

• Open Snow Demo in Elements

Resources:

Links to the resources used int he Tutorial:

• Snowstorm JS Script by Scott Schiller: https://www.schillmania.com/projects/snowstorm/

• CDN JS: https://cdnjs.com/libraries/Snowstorm

Custom Component Code

To create the Custom Component shown in the tutorial, copy and paste the following code into the Template and Properties areas in Elements.

Place the following code in your Template:

@portal(headEnd)
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Snowstorm/20131208/snowstorm.js" integrity="sha512-N8H1tAcm2/wJx02Q3FznOerQj4sFIdQJpmntt0/7ufMLh8dH1DFf7Zss+lbL7JwtYJuGVV+cVmWOdTA4x2lOTg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script>
        snowStorm.flakesMaxActive = {{snowAmount}};
        snowStorm.followMouse = {{followMouse}};
    </script>
@endportal

Place the following code into the Properties:

{
    "groups": [{
        "title": "Snow Settings",
        "properties": [{
            "title": "Amount",
            "id": "snowAmount",
            "format": "{{value}}",
            "slider": {
                "default": 50,
                "min": 0,
                "max": 512,
                "round": true
            }
        },
        {
    "title": "Follow Mouse",
    "id": "followMouse",
    "responsive": false,
    "switch": {
        "trueValue": "true",
        "falseValue": "false",
        "default": true
    }
}
        ]
    }]
}

To make a menu sticky, you need to put the menu and all contents in a container (site wrapper) along with making the following changes to the menu settings:

Layout > Position set to Sticky.

Layout > Z-Index > Custom set to 100.

Layout > Type > Uniform > Inset 0.

Watch the following tutorial to see how to build a Sticky Menu, along with adding a drop shadow and frosted glass effect.

Advanced Sticky Menu Tutorial - Part 2

In this advanced tutorial, we use JavaScript to adjust the appearance of the menu as the visitor scrolls down the page.

You can click here to open the Space Demo Project in Elements.

Code Examples

Adding and Removing Standard CSS Classes:

<script>
	const menu = document.getElementById('fancymenu');
	window.addEventListener('scroll', () => {
	  if (window.scrollY > 800) {
		menu.style.setProperty("width", "100%");
		menu.style.setProperty("height", "80px");
		menu.style.setProperty("margin-top", "0");
		menu.style.setProperty("background", "#ffffff");
	  } else {
		menu.style.removeProperty("width");
		menu.style.removeProperty("height");
		menu.style.removeProperty("margin-top");
		menu.style.removeProperty("background");
	  }
	});
</script>

Adding and Removing Tailwind Classes:

	<script>
	const menu = document.getElementById('fancymenu');
	window.addEventListener('scroll', () => {
	  if (window.scrollY > 500) {
		menu.classList.add('w-auto');
		menu.classList.remove('w-[1000px]', 'mt-10');
	  } else {
		menu.classList.add('w-[1000px]', 'mt-10');
		menu.classList.remove('w-auto');
	  }
	});
 </script>

The following tutorial shows you how to create a website banner with a background image and overlaid text.

This tutorial will show you how to design and build a flexible card for use on your website.

RapidWeaver Elements is a modern, Mac-native way to design, build and publish websites.

Explore the Approach

• Static Website Benefits — Learn why static sites can be fast, secure, portable, and straightforward to host.

• Build a Digital Garden — Create a personal space for connected ideas and evolving content.

Elements Is Community-driven

We listen to our community of passionate users and use their feedback to help shape Elements.

1. Regular builds and development videos keep the community informed.

2. Owning a website helps you participate in the independent web instead of relying entirely on social media.

3. Static websites are fast, secure and easy to host, while PHP remains available when you need it.

4. An active, supportive community can help with questions and ideas.

5. Friendly product support is available when you need it.

Be part of the independent web. Own your content.

Realmac Software has always been an independent company and has never taken outside investment. For more than 20 years, we have remained privately owned, customer-funded and customer-focused.

We believe the web should remain open and independent. When you publish something on the web, it should , not a corporation. By joining the and using , you retain control of your content.

You can publish in the format that suits your content and share clear links such as example.com/ideas. These links can remain as your site evolves.

Take back control and build your next website with on macOS.

• Maintaining my own personal website has been one of the most amazing, challenging, rewarding, growth-promoting, time-consuming, and adventurous experiences of my life.

• The internet sucks now--but it doesn't have to.

• You already have a social media account. But you should also have a personal website.

RapidWeaver Elements is a powerful static website builder (local CMS system) that perfectly balances simplicity with professional-grade capabilities. Its intuitive drag-and-drop interface eliminates the need for coding knowledge, while still providing users with complete control over their design choices. With a rich selection of professionally designed templates and a streamlined publishing process, RapidWeaver Elements makes it possible for anyone to create stunning websites.

What truly sets RapidWeaver Elements apart is its commitment to generating optimised, clean HTML that delivers fast loading times and supports strong search engine rankings.

By using Elements, you maintain full ownership of your content and hosting choices, free from platform lock-in. This combination of user-friendly features, professional output, and creative freedom makes Elements an excellent choice for anyone looking to build a modern, efficient static website.

Continue reading to learn why RapidWeaver Elements can be a better choice than an online CMS such as WordPress.

Static Site Generator (SSG) vs Data-Driven Websites

Static websites are pre-built HTML files that remain unchanged until manually updated. They're like a perfectly printed book - the content is fixed, polished, and ready to be viewed instantly.

Data-driven websites, on the other hand, generate pages dynamically by pulling content from databases when visitors request them. This is like having to assemble a book every time someone wants to read it.

• Complexity: Data-driven websites require complex setup including configuring database servers, implementing server-side programming languages, setting up API endpoints, managing database connections, and coordinating between front-end and back-end systems.

• Slower Performance: Each page must be generated on-demand, requiring database queries and server processing.

• Higher Costs: Database servers and more powerful hosting are required to handle dynamic content generation.

Static websites eliminate these drawbacks by serving pre-built content, resulting in faster, more secure, and more reliable websites that are significantly easier to maintain.

1. Speed and Performance Static websites load incredibly fast since they don't require server-side processing or database queries. Pages are pre-rendered and served directly to visitors, resulting in lightning-quick load times.

2. SEO Benefits

   Search engines can easily crawl and index static content, potentially leading to better search rankings. The fast load times also contribute to improved SEO performance.

3. Enhanced Security

The variety of websites you can build with RapidWeaver Elements is completely open, and we like to think you can build pretty much anything with it. However, there are some types of websites that lend themselves to being static:

• Company Websites: Small to medium-sized business websites.

• Documentation Sites: Technical documentation, API references.

• Portfolio Websites: Personal or professional portfolios.

While WordPress is a popular option for building websites, Elements offers a faster, cleaner, and more focused experience, especially if you care about design quality, performance, and control.

Here's a high-level overview of why moving your Wordpress site to Elements is a smart move.

Elements outputs static HTML, CSS, and JavaScript for standard pages, with no database or server-side processing required. Dynamic features such as Forms and Elements CMS require compatible PHP hosting.

Say goodbye to plugin clutter, complex dashboards, and security patches. Elements gives you everything you need to design and build a beautiful site without relying on third-party add-ons.

Elements is a fresh, modern way to build websites, but you are not starting over. Most of what you already know still applies; Elements simply offers a more modern workflow. This guide brings together everything you need to make the move.

Elements also includes many new features and improvements to the RapidWeaver experience. Once you become familiar with the workflow, building and maintaining websites becomes much easier.

Four Things to Get You Started

Moving from RapidWeaver Classic? We will guide you through the process one step at a time and at your own pace. The guide contains four sections that you can explore as you learn Elements. Our in-depth manual and videos can then help you discover more of its features.

01: The Phrasebook

There is always a learning curve when moving to new software, and the transition from Classic to Elements is no different.

Elements uses new names for concepts you probably already know. For example, stacks become components and partials become Globals. Read the Phrasebook for a quick translation guide.

02: Switching to Elements

A slower-paced video series that assumes no prior knowledge. Build your first project, style it, make it responsive and publish it from start to finish. .

Ready-made projects covering the types of sites people build most often. Open the one closest to yours, follow along and make it your own.

Move an existing Classic project into Elements. The guide explains what carries over, what doesn’t and how to handle the remaining work.

RapidWeaver Classic isn’t going anywhere. Your existing sites will keep working, and you can continue using Classic while you learn Elements. Move at your own pace, one project at a time.

If you are struggling to recreate a specific website or layout, . Share a screenshot or describe what you need, and we’ll guide you towards a suitable solution in Elements.

Elements is a completely new website builder, so some of the common phrases used in RapidWeaver Classic have changed. Much of what you learned in Classic still applies, but it now goes by a different name.

This page provides a quick translation to help Elements feel more familiar.

Stacks → Components

In Classic, you dragged stacks onto a Stacks page to build it. In Elements, you do the same thing with components: drag them in, stack them up and nest them inside each other.

The mental model is the one you already have. What's genuinely new: components are built into Elements rather than bought and installed one by one, and they're more consistent with each other because they come from one place.

Themes → Theme Studio

This is the biggest shift. In Classic, a theme decided how your whole site looked, and you worked within it. In Elements, you're more directly in control of styling.

You can build your design with the built-in Components and Templates, then change its overall style in Theme Studio. This gives you far more flexibility than Classic themes.

For example, you can change colours or fonts throughout your entire site using Theme Studio.

Inspector → Inspector

The Inspector is still the Inspector.

The full glossary

Switching from Classic to Elements might feel like a big step, but the improved performance, future-proof tools and enhanced creative freedom make it well worth the journey. The supportive Elements community is here to help you every step of the way.

Moving from Classic to Elements

The video below will give you a good overview of how Classic and Elements differ. We'll walk you through each difference to help you get more comfortable building websites in Elements.

If you have Elements installed already, you can open the Elements Demo Project featured in the video above.

Moving from Stacks to Elements

The following video is a more direct look at how the Stacks plugin in RapidWeaver Classic compares to the Components in Elements. If you are currently using Classic + Stacks we'd highly recommend watching this video.

Users who have already made the switch

Over 1,000 Classic users have already made the switch to Elements, here's just a small sample of what they're saying.

"I have been on the beta for some time and I must say that going back to RapidWeaver Classic and Stacks every now and then to do updates etc on sites developed there, seems as if one is going back in time somehow.

Elements is truly forming to be an incredible web design app and I am excited for what is still coming! Keep up the great work Team Realmac!" — Gunther Schenk

I used RapidWeaver Classic for years, invested a lot (!) of money in frameworks, cms solutions and 3rd party stacks which all had a different way to name or sort their settings. That already drove me nuts.

There’ll sure be some 3rd party additions to Elements, but even in its current state it can do more than I was able to do with RW Classic + Foundry + easyCMS + lots of 3rd party stacks or even Blocs. Yes, there’ll be a learning curve, but it’s worth it.

I could’ve stayed with Classic, but being forced into the terrible UI/UX from Stacks to create a website… no way. And even more so if you switch back from Elements (or blocs, where I now come from) to RW classic and stacks. I can’t imagine that for the life of it.

Give it a try. You won’t be disappointed, and the forums and especially the developers offer a ton of help if you get stuck. — Fynn via the Forums.

"I'm planning on writing up a report on building out this new site as it was a real revelation what you can accomplish with Elements. The quality of the sites is so much higher than when I was dealing with Stacks.

For one of the projects I was extracting a lot of content out of a Classic/Stacks project and it was amazing how painful it was after working with Elements for these last 9 months.

You should be really proud with what you are creating it is amazing." — Robin Muir

This is the web design tool I have been dreaming of for over 20 years! Finally it appears my dream is becoming a reality! I am currently building a large website for a client using RapidWeaver classic and the stacks plug in and it is a daily struggle with these antiquated tools! Sometimes it is so incredibly frustrating when I am trying to accomplish what I thought was a simple task which becomes a three day ordeal just to try and get the stack to perform what I have envisioned. The constant back and forth between edit and preview is enough to make you want to pull your hair out!

I am genuinely excited to leave Stacks behind and begin designing professional sites in Elements! — @RockNRollSoul69 via YouTube

"'After many years of building websites using Rapidweaver Classic, I eagerly anticipated the release of Elements, the next-generation website builder. The two-way engagement has been a refreshing experience. The support provided by the Realmac team has been exceptional, exemplifying how to effectively interact with customers." — Steve Woodgate

"Elements is a huge leap up from RapidWeaver Classic. It’s so cool to design a website where all the basic design stuff is right there in the app, without having to use third-party add-ons. The ability to quickly make custom components is a huge plus. The beta has been a refreshing experience because the development team has been super open, flexible, and very responsive to our feedback." — Jon

"I discovered RapidWeaver through a monthly Dutch Mac magazine, and it has since become my most-used app. In my spare time, I volunteer to build websites for smaller organizations.

Inspired by the weekly developer videos and forum discussions, I started experimenting on my own in Elements. With the help of AI, I’ve been able to achieve solutions that, as someone with no programming background, I never thought possible. I’m now creating my own components for Elements that previously required me to purchase Stacks in RapidWeaver Classic." — Bart Vosters

.

Elements gives you full control over your workspace so you can set things up exactly how you like to work. Rearrange panels, resize the inspector, collapse areas you don’t need, or spread everything out across multiple monitors. Your layout is saved automatically, so when you reopen Elements it looks just the way you left it.

Whether you prefer a minimal setup with just the essentials, or a fully expanded view with every panel visible, the workspace adapts to your workflow. It’s designed to get out of your way and let you focus on building your site.

Easily manage the structure of your website. Create pages and folders and drag to re-arrange them just like you would in the Finder.

Pages

To create a new page, press Command-N or use the "+" symbol to the right of the Pages title.

Code Files (html, css, js, etc)

To create a file in your project, right-click in the Page Manager and choose New File.

Links

Add links to your site structure. To Create a link page, right-click in the Pages area and select "New Link" from the menu.

Markdown Files

To create a Markdown file with optional front matter, right-click in the Page Manager and choose New Markdown File.

Folders

Folders are a useful way to organise site content when you don’t need a top-level page. They can contain any number of pages or additional folders.

To create a folder, right-click in the Pages area and select New Folder from the menu.

Resources include the images, fonts, documents, media and folders used by your website. You can manage them directly in RapidWeaver Elements.

Open Resources in the left sidebar, then drag files or folders from Finder. Elements preserves their structure and names in the project and its exported output.

The resources you add will be copied and stored inside your project.

Elements accepts all file types and folders in Resources, with additional support for certain formats:

• Images — PNG, SVG, JPG and other web formats

The Node Browser lets you view and manage the entire structure of a page. It is especially useful for intricate designs and larger, more complex pages.

To filter down to specific Components you can use the search field, located at the bottom of the Node Browser.

The Node Browser has the following options when right-clicking on a Component in the Node Browser.

The Component Inspector in Elements lets you edit the properties of the currently selected component. When you click on a component in your design, its available settings appear in the Inspector, giving you full control over how it looks and behaves.

The Inspector is context-aware, meaning the options change depending on which component you have selected. This keeps the interface clean and ensures you only see the settings that are relevant.

Group Defaults

When you change any value within a group, the group title highlights using the system accent colour. This makes it easy to spot which settings have been modified on a component at a glance.

You can reset an individual control by right-clicking it and choosing Reset to Default.

To reset everything in a group back to its defaults, right-click the group heading and choose Reset Group to Defaults.

Inspector Group Modes

To change the display modes in the Component Inspector, right-click on a heading and choose from the following options:

• Expand All - Will expand all settings.

• Collapse All - Will collapse all open settings.

• Single Group Mode - Switching to the single group mode only allows one setting area to be open at a time.

When in Single Group mode the only option available in the right-click menu is switch back to default mode:

• Single Group Mode (ticked) — Untick this option to return to the default mode and view multiple settings at the same time.

We’re thrilled to share that Elements now supports Apple Intelligence in its Text based Components, giving you a powerful, seamless way to enhance your writing workflow. Whether you’re crafting headings, paragraphs, or rich text blocks, these AI-powered tools are designed to make writing faster, smarter, and more intuitive.

You can now effortlessly generate, refine, and polish your content right within Elements. Need a quick draft to kickstart your creativity? Want to rephrase a sentence or simplify a technical explanation? The Apple Intelligence writing tools are here to help with just a click or tap.

With these new capabilities, you’ll spend less time worrying about wording and more time bringing your creative vision to life. We’re excited to see how these tools help you express yourself more clearly and efficiently.

Templates are groups of components arranged to create a design or layout. Once you add a template to a page, you can customise it without affecting the original.

The Core pack inside of Elements includes a selection of useful layouts for everyday web design, including menus, hero banners, layouts, forms, and more.

Templates are like blueprints: a quick way to drop in a ready-made layout or design made of Components.

• As soon as you add a Template to your page, it becomes a standalone set of components, completely independent from the original template.

Globals give you the power to create reusable linked (and customisable) groups of components to maintain a consistent design language across your entire site.

You can reuse Global blocks throughout your site, updating the content in one place and automatically applying the change to every instance. This is particularly useful for shared headers and footers.

You can take Globals even further by overriding content and design aspects on an individual instance. You might have a banner that you want to use on every page of your site and you'd like the design to be consistent. You can use the override feature to customise the text and background image on each instance. You can even override the design settings on certain instances.

Once you learn how to use the power of Globals, you’ll wonder how you ever built websites without them.

Creating a Global

There are a number of ways to turn a group of Elements into a Global. Right-click an element in the Editor or Node Browser and select "Convert to Global".

Unlinking a Globals

To unlink a group of Elements on a page, right-click on the Global in the Node Browser and choose "Unlink from Global".

Globals inside Globals

When working with Elements, you can nest different Globals within each other to create complex structures. However, it's important to note that you cannot nest the same Global within itself. This restriction is in place to prevent potential issues such as infinite loops, system errors, or a rip in the time-space continuum.

Components are the building blocks used to create pages in Elements. Drag them onto the canvas, add content, and customise their appearance and behaviour in the Inspector.

The included collection is organised by purpose below. Store Components are installed separately, while Custom Components and the Elements API let developers create their own building blocks.

Included Components

Many components share controls for layout, sizing, spacing, typography, backgrounds, transitions, effects, filters, transforms, borders, and advanced settings.

.

The Elements Store provides additional free and paid components that install into Elements.

.

If you know some HTML, you can create project-specific components with editable content, dropzones, Inspector controls, styles, JavaScript, and build-time hooks.

or open the .

Layout components create the structure that holds and positions the rest of your content.

Start with Container for most page sections. Use Flex for one-dimensional alignment and Grid when rows and columns both matter.

The Image Slider component presents a folder of images or a CMS gallery as a touch-friendly slider. It supports autoplay, slide or fade transitions, multiple visible slides, arrows, and pagination dots.

Supported Content and File Types

Use an image folder from Resources or a CMS gallery field. The images in the selected source become slides automatically.

How to Use Image Slider

You’ll find Image Slider under Media in the Components list.

1. Drag Image Slider onto the page.

2. Choose Resource or CMS as the source.

3. Select the image folder or CMS field.

4. Configure playback, transition, and visible slides.

5. Choose the image ratio and style the pagination controls.

Type

• Resource — Uses an image folder from Resources. This is the default.

• CMS — Uses a CMS Gallery field or a custom field.

For Resource, select Images. For CMS, choose Gallery or Custom under Field. When Custom is selected, enter the field name; the default is custom_field.

Auto Play is off by default. When enabled:

• Interval sets the time between changes in milliseconds and defaults to 3000.

• Pause on Hover pauses playback while the pointer is over the slider. It is off by default.

Transition chooses Slide or Fade. The default is Slide.

Duration sets the transition time in milliseconds and defaults to 500.

Visible Slides is available for Slide transitions, ranges from 1 to 12, and defaults to 1.

Padding controls space around the slider and defaults to theme spacing 2 on every side.

Aspect Ratio offers Auto, Square, Landscape, Portrait, or Custom. Auto is the default. Custom reveals a ratio field, which defaults to 5/7.

Radius and Shadow style each image.

Arrows are enabled by default. Set their Size, Radius, and Normal or Hover background and icon colours.

Dots are enabled by default. Set their Size, Spacing, normal Color, and Active Color.

Use meaningful image metadata in Resources or your CMS. Do not rely on autoplay to communicate essential information, and keep arrows and dots visible against every slide.

• Use consistent image dimensions: Similar source ratios reduce cropping surprises.

• Pause interactive sliders: Enable Pause on Hover when autoplay is active.

• Tune visible slides responsively: Show fewer slides on narrow screens.

• — Displays a complete image grid with a lightbox.

• — Slides any combination of Elements components.

These components help visitors move through the site, reveal content, and perform actions.

Keep controls keyboard accessible, use clear labels, and ensure hidden content can be reached and understood without relying on hover alone.

The Dropdown component reveals custom content when a visitor interacts with its trigger. It is useful for navigation choices, action menus, and contextual information that should remain hidden until needed.

The trigger and panel are both drop zones, so you can build them from Text, Button, SVG, or other suitable components.

How to Use Dropdown

You’ll find Dropdown under Interactive in the Components list.

1. Drag Dropdown onto the page.

2. Add the visible trigger content to the trigger drop zone.

3. Add the hidden menu or content to the panel drop zone.

4. Enable Panel → Show while editing the panel.

5. Choose the panel placement and transition.

6. Disable Show and preview the interaction in a browser.

Show displays the panel in Edit mode. It is off by default and does not force the panel open on the published page.

Vertical places the panel below or above the trigger. The default is Bottom.

Horizontal aligns the panel to the Left, Center, or Right of the trigger. The default is Center.

Style chooses None, Fade, Zoom, Slide Left, Slide Right, Slide Up, or Slide Down. The default is Fade.

Duration sets the animation length in milliseconds and defaults to 300.

Use a clear, focusable trigger such as a Button. Keep interactive controls inside the panel keyboard accessible, and do not rely on hover alone to communicate essential information.

• Use Show only for editing: Turn it off before testing the published interaction.

• Check page edges: Change Horizontal alignment when the panel would otherwise overflow the viewport.

• Keep menus concise: Large or complex content is usually better suited to a Modal.

• — Displays larger content in an overlay.

• — Builds navigation automatically from your site pages.

The Modal component displays content above the current page with a configurable backdrop. It is useful for forms, announcements, image or video presentations, sign-up prompts, and other content that needs temporary focus.

A Modal has separate trigger and content drop zones. Add a Modal Close component anywhere inside the content to give visitors an explicit way to dismiss it.

You’ll find Modal and Modal Close under Interactive in the Components list.

1. Drag Modal onto the page.

These components organise repeated information or display content from structured sources.

Choose the component whose structure matches the meaning of the content rather than using layout components to imitate lists or tables.

Elements CMS adds structured, dynamic content to RapidWeaver Elements websites without requiring a database. Content is stored in portable Markdown files with YAML front matter, so it can be edited, moved, backed up, and version controlled without being locked into a proprietary format.

Use it to create blogs, portfolios, knowledge bases, team pages, product listings, client-managed websites, and other content-driven sections.

Read the Full CMS Documentation

Requirements

Elements CMS requires a web server running PHP 8.4 or newer with the mbstring extension enabled. Pages that use CMS data must have their page extension set to .php.

How Elements CMS Works

1. Add the CMS components you need to an Elements page.

2. Point them at a folder containing Markdown files.

3. Create and edit content as Markdown, or use the browser-based Online Editor.

4. Publish the site and let the CMS components display, filter, search, and paginate the content.

Each Markdown file can contain a YAML front matter header for structured information such as its title, date, tags, author, image, or other custom fields. The body contains the main content.

• Blogs and articles — Publish posts with structured metadata, tags, authors, related content, and feeds.

• Portfolios and listings — Present projects, products, people, or other collections in filterable layouts.

• Knowledge bases — Create searchable documentation and support libraries.

• Content remains readable and editable outside Elements CMS.

• Plain files are easy to back up, move, and manage with Git.

• There is no database to configure, export, or maintain.

Visit the for an overview of components, use cases, the Online Editor, and available plans.

Use the when you are ready to install the CMS or configure a website.

These components add visual treatments or specialised presentation to other content.

Use effects to support the page hierarchy and interaction. Avoid motion or decoration that makes content harder to read or operate.

Fastmail requires an when the Form component connects to its SMTP service. Do not enter the password used to sign in to Fastmail.

1. Open Fastmail Settings → Privacy & Security.

1. Under Connected apps & API tokens, choose Manage app passwords and access, then New app password.

Common Controls are reusable Inspector groups that behave consistently across built-in components. Learning them once makes it easier to size, position, style, animate, and link components throughout a project.

The available groups depend on the selected component. Some components use a specialised variant with different defaults—for example, Image starts at 100% width, while a general component starts at Auto.

How Common Controls Work

• Theme values use colours, spacing, typography, shadows, and borders defined in Theme Studio.

• Custom values accept valid CSS values where the control provides a manual mode.

• Responsive controls can be overridden at different breakpoints.

• State controls let you edit Static, Start, End, Normal, Hover, or other states without changing the state visitors initially see.

• Conditional controls appear only after the related feature is enabled or a compatible Type or Style is selected.

Individual component pages document any specialised defaults or behaviour that differs from these shared guides.

Before diving into building your first site, it helps to understand the core concepts that make up Elements. These ideas form the foundation of how the app works and give you a shared language when reading this manual.

You’ll learn about Projects, Templates, Themes, Components, and Globals, what each one does, how they fit together, and why they matter. Once you’re familiar with these terms, you’ll be able to navigate Elements more confidently and build sites that are consistent, flexible, and easy to maintain.

Terminology

Elements uses a consistent design system to keep everything predictable and easy to work with. Whether you’re building a single landing page or a large multi-page site, the same set of terms and tools apply throughout the app.

This section introduces the key concepts you’ll come across: Projects, Templates, Themes, Components, and Globals. Each plays a specific role in how your site is structured, styled, and maintained. Once you understand the difference, you’ll be able to work faster and keep your designs consistent.

Projects

A Project is your entire website bundled into one file. It can include multiple pages and all the assets needed for a site. Projects are a great way to kick-start a new build, as they provide a complete setup rather than just a single page layout.

Themes control the overall look and feel of your site. Fonts, colours and general styling are all defined here. Switching themes can instantly give your site a new appearance while leaving the content unchanged.

The core Components inside elements represent the basic building blocks of a webpage; they are at the foundation of your page design. They include things like containers, grids, headings, text, and buttons. They are singular items, like Lego bricks.

Some of the more advanced components go beyond the basics; these include things like menus and galleries.

are groups of components arranged to create a design or layout. Once you add a template to a page, you can customise it without affecting the original.

The core pack inside of Elements includes a selection of useful layouts for everyday web design, including menus, hero banners, layouts, forms, and more.

You can learn more about .

(or Globals as they are often called) are user created groups of components. Globals can help maintain a consistent design language across your entire site.

You can reuse global blocks across your site, update the content in one place and have it automatically mirrored to every other instance. This is particularly useful for header and footer sections.

You can take Globals even further by overriding content and design aspects on an individual instance. For example, you might have a banner that you want to use on every page of your site, and you'd like the design to be consistent. You can use the override feature to customise the text and background image on each instance. You can even override the design settings on individual instances.

You can .

• Use Projects when you want a full website starter.

• Use Themes when you want to change the overall design style.

• Use Components as the reusable building blocks of your pages.

Elements takes a mobile-first design approach. Mobile has now surpassed desktop in global internet usage. Google has switched to mobile-first indexing. That’s why Elements takes a mobile-first approach to website design to ensure your sites work better and rank higher in search results.

While it may feel more natural to some designers to start from a larger, desktop layout and scale downward, CSS doesn’t support a true “desktop-first” cascade. There’s no native way to define base styles at the largest breakpoint and then override them on smaller screens without introducing redundancy or conflicts in your code.

Mobile-first design ensures your site is accessible, performant, and adaptable on all devices, starting from the smallest screen up. Once you get comfortable with this approach, it often leads to cleaner, more maintainable layouts.

We recommend designing at the mobile breakpoint first, and working your way up through the breakpoints to support larger screens.

Elements uses the popular alongside , making it easier to build modern, responsive websites. Standardising on the frameworks used by Elements helps third-party components work consistently across your projects.

Elements builds a custom version of Tailwind CSS in real time.

As you add, remove, or modify any components and content in your project, Elements generates the required CSS, and only the required CSS. Elements does not load Tailwind from a CDN. Doing so would have severely limited what we are able to do from a design and theming perspective.

To reiterate, all CSS generation happens in real-time as you edit your project. It’s truly amazing once you start working with it.

This setup ensures that Elements produces the smallest amount of CSS possible, as it only generates the CSS you are actually using in your project.

The way Elements generates CSS for you means there is no need for each developer to write and ship the same CSS over and over again. Elements offers you a modern, reliable, flexible design system that both developers and end users can utilize.

The design system in Elements allows the app, third-party developers, and end users to all create code, components, and content separately but still maintain consistency from a design/theming perspective.

Can’t get your website online or updated? Publishing problems are often caused by incorrect connection details. Every setting must match the information provided by your hosting company.

Check Your Credentials

By far the most common cause of publishing issues is that the credentials entered are not accurate. It’s incredibly important that you double-check the details you’ve entered. To view your configured publishing details, choose File › Publishing Settings (Command-K). Check that all the fields are entered correctly: Server Address, Username, Password, Path, etc. An incorrect Path is a common cause of publishing problems. Common site paths include:

• /

• httpdocs/

• www/

• public_html/

You can always use the “Browse” button inside the publishing settings to pick the correct path on your server.

Paths vary between hosts, so consult your host’s documentation to find the correct upload folder. You can also contact your host to check whether its server settings have changed and whether your account has enough storage space.

Elements provides several publishing options, particularly for FTPS. Check which settings your server requires, as some hosting providers use specific configurations. Elements cannot reliably detect every FTP setting. If you are unsure, contact your hosting company. If you think it's all set up correctly, try this next:

If your host limits the number of connections that can be made to your server, you can set Elements to use fewer connections when publishing. If in doubt, set this to 1. To do this, open Elements Settings and set Maximum Concurrent Uploads to 1 before publishing your project again. If that didn't help, it's time to try something completely different:

If you're having issues publishing via FTP, we recommend publishing via SFTP as this is often more reliable (and secure).

Contact your hosting company to check your SFTP details as they can often be slightly different to your FTP details.

If your credentials work in another FTP app but not in Elements, delete the publishing destination and add it again. This ensures that all the saved details are current and verified. If you are comfortable using your hosting control panel, you could create a new FTP account and test it. Otherwise, move on to the next troubleshooting step.

This issue is common, especially when publishing multiple websites to the same server. Project backups can accumulate over time and use all the available server space. If the server is out of space, Elements may report “Couldn't upload to your FTP server”. More information may include “Transferred a partial file” or “Operation was aborted by an application callback”. If you see these errors, sign in to your hosting account and compare the available space with your current usage. You can delete older project backup files to make room for new uploads. If you are unsure, ask your hosting provider how much space you are using and how much remains available. Once you have enough space, you should be able to resume updates to your website.

Choose File › Re-Publish All Files to upload the entire site again. Some files may be missing from the server. You may also need to clear your browser history and website data because the browser could be displaying an older cached version.

Some hosts require an upload path that begins with a forward slash. Only include one when your hosting company specifies it.

Elements can create a detailed publishing report that the Realmac Software support team can use to identify potential problems. Open Elements Settings, select Publishing and enable Upload Logging.

Follow these steps to send your publishing logs to us:

1. Quit Elements.

2. Reopen your project in Elements.

3. Choose File › Re-Publish All Files.

4. If publishing returns an error, click

If you see an error when exporting your site, there may be a problem with an add-on or resource in the project. If the error consistently occurs on a particular page, check it for missing resources or add-ons that may be causing the problem.

When contacting Realmac Software, please include as much detail as possible. Please also use the Help menu’s Copy Support Logs. Please be sure to include the following details in your message:

• Who are you hosting your website with?

• Which version of Elements are you using? Which version of macOS is running on your Mac?

• How large is your Elements project file?

We aim to reply to all messages within two business days. We know it is frustrating when you cannot publish, and we will do our best to help resolve the issue.

We also run a dedicated hosting service built specifically for Elements websites. No unnecessary complexity. Just fast, reliable hosting that works flawlessly and gets out of your way. .

The Classic Project Importer is an experimental feature. It can bring over the page structure and settings from your Classic project, but content import is less reliable because many page types cannot be mapped directly to Elements components.

Keep in mind this tool is designed to help you move content across, not to recreate your site’s design. You will need to rebuild the layout and styling using Elements components. Think of it as a way to save time copying text, images, and page structures rather than a one-click migration.

If you’re planning a move from Classic, we strongly recommend reading the rest of the documentation to understand how Elements works, what can be imported, and what you’ll need to redesign.

Watch the videos below to learn more about importing Classic projects into Elements.

Importing a Classic Project

To import a RapidWeaver Classic project, launch Elements and choose File › [Beta] Import Classic Project….

Elements will import all important site information including:

• All pages, including file names, browser titles, page names and folder names

• Page-level scripts

• Meta information

• SEO information

Text from Styled Text pages is placed in Typography components, while images are placed in Image components.

These pages will be converted into code pages.

Elements imports photos from each Photo Album page, places them in a folder within Resources and creates a page containing a Photo Gallery component.

Elements imports Stack pages and does its best to preserve content from popular stacks and frameworks. The importer transfers content but does not reproduce the styling of the original page.

Elements imports all Stack page resources, then removes duplicate files to make the project and published site smaller.

Elements currently imports raw text and image content from a predefined list of stacks. Content is imported with minimal properties and does not retain colours, links or other styling.

Elements will attempt to import content from the following stacks. Unknown stacks will be converted into named Containers.

• Text > Text

• Markdown > Text

• HTML > Text

• Header > Text

• Button > Button

• Container > Container

• Vertical Center > Container

• Header > Text

• Container > Container

• Columns Grid

• Col > Container

• Header > Text

• Container > Container

• Column stacks > Grid

• Grid stacks > Grid

• Header > Text

Use these keyboard shortcuts to work more quickly in Elements.

Editor: General

The Divider component creates a simple line or coloured block between sections of your website. Use it to organise content, strengthen visual hierarchy, or add a decorative break.

How to Use Divider

You’ll find Divider under Utility in the Components list.

1. Drag Divider between the sections you want to separate.

2. Set its width and height.

3. Choose a colour, gradient, or image background.

4. Adjust spacing and borders to match the surrounding layout.

Width controls the divider’s horizontal size and defaults to Auto.

Height controls its thickness and defaults to theme spacing 0.5.

Style chooses the divider fill:

• Color — Uses a theme colour. This is the default.

• Image — Uses a resource image.

• Gradient — Blends two or three theme colours.

The controls shown below Style change to match the selected background type.

Use Spacing to add margin or padding around the divider. Borders can add a border style, width, colour, opacity, and radius.

Use a Divider for presentation rather than as the only indication that content has changed topic. Keep meaningful section headings in the page structure.

• — Groups a section and can apply backgrounds, borders, and spacing.

• — Creates larger decorative background areas with optional angled edges.

The Typography component is designed for long-form, structured content containing headings, paragraphs, lists, links, quotes, and other text elements. It applies one Theme Studio typography style across the entire content block.

Use Typography when you want consistent editorial styling without configuring each text element independently.

How to Use Typography

You’ll find Typography under Content in the Components list.

1. Drag Typography onto the page.

2. Add or edit the long-form content inside the component.

3. Choose a Theme Studio typography Style.

4. Select the semantic HTML tag that best describes the block.

5. Adjust shared sizing, spacing, background, borders, and effects if required.

Style selects a Typography style from Theme Studio and defaults to Article. The style controls the appearance of headings, paragraphs, lists, links, and other nested text.

Tag sets the semantic wrapper and is not responsive. Options are Article, Section, Aside, Main Content, Header, Footer, Div, and Span. Article is the default.

Choose the tag for meaning rather than appearance:

• Article — Self-contained editorial content.

• Section — A thematic section of a page.

• Aside — Supporting or secondary content.

In Typography → Advanced, add these classes:

This styles links inside lists used within the Typography component.

Keep heading levels in a logical order and choose a semantic wrapper that matches the content. Link text should describe its destination without relying on surrounding text.

• — Writes and renders long-form content using Markdown syntax.

• — Gives precise styling control over individual headings and short text blocks.

Date Picker provides a formatted date field with a calendar interface. It can also collect a time.

How to Use Date Picker

You’ll find Date Picker under Forms in the Components list.

1. Place Date Picker inside a Form.

2. Enter a unique Name.

3. Choose the Date Format.

4. Enable Time if required.

5. Add a whose For value matches the Name.

6. Publish and test keyboard entry and calendar selection.

Name is blank by default. If left blank, Elements creates a generated name.

Required is off by default.

Date Format is not responsive and defaults to Y-m-d, displayed as 2026-02-26. Other formats are:

• m/d/Y — 02/26/2026

• d/m/Y — 26/02/2026

Enable Time is off by default. Enabling it appends a 24-hour hours-and-minutes value to the selected date.

Placeholder defaults to “Select a date…”.

Placeholder Color defaults to Text 400.

Input Color defaults to Text 50.

Font defaults to Body and Size to Base.

Type defaults to None and can be Static or Focus. Focus provides Unfocused and Focused states.

Outline defaults are Solid style, Surface 500 colour, 100% opacity, width 1, and offset 0.

The field uses the shared Input sizing and spacing defaults: 100% width, Auto height, zero margin, and padding 2 vertically and 3.5 horizontally.

Add a Label, preserve a visible focus state, and choose a date format familiar to the intended audience. Visitors can type directly into the field as well as use the calendar.

• — Collects text and other single-value fields.

• — Associates visible text with the Date Picker.

• — Configures delivery and validation.

The Top Pages component automatically creates a list of site pages. Use it for simple navigation, a sitemap, or a set of links that stays in sync as your page structure changes.

How to Use Top Pages

You’ll find Top Pages under Navigation in the Components list.

1. Drag Top Pages onto the page.

2. Choose all top-level pages or select a folder.

3. Set the direction, alignment, justification, and gap.

4. Choose whether to show page icons and titles.

5. Style the title’s Default and Active states.

Show

• Top Level Pages — Lists all pages at the root of the site. This is the default.

• Folder — Lists the pages inside the selected Folder link.

Direction displays links Horizontally or Vertically and defaults to Horizontal.

Align controls cross-axis placement and defaults to Centre. Justify controls main-axis placement and defaults to Start. Gap defaults to theme spacing 4.

Icons

• Show — Displays each page’s icon. It is off by default.

• Layout — Arranges the icon and title horizontally or vertically.

• Alignment — Positions the icon at Start, Centre, or End.

Page Titles

Show is enabled by default. Font defaults to the Body font and Size to Base. Weight defaults to 400, letter spacing to Normal, and Italic is off.

Use State to style Default and Active titles independently. Configure Color, Opacity, Shadow, and Underline for each state.

Use descriptive page titles and preserve a visible active state. Page icons should support the title rather than replace it unless their meaning is unambiguous.

• — Provides full responsive site navigation.

• — Displays expandable multi-level navigation.

• — Shows the current page’s position in the site.

The Link control makes a supported component clickable. Elements tracks internal pages, anchors, and resources so their published destinations stay current when the project changes.

Link Panel

Choose To or Choose Link… to open the Link panel. An unset link is the default. Use the Clear button to remove an existing destination.

Entering an email address creates a mailto: destination. Test it in a browser because the visitor must have an email application configured.

Where the Link panel provides Custom Attributes, add a Name and Value for attributes such as:

Use one rel attribute with space-separated values when more than one relationship is required, for example nofollow noreferrer.

1. Select the destination component.

2. Enter a unique value under Advanced → ID.

3. Open the Link panel on the source component or selected inline text.

On the same page, the published destination uses a fragment such as #about-section.

Use link text that describes the destination. Avoid making a Container clickable when it contains Buttons, links, form fields, or other interactive controls.

If you encounter a bug or something doesn’t seem to be working correctly in Elements, we’d love to hear about it. You can check our for common questions, but the best place to get support is the , where our team and other users can offer help and advice.

• — Diagnose common publishing and upload problems.

• — Reset application settings when the app is not behaving as expected.

Both and are Mac-native visual website builders that export real website files. They share a similar goal, but they’re built on different foundations and tend to suit different workflows.

This comparison focuses on the day-to-day differences that matter when you’re building, maintaining, and scaling websites over time.

Choose RapidWeaver Elements if you want:

• A modern workflow with a built-in design system (Theme Studio).

RapidWeaver Elements includes a powerful built-in WYSIWYG (What You See Is What You Get) editor, so you can design your site visually in real time. Whether you’re an experienced web designer or just getting started, you’ll feel at home with its intuitive, Mac-like interface.

The editor is designed to be both versatile and approachable. If you’re a professional, you’ll get the precision and flexibility you need to bring detailed designs to life quickly. Tweak your layout, typography, and styling on the fly, and see the results exactly as they’ll appear when your site is published.

If you’re new to web design, Elements keeps things simple without getting in your way. The streamlined editing experience uses familiar tools and controls, so you can start building straight away. Every change is shown instantly on the canvas, removing guesswork and making the whole process feel fun and straightforward.

With the WYSIWYG editor you can focus on design, not code. And when you do need to look under the hood, Elements has you covered with seamless switching between the visual editor and any custom HTML or CSS you choose to add.

The Grid component creates responsive layouts with defined columns and rows. It is ideal when content needs to align in two dimensions, such as card grids, galleries, feature comparisons, and structured page sections.

👉🏻 that was used in this video.

You’ll find Grid under Layout in the Components list.

1. Drag Grid onto the page.

Text Wrap places an image to the left or right of its child content so text flows around it. With a transparent PNG, WebP, or SVG, the text can follow the visible shape instead of the image’s rectangular bounds.

You’ll find Text Wrap under Layout in the Components list.

1. Drag Text Wrap onto the page.

2. Place one or more Text or Typography components inside it.

The Gallery component turns a Resources folder into a responsive media grid with optional captions, author information, and a full-screen lightbox. It can combine images, YouTube and Vimeo links, and MP4 video, or build the grid from a Remote Folder of images already on your web server.

• JPG

• PNG

The Markdown component renders standard Markdown inside an Elements layout. It is useful for documentation, articles, technical content, and text written outside Elements.

Markdown content inherits a Theme Studio Typography style, keeping headings, paragraphs, lists, links, and code visually consistent.

You’ll find Markdown under Content in the Components list.

1. Drag Markdown onto the page.

The Breadcrumbs component builds a trail from the current page back through its parent pages. It helps visitors understand where they are and move to a higher level of the site.

You’ll find Breadcrumbs under Navigation in the Components list.

1. Drag Breadcrumbs onto a page or shared layout.

2. Choose whether to show the Home link.

The Filter component provides a search field that shows and hides filter-enabled components as the visitor types. It works with tags assigned to compatible components such as Container, Grid, Flex, and Accordion.

You’ll find Filter under Interactive in the Components list.

1. Add the content components you want visitors to filter.

2. Add tags to each compatible component and enable its Filter controls.

The Background component places a visual background behind optional child content. It supports solid colours, gradients, resource or CMS images, SVG artwork, fixed positioning, and angled edges.

You’ll find Background under Layout in the Components list.

1. Drag Background onto the page.

2. Leave the drop zone enabled and add content, or disable it for a purely decorative background.

Checkbox creates a group of independently selectable options. Use it for preferences, opt-ins, feature choices, or required acknowledgements.

You’ll find Checkbox under Forms in the Components list.

1. Place Checkbox inside a .

2. Enter a shared Name for the group.

The Tabs component displays one content panel at a time while keeping related sections easy to reach. Each tab has a title, optional SVG icon, and content drop zone.

You’ll find Tabs under Interactive in the Components list.

1. Drag Tabs onto the page.

2. Add items to the Tabs collection.

Select creates a native drop-down field populated from an Options collection. It is useful when visitors must choose one value from a defined list.

You’ll find Select under Forms in the Components list.

1. Place Select inside a .

2. Enter a unique Name.

The List component creates an editable ordered or unordered list. It provides direct control over the number of items, marker style, spacing, and text appearance.

You’ll find List under Content in the Components list.

1. Drag List onto the page.

2. Choose Ordered or Unordered.

Radio creates a set of mutually exclusive choices. Selecting one option automatically clears the other option in the same group.

You’ll find Radio under Forms in the Components list.

1. Place Radio inside a .

2. Enter a shared Name for the group.

The Filter Tags component creates a set of buttons that visitors can use to show content matching one or more tags. It works with tags assigned to filter-enabled components such as Container, Grid, Flex, and Accordion.

You’ll find Filter Tags under Interactive in the Components list.

1. Add tags to each compatible component you want to filter.

2. Enable filtering on those components.

Layout controls how a component participates in the page layout. Use them to change positioning, offsets, stacking order, visibility, overflow, and stacking-context isolation.

Position defaults to None.

Success is a conditional drop zone shown after the parent Form receives a successful response. Add text, icons, Containers, or other components to create the confirmation visitors should see.

You’ll find Success under Forms in the Components list.

1. Place Success inside a .

2. Add a Text component with a clear confirmation.

Label creates a semantic HTML label for an Input, Date Picker, Select, or other named field. A correctly connected label helps visitors understand and activate the field.

You’ll find Label under Forms in the Components list.

1. Place Label inside a , close to its field.

2. Edit the label text directly on the canvas.

Error is a conditional drop zone shown when form submission fails. Add text, icons, Containers, or other components to create the message visitors should see. Browser validation messages and the Form component’s invalid-field colours handle missing or invalid field values before submission.

You’ll find Error under Forms in the Components list.

1. Place Error inside a .

2. Add a Text component with a clear failure message.