RapidWeaver Elements comes equipped with a powerful built-in WYSIWYG (What You See Is What You Get) editor that allows you to create and refine your website visually, in real time. Whether you’re a seasoned web designer with years of experience or someone just starting out, you’ll feel right at home with its intuitive interface.

The WYSIWYG editor in Elements is designed to be both versatile and accessible. For professionals, it provides the flexibility and precision needed to bring detailed designs to life quickly. You’ll find that you can tweak your layout, typography, and styling on the fly, with results that reflect exactly how your site will appear when published.

If you’re a newcomer, Elements ensures you’re never overwhelmed. Its streamlined editing experience allows you to build and customize your website with ease, using familiar tools and controls. You can see changes as you make them, eliminating the guesswork and making the process enjoyable and straightforward.

With this editor, you can focus more on creativity and less on code. But when you do need to dive into the code, Elements has you covered with seamless integration between the WYSIWYG interface and custom HTML or CSS edits.

In short, RapidWeaver Elements’ WYSIWYG editor strikes the perfect balance between simplicity and power, making it an essential tool for anyone looking to create beautiful, functional websites efficiently.

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.

RapidWeaver Elements (aka Elements) is designed to cater to 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 build 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 Quickstart Guide will help you get started building your first website. Fast!

Get More from Elements.

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

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.

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 new file inside of your project, right click inside of 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 new Markdown File with option front matter, right click inside of the Page Manager and choose "New Markdown File".

Folders

Folders are a great way to organize site content when you don't need a top level page. Folders 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.

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.

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.

Inspector 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 to switch back to the default mode, this will then allow you to view multiple setting at the same time again.

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, Surface, and Text.

• For the dominant colour of your website we recommend using the Brand colour from the Theme Studio.

• For Elements like Buttons, colour fill on Icons, Dividers, we recommend using Accent colour from the Theme Studio.

• For Background colours we recommend using the Surface colour from the Theme Studio.

• For Text colours we recommend using the Text colour from the Theme Studio.

Changing Colours based on Mode

Every colour in Elements supports Dark and Light Mode, this means you can change the colour of text, backgrounds, buttons, borders, and more, all based on the users system settings.

By default when you set a colour it's set for Light Mode. To set an alternative colour for Dark mode, you need to press the Dark/Light Mode toggle button at the top of the editor.

Page Background Colour

The colour for your website background can be set for both Light and Dark mode in the Theme Studio under Page. You can also override the colour on a per page basis by using the page inspector in the main editor.

Disabling Dark Mode

If you don't want dark mode on your website, you can switch this off in the Project Settings. Please note, this will hide the UI option to toggle between dark and light mode, and only preview and export the light mode version of your website.

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.

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.

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.

• Typography: For text, use the predefined roles: Heading, Body, Code, and Quote. These are designed to work harmoniously and adjust automatically when you change your theme.

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.

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.

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 wesbites 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 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 Elements API, with custom UI controls. Learn more about Custom Components.

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 Elements API before you migrate to building components like those built into Elements.

Third-party Components

Third-party developers can use the Elements API 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 Elements Distribution Platform as Element Packs (.elementspack). These packs are shipped as highly optimized, encrypted bundles. The code cannot be modified or edited by users or third parties (exactly like the built-in Components).

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

• Make sure iCloud Drive is enabled on both Macs.

• Store your .elements project file inside your iCloud Drive folder.

• Wait for the project to finish syncing before opening it on another machine.

Supported Sync Services

• ✅ iCloud Drive

• ❌ Google Drive

• ❌ Dropbox

Avoid opening the same project on both Macs at the same time. Always allow iCloud to finish syncing before making changes.

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.

An Introduction to the Elements Interface

While the following video doesn’t cover every feature available in Elements, it offers a clear, high-level overview of the app’s layout and workflow. You’ll get a feel for how to add components to a page, how the editing interface is organized, and how to start building a website.

Think of this video as a quick tour to help you get comfortable with the basics. Once you’ve watched it, you’ll be ready to dive deeper and explore all the powerful options Elements has to offer.

Ready-Made Projects to Explore and Use

Elements has a large selection of free ready-made projects to choose from that are perfect for getting your website up and running quickly. Whether you want to launch something fast or learn by exploring how others have built their pages, these Projects are a great way to dive in and get inspired.

Optimise Media before import into Elements

It’s always a good idea to prepare and optimize your media for the web before importing it, especially large files like videos, audio, and high-res images. Uncompressed or oversized files can quickly inflate your project size and slow things down, both in the app and for your site visitors.

In general, we'd recommend:

• Compressing images using tools like Squash, TinyPNG or ImageOptim.

• Optimizing videos for the web using formats like MP4 (H.264) and reducing resolution/bitrate where possible.

• Hosting larger files externally (videos, audio, PDFs, etc.) and linking to them using URLs. That keeps your project lightweight and more manageable in the long run.

Need Website Hosting?

Elements works with almost any host, but if you’re still deciding on a hosting provider, and are looking for a company that knows Elements, then we recommend Chillidog Hosting. They are the official hosting partner of Realmac Software. Every aspect of Chillidog’s hosting is built to ensure absolute compatibility with Elements, the friendly support staff at Chillidog are all familiar with Elements.

Best of all, we have worked closely to ensure you can set up your publishing details inside of Elements with a single click from your Chillidog dashboard!

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.

Templates vs Globals in Elements

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.

• No matter how much (or how little) you customise it, it’s not linked to the original anymore.

• Changing the original template (from a Template Pack) will not affect anything you’ve already added to your site.

• You’re free to modify it as much or as little as you want, once the template is dropped into your site think of it as a copy, not a link!

Want content to stay in sync across pages? That’s where Globals come in!

• Globals are like master elements: place them on multiple pages and update in one place—the change is mirrored everywhere. Perfect for headers, footers, banners, and other repeat content.

• You can even override certain aspects of a Global on a single page if you want a little variation.

Supported Components

Templates can support many types of components, including:

• Built-in Components

• Third-party Components

• Custom Components

• Globals

• Resources (as part of the components)

How to create Templates in a Project

To create a Template, drag a collection of Components from the Editor or Node Browser into the Project Templates area.

You can right-click on a Template to re-name it, or create a new folder for organisation.

How to create Templates to share across Projects

To build a Template Pack that is available in all projects and distributable on the Elements Store you'll need to create a new Dev Pack. This can be done from the Addons tab in the app Settings window.

You can learn more about creating Template Packs in the Elements Language section of the manual.

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

Adding Resources

Open the resources list in the left-hand sidebar, and drag and drop in files (and folders), from the Finder. The structure and naming of your files will be the same in-app and when it's exported to the finder.

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

Supported File Types

Elements supports adding all files types (including Folders) to the resources browser. However, some file types have extra support.

• Images - png, svg, jpg, etc.

• Fonts - WOFF, WOFF2, TTF

• YouTube URL - Single video's and playlists

• Vimeo URL - Single video's and playlists

Websafe Resource Naming

When Publishing, Elements will lowercase all resource filenames and ensure they are websafe by swapping out foreign characters and spaces with an underscore. For example:

• my~file.png would become my_file.png.

• my file has spaces.png would become my_file_has_spaces.png.

• myFile.png would become myfile.png.

Many web servers (Linux/Unix based) treat File.jpg and file.jpg as two different files. However, on Windows or macOS (i.e. Elements), the filesystem often isn’t case-sensitive, so it looks fine locally, but when uploaded, it can cause broken links and 404 errors.

By using lowercase files, you’ll ensure they will ALWAYS work on different environments (Windows, Linux, macOS), this could be very important depending on the hosting platform you have chosen.

Adding YouTube and Vimeo Videos

You can add YouTube or Vimeo videos by dragging and dropping the URL from your web browser to the Resources area in RapidWeaver Elements. A playlist URL can also be dropped into the resources area.

YouTube and Vimeo videos are not downloaded and store in Elements, the URL to video(s) is stored and saved.

Adding Custom Fonts

Add your font files to the resources area in Elements, and use the media inspector to define a weight (and width if required) for each of the font files. These fonts work in conjunction with .

Editing Metadata

To inspect a file, the Resource Info panel needs to be visible. This panel (or window) can be left open while you browse through files in the Resources area.

• Filename (All file types)

• Caption (images)

• Author (images)

Creating Folders

Right-click in the Resources area and select the "New Folder" option from the contextual menu.

Adding Remote Resources

Right-click in the Resources area and select "Add Remote Resource" from the contextual menu.

You can add single or multiple remote url's at a time, just ensure each remote resource is on a new line.

Sorting Resources

Resources are always manually sorted. However, you can run a one-time sort action to quickly arrange them in a chosen order. To do this, right-click on a Folder in the Resources area and choose a Sort option from the contextual menu. The sort will be applied to the current items in that Folder, but any new items you add (or items you move) will not stay automatically sorted.

Folder Sorting Options:

• A-Z (Ascending)

• Z-A (Descending)

• Newest First

• Oldest First

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 an easy way to backup and share projects.

Below are instructions on for a free account, and .

Account Sign-Up

You can sign-up (or sign-in) to your account in the Account Preferences within Elements. Simply enter your email address and click the "Send Sign-in Link" button. An account will be created for you, or you will be logged in (if you already have an account).

A link will be sent to the email address you entered, click this email link within 3 minutes to register or log in to your account.

Once logged in you can share your open project from the Cloud icon in the Elements Toolbar. You can always manage uploaded files and storage from the Account Preferecnes window.

Every Elements Cloud account comes with 1GB of free cloud storage. This is the perfect place to make backups and upload files for sharing.

Sharing Projects

Once you can share your open project from the Cloud icon in the Elements Toolbar.

To upload your project to Elements Cloud, just follow these steps:

1. Open your project in Elements.

2. Click the "Cloud" share button in the top-left corner.

3. Press the "Upload Project" button in the pop-over window.

4. Once it's finished uploading you'll be able to share the link to your project.

Converting an Elements App link to a direct download

To generate a direct download link from an Elements App link, simply append the unique identifier from the original link to the elementsapp.cloud URL.

• Elements App Link:

• Direct Download Link:

Troubleshooting

A troubleshooting guide for Elements Cloud Issues.

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.

Adding a simple HTML snippet

One of the easiest ways get started using Custom Components is by adding a custom HTML snippet to your page.

Creating a Custom Component

Creating a Custom Component in Elements is the easiest and fastest way to get started with exploring the . Custom Components can eaily be migrated to distributable Element Pack at a later date.

A few things to note before you get started:

1. No external code editor is required, you can build everything inside of RapidWeaver Elements.

2. Custom Components are stored in the project they were created in.

3. Custom Components have full access to the Elements Language (although they cannot include extra files like an external Element Pack can).

4. To ensure compatibility with Elements you should use Tailwind CSS classes when writing your Template HTML.

5. Custom Components can easily be converted into an encrypted component and shared or sold on the Elements Marketplace.

Let's get Started:

Adding Editable Content Areas

Using the following tags enable editable areas with the page. No setup of configuration in the properties file is required.

Replace any text in the html template to make it editable within the page.

Here's a real world example of using the code to make the a heading editable.

You can also set a default value for an editable text areas, so that when your custom component is dropped into a page it will be populated with a defulat value. In the example below, it would be "Hello World!".

A dropzones is an area within an HTML template where existing component can be added.

Can also be written like this.

You can also add a title for the Dropzone, this will be shown in the Node Browser.

Going Further with the Elements API

Using the above tags inside of Custom Components only scratch the surface of what's possible, you can also use the inside of your Custom Components.

If you're a developer you can take things even further by creating distributable (and sellable) Element Packs for RapidWeaver Elements.

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

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.

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.

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.

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.

Magic link format

Example link

Options The available options are as follows

• method: SFTP, FTP, FTPS

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

• path: Publishing path

• username: Username

• website: Website address of published content

Please note that Password is not supported for security reasons.

With Elements’ flexible licensing options; Base, Plus, and Pro 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.

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 email [email protected].

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 WAVE, 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 WCAG 2.1 Level AA compliance

• If you sell products or services in the EU, ensure you comply with the European Accessibility Act (EAA).

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.

md, markdown, txt, yaml, yml, toml, json, css, scss, sass, less, js, mjs, ts, jsx, tsx, map, log, lock, png, jpg, jpeg, gif, svg, webp, ico, xml, rss, atom, csv, pdf, zip

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.

The Image Slider component lets you showcase multiple images in a sleek, swipeable carousel. It’s perfect for galleries, product shots, logos, or any images that benefits from a visual slideshow.

It works beautifully on all screen sizes, with touch and swipe support built in. Choose from simple controls like arrows and dots, or let it autoplay for a hands-off experience.

Whether you’re highlighting your work or telling a visual story, the Image Slider makes it look great.

Please carefully read and understand the following terms and conditions before using or subscribing to the RapidWeaver Elements Cloud Service. These Terms constitute a legally binding agreement between you, the "Subscriber" and Realmac Software the "Provider".

User Agreement for Elements Cloud

1. Service Overview elementsapp.cloud is a cloud storage service specifically designed for use with RapidWeaver Elements. By using this service, you agree to the terms outlined below.

2. Data Storage You can upload, store, and manage your RapidWeaver Element projects on elementsapp.cloud. We recommend regularly backing up your projects locally as we are not responsible for any data loss. Your data is stored securly on Amazon S3 servers.

3. Fair Usage Limits We ask that you use the service reasonably and within the typical range for RapidWeaver Element projects. If your usage significantly exceeds the average for your plan, we may contact you to discuss appropriate adjustments or offer a plan upgrade. In cases of extreme overuse, we may temporarily restrict your ability to upload new files until the issue is resolved.

4. Content Ownership You retain ownership of all projects and content you upload to elementsapp.cloud. By storing content on elementsapp.cloud, you grant us the right to view, store, display, and manage your files as necessary to provide the service and support.

5. Prohibited Activities You agree not to use elementsapp.cloud to store or share illegal content or engage in any activities that violate applicable laws or regulations.

6. Service Availability While we strive to keep elementsapp.cloud available at all times, we cannot guarantee uninterrupted service. We may perform maintenance that could temporarily affect access to the service.

7. Termination You may terminate your account at any time. We reserve the right to terminate or suspend your account if you violate any of these terms or for any other reason deemed necessary.

8. Changes to Terms We may update these terms from time to time. Your continued use of the service constitutes acceptance of the updated terms.

By using or subscribing to the RapidWeaver Elements Cloud Service, the Subscriber indicates their understanding and acceptance of these Terms and agrees to be bound by them. It is recommended to review these Terms periodically for any updates or changes.

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.

Search/Filter Components

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

Right-Click Options

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

Keyboard Shortcuts

As well as drag and drop, you can also use Keyboard Shortcuts to move Elements in the Node tree. Watch the video below to learn more about this advanced feature:

The following is a list of keyboard shortcuts for moving nodes within the Node Browser and Editor.

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 video's below to learn more about importing Classic Projects to Elements.

Importing a Classic Project

To import a RapidWeaver Classic Project, launch Elements and choose File > [Beta] Import Classic Project… from the menu.

Project Structure

Elements will import all important site information including:

• All Pages (file name, browser title, page name, folder names, etc)

• Page level scripts

• Meta information

• SEO Information

• Robot tags

• Site Settings (Name, site URL, and logo)

• Fav Icons

• Resources (Including Stack page resources)

• Publishing Destinations

Styled Text Page

The text content from Styled Text Pages will be placed into a Typography Component, and any images placed into Image Components.

HTML and Markdown Pages

These pages will be converted into code pages.

Photo Album Page

Elements will import photos from each Photo Album page and place them into a folder in the resources area, along with creating a page with a Photo gallery component.

Stack Plugin Pages

Elements will import Stack pages, and will do it's best to preserve the content from popular stacks and frameworks. However, please remember the importer is for importing content, it will not style any of the imported content or page.

Stack Resources

Elements will import all Stack Page Resources, it will then optimise the resources by de-duping files to ensure your Elements project and new site is smaller and faster!

Supported stack Content

Elements currently imports the raw text and image content from a pre-determined list stacks, they are imported with minimal properties (i.e. no colours, or links, etc…).

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

Built-in Stacks

• Text > Text

• Markdown > Text

• HTML > Text

• Header > Text

• Quote > Text

• Image & Site Image > Image

• Button > Button

• Column stacks will be converted into the Grid Component and use the corresponding number of columns.

Foundry 2

• Button > Button

• Container > Container

• Vertical Center > Container

• Header > Text

• Header Plus > Text

• Paragraph > Typography

• Grid Content > Grid

• Image > Image

• Banner > Container

• Margins > Container

Foundry 3

• Container > Container

• Columns Grid

• Col > Container

• Header > Text

• Paragraph > Typography

• Image > Image

Foundation 6

• Container > Container

• Column stacks > Grid

• Grid stacks > Grid

• Header > Text

• Header Pro > Text

• Text > Text

• Quote > Text

• Label > Text

• Code > Text

• Picture > Image

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.

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:

• Global control: Update your colour palette in the Theme Studio once, and the changes flow throughout your entire site. You don’t need to hunt down individual elements to update their styles.

• Consistency: Components, layouts, and templates are all built with these theme colours in mind. That means your site will look balanced and professional without you needing to fine-tune every detail.

• Flexibility: If you decide to refresh your design later, simply adjust your theme colours. The update will apply instantly, making it quick to rebrand or experiment with new looks.

• Compatibility: When you add new templates or components, they’ll automatically inherit your theme colours, so everything feels cohesive from the start.

For best results, avoid using custom colours. Instead, use Brand, Accent, Surface, and Text where possible. This way, your design remains easy to manage, flexible to update, and consistent across the entire project.

Theme Colour Roles

• Brand

  Use this as your primary identity colour. It’s often the colour from your logo or the one most associated with your brand. Common uses include buttons, navigation highlights, and key interactive elements.

• Accent

  This is your secondary highlight colour. It’s best used sparingly to draw attention or provide contrast. Examples include links, badges, icons, or subtle hover states.

• Surface

  The foundation of your design. Surface colours are used for backgrounds, cards, panels, and containers. They provide structure and help separate sections of your site. Surfaces often have light and dark variants for depth.

• Text

  Reserved for all typography, from body copy to headings. Text colours should maintain strong contrast against your surface colours for readability. The Theme Studio manages light and dark variations automatically.

Set the title of your website, along with the web address.

Disabling Dark Mode.

You can disable Dark mode if it's not required on your website, by toggling the "Allow Dark Mode" switch.

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.

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.

Recommended Website Hosting

Elements works with almost any host, but if you’re still deciding on a hosting provider, and are looking for a company that knows Elements, then we recommend Chillidog Hosting. They are the official hosting partner of Realmac Software. Every aspect of Chillidog’s hosting is built to ensure absolute compatibility with Elements, the friendly support staff at Chillidog are all familiar with Elements.

How to fix Publishing Issues

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

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.

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.

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.

Example:

rounded-lg shadow-lg bg-gray-100

You can use any valid Tailwind utility class to adjust spacing, colors, borders, or animations.

ID

This text field is useful for applying a custom name to a component. For example:

about-section

The ID name of the component will then appear in the Link window enabling you to easily create Anchors, watch the video below to learn more about how to use this feature.

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.

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.

If you group multiple Accordions together, you can enable a setting that allows only one Accordion to be open at a time — perfect for keeping your layouts clean and focused.

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.

If you're reviewing Elements for a publication you'll find all the information you need below.

If you have any questions please email [email protected]

Element Assets

A collection of links to useful resources:

Element Links

A collection of useful links:

• Elements Community Forum

• YouTube Channel

• Elements Video Tutorials

• Elements User Guide

• Elements API Docs

• Elements CMS Docs

Modals are a great way to display additional content without taking visitors away from the current page. They’re perfect for things like forms, galleries, announcements, or anything that needs a little more focus.

In Elements, modals are easy to set up and fully customisable, you can trigger them from buttons, links, or other interactive components. When opened, the modal appears above your content with a subtle background overlay, helping draw attention to what matters.

Whether you’re collecting signups or showcasing a product feature, the Modal component gives you a clean, accessible way to do it.

Modal Close Component

The Modal Close component is used to close an open modal, simple as that!

It can be added anywhere inside your modal content, and is most commonly used as a button or icon in the top-right corner. You can fully style it to match your design, and even add multiple close buttons if needed (handy for “Cancel” actions at the bottom of a form, for example).

When clicked, it seamlessly hides the modal and returns the user to the main content, no extra setup required.

Elements supports the following Favicons:

• iPhone Retina

• iPad Retina

• iPad

• Safari Pinned Tab (SVG, plus colour)

• Classic Favicon (64, 32, and 16)

Further Reading

The topic of favicons has proven to be more exhaustive than anyone could have ever wished. The following article shows how to support just the essentials (and keep yourself sane) while doing it.

• How to Favicon in 2025: Three files that fit most needs.

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, , , , and , 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

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

Components

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.

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.

You can learn more about .

Globals

(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 so you only need to update the content in one place and have it automagically mirrored to all other instances of that global. For example, this can be very 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 .

In short:

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

• Use Templates when you want a pre-built sections.

• Use Globals to control site-wide, linked components or layouts (perfect for Navigation and Footer)

Design System

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.

Built on Tailwind and AlpineJS

Elements is built upon the popular , along with , which makes it a piece of cake to build modern responsive websites. By standardising on the framework used inside Elements, we ensure third-party components work great with every website you build.

Real-time CSS Generation

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.

Learn More About Tailwind

Choose between font name, font resources, and Google fonts.

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 not load a separate font.

Learn more about what fonts are supported by popular operating systems on the following sites:

Using Custom Fonts

Elements includes a built-in Font Manager that lets you add your own local web fonts. It supports common formats like .woff, .woff2, and .ttf, making it easy to use custom typography in your designs.

For best browser support and performance, custom fonts should be provided in WOFF2 format. WOFF (the Web Open Font Format) is a web font format developed by Mozilla, Type Supply, LettError, and other organizations.

Recommended formats (in order of preference):

1. WOFF2 – Most modern and efficient format (used by all modern browsers).

2. WOFF - Good option when also supporting older browsers.

3. TTF - Mostly for legacy or specific use cases (not recommended for production due to larger size and weaker compression).

Adding Custom Fonts

Add your font files to the resources area in Elements, use the media inspector to define a weight (and width if required) for each of the font files.

Add a new Custom Font in the Theme Studio, give it a name, and set the Kind to "Font Resources"

Next, drag each font file individually from the resources area of your website into the theme studio window.

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 link property allows you to link to a page, resource or extrenal website. Elements will keep track and update all internally linked pages and resources.

Link Panel

You can envoke the link panel on most components and inline text areas. Add a link click the "Choose Link…" button in the inspector. To clear a link click the "x" icon to the right hand side of the link button.

Custom Attributes

Custom attributes in an link (anchor tag) provide additional information about how the link behaves, where it directs, and how it interacts with other elements or the browser. Here's a selection of example custom attributes.

Linking to an Anchor

1. You first need to add an ID to the component that will serve as your anchor. The ID can be found in the Advanced section in the settings for the selected component.

2. Then where you want to create your link in the text. Select the text, which will display the inline text

   • Click the LINK button in the inline text editor to open the link dialog.

   • If your anchor is on the same page, choose the page from the dropdown next to the link field.

   • This will display all available anchors in the Anchor popup.

   • Select the desired anchor, and you're done.

Overview

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

How to Use the Background Component

You’ll find the Background component under the Layout section in the Components list. It includes a single drop zone where you can add the content you want to sit above the background — like text, images, or other components.

You can choose a solid color, add an image, or enable angled backgrounds for more dynamic designs. If needed, you can also fix the background in place for a parallax scrolling effect. Adjust the color, opacity, and style settings to match your site’s design perfectly.

When to Use Background Instead of Container

While you can use a Container to group and layout content with padding, width control, and background color, the Background component is designed specifically for more advanced visual effects.

Unlike a Container, the Background component gives you the ability to add fixed background images (for a parallax-style scrolling effect) and angled edges to create dynamic section transitions. If you need a background that moves independently from your content or you want to add stylish slanted dividers, the Background component is the better choice.

Use a Container when you need flexibility for simple layouts, but choose a Background when you want to add extra visual flair to your designs.

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.

For all pages (site-wide tracking)

To include your tracking code on every page of your site:

1. Open the Site Settings window.

2. Select the Template section.

3. Paste your code into either:

   • Between the <head> tags for anything that belongs in the <head>, such as Google Analytics or similar.

   • Between the after the opening <body> tag for things like Google Tag Manager’s <noscript> block.

This ensures your tracking code is included automatically across every page.

For individual pages

If you only want to add tracking code to a specific page:

1. Select the page in the sidebar.

2. Click the Edit Extra Code button in the page Inspector

3. Choose the correct code area from the list on the left (e.g. Head Start, Body Start).

4. Paste your code snippet in the appropriate section.

The code will only be included on that specific page when you publish or preview your site.

Feel free to use the provided artwork to help promote Elements in blogs, articles, or to your clients, customers, and friends.

Elements Logotype

The Logotype and Icon Mark for Elements was designed by .

Full Logotype

Icon Mark

Animated Logo

The animated Elements logo was produced by .

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 .

Style

The Style control allows you to choose between three distict border styles, solid, dashed, and dotted.

Colour and Opacity

Define a colour and oppacity for the border. Colour swatches are defined in the Theme Studio.

Width

The Width property controls the thickness of the border. Width can be set for all four sides of an element—top, right, bottom, and left—or individually for each side. A custom pixel value can also be set.

Radius

The Radius property controls the roundness of the border. Radius can be set for all four sides of an element—top, right, bottom, and left—or individually for each side. A custom pixel value can also be set.

Border UI in Elements

The Image component in Elements allows you to easily add and display images (in JPG or PNG formats) on your website. This versatile component supports a wide range of customization options, making it ideal for showcasing visuals in a clean, responsive, and accessible way.

Supported Image Types

• JPG

• PNG

The Image Component does not support SVG's, instead you should use the .

Lightbox

A simple Lightbox feature can be enabled under the Lightbox setting in the Image Component.

Image Protection

Basic image protection can be applied using the Image Protection option under the Image properties.

A short note about Why “Image Protection” Isn’t Foolproof on the Web

It’s a common request: protect images on a website from being downloaded or copied. While blocking right-click can deter casual users, it’s important to understand that it doesn’t truly secure your images. Web browsers inherently download all page assets—including images—so they can display them. This means anyone with basic knowledge of developer tools or access to the browser’s cache can still retrieve your images.

Instead of relying on “image protection,” consider watermarking your images or ensuring they’re resized and optimized for the web. This approach makes them less valuable for unauthorized use while still serving their purpose on your site.

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 .

Filters

• Blur - Applies a blur to the contents of the object. Vvalue is set in pixels.

• Brightness - Darken or lighten the image, value is set in percent, 100 is the default value.

• Sturate - Asjust the colour saturation, 0 is greyscale, 100 is the default.

• Drop Shadow - Apply a drop shadow from the theme studio.

Backdrop Filters

• Blur - Applies a blur effect to the content behind the element, rather than the element itself. It creates a frosted glass-like effect, which is commonly used in modern web design to maintain focus on the content in the foreground while still giving a glimpse of what’s behind. To see this effect, ensure your component has a completely transparent background or semi-transparent background colour.

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

Elements is a native macOS application built using Objective-C and Swift, it also uses the following Frameworks:

• , utility-first CSS framework for rapidly building modern websites.

• (Business License), industry standard JavaScript animation library.

• , a modern, lightweight, JavaScript framework.

• , completely customisable framework for building rich text editors.

• , that helps quickly write simple yet powerful web applications and APIs.

• , popular email sending library for PHP.

• , framework for converting minimally marked-up plain text.

• , an open-source code editor framework from Microsoft.

• , update framework for macOS applications.

• , we include a subset of within Elements.

Feel free to use the provided icons to help promote Elements in blogs, articles, or to your clients, customers, and friends.

macOS Icon

The main app icon for , designed by .

Component Icon

The single Component icon is not currently used within Elements, but can be used for marketing purposes. Designed by .

Element Pack Icon

The Element Pack icon is used for encrypted Element packs for distribution to customers via the Elements marketplace. Designed by .

DevElement Pack Icon

The DevElement is used for unencrypted Element packs while they are in development. Designed by .

Details comign soon.

How to create a traditional "Sticky" menu

The “Sticky” option under Layout > Position applies the CSS property position: sticky. However, it might not behave as intuitively as expected.

Simply setting Position to “Sticky” won’t automatically make your navbar stick to the top of the page. Here’s how to achieve that effect:

Option 1: Sticky Positioning

1. Set Position to “Sticky”

2. Choose Type as “Individual”

3. Set Top to 0

Option 2: Fixed Positioning

1. Set Position to “Fixed”

2. Choose Type as “Individual”

3. Set Top to 0

Understanding the Difference: Sticky vs. Fixed

• Sticky Positioning: The element with position: sticky will stay in place only after it has been scrolled to a specific point (e.g., Top set to 0). It combines characteristics of relative and fixed positioning, meaning it will move along with the page until it reaches the set position, where it then “sticks.” However, it requires a defined space around it to work effectively, so if the element’s container is too small or constrained, sticky positioning may not work as expected.

• Fixed Positioning: The element with position: fixed is completely removed from the document flow and will stay at a set position on the screen, regardless of scrolling. It is always visible at the specified position (e.g., top of the page) and doesn’t depend on other elements or its container size. This option is often more predictable for elements like a navbar, as it maintains its position consistently.

In most cases, “Fixed” will likely give you the desired result for a navbar that remains at the top of the page. However, feel free to experiment with both options to see which best suits your layout.

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 .

Custom ID's for Hover

The component must be nested somewhere inside a component that has the custom ID applied, and the custom id class needs to be formatted with the group modifier, like so: group/parent-component-id.

Transforms

• Origin - Set the origin of the transform.

• Scale - Changes the size of an element by percent.

• Rotate - Rotates an element by a specified degree, supports positive and negative values.

• Translate - Moves an element along the X or Y axis, supports positive and negative values.

• Skew - Skews an element along the X or Y axis, supports positive and negative values.

The Video Element is a simple way to add a single video to your website.

How to add Video

You can add YouTube or Vimeo videos by dragging and dropping the URL from your web browser to the Resources area in RapidWeaver Elements.

Supported Video Types

The video component supports the following file types:

• YouTube

• Vimeo

• .mp4

Dropzone

The Video component has a dropzone in the center of it to allow for custom play buttons, text, graphics, and more.

Video Component Settings

Video

Resource: Drop a video file or video url from the Resources Browser into the dropwell.

Thumbnail

Set a thumbnail image to be displayed before the video is played.

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.

Once your containers are in the grid, you can adjust their behavior by changing their type to Grid Item. This setting allows you to control each item’s width. For example:

• If you’ve set your grid to 4 columns, you might set each grid item’s width to 1, which will evenly distribute the space across 4 columns.

• Alternatively, you can define the grid as having 12 columns and assign each grid item a width of 3. This approach is functionally identical but provides more granular control. While both methods work, many find the simpler “4 columns, 1 width per item” method easier to manage.

Grids can feel a bit tricky at first, but once you get the hang of it, they’re incredibly flexible and powerful.

The “Reveal” animation component in Elements allows you to add visually engaging animations to your website. As elements come into view, they can “reveal” themselves with smooth, dynamic effects.

Helpful Tip: Fixing Horizontal Scroll on iPhone

If your site appears to shift sideways or introduces unexpected horizontal scrolling on mobile (especially iPhone), the issue may be caused by a Reveal component pushing the layout beyond the viewport.

This often happens when an animation or hidden content expands outside the container, triggering a wider layout than expected.

Set the parent Container that wraps the Reveal component(s) to overflow-hidden. This will prevent the hidden/revealed content from extending beyond the bounds of the viewport.

How to do it in Elements:

1. Select the Container or Section that wraps the animated content.

2. In the Inspector, set Overflow to Hidden.

This tells the browser to clip any content that exceeds the container’s boundaries fixing the horizontal scroll issue on iOS.

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 - See Custom Timing Function (below)

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

• Ease Out - The animation starts quickly and then slows down as it finishes.

• Ease-in-out - The animation starts slowly, speeds up, and then slows down again before finishing.

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.

0.95,0.05,0.795,0.035

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

0.21,1,1,1.53

There are tools online like Cubic-Bezier.com 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 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.

Margin

The Margin property controls the space around an element, outside of its border. It creates space between the element and its neighboring elements.

Margins can be set for all four sides of an element—top, right, bottom, and left—or individually for each side.

Padding

The Padding property controls the space inside an element, between its content and the element’s border. Unlike margin, which affects the space outside an element, padding pushes the content inward, creating internal spacing within the element itself.

Padding can be set for all four sides of an element—top, right, bottom, and left—or individually for each side.

Spacing UI in Elements

The Top Pages component makes it easy to automatically display a list of your site’s main pages - perfect for building simple navigation menus, site maps, or quick-access sections.

By default, it shows all top-level pages, but you can also choose a specific folder to display just the subpages within it. This gives you flexibility to create menus or content blocks that update automatically as your site structure changes.

It’s a smart, no-fuss way to keep navigation in sync without having to manually update links.

If you run into a bug or something doesn’t seem to be working quite right in Elements, we’d love to hear about it. You can check out our for general support issues, but the best place to get support is on the , where our team and other users can offer help and advice!

How to Get Help (and get it faster)

We’ve seen quite a few posts on the where users are asking for help but not giving enough details for anyone to actually solve the problem.

To save everyone time, here’s the best way to :

1. Create a Clear Post Title Something like “Need help styling the navigation component” works much better than “Help. It’s broken!”.

2. Explain the Issue Tell us what you’re trying to do, what you expected, and what actually happened.

3. Share Your Project Add an so others can open your project and see what’s going on.

4. Share a Live URL (if applicable) If the site is published, include the link. Sometimes issues only show up on a live site.

5. Add Screenshots or Recordings A quick screenshot or short video can be a huge help.

6. Be Specific The more detail you include, the quicker you’ll get accurate help.

Follow the above guide, and you’ll not only get better answers, you’ll get them much faster.

Why Details Matter

Asking for without sharing the Elements Project or live URL is a bit like rolling up to a garage and saying, “My car’s making a funny noise, can you fix it?” but then not showing the mechanic the actually car.

Sure, they could take a wild guess. They might suggest topping up the oil, tightening a belt, or just turning the radio up so you can’t hear it anymore. But without looking under the bonnet, they’re working blind.

That’s exactly what it’s like when asking for website help without sharing the details. We don’t need the keys, but we do usually need to see the engine.

How to report a bug

When , you should follow the guidelines below to help us locate and fix your issue much faster.

1. Be as detailed as possible:

Tell us exactly what you were doing when the issue occurred. The more information you can provide, the better. Try to include:

• What you expected to happen

• What actually happened

• Any error messages or unusual behavior you noticed

2. Steps to reproduce the issue:

If you can reliably trigger the problem, let us know how. Write down the exact steps you took leading up to the issue. This is incredibly helpful when we’re trying to track down bugs.

3. Share your Project via Elements Cloud (highly recommended!)

Please upload your project to your Elements Cloud account and share the link with us on the forum.

This is one of the most reliable and fastest ways to get your issue fixed!

4. Include a short video or screenshot:

A video is often the quickest way to show what’s going wrong. You can use QuickTime Player.app (included with macOS) to record your screen.

To create a simple recording, choose File › New Screen Recording from the menu. Click the red record button, then follow the instructions on the screen. To save, choose File › Export and select the quality.

Alternatively, you can use the keyboard shortcut command-shift-5 to bring up the onscreen Screen Recording controls.

Once you’ve made the recording, upload it to a cloud service like Dropbox or Google Drive, or share it via YouTube, and .

If you can’t share a video, screenshots can still be very helpful. Try to capture the whole Elements window so we can see your workspace and any visible settings. A partial screenshot is not very helpful, we need to see the entire context.

Use the keyboard shortcut Command-Shift-3 to take a screenshot, or Command-Shift-4 to select just a portion of the screen.

Custom HTML Issues

Sometimes using custom HTML on your page can be the source of the problem. Even small mistakes like a missing closing tag, an extra quotation mark, or incorrect nesting can cause layout or publishing errors. Because Elements is built on clean, structured code, any invalid or broken HTML you add manually can disrupt how components render or how the browser interprets the page.

This is often one of the hardest issues to track down, because errors in custom HTML don’t always show up where you expect them. A broken tag in one part of the page might affect the layout or functionality of a completely different section.

If you’re experiencing issues, it’s worth reviewing any custom HTML you’ve added. A good step is to remove it temporarily and check if the issue goes away. That way you’ll know whether the custom code is the root cause or if you should look elsewhere.

Document Repaired Warning Dialog

If you see the "Document Repaired Warning Dialog" dialog when opening a project, Don't panic! This is nothing to be alarmed about. Your project(s) are safe.

When Elements detects any orphaned nodes (bits of content that no longer have a proper home), it moves them to the top of the page rather than deleting them outright. That way, nothing important ever gets lost by mistake.

These nodes can be safely removed using the built-in recovery option.

Follow these steps to Repair your Project:

You can now continue working on your project, right where you left off.

We’re actively working on reducing the chances of these orphaned nodes appearing in the first place.

How to Reset Elements

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

Elements has a host of available keyboard shortcuts.

Editor: General

Editor: Selecting and Moving Components

Editor: Screens

Preview

The sizing option provides options for setting fixed widths, percentage-based widths, viewport-based widths, and even fractional widths to ensure flexibility and precision in responsive design.

Width

The width setting offers a comprehensive range of options that make it easy to control the width of elements in your design.

Height

The height setting offers a comprehensive range of options that make it easy to control the height of elements in your design.

Min & Max Settings

In Elements the min-width and max-width settings provide control over the minimum and maximum width of elements, allowing you to set constraints on how wide an element can grow or shrink. These settings are especially useful for responsive design, as they help maintain readability and layout consistency across different screen sizes.

Why Use Min-Width and Max-Width?

1. Content Readability: Setting maximum widths prevents text from stretching too wide, which enhances readability, especially on larger screens.

2. Responsive Design: Min and max-widths help maintain an adaptable layout by controlling how elements respond to different screen sizes.

3. Layout Constraints: Min-widths prevent elements from collapsing too small, while max-widths keep elements from overflowing their containers, ensuring a balanced and visually consistent design.

Use min-width and max-width settings when you need control over element sizes to ensure responsive, readable, and user-friendly layouts across various screen sizes.

Using Custom CSS Values

A lot of Components support a “custom sizing” option for you to specify the exact size of an element, this can be things like width, height, and placement.

When adding a value into the custom size box, it’s useful to remember that anything native css supports, Elements supports! So values like vh, px, rem, %, and should all work as expected.

Here's some examples:

• 250px - Make the width (or hight) 250px wide.

• calc(100vw-20px) - 100% viewport width - 20px.

• 100vw - 100% of the viewport width.

• 80vh - 80% of the viewport height.

Sizing UI in Elements

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 .

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

Please carefully read and understand the following terms and conditions "Terms" before subscribing to RapidWeaver Elements. These Terms constitute a legally binding agreement between you, the "Subscriber" and Realmac Software the "Provider".

Agreement Summary (the tldr version)

• Subscription: You’re signing up for a monthly or annual plan.

• Billing: Payments are taken automatically unless you cancel. We’ll send you a reminder 3 days before renewal.

• Cancellation: You can cancel anytime. There are no refunds for unused time.

• Updates: You’ll get all updates and new features while your subscription is active.

• License: Your subscription gives you a personal, non-transferable license to use Elements.

• No Resale: You can’t sell, transfer, or share your license with others.

• Usage Rules: Don’t copy, hack, reverse-engineer, or misuse the software.

• Account Security: You’re responsible for keeping your login details safe.

• Privacy: We respect your data and handle it according to our privacy policy.

• Legal: This agreement is governed by the laws of England and Wales.

Terms of Service & Software Licence Agreement

1. Subscription Plan By subscribing to RapidWeaver Elements, the Subscriber acknowledges and agrees to enroll in a specific subscription plan, including associated fees.

2. Subscription Period The subscription period begins on the date of successful subscription and continues for the duration specified in the chosen subscription plan. Subscriptions may be on a monthly, annual, or other basis as specified.

3. Payment and Billing Subscriber agrees to pay all applicable fees associated with the subscribed plan. Payment details, including billing frequency and method, are provided during the subscription process. The Provider reserves the right to change subscription fees upon providing reasonable notice to the Subscriber.

4. Automatic Renewal A subscription renewal reminder will be sent 3 days before the next payment is taken. Unless auto-renewal is explicitly disabled by the Subscriber, the subscription will automatically renew at the end of each subscription period. The Subscriber's payment method will be charged for the renewal fee unless canceled by the Subscriber.

5. Cancellation Subscribers may cancel their subscription at any time. Subscription cancellations may be made through the account settings or by contacting the Realmac Software customer support.

6. Refunds All subscriptions are billed in advance and are non-refundable once the subscription period begins. However, if you experience technical issues preventing you from accessing the Software, please contact [email protected] and we’ll review refund requests on a case-by-case basis.

7. Software Updates and Enhancements Subscribers are entitled to receive updates, bug fixes, and enhancements to RapidWeaver Elements during the active subscription period.

8. License and Usage The subscription grants Subscriber a non-exclusive, non-transferable license to use RapidWeaver Elements solely for personal or business purposes in accordance with the license agreement. Subscriber shall not use, copy, modify, distribute, or exploit the software beyond the scope permitted by applicable law or Realmac Software's guidelines.

9. Data and Privacy Subscriber’s personal information is handled in accordance with Realmac Software’s Privacy Policy. By subscribing, the Subscriber consents to the collection and use of their personal data as described in that policy.

10. Termination The Provider reserves the right to terminate or suspend a subscription or access to RapidWeaver Elements Software in case of violation of these Terms, misconduct, or for any other reason deemed necessary by the Provider.

Subscribers will be notified if their access is suspended or terminated, unless doing so would violate the law or risk service integrity.

11. Disclaimer of Warranty RapidWeaver Elements is provided "as is" without any warranties or representations, expressed or implied. The Provider disclaims any warranty of merchantability, fitness for a particular purpose, or non-infringement.

This disclaimer also applies to any third-party content or add-ons made available through the Elements Marketplace.

12. Limitation of Liability Realmac Software shall not be liable for any direct, indirect, incidental, consequential, or exemplary damages arising out of or in connection with the use or inability to use RapidWeaver Elements or any other services provided, even if advised of the possibility of such damages.

13. Modification of Terms Realmac Software reserves the right to modify or update these Terms at any time. Subscribers will be notified of material changes to these Terms via email or through other means deemed appropriate by Realmac Software.

14. Non-Transferability and Resale The subscription and license granted under these Terms are personal to the Subscriber and are strictly non-transferable. The Subscriber may not sell, resell, transfer, assign, rent, lease, or otherwise provide access to RapidWeaver Elements to any third party. Any attempt to do so will be considered a violation of this Agreement and may result in immediate termination of the subscription without refund.

Sharing or reselling access credentials or licenses is strictly prohibited and may result in termination without refund.

15. Intellectual Property All rights, title, and interest in RapidWeaver Elements, including but not limited to software, trademarks, logos, content, and related intellectual property, remain the exclusive property of Realmac Software. No ownership rights are transferred to the Subscriber under this Agreement.

16. Restrictions on Use The Subscriber shall not attempt to reverse engineer, decompile, disassemble, modify, or create derivative works of RapidWeaver Elements. The Subscriber further agrees not to use the software for unlawful purposes or in a manner that could damage, disable, or impair the service.

The Subscriber shall not use the Software in any manner that violates applicable local, national, or international law.

17. Account Responsibility The Subscriber is responsible for maintaining the confidentiality of their account credentials and is liable for all activity that occurs under their account.

18. Governing Law and Jurisdiction This Agreement shall be governed by and construed in accordance with the laws of England and Wales. Any disputes arising under this Agreement shall be subject to the exclusive jurisdiction of the courts of England and Wales.

19. Force Majeure Realmac Software shall not be held liable for any failure or delay in performing its obligations due to circumstances beyond its reasonable control, including but not limited to natural disasters, acts of government, internet or telecommunications failures, or other force majeure events.

20. Entire Agreement and Severability This Agreement constitutes the entire understanding between Realmac Software and the Subscriber with respect to RapidWeaver Elements. If any provision of this Agreement is found to be invalid or unenforceable, the remaining provisions shall continue in full force and effect.

21. Marketplace and Third-Party Add-ons RapidWeaver Elements may provide access to third-party add-ons, templates, or components. These are developed and sold by independent creators. Realmac Software is not responsible for the content, functionality, or security of third-party add-ons. All purchases are processed through FastSpring and subject to the relevant seller’s own terms where applicable.

By subscribing to RapidWeaver Elements, Subscriber indicates their understanding and acceptance of these Terms and agrees to be bound by them. It is recommended to review these Terms periodically for any updates or changes.

The Elements CMS is a complete CMS system. You can learn more about using it here.

View Elements CMS Documentation

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.

General Questions

Pre-Sales Questions

Subscription Questions

Licensing Questions

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.

SEO Testing Tools

You can test the SEO performance of your website with the following tools:

• Google Search Console – submit sitemaps, monitor indexing, and spot issues

• Lighthouse – audit SEO basics from Chrome

• Ahrefs Webmaster Tools – free tools for basic SEO analysis

Good SEO Practices in Elements

The following is a list of items that will help your website rank better in search engines:

1. Setting Browser Titles

2. Add Meta Descriptions

3. Structuring URLs (so they are human readable)

4. Use the correct Header Tags

5. Creating Alt Text for Images

6. Using a Sitemap (Elements generates this automatically)

How to set Image Alt text

Image description is useful for users, search engines, and accessibility tools. It can be set for each image under the "Description" setting in the Image Component settings.

Setting image alt text is important for SEO because it:

1. Improves Accessibility – Alt text helps visually impaired users who rely on screen readers understand the content of an image.

2. Boosts Image SEO – Search engines use alt text to understand and index images, helping them appear in Google Images search results.

3. Enhances Page Relevance – Properly written alt text with relevant keywords can reinforce the topic of your page, improving rankings.

4. Provides Context if Images Don’t Load – If an image fails to load, the alt text is displayed instead, ensuring users still get the intended information.

Metadata and Open Graph

Elements offers a dedicated Metadata panel for setting per-page titles, descriptions, and common Open Graph tags for social sharing.

Website SEO Checklist

If you want to level-up your new Elements project for SEO, run through this checklist before you officially launch your new website:

• Set Your Browser Titles & Meta Descriptions Use the metadata panel for each page (Project > Page > Metadata) to add unique, descriptive titles and summaries. Search engines love this stuff, and so do users!

• Use Proper Headings (H1, H2, H3…) Structure your content with headings, one H1 per page, then nest H2s and H3s sensibly. You can set these using the Heading component.

• Image ALT Text Don’t forget to set alt text for every image via the Image component’s “Description” field. It helps accessibility & image SEO.

• Clean, Human-Friendly URLs Keep filenames and paths tidy: /about, /contact, /services/web-desing, etc. Makes things easier for humans and robots!

• Sitemap & robots.txt Elements automatically generates a sitemap.xml, and you can create a robots.txt by adding a plain text file (right-click in the page list, choose “New File”, rename it robots.txt, fill it in).

• Optimise Images & Media Before importing, compress images (with Squash, ImageOptim, etc.). Fast loads = happy visitors and rankings!

• Descriptive Anchor Text When linking, use meaningful text (“Contact Us” > “Click here”).

• Preview Often Use Elements’ live preview and built-in accessibility audit (and maybe even toss your site’s URL into Google’s Lighthouse tool) to spot issues early.

The Layout controls help you manage the overall layout and positioning of elements within a webpage. These controls include controls for handling display properties, positioning, z-index, overflow, visibility, and more.

General

General layout settings for Position, Z-index, and Inset.

Position

The Position controls how an element is placed in the document and how it interacts with its surrounding elements. These utilities correspond to standard CSS positioning properties like static, relative, absolute, fixed, and sticky. See Tailwind CSS Position for more details.

Z-Index

The z-index controls the stack order of elements on the page and is an important CSS property in web design. When multiple elements overlap, the z-index determines which element appears on top of the others. See Tailwind CSS Z-Index for more details.

Type (Inset)

The Inset property is used to control the positioning of an element relative to its nearest positioned ancestor. See Tailwind CSS Top / Right / Bottom / Left for more details.

Advanced

Advanced layout settings for Overflow, Isolation, and Visibility.

Overflow

Controls how an element handles content that is too large for the container. See Tailwind CSS Overflow for more details.

Isolation

In complex layouts, different elements may interact with each other in ways that are not always predictable, especially when dealing with z-index. Using isolate helps create a new stacking context for an element, effectively “isolating” it from the outside world, preventing unexpected overlaps or stacking behavior. See Tailwind CSS Isolation for more details.

Visibility

Controls the visibility of an element on the page. See Tailwind CSS Visibility for more details. Please note: The Visibility control was updated Janury 2025, so the video is slightly out of date.

Layout UI in Elements

The Text Component is an ideal choice for a wide range of text elements, from headings and taglines to smaller text areas. It provides flexibility for styling text to suit various design needs, making it perfect for creating visually impactful headings, standout taglines, and highlighted phrases.

With the Text Component, you can easily create bold, eye-catching headings enhanced by background images, gradients, or color overlays, adding depth and style to your design. The component’s versatility means it works seamlessly in both minimal and complex layouts, allowing you to design text elements that grab attention without overpowering your overall look.

Whether you’re looking to create subtle text accents or prominent, styled headers, the Text Component has you covered.

Gettings Started with Text Compotnent

The following video will teach you the basics on using the Text Component.

How to Make Your Text Responsive

The following video will show you how to make your text resposive.

Applying Tailwind CSS Classes to Text

This is an advaced feature that allows you to apply Tailwind CSS Classes to any of your text in the Text Component.

Example Tailwind Classes for Text

Below we have included a few sample classes that were featured int he video. To learn more you can browse the Tailwind CSS Docs.

blur-sm 

hover:blur-sm transition

hover:line-through

inline-block rotate-[2deg]

underline decoration-wavy underline-offset-[10px]

General

Under the General settings in the inspector you'll find options to style the entire block of text.

Tag

The Tag helps create a semantic structure so search engines understand the hierarchy and relationship of your content. For example, the main heading on the page choose would be "Heading 1", your body text would be set "Paragraph".

Text Align

Align your text, left, center and right. You may need to also set the aligment of the parent item to get the desired alignment.

Font

Choose a font family, these are managed by the Theme Studio.

Size:

Choose a text size, these are managed by the Theme Studio.

Text styles include size, line height, letter spacing, and weight. You can override some of these settings inline by choosing the "Override" option.

Weight:

Set the weight of your text.

Spacing:

Set the spacing of the text.

Line Hight:

Set the line height of the text.

Italic:

Make the text italic.

Text Shadow:

Choose a shadow for yoru text, these are managed by the Theme Studio.

Case:

Choose a shadow for yoru text, these are managed by the Theme Studio.

Transform:

Choose from None, Uppercase, Lowercase, and Capitalise.

Underline:

Choose from None, Underline, Overline, and Line Through.

Color

Choose between colour, background image, and gradient for your text. Each different type of style has a set of sub options.

• Color: Choose a solid colour from the theme studio, also supports opacity.

• Image: Choose an image, along with positioning, sizing, and repeat.

• Gradient: Supports up to 3 colours, set position and oapcity of each colour independently.

Links

Default and HOver

Can't get your website online or updated? Don't worry. 99% of the time the issue is due to incorrect setup of publishing details. Everything needs to be entered 100% correctly otherwise publishing fails.

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. Entering an incorrect Path is the most common cause of publishing problems in RapidWeaver. Some common site paths may include:

• /

• httpdocs/

• www/

• public_html/

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

The list above is by no means an exhaustive list as paths vary greatly between different hosts, so if you’re still experiencing issues, please consult your web host’s online help to determine the Path required to upload to the correct folder. Sometimes, the Path may be known as the “Upload Folder”. You may also want to contact your web host directly and ensure that they have not made any recent changes to the server which may affect your settings and that you’ve not run out of webspace.

Tweak Server Configurations

RapidWeaver has a number of options to configure publishing - particularly if you’re using FTPS uploading. Please check what your server is expecting, some hosting providers require specific settings. Due to the nature of how FTP works, RapidWeaver cannot reliably detect the correct settings that you should use. If in doubt email your hosting company. If you think it's all set up correctly, try this next:

Concurrent Connection Limit

If your host limits the number of connections that can be made to your server, you can set RapidWeaver to use a smaller number of connections when publishing. If in doubt set this to 1. To do this, open RapidWeaver’s Preferences window, and adjust the slider for the Maximum Concurrent Uploads to 1 before attempting to publish your project once again. If that didn't help, it's time to try something completely different:

Switch from FTP to SFTP

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.

Re-add your publishing details

If you have verified your publishing credentials are correct in another FTP app and it's still not working inside RapidWeaver please delete your publishing destination, and re-add a new publishing destination. By doing this you ensure all the details are new and verified. If you're super technical and can log into your hosting cPanel, you could try setting up a new FTP accountant see if that works. If this means nothing to you, you can safely ignore this and move on to the next troubleshooting step.

Check Server Space

This issue is surprisingly common, especially if you're publishing multiple websites to the same server. By default, RapidWeaver will backup your project file to the server, and this can easily build up over time and you can run out of server disk space. If you've run out of server disk space RapidWeaver will give the following error: “Couldn't upload to your FTP server” and if you click on the “i” to get more info it may say “Transferred a partial file” or “Operation was aborted by an application callback”. If you're seeing these errors, check how much space you're using on your server, and check how much you've allocated by logging into your hosting provider. You can safely delete some of the older RW backup files to make room for new uploads. If in doubt you can always email your hosting provider and ask how much space you're using and how much you have available. Once you have enough space, you should be able to resume updates to your website.

Changes aren't visible on Website

Use the File menu’s Re-Publish All Files option to re-upload your site. It may be that some files are missing and were not uploaded. You may also want to remove the history and browsing data in your web browser. Sometimes web browsers can display older cached data.

Some hosts may require you to use a path that begins with a forward slash (which has a special meaning to a web server). Unless you explicitly state that your path should start with a forward slash, you should not attempt to use a path with a forward slash - otherwise, you may well run into publishing difficulties.

I've tried everything, but still need help

RapidWeaver can also be configured to produce a more in-depth report about publishing that the Realmac Software support team can use to identify potential problems. First of all open RapidWeaver’s preferences (Cmd,) and select the Publishing preferences pane. Make sure that the Enable Upload Logging option is checked.

Please do the following step to send your publishing logs to us:

1. Quit RapidWeaver.

2. Re-open your project in RapidWeaver.

3. Attempt to republish your RapidWeaver project by choosing File>Re-Publish All Files.

4. If the publishing feature returns an error, hit the “Send Upload Logs” button.

5. It will then attempt to generate an email with the publishing logs, enter some details about your issue, and hit send!

Error Messages

Exporting If you’re seeing an error message when exporting your site, this may mean that there’s a problem with either an addon or a resource in your project. If an error message appears consistently when exporting a particular page, take a look at the page - are there any resources missing, or a particular addon that may be causing a problem?

Contacting Support

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 RapidWeaver are you using? What version of macOS is running on your Mac?

• How large is your RapidWeaver project file?

• Which, if any, third-party addons are you using with your project? Please include any third-party themes.

• Are you seeing an error message when publishing? Please include the full text of the error or, ideally, a screenshot.

We aim to reply to all messages within 2 business days. We know it's frustrating not being able to publish, but do remember we're only human and we do our best to help in what can be a very complex issue.

At Realmac Software Ltd, we’ve always been committed to maintaining the trust and confidence of our customers and visitors. We’re not in the business of selling, renting, or trading email lists with other companies for marketing purposes — and we never will be.

This policy explains when and why we collect personal information, how we use it, and how we keep it secure.

By using our website or software, you agree to the terms of this Privacy Policy.

1. Who We Are

Realmac Software Ltd Registered in England and Wales Email: [email protected] ICO Registration Number:

We design and sell software for macOS, including Squash, RapidWeaver Classic and RapidWeaver Elements.

2. The Information We Collect

We may collect personal data such as your name, email address, and contact details when you:

• Use our website

• Purchase our software

• Send us support requests

• Sign up for our mailing list

• Participate in our forums

We only collect the information necessary to provide our services and support.

3. How We Use Your Information

We use your personal information for the following purposes:

• To process software purchases and deliver license details

• To respond to support requests and communicate with you

• To send newsletters and updates (only if you’ve opted in)

• To understand how our website and products are used

• To notify you of software changes or improvements

We do not sell, rent, or share personal information with other organisations for marketing.

4. Our Data Processors

FastSpring – Online Store

We use FastSpring to securely handle all software sales. They collect and process your billing details to complete purchases. FastSpring is the Merchant of Record, and they handle payment processing, refunds, and related support.

Google Analytics – Website Tracking

We use Google Analytics to understand how visitors use our website. Analytics data may include anonymised IP addresses, device type, and pages visited. We never use this data to personally identify you, and we do not merge it with other information.

Buttondown – Newsletter

We use Buttondown to manage our mailing list. When you sign up, we collect your name and email address so we can send you news, updates, and promotions about our software. You can unsubscribe at any time using the “Unsubscribe” link in any of our emails.

5. Legal Bases for Processing

We only process personal data when we have a valid legal reason to do so:

7. How We Store and Protect Your Data

All traffic to our websites (including the store, forum, and community) uses HTTPS for secure communication. We store minimal data and ensure it’s protected using appropriate technical and organisational measures.

8. Data Retention

We only keep your data for as long as necessary:

• Purchase and billing data: up to 6 years (for accounting and tax purposes)

• Newsletter data: until you unsubscribe

• Analytics data: typically 26 months (Google’s standard retention period)

9. Your Rights

You have the right to:

• Request a copy of your personal data

• Ask us to correct or delete it

• Withdraw consent for newsletters or analytics

• Object to certain processing

• Complain to the ICO if you believe your data isn’t handled properly

To make a request, email [email protected].

10. Changes to This Policy

We may update this policy from time to time. Any changes will be posted here, and where appropriate, you’ll be notified by email.

This Privacy Policy was last updated in October 2025 and replaces all previous versions.

11. Contact Us

If you have questions about this Privacy Policy or how we handle your data, email us at [email protected].

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: