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

What truly sets RapidWeaver Elements apart is its commitment to generating optimized, clean HTML code that ensures fast loading times and excellent search engine rankings.

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

Contine reading to learn more about why RapidWeaver Elements is a better choice than using an un-secure online cms, like Wordpress.

Static Site Generator (SSG) vs Data-Driven Websites

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

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

Disadvantages of an online CMS/ Data-driven Website:

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

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

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

• Security Vulnerabilities: Databases and server-side code create additional attack vectors for hackers.

• Maintenance Headaches: Regular database maintenance, backups, and security updates are necessary.

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

Advantages of building a static website:

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

2. SEO Benefits

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

3. Enhanced Security

   With no database or server-side applications to exploit, static sites are inherently more secure. There are fewer vulnerabilities and attack vectors for malicious actors to target.

4. Cost-Effective Hosting static websites is significantly cheaper since they require minimal server resources. Many platforms offer free hosting for static sites, and scaling costs remain low even with high traffic.

5. Reliability Static sites are more reliable because they have fewer points of failure. Without databases or complex server configurations, there's less that can go wrong.

6. Portability Static sites can be hosted anywhere and easily moved between hosting providers, giving you maximum flexibility and avoiding vendor lock-in.

Types of Websites Ideal for Static Site Generation

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

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

• Documentation Sites: Technical documentation, API references.

• Portfolio Websites: Personal or professional portfolios.

• Landing Pages: Marketing landing pages.

• Event Websites: Conference or event sites.

• Personal Websites: Hobbies, niche interests.

• Digital Garden: Your very own corner of the internet.

Learn more about why RapidWeaver Elements for macOS is the perfect choice for building your next website.

Elements is Community Driven

We listen to our amazing community of passionate users and build the features they want. Click here to , or (as voted on by our users).

1. Be part of the Independent Web

2. Static Sites are just better

3. Supportive Community

4. Top-notch Support

A digital garden is a personal online space where individuals cultivate and organize their thoughts, ideas, and knowledge over time. Unlike a traditional blog, a digital garden is more dynamic and non-linear, allowing for continuous growth and evolution of content. It's a space where you can explore interlinked topics, make connections, and develop ideas organically, free from the constraints of typical social media platforms.

is the perfect tool to build your own Digital Garden.

Articles on Digital Gardening

A Brief History & Ethos of the Digital Garden

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

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

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

Digital Homeownership

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

What is a Digital Garden?

A Digital Garden is lowercase b blogging. It's writing without worrying about what people will think.

Welcome to the official and in-depth FAQ documentation for all things RapidWeaver. This resource is designed to provide you with clear and concise answers to the most common questions about RapidWeaver Classic, Stacks, and RapidWeaver Elements. 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.

Q: When is the expected launch date for RapidWeaver Elements?

A: Elements will launch as a public beta in 2025.

Q: What are the system requirements for Elements?

A: RapidWeacer Elements requires macOS Ventura (13.x) or newer.

Q: Will my existing RapidWeaver themes be compatible?

A: Elements will not support Classic legacy themes. It’s been a tough decision to make, but ultimately we think Elements will be a much better product if we build it for the future of web design.

Q: Are my old stacks compatible with Elements?

A: No, stacks are not compatible and cannot be used in Elements.

Q: I have created my own stacks, will I be able to convert them into Elements?

A: Yes, converting them is a manual process, and can be fairly trivial. We offer in-depth support and documentation to help with this. If you have any quesitons or need help converting your stack to an Element please .

Q: Can I import my RapidWeaver Classic projects into RapidWeaver Elements?

A: Not at this time, Element based websites are built completely differently so there's no easy way to open those older Classic documents. We may look at building an importer at a later date, should the demand be there.

However, you should see this as a great opportunity to refresh your website and bring it up-to-date with modern web technologies and standards.

Q: Is it possible to use RapidWeaver Classic and RapidWeaver Elements side-by-side?

A: Yes, you can install and run both applications simultaneously on your Mac. We anticipate this scenario to be quite popular as it allows users to manage older projects in Classic while simultaneously migrating and developing newer projects in Elements.

Q: Will RapidWeaver Classic be phased out and replaced by RapidWeaver Elements?

A: No, both versions of RapidWeaver will coexist as they cater to slightly different customer needs.

RapidWeaver Classic continues to serve thousands of customers who maintain and build existing websites using a variety of legacy plugins and addons. We will continue to develop and update RapidWeaver Classic to support this "classic" workflow. RapidWeaver Classic requires macOS 10.14 (Mojave) or a newer version.

RapidWeaver Elements represents our vision for reimagining web design on the Mac, it's easier and more powerful than ever before to build no-code websites.

Q: Do you plan to bring Elements to iPad?

A: While the initial version of Elements will not run on iPad, the technology we've built does open up the possibilities of making this a reality (something that just wasn't possible with Classic). It's important to note that this is not currently in our future plans, as our primary focus is on the Mac platform at this time.

Q: What is the best alternative to RapidWeaver Classic and Stacks?

A: Elements is a fantastic replacement for the legacy RapidWeaver Classic and Stacks setup. Elements offers everything you need to design, build, and publish modern websites effortlessly. With iits weekly updates that introduce new features and address any bugs, Elements is a modern, reliable choice for building your next website.

Q: Is the Stacks App a good alternative to RapidWeaver Classic?

In late 2024, several prominent third-party Stacks developers, including Stacks4Stacks and Elixir Graphics, ceased operations. This shift was largely driven by declining sales and waning interest in the Stacks platform and its ecosystem, signaling a broader transition away from this legacy technology.

Q: I’m interested in developing third-party Elements, do you have any documentation?

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.

This guide will walk you through the steps of building a website with Elements. So, grab a cup of tea (or coffee), and let's get started.

Download and Install Elements

RapidWeaver Elements is a desktop application for macOS. First, you'll need to download Elements from the Elements Website — Just look for the download button. 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.

With Elements’ three license options—Base, Plus, and Pro, you can choose the plan that best fits your needs, whether you're a casual user, hobbyist, or professional web designer.

Each license includes:

• Unlimited websites

• Templates, Themes, and Components

• 1 year of free updates

• Installation on up to 2 Macs simultaneously

• 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 that we have highlighted in the table below.

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. Plus and Pro licenses have no visible Elements branding.

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.

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.

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 support@realmacsoftware.com.

If you're just starting out with Elements it's important to take the time to learn the difference between Components and Global Components.

It's also worth noting that Elements is a Mobile first design system, you can learn more about all of this and more below. If you have more questions, please visit the forum.

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.

Global Templates

Global Templates (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 learn more about Global Templates here.

Mobile First Design

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.

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

Built on Tailwind, AlpineJS, and the GSAP Animation Library

Elements is built upon the popular Tailwind CSS framework, along with AlpineJS. and the GSAP Animation Library, 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

• Tailwind CSS

• Tailwind CSS: Utility-First Fundamentals

• Tailwind UI

• Why Tailwind is the Future of CSS Frameworks: A Comparison with Bootstrap

• Why Is TailWind CSS So Great?

How to use Tailwind Utility Classes in Elements

Welcome to Elements

Elements is a no-code static website builder for macOS. It's designed to cater to all skill levels, whether you’re a beginner looking for simplicity or an experienced web developer needing advanced customization, Elements offers the perfect balance. With its user-friendly interface and powerful features, you can create fast, efficient, and beautiful websites with ease.

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.

Elements is Community Driven

We listen to our amazing community of passionate users and build the features they want. Why not Suggest a Feature, or View the Roadmap (as voted on by our users).

Learn more about the features you'll find in Elements

Elements has been in the works for over three years now. We’ve been working tirelessly with beta testers to make sure we’re building the best web design software for Mac. Check out the feature list below to learn more!

WYSIWYG Editor

The Elements editor has been written from the ground up with the latest web technologies, this makes the editing experience blazingly fast and easy to use. What you see is what you get.

Project Library

RapidWeaver Elements ships with a selection of beautiful, pre-built website templates to help kick start your next project.

Component Library

Includes a complete collection of Components to design and build your own website. Everything from headings, images, video, galleries, flex, grids, navigation, and more are included.

Theme Studio

Don't like the color or the typography in your website? No problem. Change it yourself with the visual theme editor.

Responsive

Right out of the box Elements supports responsive websites giveing you full control of how your site looks on mobile, tablet and Laptop and more.

Dark Mode

Changing colours on your website to support Dark and Light mode shouldn't be hard, that's why we've made it as easy as clicking a button.

Animation

Hover and scroll animations are easy to configure on with just a few clicks. Fade-in, Scroll, Blur, Hover, it's all there and more.

Typography

Write long form content with different style blocks just like a modern word-processor, all controlled via the global Theme Studio.

Custom Components

Build your own Custom Components for your website using the Elements API.

Template Editor

Elements makes it easy to edit the raw Template HTML to add scripts or code snippets.

Elements Cloud

Every Elements Cloud account comes with 1GB of free cloud storage. The perfect place to backup or share your latest projects. Sign-up in-app for free.

Node Browser

See every Component on your page. Browse and select page elements, you can also move, add and remove them. You can even drag between the editor and node browser.

Smart Publishing Engine

Publish your website online using the built-in Smart Publish Engine. Supporting Local, SFTP, FTP, FTPS, and Amazon S3. Elements only uploads the chnaged files making for blazing fast update times.

Apple Intelligence

Never get stuck with writing or polishing your conent, let Apple Inteligence (and ChatGPT) help you write, express yourself, and get things done effortlessly. Requires macOS Sequoia.

Elements Marketplace

Explore a curated selection of addons, including beautifully crafted templates and versatile components, designed to help you build stunning websites with ease.

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.

Give them a try and let us know what you think!

Realmac Software has always been an indie company and has never taken on outside investment. We've remained an independent and private company for over 20 years. We are and always have been 100% customer funded and focused.

Just like our company, we believe the web should stay open and independent. When you post something on the web, it should , not a corporation. By joining the , and using , your content stays yours and in your control.

You can post anything you want, in any format you want. In addition, you share simple readable links such as example.com/ideas. These links are and will always work.

Take back control and build your next website with !

Further Reading

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

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

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

• One of the principles of the IndieWeb is that you own your content

Single Group Mode

Right click on a heading in the settings inspector to change how the inspector behaves.

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

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.

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…

• YouTube URL - Single video's and playlists

• Vimeo URL - Single video's and playlists

Editing Metadata

Right-click on a file and select "show Info" to edit the meta data. The file inspector is a floating window and can be left open while you browse through files in the Resources area.

• Filename (All file types)

• Caption (images)

• Author (images)

Creating Folders

Adding Remote Resources

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

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 Background and Text Colours

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

• For Elements like Buttons, Colour Fill on Icons, Dividers, we recommend using Brand 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.

Turning Off 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 preveiw and export the light mode versuion of you website.

Dev Diary Videos for Dark Mode

The following video will show you how to set Colours for Dark and Light mode in Elements. The video was recorded with a development version of Elements so the feature(s) available now may differ slightly to those in the video.

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

Pages

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

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.

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.

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 Tailwind blur docs for available classes.

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

Clip Content

Clip content that overflows this Element.

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

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

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.

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.

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 provide a clear call to action.

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 the Resources area in RapidWeaver Elements.

Supported Video Types

• YouTube

• Vimeo

• .mp4

Settings

Source

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

Styling

Rounded: Sets the corner radius on the video.

Shadow: Sets the drop shadow size on the video.

SVGs (Scalable Vector Graphics) have become a go-to choice for web design because they offer incredible flexibility and quality. Unlike traditional image formats like JPEG or PNG, SVGs are vector-based, meaning they’re made up of lines and shapes rather than pixels. This makes them infinitely scalable without losing quality, so they look sharp on any screen size or resolution, from small mobile devices to large desktop monitors.

Here are a few reasons why SVGs are especially useful on websites:

1. Crisp at Any Size: SVGs maintain perfect clarity when resized, ensuring icons, logos, and illustrations always appear sharp and professional.

2. Small File Size: SVGs are typically smaller than high-resolution images, which helps websites load faster. Their code-based structure allows them to be easily optimized, minimizing file size and improving performance.

3. Easy to Style: SVGs can be styled directly with CSS, making them easy to fit in with the colours and style of your website.

SVG Controls

SVG

To add an SVG, drop it from the Finder (or Resources) area into the Dropwell.

Fill

To set a fill colour on an SVG it needs to be setup correctly to support fill colours.

Stroke

To set a stroke colour on an SVG it needs to be setup correctly to support stroke colours.

Q&A on fixing SVG's for display on a website.

Getting SVG's to display correctly is a bit of a dark art, but with a bit of tinkering you'll be able to modify them to work and look great on the web and in Elements.

Q: Why doesn't the Fill or Stroke colour work as expected?

A: SVG images don’t always respond as expected to CSS styles for a few reasons, and it’s a common stumbling block. Here’s a quick rundown on why this happens and how to get more reliable control over your SVGs in RapidWeaver Elements…

SVG elements have their own styling properties, like fill and stroke, which can sometimes conflict with CSS styles. If these attributes are set within the SVG code itself, they can override Colours and Styles from Elements.

For scalable, theme-compatible SVGs, you can set the fill and stroke attributes to currentColor within the SVG file. This approach allows Elements to set SVG color for the stroke or Fill.

Set fill="currentColor" within your SVGs if you want Elements to set the colour of the stroke or fill. Depending on how the SVG is coded, this might not work, if that is the case, you should try removing fill="currentColor" from yoru SVG.

Q: How do I change the size of an SVG?

A: Use the Sizing settings in the component inspector, by default this is set to use a Theme Studio value. Custom CSS values can also be used to size the SVG.

Q: Why doesn't the SVG change size when I adjust the sizing in Elements?

A: Remove the height and width values in the SVG file, see screenshot below for an example.

Q: Where can I find SVG Icons for use in Elements?

A: Tabler Icons has over 5,650 free SVG icons, they are all perfect for use on your Elements websites. Download any of the icons from there and remove the width and height code (as above), and they are ready to use in your project. The icons from Tabler are setup to use the stroke attribute. See the video below for a quick overview of how this works in practice. Also, see our list above.

Free SVG Icon Libraries

All of the following icon libraries work well Elements, if you require them to be resiable in Elements you'll need to remove the Height and Width values from the code before importing.

• https://tabler.io/icons, over 5,650 free SVG icons.

• https://feathericons.com, simply beautiful open source icons

• https://phosphoricons.com, outline, filled, duotone and more.

• https://heroicons.com, hand-crafted SVG icons, by the makers of Tailwind CSS (you'll need to the code into a file and save it with a .svg extension before adding to Elements).

Further Reading

• Practical SVG by Chris Coyier

These advanced components ship with every copy of Elements.

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.

Link 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

Box Shadow

Apply a box shadow to the Component.

Opacity

Set an opacity for the component.

Effects UI in Elements

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.

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

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

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 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 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 for more details.

Type (Inset)

Advanced

Advanced layout settings for Overflow, Isolation, and Visibility.

Overflow

Isolation

Visibility

Layout UI in Elements

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.

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.

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

Templates

These are groups of Components that have been put togther to create a design or layout. Once a template is dropepd into your page you can customise how you like, and it is no longer linked to the original template.

Global Templates

Global Templates give you the power to create reusable (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 need 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. 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 consistant. 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".

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

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

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

When you’re ready to publish your website, you'll need to configure the. 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.

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

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

Breakpoints for a project be defined in the Screens area of the Theme Studio.

Dev Diary Videos for Responsive Websites

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

Related Dev Diary Videos

The following videso were recorded as part of the ongoing Elements Dev Diary series and give a good overview of the customizable user interface.

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.

Advanced Usage

By using the data-reveal-* attributes in your Custom Components, you can take advantage of the Animation framework built into Elements.

As a minimum you can add data-reveal to any DOM element to apply a default animation as the element enters the viewport. If you would like to customise the animation, the following data attributes are available.

Available Play Methods

Elements allows you to define when the animation should be triggered. You can use any of these values when setting the data-reveal-playattribute.

Animations

Animations in Custom Components can be set independently on enter and exit, as shown in the sample code.

<div
    data-reveal
    data-reveal-animation="lightSpeedRightIn"
    data-reveal-exit-animation="fadeUpOut"
>

We offer five types of animations to enhance your user interface:

• Fade

• Slide

• Zoom

• Light Speed

• Rotate

Each animation supports all four directions (Up, Down, Left, Right) and can be triggered for both “In” and “Out” events.

Our animation naming convention is straightforward, following this structure:

{animationName}{Direction}{Event}

For example:

• fadeUpIn for a fade-in effect moving upwards.

• zoomLeftOut for a zoom-out effect moving to the left.

This flexible system ensures that you can seamlessly integrate animations tailored to your design needs.

Available Animations

Full Example

<div
    data-reveal
    data-reveal-scrub="false"
    data-reveal-animation="fadeUpIn"
    data-reveal-exit-animation="fadeUpOut"
    data-reveal-distance="200px"
    data-reveal-degrees="90"
    data-reveal-play="enter-exit"
    data-reveal-start="top bottom"
    data-reveal-end="top top" 
    data-reveal-easing="power1.out"
    data-reveal-duration="0.5"
    data-reveal-delay="0"
    data-reveal-id="optional-reveal-id"
    data-reveal-debug="false"
>

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. The possibilities of what you can create are endless!

A few things to note before you get started:

1. No extrenal 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 third-party component can).

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

5. Custom Components can easily be converted into an encrpyted third-party component that can be distributed and sold via the Elements platform.

Creating a Custom Component

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

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.

@text("heading")

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

<h1 class="text-lg text-gray-300 font-heading">@text("heading")</h1>
<p class="text-sm text-slate-300/70">Build the website of your dreams.</p>

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

@text("heading", default: "Hello World!")

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

@dropzone("extraItems")

Can also be written like this.

@dropzone(name: "content")

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

@dropzone("zone-1", title: "Zone 1")

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 Elements API 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. You can learn more about Element Packs in the Elements Pack section of this manual.

Dev Diary Videos for Custom Elements

The following videos will show you how to create Custom Elements. The following videos were recorded with a development version of Elements so the feature(s) available now may differ slightly to those in the video. View the Tutorial playlist on YouTube for more videos.

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

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

CSS Classes

This text area is useful for adding Tailwind CSS Classes.

ID

This text field is useful for applying a custom name to a component. The ID name of the component will appear in the Link window enabling you to easily create Anchors, watch the video below to learn more about how to use this feature.

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

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.

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

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

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.

The color settings allow you to manage a global colour palette for your website. You can add aditional colors, and override theme defaults.

The colors specified in the Theme Studio can be chosen in an Elements settings. This can be anything from a font color to a background gradient.

The site template give you the ability to modify the underlying template code for your entire site. It's perfect for placing scripts, such as Google Analytics anywhere within the page structure.

The site template is used on every page of your website. If you need to insert a script just on specific pages, you should use the page level code areas instead.

Page Properties

The Site Template has access to all the page level properties, such as {{page.title}} and {{page.description}}. A full list can be found in the section under in this manual.

To reference a file in you Resources folder you can use the following page tag to get the correct path to the resources folder:{{page.resourcesPath}}.

The following example shows how you might link to a "store.js" file that's in a "scripts" folder in the Resources area.

Site Template Example

The following is an example of the default site Template. Please note the template is only used during preview and export. It is not used in Edit mode.

Dev Diary Videos for Site Templates

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

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

The following tutorial will show you how to quickly create a website banner with background image and overlayed text.

Adding a snow effect to your website is a fun way to bring festive cheer to your projects in December. It creates a cozy seasonal atmosphere, delights visitors, and adds personality to your design, making your site more memorable and shareable. In this tutorial, we’ll show you how to easily implement a lightweight snow animation using JavaScript in Elements, perfect for enhancing your holiday-themed websites.

Element Project File

The completed project file is included below for your convenience.

• Open Snow Demo in Elements

Resources:

Links to the resources used int he Tutorial:

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

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

Custom Component Code

If you'd like to create the Custom Component show in the Tutorial, copy and paste the following code into the the Template Properties areas in Elements.

Place the following code in your Template:

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

Place the following code into the Properties:

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

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

Center Align

Set the left and right margin to "Auto" to center the component.

Left Align

Set the left margin to "0" and the right margin to "Auto" to left align the component.

Right Align

Set the left margin to "auto" and the right margin to "0" to left align the component.

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.

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

The Elements language is a simple, yet powerful templating language for RapidWeaver Elements, it's often referred to as the Elements API.

The Elements language allows third-party developers to create custom Elements that can be used within the RapidWeaver Elements layout engine. Element Dev Packs (.elementsdevpack) are a bundle of files, usually a mixture of HTML, JS, CSS, JSON, and images.

The only thing you need to start building your own custom Elements is a copy of RapidWeaver Elements. Previous web development experience is recommend, but not required.

What's Required?

The following is a list of suggested tools to make developing Elements easier.

• A licensed copy RapidWeaver Elements (Required)

• Text editor, we recommend .

• for icon name reference.

Sample Code on GitHub

A public with a growing collection of Element Dev Packs is now available.

Developer Community

We have a on the . The is open to anyone interested in building addons for the RapidWeaver Elements ecosystem.

We're always around to offer help with getting started or if you just need a hand while developing your next great addon for RapidWeaver. Come join us, we're a friendly bunch ☺️

Got questions? email support@realmacsoftware.com

In this getting started guide we'll learn how to create a Component inside an Element DevPack, and then edit it and see the updates live in Elements.

Creating an Element Dev Pack & Component

The boilerplate code for an Element Dev Pack (and Component) can be created inside Elements.

Go to Elements > Settings > Addons and click the "Create Pack" button in the bottom left had corner of the window. You will then be prompted to enter information about your pack, such as developer name and title, along with a location to save the Dev Pack.

Watcht the short video below to see how to create an Element Dev Pack including a Component.

Editing the Component

Adding Assets to a Component

The following video shows how you can add extra files for use in your Component. This videos shows adding a js file and linking to it from the page template.

Elements takes care of everything for you, however, sometimes you need a little extra control or just prefer the way another tool works. We've listed out a collection of great tools and resources that work well alongside RapidWeaver Elements.

Commenting Systems

Easy to use commenting systems that you can add to any page on your website.

Blogging

The following blogging platforms can be easily integrated into a static website.

If you want to control the scroll timing (and other options such as easing) when scrolling to an anchor then you can use the js library.

To add Smooth Scroll to yoru project, put the following in your project’s Template, just before the closing </head> tag.

Note the speed option in the docs say this:

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

If you'd like to see previews of your projects in the finder instead of the generic Elements icon, you'll need to enable Quick Look. Follow our short guide below to enable this.

How to enable Quick Look Previews

When you first launch Elements, the Finder will inform you that a Quick Look Preview Extension has been added. This extension needs to be enabled if you want to see a preview of your website in the Document icon.

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

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

Elements is based on Tailwind, so obviously we use Tailwind for all our components, and highly recommend everyone using and building for Elements does the same.

If everyone is using Tailwind we can ensure consistency across all components, making it easier for end users to build sites that are consistent and easy to update.

It also makes collaboration smoother, as everyone follows the same styling method.

⚠️ Consistency for the User

In Elements, all styling configurations—such as colors, fonts, and sizes—are controlled by the Theme (which anyone can create) and managed through the Theme Studio (where users can customize the styling to their needs).

Components shouldn't dictate custom styling; instead, they inherit styles from the Tailwind themes. The theme informs the components how they should look, ensuring consistency across all components, whether they are built-in, third-party, or custom-made. This approach ensures that users can switch themes seamlessly without breaking their site’s design.

Allowing components to dictate their own styles will lead to inconsistencies, making it unclear whether a component will “just work” within a given project. That’s why components rely on the values defined in the Theme Studio as their defaults, ensuring uniformity. They are not opinionated about the actual values—they just need to know that a value exists for each style.

For example, let’s say you have a Heading component. You want to set a default font family and font size. In your properties.json, you would define the default font family as heading and the default font size as 3xl.

The component doesn’t concern itself with the specific values of these properties; it only cares that they exist. This allows themes and users to fully customize the styles while ensuring that all components “just work” in any project.

Default Colours

Tailwind (and Elements) includes an expertly-crafted default color palette out-of-the-box - you should take advantage of that and use it.

All components need to work out of the box. A good guide is to use "Brand" for things like buttons, and "Text" for the text colours, and "Surface" for background colours.

Utility-First Approach

Tailwind offers a utility-first approach to styling. This means you apply small, reusable utility classes directly to your HTML elements. Instead of writing a lot of custom CSS, you can compose styles using these predefined classes.

Direct Application in Templates

Instead of writing custom CSS you should use Tailwind utilities directly in your template. This means adding classes like bg-blue-500, text-center, or mt-4 right on your HTML elements. This way, you remove the need for scoped CSS because each component’s styles are already self-contained.

Preventing Style Leakage

Because Tailwind styles are applied directly to DOM elements using utility classes we prevent style leakage between components. Each component’s styles stay within its HTML structure meaning they don’t affect other components or pages on your site.

Customization with Properties

For customization, you can use properties to generate Tailwind classes ready to use within your templates. This way, you keep flexibility while sticking to the utility-first approach.

Optimized CSS Generation

In summary, the custom CSS in your component templates should use Tailwind classes. This change removes the need for scoped CSS and keeps all styling within Tailwind. Elements can then generate only the CSS your page uses, since it builds Tailwind locally and includes just the necessary utilities. This results in a smaller, more efficient CSS file(s).

I really NEED to scope my CSS

If you’ve read all too the above and are still saying to yourself “great…but I really need to use custom/scoped CSS!” then there is a way but only use this as a last resort!

You can manually “scope” your CSS classes by using the component’s ID in your Template and Styles. Ahiwl this is not strictly “scoped CSS”, it will encapsulate the CSS to each individual component instance.

In your styles you can do something like:

.{{id}} {
    ...
}

.{{id}} .child-element {
    ...
}

And in your Template file:

<div class="{{id}} ...">...</div>

Remember; If you add custom CSS it will not be controllable from the Theme Studio, thus resulting in a worse user experiance.

Components and Themes require a specific directory structure in order to work correctly, these are called Bundles in macOS.

Element Packs are essentially a collection of folders and files, with the top-level directory having a name that ends with a .elementsdevpack extension. This name and structure is only used for development purposes, dev element packs should not be sold or distributed to other users.

Addons distributed via the Elements Store and encrypted and non-editable meaning your code is protected. You can learn more about distributing your addon here.

Element Dev Pack Bundle Structure

The following outlines the top level folder structure for an Element Pack. It can contain multiple addons, each component or theme should be placed in the corresponding folders inside the pack.

• MyElementPack.elementsdevpack (folder/bundle)

  • components (folder)

  • info.json (file)

  • themes (folder)

  • shared (folder)

The following shows an Element Dev Pack containing multiple themes and components:

• MyElementPack.elementsdevpack (bundle)

• info.json

• components (folder)

  • com.companyname.slideshow (folder)

  • com.companyname.navbar (folder)

• themes (folder)

  • com.companyname.themes.architect (folder)

  • com.companyname.themes.solar (folder)

• shared (folder)

The info.json file at the root of your Element Pack defines important information about the pack.

• title: The name of the element pack

• identifier: A unique id for the pack, should be a reverse domain identifier

• author: The author of the pack

• version: (Integer) The major version number, ie v1, v2

• build: (Integer) A number identifying a particular build within the current version. This should increase with each release.

{
  "title": "Pack Name",
  "identifier": "com.companyname.packname",
  "author": "Realmac Software",
  "version": 1,
  "build": 31
}

Version Numbers

When you create a new pack the version number should be set to 1 and build should also be 1. As you make changes to components and release an update, the build number should increase. This allows you to identify the particular release a user has, identify issues, and supply fixes or add new features.

When you need to make breaking changes, or you'd like to release a chargeable upgrade, it's best to increment the version number and reset the build to 1.

The properties.json file defines the User Interface for an Element. Browse the UI Control docs for a full list of available controls.

Here's an example of setting Default Properites on various UI controls.

{
    "groups": [{
        "title": "Content",
        "properties": [{
            "title": "Text Style",
            "id": "textStyle",
            "themeTextStyle": {
                "default": { "base": { "name": "lg" }, "sm": { "name": "2xl" }, "md": { "name": "4xl" } }
            }
        }, {
            "title": "Theme Font",
            "id": "textFont",
            "themeFont": {
                "default": { "base": { "name": "heading" }, "sm": { "name": "quote" } }
            }
        }, {
            "title": "Padding",
            "id": "themeSpacing",
            "themeSpacing": {
                "mode": "padding",
                "default": {
                    "base": {
                        "custom": true,
                        "left": 10,
                        "right": 20,
                        "top": 30,
                        "bottom": 40,
                        "linkVertical": true
                    },
                    "sm": {
                        "custom": false,
                        "left": "xl",
                        "right": "xl",
                        "top": "xl",
                        "bottom": "xl"
                    }
                }
            }
        }, {
            "title": "Border Width",
            "id": "borderWidth",
            "themeBorderWidth": {
                "default": {
                    "base": {
                        "custom": false,
                        "left": "2",
                        "right": "2",
                        "top": "2",
                        "bottom": "2",
                        "linkHorizontal": true
                    },
                    "sm": {
                        "custom": false,
                        "left": "8",
                        "right": "8",
                        "top": "8",
                        "bottom": "8",
                        "linkHorizontal": true
                    }
                }
            }
        }, {
            "title": "Border Radius",
            "id": "borderRadius",
            "themeBorderRadius": {
                "default": {
                    "base": {
                        "custom": false,
                        "topLeft": "sm",
                        "topRight": "sm",
                        "bottomLeft": "sm",
                        "bottomRight": "sm",
                        "linkHorizontal": true
                    },
                    "sm": {
                        "custom": true,
                        "topLeft": 5,
                        "topRight": 5,
                        "bottomLeft": 5,
                        "bottomRight": 5,
                        "linkHorizontal": true
                    }
                }
            }
        }, {
            "title": "Spacing",
            "id": "spacing",
            "themeSpacing": {
                "default": {
                    "base": {
                        "custom": false,
                        "left": "sm",
                        "right": "sm",
                        "top": "sm",
                        "bottom": "sm",
                        "linkHorizontal": true
                    },
                    "sm": {
                        "custom": false,
                        "left": "lg",
                        "right": "lg",
                        "top": "lg",
                        "bottom": "lg",
                        "linkHorizontal": true
                    }
                }
            }
        }, {
            "title": "Shadow",
            "id": "themeShadow",
            "mode": "shadow",
            "themeShadow": {
                "default": { "base": { "name": "sm" }, "sm": { "name": "lg" }, "md": { "name": "xl" } }
            }
        }, {
            "title": "Slider",
            "id": "slider",
            "slider": {
                "default": "45",
                "min": 20,
                "max": 60,
                "round": true,
                "units": "vw"
            }
        }, {
            "title": "Slider 2",
            "id": "slider2",
            "slider": {
                "default": { "base": 20, "sm": 30 },
                "min": 20,
                "max": 60,
                "round": true,
                "units": "vw"
            }
        }, {
            "title": "Slider 3",
            "id": "slider3",
            "slider": {
                "default": "3",
                "content": [
                    { "title": "a", "value": "2" },
                    { "title": "b", "value": "3" },
                    { "title": "c", "value": "4" }
                ]
            }
        }, {
            "title": "Alignment",
            "id": "alignment",
            "segmented": {
                "default": {
                    "base": "w-auto",
                    "md": "w-full"
                },
                "items": [
                    { "value": "w-full", "icon": "text.alignleft" },
                    { "value": "w-asdf", "icon": "text.alignleft" },
                    { "value": "w-auto", "icon": "text.aligncenter" },
                    { "value": "custom", "icon": "text.alignright", "title": "Custom" }
                ]
            }
        }]
    }]
}

The info.json file contains important information about a Component. The file uses the JSON format and consists of a series of key and value pairs. It's required for Component to function.

Component Categories

Every Component needs to define a category in which they belong. This tells Elements how to group components in the UI and helps users to locate components. Your Component MUST use one of the following pre-defined categories.

If you think we're missing a category, please visit the forum and let us know.

Supported Key-Value Pairs

The Elements info.json file supports the following key-value pairs.

info.json Example

You can use the following code as a starting point for your own info.json file.

{
  "identifier": "com.realmac.elementpack.helloworld",
  "author": "Realmac Software",
  "title": "Hello World",
  "group": "Utility",
  "tags": [
    "simple",
    "example"
  ]
}

At a bare minimum you'll want to include PDF images for light mode icons so they can be used for all views where your Component appears within the RapidWeaver Elements UI.

Standard Icon

All Elements require an icon.pdf file for light mode. If the dark-mode.pdf file isn't provided, icon.pdf will be used in Dark Mode.

• icon.pdf (Required), 1:1 ratio, e.g. 128x128 (Square)

• icon-dark.pdf (optional), 1:1 ratio, e.g. 128x128 (Square)

Palette Icons

The Palette image should be named paletteIcon.pdf and paletteIcon-dark.pdf for Dark Mode. If the paletteIcon-dark.pdf file isn't provided, paletteIcon.pdf will be used in Dark Mode.

• paletteIcon.pdf (Required), 1:2 ratio, e.g. 128x256 (landscape)

• paletteIcon-dark.pdf (optional), 1:2 ratio, e.g. 128x256 (landscape)

Asset Placement

All Icon files should be placed at the root of the Component alongside the info.json file.

How to add a Custom Icon to your Component

Watch the short video below to learn more about adding custom icons to your Components.

Sketch Example File

Your pdf icons MUST be on a transparent background. The background should not be exported as this is generated in Elements.

We've provided an example Sketch document below you can use to get started.

Experimental / Unsupported - Banner Icons

There is some unfinished experimental support for banner style icons, these are great for layout style components. However, this style of icon may not be supported when Elements ships, please use with caution and ensure you also include the standard style of icon.

• bannerLayer1.png

• bannerLayer1-Dark.png (optional)

Banner icons can be layered, and each layer can represent a different colour in the Theme Studio. For example this icon uses four layers and three of those layers will be tinted with the Theme colour.

• bannerLayer1.png

• bannerLayer2-brand-500.png

• bannerLayer3-brand-200.png

• bannerLayer4-surface-500.png

Banner images should be 512px in width, but can be as short or tall as you need. Banner icons will appear the same in both grid and list.

Responsive Values

By default, Elements makes all property controls responsive, allowing users to override any control setting across different devices. Elements accomplishes this by appending Tailwind’s responsive modifiers to the control’s value. Let’s explore how this works in an example.

Responsive Example

In this example, a control uses Tailwind’s text transform utility classes. The user can customize the control’s value across devices by clicking the responsive icon (dot) next to the control title in Elements.

Initially, the headingTextTransform output is set to normal-case. However, once the user customizes this setting in Elements, it may look something like this: normal-case sm:uppercase md:lowercase lg:capitalize.

Elements automatically applies and manages these responsive modifiers, saving you the effort of manually setting values for each device size and applying the appropriate modifier.

Multi Value Responsive

This even works for controls that require multiple classes as the value. So given the following control:

You can expect the output of position to be bottom-0 left-0 right-auto md:top-0 md:left-auto md: right-0

Disable Responsive Controls

To disable responsive values for your control, simply add "responsive": false to your control.

Groups allow you to organise similar settings into relevant groups.

Here is an example emtpy group:

Controls should placed inside of the properties array. The following example has a heading and an image drop well inside of the group.

The following example has two groups, the first with a text box, and the second with an image dropwell.

The visible key in an object's properties can be set using a logical expression that evaluates to true or false. This determines whether a specific UI element is shown or hidden based on the conditions specified in the expression. Works in the same way as .

• Boolean Logic: Use logical operators (&&, ||) to combine multiple conditions.

• Comparison Operators: Use ==, !=, >, <, >=, <= to compare values.

Examples

1. Complex Condition

   This makes the property visible only if the backgroundType is either custom' or 'image', and the textColor is 'white'.

2. Visibility Based on Numeric Ranges

   Useful for showing elements that should only be visible within a specific range, e.g., showing a message if the opacity is not between 20-30.

3. Negation to Hide Elements

   The property is visible when mySwitchControl is false.

The following example code toggles the visibility of controls based on the value of the switch.

All properties have the same general structure using the following object keys.

Code Example

In some cases, it's adventagous to format a value before it's passed to your element's templates. To achieve this, add a format property to the configuration specifying the format string.

Value formatting is support by all controls.

Basic Example

For example, the following creates a slider ranging from 0-12 with a property called padding

If the slider is set to 5 and the template contains

the output will be

Arbitrary Value Example

You could also format the control's value to use tailwind's arbitrary value feature. This would allow your element precis control over all css properties. For example, you can control the opacity utility class from tailwind with a slider:

If the slider is set to 50 and the template contains

the output will be

Advanced CSS Example

You could also format the control's value to output a valid CSS property. For example, if we want to control the translateX css property with a number input, we can do the following:

If the number field is set to 50 and the template contains

the output will be

Of cause, in this case you would want to add this to a CSS template file.

CSS Custom Property Example

You can even use the format to control a CSS Custom Property (css variable). If we take our previous example and expand on it, we might want to instead set a --translateX CSS custom property with a number input:

If the number field is set to 50 and the template contains

the output will be

In this case you would either want to add this to a CSS file, or use an inline style attribute to set the --translateX:

The enabled key in an object's properties can be set using a logical expression that evaluates to true or false. This determines whether a specific UI element is enabled or disabled based on the conditions specified in the expression. Works in the same way as .

• Boolean Logic: Use logical operators (&&, ||) to combine multiple conditions.

• Comparison Operators: Use ==, !=, >, <, >=, <= to compare values.

Examples

1. Complex Condition

   This makes the property enabled only if the backgroundType is either custom' or 'image', and the textColor is 'white'.

2. Visibility Based on Numeric Ranges

   Useful for enabling controls that should only be visible within a specific range.

3. Negation to Hide Elements

   The property is enabled when mySwitchControl is false.