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 and someone from the team will get right back to you.

RapidWeaver Elements (aka Elements) is designed for all skill levels. Whether you’re a beginner looking for simplicity or an experienced web developer needing advanced customisation, Elements offers the perfect balance. With its user‑friendly interface and powerful features, you can create fast, efficient, and beautiful websites with ease.

RapidWeaver Elements has everything you need built in to create a beautiful, modern website and it's getting better all the time thanks to our passionate user base.

New to Elements?

If you're new to Elements, our will help you get started building your first website!

Whether you’re coming from Stacks, Blocs, or WordPress, you’ll feel right at home in Elements. We’ve designed it to be both powerful and intuitive, combining the flexibility of code with the simplicity of visual editing. Migrating your projects might feel like a big step, but don’t worry: this guide will walk you through what to expect, how to recreate common setups, and where Elements improves your existing workflow.

From familiar layout patterns to modern web standards, you’ll find smarter, cleaner ways to build. No plugins. No clutter. Just pure performance, freedom, and creative control.

Let’s get started.

View the Store Guide and Developer API for more details on building products for Elements.

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 5-minute quick start guide will help you get started building your first page, fast! In the video, we'll show you how to build a page using Templates, and navigate a pre-built marketplace project.

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 won't see any small dots by the controls in the Inspector. 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.

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.

The Page settings allow you to set a default Page background colour for your website. By default, the Theme background colour will be used, but you can override this with the controls provided.

Dev Diary Videos for Typography

The following video will show you how themes work in Elements. The video was recorded with a development version of Elements so the feature(s) available now may differ slightly to those in the video.

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.

The Elements CMS is a complete Markdown based CMS system.

The Accordion component lets you organise content into collapsible sections. It’s a great way to keep pages clean and easy to navigate, especially when you’re dealing with lots of information. Visitors can click on a section heading to reveal more details, making it perfect for FAQs, service listings, feature breakdowns, and more.

Accordions help improve page flow, reduce scrolling, and enhance the overall user experience, particularly on mobile devices where space is limited. With Elements, creating and customising an Accordion is simple, giving you full control over the layout, grouping, and style.

How to use Accordion

You’ll find the Accordion component under the Interactive section in the Components list. Each Accordion Item has two separate drop zones: one for the Title and one for the Content. You can add text, images, or other components into these areas to build rich, interactive sections.

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 and share your ideas. We’re always open to community suggestions!

The Divider component in Elements is a simple yet effective way to create visual separation between sections of your website. It helps to organize content, enhance readability, and improve the overall flow of your design.

Content coming soon.

Content coming soon.

Content coming soon.

Content coming soon.

The following tutorials cover a lot of the popular design related questions for newer users in the Elements ecosystem.

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

Center an image (or component)

To change the alignment of the built-in Components, use the Margin setting under the Spacing Control. Watch the video below to learn more about setting the alignment of an object, including how to center an object.

Create a two column layout

The following tutorial will show you how to make a two coloumn layout in Elements using either the flex or grid components.

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 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.

How to add HTML code snippets

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

How to add Google Analytics

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.

Add a video background

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.

Link within a page

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.

How to use Scaffolding Templates

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

How to hide components at different breakpoints

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).

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.

While the WYSIWYG editor allows you to view your design, you'll sometimes want to check how it looks in a browser.

To preview your website in your default browser, you can click the Safari Browser icon in the toolbar (Command-P). You can also press Command-Option-P to choose a different browser.

Preview Troubleshooting

For the local network web preview to be available you need to have already Previewed your site locally in the Browser. You can also press the "Restart Web Server" button to start the local preview and generate a new QR Code to scan.

Once the web server is running you have two ways of getting the address for your local network preview. Copy and Paste the URL from the Advanced Project Settings, Or point your iPhone at the QR Code.

Safari can't open the page

If you cannot see the Preview in Safari, you might be blocking http traffic. Either try another browser, or switch off the "Not Secure Connection Warning" in the Safari Settings.

This setting can be found in Settings.app > Apps > Safari.

Still having local network preview issues?

• .

Designing with accessibility in mind ensures your website works for everyone, including people with visual, auditory, cognitive, and motor impairments. It’s not just good practice; in many regions, it’s also a legal requirement.

This chapter covers how to create accessible websites using Elements. We’ll walk through key principles, recommended techniques, and how Elements helps you meet common accessibility standards like WCAG 2.1 and the upcoming European Accessibility Act (EAA).

From using semantic HTML and alt text, to managing contrast and keyboard navigation, we’ll give you pointers on how to build sites that are inclusive, usable, and compliant, without compromising on design.

While not exhaustive, the following checklist covers the most important steps to help you build a more accessible website from the start:

Structure & Semantics

• Use proper heading levels (h1, h2, h3, etc.) in logical order

• Structure content with semantic HTML (e.g. <nav>, <main>, <section>)

Text & Contrast

• Ensure sufficient color contrast between text and background

• Avoid using color as the only way to convey information

• Use readable font sizes and line heights

Images & Media

• Add meaningful alt text to all images

• Provide captions or transcripts for videos and audio content where possible

• Avoid autoplaying media with sound

Forms & Interactivity

• Label all form inputs clearly and associate them with their controls

• Ensure error messages are clear and accessible

Responsiveness & Layout

• Use responsive layouts that adapt to different screen sizes and zoom levels

• Avoid fixed pixel sizes for text or important layout elements

Testing & Validation

• Use accessibility checkers like , or Lighthouse (in Chrome DevTools) to audit your pages

• Test with keyboard-only navigation

• Try screen reader testing (VoiceOver on macOS is a good starting point)

Legal & Compliance

• Aim for compliance

• If you sell products or services in the EU, ensure you comply with the .

A robots.txt file tells search engine crawlers which parts of your website they can or can’t access. It sits at the root of your domain (e.g. https://example.com/robots.txt).

To add a robots.txt file in Elements:

1. Right-click in the Page List area of your project window and choose New File.

2. A new file named untitled.html will appear — rename it to robots.txt.

3. Double-click the file to edit its contents, and add any robots.txt directives you need.

This file will be published to the root of your website, making it accessible to search engines at https://yourdomain.com/robots.txt.

Example robots.txt file:

You can use this on your own site, just don’t forget to change the domain name to ensure you're pointing to your own sitemap.

The Theme Studio in Elements gives you the power to customise every part of your website. You have complete freedom for you or your clients. Easily change colours, fonts and text styles, borders, shadows and so much more.

Use Theme Defaults

When designing and building your website always use the recommend Theme Defaults when possible.

When building your site, we recommend sticking to the core theme settings so your design stays consistent and easy to manage. It also ensure all Templates and Components should "just work" right out of the box to match the style of your website.

• Colours: Use Brand, Accent, Surface, and Text. These are managed in the Theme Studio and ensure that components, templates, and layouts all work together seamlessly.

• Defaults: For Border Width, Radius, and Shadows, stick with the built-in Default option. This keeps spacing and depth consistent across your site.

By using these theme roles instead of custom overrides, you’ll get a site that looks cohesive, is simple to rebrand, and stays compatible with future templates and components.

The Advanced section lets you fine-tune your project’s output and local preview behavior. These options are entirely optional, but great if you want a bit more control.

Site Options

• Generate Search Engine Sitemap

  Automatically creates a sitemap.xml file to help search engines index your site.

• Consolidate CSS Files

  Combines your project’s CSS into fewer files to help reduce page load time.

• Generate Cache-Busting Links

  Appends unique version strings to assets (like CSS and JS) to ensure browsers always load the latest version.

• Minify CSS and Javascript

  Strips unnecessary whitespace and comments to shrink file sizes and improve performance.

• Anonymize Requests to Third-Party Servers

  Helps protect your privacy by removing identifiable info from external requests (like Google Fonts or embedded media).

Default Extension

Sets the file extension used for new pages, typically html, but you can change this to php or others if needed.

Web Server Port

Configure the local web server used by Elements when previewing your site:

• Auto: Automatically chooses an available port.

• Restart Web Server: Use this if the preview server isn’t running correctly.

• Automatically start web server on document open: Handy if you want preview to be ready as soon as you open a project.

Elements automatically generates a sitemap.xml file in the root of your website. By default, all new pages are included in the sitemap.

If you want to exclude a page, simply uncheck the Include in sitemap option in the Page Inspector.

Sitemap Location

Once you've exported or published your website you will find the sitemap.xml file in the root folder of your website.

Sitemap Benefits

A sitemap provides search engines with a clear map of your website’s structure, and using one comes with several key benefits:

✅ Helps Search Engines Discover Pages

Sitemaps list all the important pages on your site, making it easier for search engines like Google to find and index them, especially if:

• Your site is new and has few external links

• Some pages are hard to discover through internal navigation alone

🚀 Improves SEO

A well-maintained sitemap ensures that your most important content is noticed and crawled efficiently, which can improve how your site appears in search results.

🧭 Gives You Control

You decide what gets included. Pages you don’t want indexed, like landing pages, test pages, or thank-you pages can be excluded.

Ignored file types

Elements will not add Folders or the following file types to your sitemap.

The Before After Component is a premium comparison tool. It gives you a clean, responsive slider that lets visitors drag to compare two images, or any other content. It’s perfect for agencies, photographers, designers, architects, and anyone who needs a clear visual before-and-after effect.

It’s more flexible than a basic image comparison component. You can use any content for the before and after, customise the handle, switch between vertical or horizontal layouts, and it includes full touch support.

Before After Component Settings

The Screens section in the Theme Studio allows you to configue the responsive breakpoints for your website. Watch the video below to learn more about this feature.

Buttons are fundamental user interface elements in web design that enable users to interact with your website. They serve as clickable elements that trigger actions, such as navigating to a new page, or triggering a specific function, like showing a modal window.

Buttons help provide a clear call to action on your website.

Manage the overall settings for your Website, this includes things like; site title, logo, favicons, template code, and publishing destinations.

Project Settings can be accessed by pressing the cog icon in the toolbar.

Use the General project settings to set your website’s title and primary web address.

Disabling Dark Mode

If your website doesn’t need a dark appearance, you can turn Dark Mode off by disabling the Allow Dark Mode toggle.

The Flex Element is based on the Flexbox CSS module that provides a flexible way to distribute space among items within a container. It is designed for one-dimensional layouts, such as arranging elements in a single row or column. With Flexbox, you can easily create responsive and dynamic layouts that adapt to different screen sizes and orientations.

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.

Migrating from RapidWeaver Classic to RapidWeaver Elements is a fantastic move if you’re looking to modernise your web design workflow and unlock new creative possibilities.

Elements introduces a fresh approach, offering unmatched flexibility and precision for designing responsive, professional-grade websites.

RapidWeaver Alternative

Unlike RapidWeaver Classic, Elements eliminates the need for outdated themes and stacks, streamlining your process while giving you greater control over your projects. The switch might feel like a big step, but the improved performance, future-proof tools, and enhanced creative freedom make it well worth the journey. Plus, the supportive Elements community is here to help you every step of the way!

With dark mode now a prominent feature in many operating systems, it’s increasingly common to create a dark version of your website alongside the default design.

Elements supports automatic switching between light and dark mode. This approach enables automatic theme switching based on the user’s system (or browser) settings, ensuring websites adapt seamlessly to both light and dark modes.

Choosing Colours

For Light and Dark mode to work seamlessly we recommend basing your websites on the following three colours, Brand, Accent

The colour settings allow you to manage a global colour palette for your website. You can add additional colours, and override theme defaults. The colours specified in the Theme Studio can be chosen in a component. This can be anything from a font colour to a background gradient.

Recommended Theme Colours

When building your site, we recommend sticking to the core theme colours: Brand, Accent, Surface, and Text. These colours are designed to work together across all components and templates. By using them consistently, you gain a few key benefits:

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.

Templates are groups of Components that have been put togther to create a design or layout. Once a template is dropped into your page you can customise it however you like and it won't affect 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.

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 template blocks across your site so you only need update the content in one place and have it automagically mirrored in all other instances of that global. For example, this can be very useful for global header and footer sections.

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.

Card Flip lets you create eye-catching flip cards that reveal hidden content when visitors click or hover. Choose from horizontal or vertical flip animations, add an optional tilt effect that follows the mouse, or set cards to flip automatically to grab attention. The smooth animations look great on any device.

Style the front and back of each card independently with your own colors, rounded corners, and shadows. Ideal for team bios, product features, pricing tables, before-and-after reveals, or anywhere you want to surprise visitors with more content.

If you want to work on your Elements project across multiple Macs, we recommend using iCloud Drive. It’s built into macOS, fast, and well-integrated with the system, making it the most reliable option for syncing your projects.

While some users have reported success using services like Google Drive, we’ve also seen cases where those services can cause sync issues or corrupt project files due to the way they handle file locking and syncing.

Tips for iCloud Drive

The Dropdown component lets you reveal a list of links, actions, or custom content when a user clicks or hovers on a trigger — perfect for navigation menus, or simple tool menus.

It’s fully flexible and works great on both desktop and mobile. You choose what goes inside: text links, buttons, even other components. The dropdown opens smoothly and stays neatly tucked away when not in use, keeping your layout clean and uncluttered.

Use it anywhere you need compact, contextual access to more options.

The Spacing controls allow you to add Margin and Padding to an object. By default this control is disabled, this is to ensure the pading and margin classes are not applied to the object.

To set Padding and Margin you need to switch the "Enable" toggle to on.

The "Mask & Paintbrush" icon will toggle the control between selecting from a Theme Preset and setting an arbitrary value. To change the arbitrary value by 5px increments, click and drag the mouse up and down. To change the value by increments of 1px hold down the shift key while dragging.

To link the opposite value, click the dashed line so the highlight is set to blue. This can be done independently for vertical and horizontal values.

Filters allow you to apply various visual effects to elements, such as blurring, adjusting brightness, or adding drop shadows. These filters are applied via the filter settings on most elements and enable quick visual enhancements.

Type

Specify if the component has effects enabled or disabled. The Hover effect works in conjuction with .

Transforms in Elements allow you to manipulate the position, size, and orientation of components all without writing a line of code. Transforms are a powerful way to apply effects like rotating, scaling, translating (moving), and skewing elements, making it easy to add dynamic and interactive visual effects to your design.

You can also use transforms to create hover or focus effects that make elements feel more interactive and responsive.

Type

Specify if the component has transforms enabled or disabled. The Hover effect works in conjuction with .

The Grid Element is a powerful layout system based on CSS Grid that allows you to create complex two-dimensional grid-based layouts for web pages. It provides a precise way to position and align elements within a grid container, making it easier to design responsive and flexible layouts.

With the Grid Element, you can define rows and columns, control their sizes, and place items anywhere within the grid. You can also set the grid-gap for adding spacing between grid cells, you can even create nested grids.

Getting Started with Grids

When you first drag a Grid onto your page, you might notice that the columns aren’t immediately visible. That’s because the grid requires content to define its layout. To get started, drag and drop a Container into the grid. The container will occupy the number of columns you’ve set for the grid. As you add more containers, an insertion point will appear to the left or right of the existing container, guiding you on where the new content will fit. Drop the container, and you’ll see the grid automatically split into two columns. Repeat this process to populate the grid with as many columns as you’ve set up.

The Advanced section provides options for users who want finer control over styling or need to link directly to sections. These settings are ideal for developers and advanced users comfortable with custom CSS or Tailwind utilities.

CSS Classes

Add one or more Tailwind CSS classes to the Gallery component for custom styling.

This allows you to extend or override default styles without editing your theme or component code.

The Background component lets you easily add color, gradients, or images behind your content, helping you create visually rich and layered designs. Whether you’re highlighting a section, creating contrast, or simply enhancing the overall look of your page, the Background component gives you full control over the style and appearance.

You can choose a simple colour, apply a background image, or even create angled backgrounds for dynamic effects. Fine-tune the opacity, fixed positioning, and layering options to craft exactly the look you want.

In Elements, borders are easy to add, customize, and control, allowing you to create clean and consistent boundaries around components with minimal effort. Elements provides a range of options for setting border width, border color, border style, and even border radius (for rounded corners). This flexibility makes it simple to define borders that suit your design, from subtle outlines to bold accents.

Type

Specify if the component has effects enabled or disabled. The Hover effect works in conjuction with .

With Elements’ flexible licensing options, you can choose the plan that best fits you or your teams needs, whether you're a casual user, hobbyist, or professional web designer.

Purchase a License

Each license includes:

• Unlimited websites

• Templates, Themes, and Components

• 1 year of free updates

• Installation on up to 3 Macs simultaneously per user license

• 1GB of Cloud Storage for Projects (An active license is required)

• Unlimited Support via Email and Forum

• If your subscription expires, Elements can still be used, you just won't receive future updates until you resubscribe.

Every Elements license includes all you need to build the website you've always wanted, however, there are a few key differences highlighted in the table below.

.

Key Features Explained

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.

Custom Components

The Base license for Elements only allows the creation of 3 custom components per project. Plus and Pro licenses can create an unlimited number of Custom Components per project.

Global Components

The Base license for Elements only allows the creation of 2 global components per project. Plus and Pro licenses can create an unlimited number of Global Components per project.

Elements Branding

The Base license for Elements will place a small floating badge in the corner of your website showing it was built with Elements. The branding is in place to subsidise the low cost of the license. Plus and Pro have no visible Elements branding.

Resell Websites (Pro Only)

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

Why Choose a Plus License over a Base License?

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.

Why Choose a Pro License?

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 extra Developers Tools for building Dev Packs.

Resell Websites and Client Projects - An active Pro license is required for users to develop and sell websites to third-party clients, making it the ideal choice for freelancers, agencies, or anyone building websites as part of their business. With this license, users have the freedom to fully leverage Elements’ powerful tools and customizations to create and deliver high-quality websites for clients, turning Elements into a valuable asset for generating revenue.

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 - The Pro license is specifically aimed at professionals working on client projects, where timely support is crucial. Elements’ priority support helps Pro users troubleshoot issues, get answers to complex questions, and keep projects moving forward without delay—making it a reliable tool for maintaining client satisfaction and meeting project deadlines.

If you have any further questions about licensing please .

Deep linking is a way to open a specific screen, action, or workflow inside Elements. Instead of just launching the app, the link takes the user straight to the right place and can often pass data along with it.

In app terms, deep links can make setup faster and reduce friction. They are commonly used for onboarding, authentication, importing data, or opening a precise feature without making the user navigate there manually.

In Elements, deep linking uses the elementsapp:// URL scheme. This lets a link trigger specific actions inside the app, such as importing a custom component or creating a publishing destination with predefined settings. In practice, that means one link can open Elements, jump to the right task, and automate part of the setup process.

Import Custom Component

You can use the following URL scheme to import/create custom components.

URL Format:

Consider URL-safe base64 (replacing + with -, / with _, stripping = padding) to avoid path encoding issues. Alternatively, use a query parameter: elementsapp://import-custom-component?data=.

Payload Format:

The base64 string decodes to UTF-8 plain text with two sections identified by header keywords on their own line:

Options:

• TITLE header line followed by the component title on the next non-empty line.

• HTML header line followed by all remaining content (the template HTML).

• Whitespace-only lines between sections are ignored.

Requirements:

Import Custom Components requires RapidWeaver Elements 2.1.1 or newer on macOS.

Create Publishing Destination

Magic publishing links provide a quick way to automatically configure a publishing destination within a Elements Project. Most of the settings can be configured, reducing user error and making setup a simple one click solution.

To create a magic link, use the elementsapp:// url scheme with createPublishingDestination followed by query parameters for the settings.

URL format:

Payload example:

Options: The available options are as follows

• method: SFTP, FTP, FTPS

• server: IP address or url of server, including the port

• path: Publishing path

Please note that Password is not supported for security reasons.

Store Product Link

Elements supports deep linking to products within its built-in Store, allowing you to send users directly to a specific product page inside RapidWeaver Elements. This makes it easy to connect marketing websites, documentation, onboarding flows, emails, or companion apps straight to the exact pack you want to showcase, without requiring users to manually search the Store.

When a deep link is triggered, Elements opens and navigates directly to the relevant product, creating a fast and seamless experience. This is especially useful for upgrade prompts, cross-promotion between packs, launch announcements, and partner integrations where precision and convenience matter.

Deep linking helps reduce friction, improves conversion, and ensures your customers land exactly where you intend inside the Elements ecosystem.

Requirements:

Store links require RapidWeaver Elements 2.0 or newer on macOS.

To link to the Elements Store, use: elementsapp://storeProduct/. To link to your product, append the reverse domain name from your info.json file in your devpack.

For example, consider this info.json for the Essentials pack:

Take the identifier value: com.elementsplatform.essentials, and append it to the store link: elementsapp://storeProduct/com.elementsplatform.essentials.

Link Example:

👉 (Elements Required)

The .htaccess file is a simple configuration file used by Apache-based web servers. It lets you control key settings for your website, such as redirect rules, caching, security headers, and more — all without needing access to the server’s main configuration.

For Elements sites, you can use .htaccess to improve security (via headers like CSP and X-Frame-Options), enforce HTTPS, enable compression, and make your site more robust.

Below is a basic, recommended starting point for your .htaccess file.

Adding an .htaccess file to your website in Elements

Right-click inside the page of your project and choose New File from the contextual menu. Name the file .htaccess and ensure it is in the root of your website.

Pretty URL's in the Elements CMS

See also; on using the .htaccess rules to rewrite how urls are displayed in the CMS.

CSP (Content Security Policy)

CSP is a security feature implemented via HTTP headers that tells the browser which content it’s allowed to load (like scripts, styles, images, etc). The main goal is to prevent attacks like cross-site scripting (XSS) and data injection by controlling what sources are considered safe.

You can test the security headers for your website at:

When you’re ready to publish your website, you'll need to go to your Site Settings and select the "publishing" tab in the sidebar to set up a publishing destination.

Elements can publish to the following locations and services:

• Local (to your Mac)

• FTP

• SFTP / FTPS

• Amazon S3

Publishing your site is an exciting moment: you’ll be able to enter a website address into Safari and see the fruits of your work.

Depending on who your hosting provider is, you may need to tweak a few options in Elements before you publish your website. This is entirely normal and is simply due to web hosts having different requirements when publishing your site.

Most importantly, you’ll need to remember that the details you enter into Elements are supplied by your hosting provider, not Realmac Software. Many hosting providers will require you to use publishing details that differ from any details you may use to access their control panel in a web browser. While this may be frustrating, it’s designed to keep your private information safe. If you are at all unsure about what to enter into Elements, drop your hosting provider an email, and they’ll be able to advise you.

Elements Website Hosting

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. .

How to fix Publishing Issues

If you're having issues publishing your website, please follow our in-depth , if followed carefully, we often find it fixes 99% of publising issues!

Easily enhance the visual appeal of elements in your website by applying effects like box shadow and opacity. These effects can help create depth, highlight key elements, and adjust the transparency of components, giving your site a modern, polished look.

Type

Specify if the component has effects enabled or disabled. The Hover effect works in conjuction with Transitions.

Hover Over

If you set the Type to Hover, you can specify which element should be hovered over to trigger the transition.

*Custom ID Note

When using a Custom ID to trigger a transition, make sure the parent element has a class name in the format group/{customID}.

If the parent element is a Container, Grid, or Flex component, you can simply enter the custom ID into the Advanced → ID field. Elements will automatically apply the correct class name for you.

However, if you’re using a different component—or have built a custom one—you’ll need to manually ensure the appropriate class name (group/{customID}) is applied to that element.

Note: You do not need to include the group/ prefix when entering your ID. Just enter the raw ID in the ID field, and Elements will handle the rest.

Box Shadow

Apply a box shadow to the Component.

Opacity

Set an opacity for the component.

Effects UI in Elements

Components are the raw building blocks for page design in Elements. Let's take a look at the different types of Components available.

Built-in Components

Elements ships with a comprehensive range of Components that allow you to put together an entire website. They include everything from Headings, Images, Galleries, and layout tools, like Grid and Flex.

Custom Components

If you know a bit of HTML you can create your own custom Components for use in your projects. These can be anything from a simple html snippet to a fully blown Component using the , with custom UI controls. .

Custom Components can only be shared via projects, the code is open and visible to anyone with that project. They are perfect for creating bespoke solutions for your project(s), or getting familiar with the before you migrate to building components like those built into Elements.

Third-party Components

Third-party developers can use the to create full-blown Components that are on a par with the built-in Components — Yes, we use exactly the same API that is available to all users.

Third-party components will be distributed via the RapidWeaver as Element Packs (.elementspack). These packs are shipped as highly optimised, encrypted bundles. The code cannot be modified or edited by users or third parties (exactly like the built-in Components).

The Transitions settings apply to the Filter, Effect, and Transform sections on the same Component. Transition settings contol the the timing, animation curve and delay when transitioning (or animating) an object between two states.

Apply to

The Apply to dropdown allows you to specify the values of a component the transition will apply to. In most cases you'll want this set to "All".

• All - Apply a transition to all values.

• None - Don't apply a transtion (similar to seeing the duration value to 0).

• Most Common - Applies transitions to color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter.

• Colours - Only apply transition to colours.

• Opacity - Only apply transition to the opacity.

• Shadows - Only apply transition to the shadows.

• Transforms - Only apply transition to the Transform values.

Function

In CSS animations, the terms Linear, Ease In, Ease Out, and Ease-in-out refer to different types of timing functions that control the speed of an animation over time.

• Custom -

• Linear - The animation progresses at a constant speed from start to finish.

• Ease In - The animation starts slowly and then speeds up as it progresses.

Custom Timing Functions

The x1, y1, x2, and y2 values used to create custom timing functions using a cubic-bezier() curve for animations.

The cubic-bezier curve essentially determines the rate of change over time of the animation. It allows you to create custom easing effects that can behave in ways that predefined ones like linear, ease-in, ease-out, or ease-in-out cannot.

x1, x2: Control the horizontal axis, which represents time. These values must be between 0 and 1, where 0 is the start of the animation and 1 is the end.

y1, y2: Control the vertical axis, which represents the progress of the animation (i.e., how far along the element is in its transformation or movement). These values can go below 0 or above 1 to create exaggerated effects.

Example Animation Curves

The following animation starts very quickly, with almost no easing at the beginning, very fast through the middle section and ends abruptly. These values are the default values for the custom timing control.

The following animation accelerates towards the end point, overshoots the final position, and comes back to settle into its final state.

There are tools online like that let you visually manipulate and experiment with the cubic-bezier function to create custom easing effects, where you can adjust the control points and immediately see the animation effect on a graph.

Duration

Set the duration for the transition animation in milliseconds, for example setting a value of 500, would result in the transition taking 0.5 seconds to complete. Setting the value to 1,000 would make the transition taking 1 second to complete.

Delay

Set the delay of the transition start in milliseconds, for example setting a value of 500, would result in a delay of 0.5 seconds before the animation will start. Setting the value to 1,000 would set a delay of 1 second before the animation starts.

Transitions UI in Elements

The Container Element serves as a wrapper or holder for other elements. It is commonly used to group and organise related content. The Container Element can be used to apply spacing or create space around elements.

Layout Group

Margin

The Margin allows you to set the margin on all sides of the container. You can adjust the left and right margins to set the spacing as follows:

• Align Center, set the let and right margin to "Auto"

• Align Left, set the left and right margin to "0"

• Align Right, set the left margin to "0" and the right margin to "auto"

Padding

Apply padding independently to each side of the element.

Advanced Group

Visible

Visually show and hide the element. Please note the element will still be visible in the html, but not visible on the page.

CSS Classes

Add custom (and Tailwind) classes directly to this element. For example, we can apply a blur to everything within the container by writing blur-sm into the CSS Classes field. See the for available classes.

You can browse all the available Tailwind classes over in the .

Clip Content

Clip content that overflows this Element.

Google Maps API (Required)

To use the Maps component in Elements you need a . It only takes a few minutes to set up. The quickest way to get setup is to watch the video and follow the instructions below.

1. Create or sign in to your Google account

and sign in. If you have not used Google Cloud before, it will prompt you to create a new project.

2. Create a new project

1. Open the project selector at the top of the page

2. Click New Project

3. Give it a name, then create it

3. Enable the Maps JavaScript API & Geocoding API

1. With your new project selected, open the left sidebar

2. Go to APIs and Services

3. Click Enable APIs and Services

4. Search for Maps JavaScript API & Geocoding API

4. Generate your API key

1. In APIs and Services, go to Credentials

2. Click Create Credentials

3. Choose API key

4. Copy the key that appears

5. Restrict your key

For security, set restrictions so the key can only be used from your website.

1. In the Credentials list, click your new key

2. Under Application Restrictions select Websites

3. Add the domains where your site will run

4. Save your changes

6. Add the key to Elements

Open the Google Map component in Elements and paste the key into the API Key field. Once added, your map will load correctly during preview and when published.

Testing locally on Your Mac

When working locally, you need to add referrers so your Google Maps API key works in both Elements preview and on your published site.

Add your live domain with two referrers:

https://www.mydomain.com/ https://www.mydomain.com/*

To support local preview, first open the Elements Advanced settings and set a fixed preview port so it stays consistent.

Add that URL as another two referrers in the Google console. For example:

http://127.0.0.1:61109 http://127.0.0.1:61109/*

Below are example settings for the API Key:

Creating a Custom Theme

You can create fully custom themes using the built-in Element DevTools. Define your colour system, typography scale, spacing, and build a proper design foundation that can be reused across projects.

Click the plus button in the theme list to create a new theme, and enter in the required details for your theme. A icon is not required and can be added later via the Finder.

Please Note: Before you can create a Theme, you'll need to first create a Dev Pack to save it into.

Dev Diary Videos for Themes

The following video will show you how themes work in Elements. The video was recorded with a development version of Elements so the feature(s) available now may differ slightly to those in the video.

If you're using Fastmail, you’ll need to use an App Specific Password in your Elements Form Settings.

Steps on how to set that up in Fastmail are below:

Go to your Settings in Fastmail:

Click on New App Password:

Choose Custom from the first drop down and give it a name, then select SMTP from the second drop down, then select Generate password.

Copy that new password to your Elements Form Settings >> Password field.

Enter your details, along with the app specific password into the Elements Form component:

Publish your site to test your contact form is working. if you run into any problems please feel free to post over on the for further help.

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.

Quick take

Choose RapidWeaver Elements if you want:

Every Elements Cloud account comes with 1GB of free cloud storage. An active license is required for continued use of Elements Cloud. You can sign-up in-app.

Elements Cloud gives every user a simple, reliable place to store purchased products, back up their projects, and share them when needed.

Below are instructions on for a free account, and .

The Node Browser allows you to see and manage the entire structure of your page, this is esecially useful for intricate designs, and larger more complex pages.

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.

Forum Threads

If you know a bit of HTML you can create your own custom Components for use in your projects. These can be anything from a simple html snippet to a fully blown Component with custom UI controls taking full advantage of the.

Elements gives you full control over the essential SEO tools and metadata needed to help your site get discovered.

You can define semantic HTML tags for structural elements (such as <header>, <section>, <article>, and more), and set appropriate heading levels (<h1>, <h2>, <p>, etc.) for text content. Image alt text is fully supported, ensuring accessibility and better indexing by search engines.

Elements automatically generates an XML sitemap for your project, and includes a dedicated Metadata panel for setting per-page titles, descriptions, and common Open Graph tags for social sharing.

For advanced users, Elements also provides direct access to the raw HTML template—perfect for inserting custom SEO tags or scripts not available through the UI.

Font families define the overall personality of your site, and Elements gives you three straightforward ways to configure them. You can stick with fast, reliable system fonts, load your own custom font files, or pull from Google Fonts.

This page walks you through each option, how they differ, and when to use them so you can get the look you want without any headaches.

Using System Fonts

Webfonts were great when most computers only had a handful of good fonts pre-installed. Thanks to font creation and buying by Apple, Microsoft, Google, and other folks, most computers have good—no, great—fonts installed, and they're a great option if you want to

Website resources include anything from image files to PDFs and folders. All of your resources can be managed right inside RapidWeaver Elements.

While each component has a set of unique controls, we've designed them so many of the components also share a set of common controls.

For beginners or users new to Elements, shared or common controls reduce the learning curve significantly. Instead of needing to master a different set of controls for each component, they can focus on understanding a core set of common settings that apply across the board.

By learning these shared controls, you only need to understand how to use a specific set of controls once, which can then be applied across various components. With common controls across multiple components, making changes becomes faster. You'll be able adjust the same properties (like padding, margin, colors, effects, or typography) across different components without having to search for or relearn where those settings are.