Only this pageAll pages
Powered by GitBook
Couldn't generate the PDF for 218 pages, generation stopped at 100.
Extend with 50 more pages.
1 of 100

Elements Manual

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Elements App

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Markdown

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Dropdown

Loading...

Filter

Filter Tags

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Modal Close

Loading...

Image Slider

Loading...

Loading...

Top Pages

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Font Size

Manage global font size

Spacing

Specify global spacing for your website

Shadows

Border Width

Border Radius

Loading...

How to

Loading...

Loading...

Loading...

Early Access

Learn more about Elements Early Access

Elements is moving from Beta to Early Access! While it’s still in development, it’s now ready for real-world use, and we’re releasing new builds every week based on your feedback.

You can purchase Elements via our website.

Why Early Access?

The Elements Beta helped us refine the foundation, and now we’re confident Elements is ready for real-world projects. Early Access lets more people use it while we continue fine-tuning features and adding improvements.

  • You get access to Elements now – no waiting for a full release!

  • Frequent updates – we’ll keep refining and adding features based on your input.

  • Your feedback matters – Early Access is a collaboration, and your insights help shape Elements.

  • Not quite “final” yet – some features are still in progress, and you may run into a few quirks along the way.

How to Join Early Access

If you're comfortable using in-development software, you can get Early Access today by visiting elementsapp.io and purchasing a copy. Once you do, you’ll be able to start building with Elements right away!

Right now, Early Access is only available to paying users. This allows us to focus on providing the best experience and support for those actively using Elements.

This approach ensures that our paying customers get taken care of first, with frequent updates and improvements based on real-world use. Your support helps shape the future of Elements, and we truly appreciate it! 🙌✨

How long will Elements be in Early Access

As long as needed, but our goal is to ship a 1.0 version later this year!

Your Feedback Matters!

By using Elements, sharing your experiences, and letting us know what works (and what could be better), you’re playing a huge role in shaping its future. We love hearing from you, so keep that feedback coming!

Thanks for being part of this journey—we can’t wait to see what you create with Elements!

System Requirements

RapidWeaver Elements is a desktop application for macOS.

Download Elements

First, you'll need to Download Elements. When the download is complete double-click to unzip the file, then move Elements.app to your Applications Folder.

System Requirements

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

  • Requires macOS 13 Ventura or newer.

  • Apple Silicon or Intel based Mac.

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

Got Questions?

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

License Types

Choose the perfect license for your needs

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

You can purchase Elements via our website.

Each license includes:

  • Unlimited websites

  • Templates, Themes, and Components

  • 1 year of free updates

  • Installation on up to 3 Macs simultaneously per user license

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

  • Unlimited Support via Email and Forum

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

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

Key Features
Base
Plus
Pro
Studio
Site

Custom Components

3

Unlimited

Unlimited

Unlimited

Unlimited

Global Components

2

Unlimited

Unlimited

Unlimited

Unlimited

Cloud Storage

1GB

1GB

1GB

10GB

1TB

Remove Elements Branding

-

Yes

Yes

Yes

Yes

Priority Support

-

-

Yes

Yes

Yes

Resell Websites

-

-

Yes

Yes

Yes

Users (3 Macs per user)

1

1

1

10

Unlimited

License Type

Personal

Personal

Commercial

Commercial

Commercial

Price

$59/year

$119/year

$249/year

$1,950/year

$14,950/year

Key Features Explained

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

Custom Components

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

Global Components

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

Elements Branding

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

Resell Websites (Pro, Studio, and Site)

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

Why Choose a Plus License over a Base License?

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

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

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

Why Choose a Pro License?

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

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

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

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

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

If you have any further questions about licensing please email support@realmacsoftware.com.

Purchasing & Licensing FAQ

Learn more about pricing and subscriptions.

Whether you’re new to Elements or considering an upgrade, this section covers everything you need to know about purchasing a license, managing your subscription, and understanding what’s included with each plan.

Pre-Sales FAQ

Q: What are the differences between the different plans?

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

The Plus license is our most popular license and is best suited for the majority of users. If you're building website for paid clients, you should choose a pro license.

Every Elements license includes all you need to build the website you've always wanted, however, there are a few key differences. Please take a look at our License Types document for more details.

Q: Can I switch to a different license?

Yes, eventually Elements will support upgrading/downgrading in app, but in the meantime, email support and we'll do the change manually for you.

Purchasing FAQ

Q: Where can I purchase Elements?

You can purchase Elements via our website.

Q: I didn't receive a license email. Where is it?!

When you purchase Elements you will receive an order confirmation email within 5 minutes confirming your order along with your license number. The email will be sent from "mailer@fastspring.com" which is our payment provider. If you can't find the email it's usually because of one of the following reasons:

  • The email from us ended up in your Spam Folder.

  • You entered your email address incorrectly when purchasing (no shame, we've all done it!).

The first step is to check your spam folder for anything from Realmac Software or mailer@fastspring.com.

If you still can't find your order email, you can contact us directly: support@realmacsoftware.com. Please include your name, email address, and when you purchased Elements — this will help speed up the search!

Q: Do you offer refunds?

Yes! We offer a 7 day money-back guarantee.

If you've purchased Elements from us and are not happy, let us know within 7 days, and we'll issue a refund for you.

Please forward your original email receipt from your purchase to obtain your refund. While you don't have to do this, it does make it much quicker for us to find and process.

Send this email to support@realmacsoftware.com

We generally issue refunds within 48 hours (often quicker).

You don’t need to include a reason, but we really appreciate your feedback to help us improve Elements.

Subscription FAQ

Q: Is Elements subscription based?

Not in the traditional sense. When you purchase a Elements license from our website, you are automatically subscribed to one year of app updates. The license itself will not expire (you can use it forever), however the one year period of app updates will renew on an annual basis.

Please note the following:

  • Subscriptions automatically renew unless you cancel them.

  • If you cancel, your one year period of app updates will remain active until the next renewal date.

  • You can manage your subscription here.

Q: What is your subscription cancellation policy?

You can cancel your subscription anytime via your Billing Manager.

We offer a 7 day money-back guarantee from the date you initially purchase a license for our software. During those initial 7 days you can cancel your subscription and request a refund with no questions asked.

Subsequent automatic subscription renewals are not refundable under our 7 day money-back guarantee.

Q: What happens if I cancel my subscription?

Your one year period of app updates will remain active. You will continue to receive updates until the next renewal date. If you wish to receive further updates after that renewal date, you will need to manually re-subscribe.

Q: How do I cancel my subscription?

Hopefully this day will never come, but if you need to cancel your subscription for one of our apps, visit the Billing Manager page.

In the event you cancel your subscription, any apps registered will continue providing all of its updates till the end of the current subscription period (the one you’ve already paid for).

Q: What happens if my subscription expires?

You get to keep the version of Elements you're currently using, you just won't receive any further updates to it. You'll need to re-subscribe to start receiving updates again.

Q: How do I manage my subscription?

Our Billing Manager can help you check a subscription status, change payment details, and cancel your subscription. All you need is access to the email address you used to purchase our software.

If you no longer have access to the email address, contact support@realmacsoftware.com, and we'll be able to help you directly.

Licensing FAQ

Q: Help, I've lost my license?

If you've lost your license, visit our License Manager and use the automated system to help find your previous purchases.

If you’ve tried using our license manager and are still having issues, please email support@realmacsoftware.com, and we’ll get you back up and running.

Be sure to check your Spam folder. Just in case!

Q: How do I deactivate my license?

If you have access to the activated version of our Elements, do this:

  1. Open your registered version of the App.

  2. Go to the App menu → Registration…

  3. Click "Deactivate" under the "Activations (1 of X)" button.

  4. Confirm your decision.

That's it. You can now use the same license to register the app on another Mac.

If you don't have access to your old Mac, you can still manage your license activations in the "Register…" window. This includes seeing what machines are licensed and deactivating any machines you no longer require. Elements > Registration…

Q: I'm seeing an "Activation failure (404)" Error when I try to register. What should I do?

First, make sure you are running the latest version of Elements.

The first thing to check is that your license number is correct. You'll often see this error if the code is slightly wrong or missing a digit.

If you've triple-checked and made sure you're license code is correct, try the following steps:

  1. Launch Elements and choose "Registration…" from the "Elements" menu.

  2. Deactivate your Mac using the "Activations (1 of 2)" button, and Elements should become Unregistered. (if required)

  3. Restart your Mac.

  4. Launch Elements.

  5. Open the Registration window again and press the "Activate License…" button and enter your new license details.

  6. You should now be up and running.

If you're still having issues, you can email support@realmacsoftware.com, and we'll be able to help you out.

Q: Help, my license won't activate!

If you see the following "Unable to Activate" message, it may mean your license was entered incorrectly, or Elements is having trouble validating it over the internet.

You can email support@realmacsoftware.com with your license, we can check if it's valid and working. If it is, and your license is still not activating on your Mac, you should try the following things:

  1. Check you don't have iCloud Private Relay or a VPN running.

  2. Check you've not installed anything that blocks or tracks network traffic (i.e. LittleSnitch.app).

  3. Reboot your Mac.

  4. Try activating your license on another Mac.

  5. Try activating your license on another network (3G/4G from your Phone).

  6. Try starting your Mac in Safe Mode. A guide can be found here on how to do this.

Trying out the above will help you narrow down the problem and determine if your Mac or network is causing the issue.

Q: Why am I seeing an "Update Period Expired" message when trying to register Elements?

You'll see this message if you're trying to activate a newer version of Elements that was released after your subscription period ended.

If your subscription has expired and you're trying to use a new version of Elements that was released after your subscription period you'll see the "Update Period Expired" window. You now have a couple of options. You can choose to purchase a new subscription to get access to the new version or get an older version of Elements that was covered during your active subscription period.

Elements will show you what version you can still use underneath the "Renew License" button. Clicking the button will take you to the release notes page where you can download this version.


Q: I still have a question, where can I go for help?

If you question wasn't answered above or you need clarification, please post on the Elements forum, and we'll get back to you as soon as possible.

Introduction

RapidWeaver Elements is a website builder for macOS.

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 now in Early Access 🚀

Elements is moving from Private Beta to Early Access, click here to learn more about this exciting announcement!

Elements FAQ

The Definitive RapidWeaver Elements FAQ

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 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: I have questions about Subscriptions or Purchasing Elements?

Take a look at our in-depth Purchasing and Licensing FAQ.

Q: Is there a demo/trial version of Elements available?

Right now, Early Access to Elements is only available to paying users. This lets us focus on delivering the best experience and support to those actively using the app. It also means we can ship frequent updates based on real-world feedback, your support directly helps shape the future of Elements

That said, if you pick up Elements and decide it’s not for you, we’re happy to offer a full refund. No questions asked.

Q: I've lost my license, where can I find it?

If you've lost your license, visit our License Manager and use the automated system to help find your previous purchases.

If you’ve tried using our license manager and are still having issues, please email support@realmacsoftware.com, and we’ll get you back up and running.

Be sure to check your Spam folder. Just in case!

Q: What are the system requirements for Elements?

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

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

A: Yes, please check the Elements Language documentation to get started.

Q: I still have a question, where can I go for help?

If you question wasn't answered above or you need clarification, please post on the Elements forum, and we'll get back to you as soon as possible.

Static Website Benefits

Benefits of using a static site generator like Elements

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.

Build a Digital Garden

Build your own space on the web, one you fully own and control.

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.

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

Articles on Digital Gardening

A Brief History & Ethos of the Digital Garden

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

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

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

Read the full article over on maggieappleton.com

Digital Homeownership

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

What is a Digital Garden?

A Digital Garden is lowercase b blogging. It's writing without worrying about what people will think. Read the full article over on christopherbiscardi.com

Editor

Learn more about Elements WYSIWYG Editor

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.

Getting Started

Advice to help you get started with Elements

Download Elements

First, you'll need to Download Elements. When the download is complete double-click to unzip the file, then move Elements.app to your Applications Folder.

An Introduction to the Elements Interface

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

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

Ready-Made Projects to Explore and Use

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

Optimise Media before import into Elements

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

In general, we'd recommend:

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

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

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

Need Website Hosting?

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

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

Migrations

Learn how to migrate from your existing Website Builder to Elements.

Keyboard Shortcuts

Elements has a host of available keyboard shortcuts.

Editor: General

Action
Keyboard Shortcut
Details

Quick Add Component

Command-Shift-F

Next Workspace

Command+Option+.

Previous Workspace

Command+Option+,

Show/Hide Titles

Command+Option+'

Show/Hide Outlines

Command+shift+'

Show/Hide Selection

Command+'

Scroll to Selection

Command+Shift+Option+'

Toggle Editor Scroll

Editor: Selecting and Moving Components

Action
Keyboard Shortcut
Details

Select Previous Sibling

Option+Up arrow

Select Next Sibling

Option+Down arrow

Select Parent

Option+Up arrow

Select Child

Option+Down arrow

Move Up

Options+Command+Up arrow

Move Down

Options+Command+Up arrow

Move to Parent

Options+Command+Left arrow

Move to Child

Options+Command+Right arrow

Editor: Screens

Action
Keyboard Shortcut
Details

Screens: Mobile

Command+1

Screens: SM

Command+2

Screens: MD

Command+3

Screens: LG

Command+4

Screens: XL

Command+5

Screens: 2XL

Command+6

Preview

Action
Keyboard Shortcut
Details

Preview Page

Command+P

Automatically previews website in default browser.

Preview Page In…

Command+Option+P

Choose from all installed browsers on your system before Previewing.

Migrating from Blocs
Migrating from Classic
Migrating from Stacks

Migrating from Classic

Learn more about switching from Classic to Elements

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

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

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

Testimonials from RapidWeaver Classic users upgrading to Elements

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

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

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

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

RapidWeaver Classic FAQ

Q: Will my existing RapidWeaver Classic themes be compatible?

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

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.However, you could 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.

Migrating from Stacks

Learn more about switching from Stacks to Elements

Elements is an excellent alternative to Stacks from YourHead Software because it simplifies the web design process while giving you powerful, modern tools to create beautiful, responsive websites. Unlike Stacks, which relies on a collection of costly third-party addons to extend functionality, Elements is built from the ground up with a streamlined, all-in-one approach.

It’s perfect for those who want a faster, more cohesive design experience, especially with the added benefit of Tailwind CSS for precise, professional styling.

Why Choose Elements over Stacks App?

Elements is a modern, all-in-one website builder built exclusively for macOS, no plugins, no patchwork. Unlike Classic + Stacks + Foundation + Additional stacks, which can quickly become expensive and fragmented, Elements gives you everything you need in one beautifully integrated app. It’s faster, cleaner, and easier to use, while still giving you full control over your design and code. Plus, Elements gets weekly updates, built in the open with direct feedback from users like you.

Testimonials from Stacks users switching to Elements

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

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

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

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

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

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

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

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

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

Apple Intelligence

How to use Apple Intelligence Writing Tools in RapidWeaver Elements.

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

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

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

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

Design System

Learn more about how the Elements design system works.

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

Migrating from Blocs

Learn more about switching from Blocs to Elements

Elements is a fantastic alternative to Blocs because it offers an incredibly flexible and intuitive design experience, especially for users who want to harness the power of Tailwind CSS.

With its modular approach and extensive customization options, Elements allows you to craft stunning, responsive websites with ease, while giving you precise control over every design detail. Plus, the supportive community and frequent updates ensure you’re always equipped with the latest web design features and trends.

Testimonials from Blocs users switching to Elements

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

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

Preview

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.

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

Components can be dragged and dropped from the Node Browser to the Editor and vice versa. Components can also be dropped directly into the Node Browser.

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.

Right clicking on the Page Title at the top of the Component Tree gives you a list of available pages you can switch too.

Menu command
Action

Rename

Edit the title of the selected Component.

Duplicate

Duplicate a single component and/or all sub components.

Duplicate without Content

Will duplicate the selected Component without any of the Child components.

Convert to Global

Convert the current selection into a Template.

Unlink from Global

Unlink the current selection into a Template.

Select Similar

Will select all matching Components in the Node Browser.

View Help…

Opens the default System browser with the Help page for the selected Component.

Remove

Deletes the currently selected Component.

Resources

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

All resources added to a project will be included when publishing or exporting your website.

Adding Resources

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

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

Supported File Types

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

  • Images - png, svg, jpg, etc.

  • Fonts - WOFF, WOFF2, TTF

  • YouTube URL - Single video's and playlists

  • Vimeo URL - Single video's and playlists

Adding YouTube and Vimeo Videos

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

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

Adding Custom Fonts

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

Editing Metadata

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

  • Filename (All file types)

  • Caption (images)

  • Author (images)

Creating Folders

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

Adding Remote Resources

Workspaces

Customize the Elements UI to the way you work.

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.

Component Inspector

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.

Responsive Breakpoints

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.

How do Breakpoints work?

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

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

Components

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

Built-in Components

These advanced components ship with every copy of Elements.

Accordion

Organize content into collapsible sections

Overview

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

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

How to use Accordion

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

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

Dark Mode

Automatic colour switching based on the users system settings

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.

Why Elements?

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.

  1. Weekly builds along with a video dev diary to keep the community in the loop.

  2. Be part of the Independent Web, don;t rely on social media companies.

  3. Static Sites are just better (although we do support php if you need it).

  4. Super active and supportive Community

  5. Fast, friendly, top-tier support!

Join the Independent Web

Be part of the independent web. Own your content.

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 belong to you, not a corporation. By joining the indie web movement, and using RapidWeaver Elements, 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 permanent and will always work.

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

Further Reading

  • Seven Reasons for having a Personal Website Maintaining my own personal website has been one of the most amazing, challenging, rewarding, growth-promoting, time-consuming, and adventurous experiences of my life.

  • For The Love of God, Make Your Own Website The internet sucks now--but it doesn't have to.

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

  • Autonomy Online: A Case For The IndieWeb One of the principles of the IndieWeb is that you own your content

  • This Page is Under Construction. A love letter to the personal website.

Background

Create fixed or angled backgrounds

Overview

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

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

If you want to add structure and layout control, use a Container. If you want angled edges, or fixed images use the Background component.

How to Use the Background Component

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

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

When to Use Background Instead of Container

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

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

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

Page Manager

Manage the structure of your website.

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

Pages

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

Code Files

To create a new file inside of your project, right click inside of the Page Manager and choose "New File".

Markdown Files

To create a new Markdown File with option front matter, right click inside of the Page Manager and choose "New Markdown File".

Folders

Folders are a great way to organize site content when you don't need a top level page. Folders can contain any number of pages or additional folders.

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

CMS

Markdown based Content Management System in Elements

Server Requirements

The CMS Components in Elements require PHP 8.x or newer. You must ensure all CMS related pages use a .php extension.

Wrapper Components

These components are used as wrappers, or container, components. You should place other components inside of these. Components placed inside these components will gain access to CMS data.

CMS Component
Description

Static Item

Wrapper for fetching a single item from the CMS.

Collection

Wrapper for fetching a collection (folder) og items.

Collection Item

Used for Collection page templates. Will fetch the requested Collection Item based on the slug in the URL.

Collection Search

Adds instant search for any collection.

Child Components

These components should be placed inside the wrapper components. These components have access to CMS data, such as as the title, date, author, body, and so on.

Component
Description

Body

Used to access the body of an item.

Item Author

Display the author for the current item.

Item Tags

Display tags for the current item.

Related Items

Display items related to the current item. Must be placed inside a Static Item or Collection Item.

Collection Pagination

Adds pagination links to any collection. Must be placed inside a Collection.

Conditional

Conditionally display content.

File and Folder Setup

The built-in CMS system in Element requires a specific file and folder setup to work. You must ensure all blog related pages use a .php extension.

Content

Content should be stored as Markdown down files inside a dedicated folder.

  • cms

    • posts

      • 2025-04-18-my-first-post.md

      • 2025-04-19-another-blog-post.md

The structure for the Markdown file:

---
title: "An Example Post"
date_published: "2025-04-20"
author: Steve
tags: [technology]
status: published
feature_image: blog/myimage.jpg
featured: true
---
This is the contents of my first post.

Authors

You can create additional metadata about Authors by organizing a folder structure with supplementary markdown files. In this example, the authors folder is placed at the same level as the "posts" folder.

  • cms

    • posts

    • authors

      • steve.md

      • jasmin.md

The structure for the Authors Markdown file:

---
name: "Steve"
avatar: blog/steve-photo.png
---
This is all about Steve.

RSS Feed

Any page with a CMS collection can provide an RSS feed. Simply append ?format=rss to the end of the URL, like this yourwebsite.com/blog/?format=rss .

Advanced

A $post array containing the post's information is available to any component placed inside a Collection or Item component.

Name
Type
Example

author

array

<?=$post['author']?>

author.avatar

string | null

<?=$post['author']['avatar']?>

author.bio

string | null

<?=$post['author']['bio']?>

author.name

string

<?=$post['author']['name']?>

author.slug

string

<?=$post['author']['slug']?>

body

string

<?=$post['body']?>

date_published

string

<?=$post['date_published']?>

featured

boolean

<?=$post['featured']?>

feature_image

string

<?=$post['feature_image']?>

slug

string

<?=$post['slug']?>

status

string

<?=$post['status']?>

tags

array

<?=$post['tags']?>

title

string

<?=$post['title']?>

Helpers

cms()

You can include the cms.php file for access to a cms() method.

// Important: you must ensure the cms() function hasn't 
// already been declared before including the file.
if (!function_exists('cms')) {
    require_once __DIR__ . '/{{cmsPath}}/cms.php';
}

$cms = cms("base_path");

// Collection of Items
$currentPage = 1;
$itemsPerPage = 10;
$articles = $cms->collection('articles')
    ->orderBy('date_published', 'asc')
    ->paginate($currentPage, $itemsPerPage);

// Single Items
$collectionPath = 'articles';
$itemSlug = 'hello-world';
$detailPage = '/articles/';
$item = $cms->item($collectionPath, $itemSlug, ['detailPage' => $detailPage]);

ElementsCMS.php

The ElementsCMS class is a PHP-based content management system that provides functionality for managing CMS collections and items. It serves as the main entry point for interacting with content stored

Overview

The ElementsCMS class manages the base path for content storage and provides methods to create collections, load items, and manage configuration options.

Constructor

__construct(string $basePath, array $options = [])

Creates a new instance of ElementsCMS.Parameters:

  • $basePath (string): The base path for the CMS content storage

  • $options (array, optional): Additional configuration options for the CMS

$cms = new ElementsCMS('/path/to/content', ['debug' => true]);

Static Methods

make(string $basePath, array $options = []): ElementsCMS

Static factory method that creates a new instance of ElementsCMS.Parameters:

  • $basePath (string): The base path for the CMS content storage

  • $options (array, optional): Additional configuration options for the CMS

Returns: ElementsCMS instance

$cms = ElementsCMS::make('/path/to/cms_data');

Configuration Methods

basePath(): string

Returns: The base path as a string

$path = $cms->basePath(); // Returns '/path/to/content'

options(): array

Returns: Array of all options

$allOptions = $cms->options();

option(string $key, $default = null): mixed

Returns: The option value or default value

Parameters:

  • $key (string): The option key to retrieve

  • $default (mixed, optional): Default value returned if the option is not set

$debug = $cms->option('debug', false);
$theme = $cms->option('theme', 'default');

setOption(string $key, $value): void

Sets an option value.

  • $key (string): The option key to set

  • $value (mixed): The value to set

$cms->setOption('debug', true);
$cms->setOption('cache_enabled', false);

Content Management Methods

collection(string $path, array $options = []): ElementsCMSCollection

Creates a new collection instance.Parameters:

  • $path (string): The path for the collection (relative to base path)

  • $options (array, optional): Additional options for the collection

Returns: ElementsCMSCollection instance

$articles = $cms->collection('articles', ['sort' => 'date']);
$projects = $cms->collection('projects');

item(string $collectionPath, string $slug): ?ElementsCMSItem

Loads a specific item from a collection.Parameters:

  • $collectionPath (string): The path of the collection

  • $slug (string): The slug/filename of the item (without .md extension)

Returns: ElementsCMSItem instance or null if not found

$blogPost = $cms->item('blog', 'my-first-post');
$aboutPage = $cms->item('pages', 'about');

Usage Examples

Basic Setup

<?php
require_once '/path/to/ElementsCMS.php';

$cms = ElementsCMS::make(
    '/var/www/cms_data',
    ['debug' => true, 'cache_ttl' => 3600]
);

Working with Collections

// Create a blog collection
$blog = $cms->collection('blog', ['sort' => 'date_desc']);

// Create a pages collection
$pages = $cms->collection('pages');

Loading Individual Items

// Load a specific blog post
$post = $cms->item('blog/introduction-to-cms');

// Load a page
$homepage = $cms->item('pages/home');

Managing Configuration

// Get configuration
$debugMode = $cms->option('debug', false);
$cacheEnabled = $cms->option('cache_enabled', true);

// Set configuration
$cms->setOption('theme', 'custom');
$cms->setOption('max_items_per_page', 10);

Dependencies

This class requires the following files:

  • ElementsCMSCollection.php

  • ElementsCMSItem.php

Make sure these files are available in the same directory as the ElementsCMS class.

File Structure

The CMS expects content to be organized in the following structure:

  • cms-base-path/

    • collection-name/

      • item-slug.md

      • another-item.md

    • another-collection/

      • item1.md

      • item2.md

Items must be in Markdown files (.md extension) within collection directories.

ElementsCMSCollection

A collection class for managing CMS items, providing methods for filtering, ordering, pagination, and searching.

Constructor

__construct(ElementsCMS $cms, string $path, array $options = [])

Creates a new collection instance.

  • $cms (ElementsCMS): The CMS instance.

  • $path (string): Path to the collection (folder).

  • $options (array): Additional options for the collection.


Instance Methods

with(string ...$relations): self

Add relations to be eager-loaded for all items in the collection.

  • $relations (string ...): One or more relation names.

  • Returns: $this (for chaining)

filter(array $criteria = []): self

Filter items in the collection by key/value pairs.

  • $criteria (array): Associative array of criteria (e.g., ['status' => 'published'])

  • Returns: $this (for chaining)

filterWith(callable $callback): self

Filter items in the collection using a custom callback.

  • $callback (callable): Function that receives an item and returns true to keep, false to exclude.

  • Returns: $this (for chaining)

orderBy(string $field, string $direction = 'desc'): self

Order the collection by a specified field.

  • $field (string): Field name to order by.

  • $direction (string): 'asc' or 'desc' (default: 'desc')

  • Returns: $this (for chaining)

whereDate(string $field, string $operator, string $date): self

Filter items by date field using a comparison operator.

  • $field (string): Date field to compare (e.g., 'published_date')

  • $operator (string): Comparison operator (e.g., '>=', '==', '<')

  • $date (string): Date value for comparison.

  • Returns: $this (for chaining)

paginate(int $page = 1, int $perPage = 10): array

Paginate the collection.

  • $page (int): Page number (default: 1)

  • $perPage (int): Items per page (default: 10)

  • Returns: array — Paginated results, typically including items, total, page, per_page, etc.

getCollection(): LaravelCollection

Returns the underlying Laravel collection of items.

  • Returns: Illuminate\Support\Collection of ElementsCMSItem objects.

findBySlug(string $slug): ?ElementsCMSItem

Find an item in the collection by its slug.

  • $slug (string): The slug to search for.

  • Returns: ElementsCMSItem|null

search(string $query): array

Search the collection items by query string.

  • $query (string): The search term.

  • Returns: array — Array of matching ElementsCMSItem objects.


Usage Example

$collection = new ElementsCMSCollection($cms, 'posts', [
    'expectDates' => true
]);

// Filter, order, and paginate items
$results = $collection
    ->filter(['status' => 'published'])
    ->orderBy('published_date', 'desc')
    ->paginate(1, 10);

// Find a specific item by slug
$item = $collection->findBySlug('hello-world');

// Search items
$matches = $collection->search('static site generator');

Developing for the CMS

The Elements CMS is a powerful content management system designed for RapidWeaver elements, providing a flexible and efficient way to manage content through markdown files with YAML front matter.

Table of Contents

  • Getting Started

  • Core Concepts

  • Working with Collections

  • Working with Items

  • Search Functionality

  • Related Items

  • RSS and Sitemap Generation

Getting Started

To initialize the CMS in your PHP code:

require_once 'path/to/cms.php';

// Initialize CMS with base path and options
$cms = cms('/path/to/content', [
    'detailPageUrl' => 'https://example.com/posts',
    'prettyUrls' => true
]);

Core Concepts

Collections

Collections are groups of content items stored in markdown files. Each collection is stored in a directory, with each item represented by a markdown file.

Items

Items are individual content pieces stored as markdown files with YAML front matter. The filename format can be either:

  • YYYY-MM-DD-slug.md (for dated content)

  • slug.md (for undated content)

Example item structure:

---
title: My Post Title
date: 2024-03-20
author: John Doe
tags: [news, technology]
categories: [blog]
featured: true
status: published
image:
    type: remote
    src: https://example.com/image.jpg
    alt: Image description
    width: 800
    height: 600
---

Content goes here...

Working with Collections

Basic Collection Operations

// Get a collection
$collection = $cms->collection('blog');

// Filter collection
$filtered = $collection->filter([
    'status' => 'published',
    'featured' => true
]);

// Order collection
$ordered = $collection->orderBy('date', 'desc');

// Paginate results
$paginated = $collection->paginate(1, 10);

Advanced Filtering

// Date-based filtering
$collection->whereDate('date', '>=', '2024-01-01');

// Custom filtering
$collection->filterWith(function($item) {
    return $item->featured() && $item->status() === 'published';
});

Working with Items

Loading and Accessing Items

// Load a specific item
$item = $cms->item('blog/my-post');

// Access item properties
$title = $item->title();
$date = $item->date('F j, Y');
$body = $item->body();
$excerpt = $item->excerpt(30);
$image = $item->image();
$url = $item->url();

// Access custom metadata
$customField = $item->meta('custom_field');

Item Relationships

// Load item with relationships
$item = $cms->item('blog/my-post')
    ->with('author', 'categories')
    ->withOne('featured_image')
    ->loadRelations();

// Access relationships
$author = $item->author;
$categories = $item->categories;
$featuredImage = $item->featured_image;

Search Functionality

The CMS includes a powerful search system that can be used in two ways:

PHP Search

// Search within a collection
$results = $collection->search('search term');

// The search results are scored based on where matches are found:
// - Title matches: 10 points
// - Excerpt matches: 5 points
// - Body matches: 1 point
// - Tag matches: 3 points per matching tag
// Results are automatically sorted by score in descending order

AJAX Search Endpoint

The CMS provides a search endpoint at search.php that accepts the following parameters:

  • q: Search query

  • collectionPath: Path to the collection

  • detailPageUrl: URL for detail pages

  • prettyUrls: Whether to use pretty URLs

  • basePath: Base path for content

  • template: HTML template for rendering results, can include Twig syntax

Example AJAX call:

// Alpine snippet
this.template = this.$el.querySelector(
    '[data-template="cmsCollectionSearchItemsTemplate"]'
).innerHTML;

const params = new URLSearchParams({
    q: this.query,
    collectionPath: "{{collectionDir.href}}",
    detailPageUrl: "{{detailPage.href}}",
    prettyUrls: "{{prettyUrls}}",
    basePath: "<?= __DIR__ ?>",
    template: this.template,
});

const res = await fetch(`{{cmsPath}}/search.php?${params}`, {
    method: "GET",
    headers: {
        "Content-Type": "application/json",
    },
});

The search system automatically maintains an index file (search-index.json) in the collection directory for improved performance. The index is automatically rebuilt when content changes are detected.

Related Items

The CMS provides a fluent interface for finding related items:

$related = $item->related()
    ->byTags()
    ->limit(5)
    ->excludeSelf()
    ->get();

// Or find by multiple criteria
$related = $item->related()
    ->by(['tags', 'author', 'categories'])
    ->in('blog')
    ->limit(3)
    ->get();

RSS and Sitemap Generation

RSS Feed

$rss = $collection->toRss(
    'My Blog',
    'Latest posts from my blog',
    'https://example.com/blog'
);

XML Sitemap

$sitemap = $collection->toSitemap(
    'https://example.com',
    'weekly',
    0.8
);

Best Practices

  1. File Organization

    • Keep collections in separate directories

    • Use consistent naming conventions for files

    • Include all necessary metadata in front matter

  2. Performance

    • Use caching when appropriate

    • Implement pagination for large collections

    • Optimize search queries

  3. Content Structure

    • Use consistent front matter fields

    • Include required metadata (title, date, status)

    • Properly format markdown content

  4. Security

    • Validate user input

    • Sanitize output

    • Use proper file permissions

Dependencies

The CMS requires the following PHP packages:

  • Symfony YAML

  • CommonMark

  • Illuminate Collections

  • Twig (for template rendering)

Error Handling

The CMS includes built-in error handling for common scenarios:

  • Invalid file paths

  • Missing required metadata

  • Malformed YAML front matter

  • Search index issues

Support

For issues, feature requests, or contributions, please refer to the project's issue tracker or documentation repository.

ElementsCMSItem.php

Represents a single CMS item loaded from a Markdown file with front matter. Provides structured access to metadata, raw and rendered content, file paths, and relationships to other items.

Constructor

__construct(ElementsCMS $cms, array $data = [])

Creates a new CMS item.

  • $cms (ElementsCMS): The CMS instance.

  • $data (array): The data for the CMS item.


Static Methods

static load(ElementsCMS $cms, string $filepath): ?self

Load a CMS item from a file.

  • $cms (ElementsCMS): The CMS instance.

  • $filepath (string): Path to the file.

  • Returns: ElementsCMSItem|null – Loaded item or null if not found.


Instance Methods

setOptions(array $options): self

Sets runtime options for the item.

  • $options (array): Option key/value pairs.

  • Returns: $this for method chaining.

getOption(string $key, $default = null)

Gets an option value by key.

  • $key (string): Option name.

  • $default (mixed): Default value if not found.

  • Returns: Mixed option value.

slug(): string

Returns the item’s slug (URL-friendly identifier).

title(): string

Returns the item’s title.

date(string $format = 'F j, Y'): string

Returns the item's date in the given format.

  • $format (string): Date format (default 'F j, Y').

datePublished(string $format = 'F j, Y'): string

Returns the item's published date.

dateModified(string $format = 'F j, Y'): string

Returns the item's last modified date.

featured(): bool

Checks if the item is marked as featured.

status(): string

Returns the item's status (e.g., published/draft).

body(): string

Returns the rendered HTML body content.

rawBody(): string

Returns the raw markdown body content.

image(): ?string

Returns the item's image URL, if available.

excerpt(int $words = 30): string

Returns an excerpt of the body, limited to the specified word count.

meta(string $key, $default = null): mixed

Fetches a value from the item's metadata/front-matter.

  • $key (string): Meta key.

  • $default (mixed): Default if key is missing.

attach(string $key, $value): self

Attach related data to the item (e.g., relations, computed properties).

get(string $key, $default = null): mixed

Returns any value from the item data or metadata.

__call($method, $arguments)

Allows dynamic method access to metadata fields.

file(): string

Returns the full path to the file.

fileName(): string

Returns the base filename (without extension).

url(): string

Returns the item’s URL.

lastModified(string $format = 'F j, Y'): string

Returns the file's last modified date.

toArray(): array

Returns all item data as an associative array.

with(string ...$relations): self

Declare relations (one-to-one or one-to-many) to eager-load.

withOne(string ...$relations): self

Declare one-to-one relations to eager-load.

withMany(string ...$relations): self

Declare one-to-many relations to eager-load.

loadRelations(): self

Loads all defined relations for the item.


Usage Example

$cms = new ElementsCMS(/* ... */);
$item = ElementsCMSItem::load($cms, 'posts/hello-world');

if ($item) {
    echo $item->title();           // Item title
    echo $item->body();            // Rendered body
    echo $item->datePublished();   // Published date
    $item->with('author', 'categories')->loadRelations();
}

Frontmatter

Frontmatter is a common authoring convention, originally popularized by Jekyll that lets you add metadata to a page. It consists of a block of key-value pairs placed at the top of a Markdown file.

Elements supports the following frontmatter

  • title

  • date

  • image

  • tags

Title

Generally used for a post or page title.

title: "Hello World"

Date

In the following format, year-month-day.

date: "2025-03-17"

Online Editor

Online CMS Markdown editor for Elements

The Online Editor is currently in development and is not yet publicly available.

The backend CMS components will allow you to edit and create new Markdown files via any web browser.

Pretty URLs

Learn how to setup pretty URLs for your CMS Collections.

Clean URL Redirection & Routing with .htaccess

This guide explains how to use Apache’s .htaccess to:

  1. Redirect URLs like /post/?slug=some-post to /post/some-post/

  2. Internally rewrite /post/some-post/ to /post/index.php?slug=some-post

  3. Support both single-route and multi-route setups

Option 1: Single Route (e.g. /post/ only)

Use this if you’re only applying the redirect/rewrite logic to one route like /post/

.htaccess Example:

How it works:

Redirect Rule (Human-Friendly URLs)

  • Matches incoming requests like /post/?slug=some-post

  • %{THE_REQUEST} ensures it only triggers on direct browser requests, not rewrites

  • Redirects to: /post/some-post/ using captured value %1

Rewrite Rule (Internal Routing)

  • Matches URLs like /post/some-post/

  • Internally rewrites to index.php?slug=some-post

  • Uses !-f and !-d checks to avoid rewriting actual files or directories

  • QSA preserves any additional query parameters (like UTM tags)

Option 2: Multi-Route Support (e.g. /post/, /notes/, /blog/, etc.)

Use this if you want the same functionality across multiple sections without duplicating rules.

.htaccess Example:

How it works:

Redirect Rule (Dynamic Section Matching)

  • Matches /something/?slug=some-slug

  • ([^/?]+) captures the section name (e.g., post, notes)

  • ([^&\s]+) captures the slug

  • Redirects to /section/slug/

Rewrite Rule (Flexible Routing)

  • Matches /section/slug/

  • Internally rewrites to /section/index.php?slug=slug

  • Works for any folder that uses index.php to handle dynamic slugs

Example Requests:

Notes and Best Practices

  • Place .htaccess in your site root, unless you’re scoping it to a subfolder.

  • Make sure mod_rewrite is enabled on your Apache server.

  • Use [R=301,L] for permanent redirects (cached by browsers).

  • The QSA flag (Query String Append) ensures extra parameters aren’t lost.

  • Ensure your index.php files handle $_GET['slug'] properly.

Debugging Tips

  • If you see errors like AH00124: Request exceeded the limit of 10 internal redirects, it likely means you are rewriting the same request repeatedly.

  • Use RewriteCond %{REQUEST_FILENAME} !-f and !-d to prevent rewriting actual files or folders.

Template Data

With Twig, you can dynamically output content, apply filters, and build custom logic directly into your website.

Item Data

Inside of a Collection, Collection Item, and Static Item component you have access to the following data.

Collection Pagination

This object, combined with Twig, will allow you to build custom pagination to suite your project's needs.

Twig Filter Examples

For example, if you need to ensure your title is uppercased you could append a pipe and upper text to the item.title tag, like this:

Outputs: Hello world!

Outputs: HELLO WORLD!

Useful Resources

Button

A fundamental user interface element in web design

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

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

The Elements CMS gives you full control over how your content is displayed by supporting the templating language — a fast, secure, and flexible engine widely used in modern content systems.

RewriteEngine On

# 1. Redirect /post/?slug=some-post to /post/some-post/
RewriteCond %{THE_REQUEST} \s/post/\?slug=([^&\s]+) [NC]
RewriteRule ^post/$ /post/%1/ [R=301,L]

# 2. Internally rewrite /post/some-post/ to /post/index.php?slug=some-post
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^post/([^/]+)/?$ /post/index.php?slug=$1 [L,QSA]
RewriteEngine On

# 1. Redirect /section/?slug=some-slug → /section/some-slug/
RewriteCond %{THE_REQUEST} \s/([^/?]+)/\?slug=([^&\s]+) [NC]
RewriteRule ^ %1/%2/ [R=301,L]

# 2. Internally rewrite /section/some-slug/ → /section/index.php?slug=some-slug
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^([^/]+)/([^/]+)/?$ /$1/index.php?slug=$2 [L,QSA]

Request

Redirected To

Internally Rewritten To

/post/?slug=week-1

/post/week-1/

/post/index.php?slug=week-1

/notes/?slug=update

/notes/update/

/notes/index.php?slug=update

/blog/?slug=first-entry

/blog/first-entry/

/blog/index.php?slug=first-entry

title

{{item.title}}

date

{{item.date}}

url

{{item.url}}

slug

{{item.slug}}

datePublished

{{item.datePublished}}

dateModified

{{item.dateModified}}

body

{{item.body}}

raw body

{{item.bodyRaw}}

status

{{item.status}}

featured

{{item.featured}}

image

{{item.image}}

excerpt

{{item.excerpt}}

Current Page

{{pagination.currentPage}}

Per Page

{{pagination.perPage}}

Total Items

{{pagination.totalItems}}

Last Page

{{pagination.lastPage}}

{{item.title}} 
{{item.title|upper}}
Twig
Twig Docs
Twig Filters
Twig Playground
PHP Date Functions

Container

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.

The container width can be set up globally for each breakpoint in the Screens area of the Theme Studio.

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.

Flex

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.

Form

Send form data via email or webhooks

The Form Component is a powerful form solution allowing you to send form submissions via your own email server or via a webhook.

Server Requirements

The Form Component in Elements requires PHP 8.1 or newer. You must ensure all pages with a Form use a .php extension.

PHP Server Check

Ideally you should be running PHP 8.4 or newer, but as a minimum you need 8.1. You can easily check this by appending ?apicheck to any page with a Form, for example:

my-website.com/contact/?apicheck

Form Compatibility Checklist

Form Components

The following Components must be placed inside of the "Form" Component wrapper to function correctly.

Form Component
Details

Attachment

Allows users to attach files when sending the form, can be limited in size or specific file type.

Checkbox

Error

Display an error message on form submit.

Input

Label

Radio

Submit

Another component such as a Button or Image can be placed inside this component to trigger the Form Submit function.

Success

Display a success message on form submit.

Form Setup

To recive emails via the Form Component you will need to enter your Email server details. Here’s a breakdown of what each field means and what you’ll need to configure to make it work properly.

Authentication Settings
Details

Host

Email host address. e.g. mail.yourdomain.com

Port

The port number the email server uses for sending messages. - 587: For TLS encryption (most common) - 465: For SSL encryption. - 25: For non-encrypted emails (not recommended).

Encryption

Choose the encryption method required by your email provider. None, TLS, SSL

Username

The email address or username for the SMTP account you’re using to send emails. e.g. admin@yourdomain.com.

Password

The password for your SMTP account.

Email Settings
Details

Subject

The subject of the email you'll receive. e.g. "Website Feedback"

To Name

The name the email will be addressed to. e.g. "Team Realmac"

To Address

The email address the form submission will be sent to. e.g. "support@realmacsoftware.com"

Reply-to Address

In order for Elements to correctly set the “reply-to” header in the outgoing email, the form field name must be set to email, all lowercase.

Form Webhooks

A webhook allows your form submissions to be sent directly to another service, like a database, CRM, or automation tool without needing to check emails or manually process the data. By sending form data to a webhook, you can trigger workflows in Zapier, Make, or Pipedream, making it easy to do the following (and so much more):

• Add a new lead to Airtable or Google Sheets

• Send a follow-up email through Mailchimp or ConvertKit

• Notify your team in Slack or Discord

• Create support tickets in Zendesk or Trello

There's really no limit to what you can do with the new webhooks feature. Whether you’re building a customer support system, a lead capture form, or a dynamic survey that feeds into a database, webhooks unlock powerful automation and customization that email simply can’t match.

Webhooks and Attachments: If you are using an attachment in your form, only the first attached file will be sent via the WebHook.

Testing Webhooks Locally

Webhook submissions require a server environment, so once you publish the page to a server—either a remote server or a local one—you should find the submission works as expected.

If you want to test everything locally, you’ll need to set up a local web server on your Mac. We recommend ServBay for this.

Here’s a quick guide:

  1. Install ServBay

  2. Publish your Elements site to a local folder

  3. In ServBay, create a new site and point the root directory to your published folder

  4. Open the site in your browser through ServBay for full local testing—including Forms and webhooks

Divider

Create visual separation between sections of your website

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.

Grid

Powerful grid based layout system

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.

Image

Add Images to your webpage

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.

Gallery

To add a collection of images to your gallery, drag an drop a folder of images from the resources area into the drop-zone.

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

Supported File Types

Galleries can contain a mixture of file types, including:

  • JPG

  • PNG

  • YouTube

  • Vimeo

  • .mp4

Modal

Reveal

Animate components when they enters the viewport

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.

Attribue
Type
Notes

data-reveal

String | null

Does not require a value.

data-reveal-scrub

Boolean

Enable scrubbing.

data-reveal-animation

String

data-reveal-exit-animation

String

data-reveal-distance

CSS Value

200px, 75%, 33vh.

data-reveal-degrees

Number

90, -45, 312.

data-reveal-play

String

data-reveal-start

String

data-reveal-end

String

data-reveal-easing

String

data-reveal-duration

Number

In seconds

data-reveal-delay

Number

In seconds

data-reveal-id

String

Optional ID, used to identify debug markers.

data-reveal-debug

Boolean

Enables debug markers

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.

Name
Value
Notes

Once on enter

enter-once

One time animation when first entering the viewport

Always on enter

enter-always

Plays every time the elements enters the viewport

Enter and exit

enter-exit

Plays every time the element enters and exits the viewport

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

Animation Name
Description

fadeUpIn

Fade Up and In

fadeUpOut

Fade Up and Out

fadeDownIn

...

fadeDownOut

fadeLeftIn

fadeLeftOut

fadeRightIn

fadeRightOut

slideUpIn

slideUpOut

slideDownIn

slideDownOut

slideLeftIn

slideLeftOut

slideRightIn

slideRightOut

zoomUpIn

zoomUpOut

zoomDownIn

zoomDownOut

zoomRightIn

zoomRightOut

zoomLeftIn

zoomLeftOut

lightSpeedLeftIn

lightSpeedLeftOut

lightSpeedRightIn

lightSpeedRightOut

lightSpeedUpIn

lightSpeedUpOut

lightSpeedDownIn

lightSpeedDownOut

rotateUpIn

rotateDownIn

rotateRightIn

rotateLeftIn

rotateUpOut

rotateDownOut

rotateRightOut

rotateLeftOut

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

Helpful Tip: Fixing Horizontal Scroll on iPhone

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

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

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

How to do it in Elements:

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

  2. In the Inspector, set Overflow to Hidden.

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

See

See

See .

See

See

See

available animations
available animations
available play methods
GSAP docs
GSAP docs
GSAP docs

Typography

Built for long form content

Content coming soon.

Menu

Automatically build and display your website navigation

Details comign soon.

How to create a traditional "Sticky" menu

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

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

Option 1: Sticky Positioning

  1. Set Position to “Sticky”

  2. Choose Type as “Individual”

  3. Set Top to 0

Option 2: Fixed Positioning

  1. Set Position to “Fixed”

  2. Choose Type as “Individual”

  3. Set Top to 0

Understanding the Difference: Sticky vs. Fixed

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

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

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

SVG

Add Scalable Vector Graphics to your website

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.

Important Note: The SVG Component will attempt to do a basic "cleanup" of the SVG file before it is displayed. This "cleanup" includes removing fill, width, height, stroke-width, and style attributes from the SVG — This is done at runtime and does not alter the code of the SVG stored in Elements.

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.

Link Types
Description

None

No colour or classes will be applied to the SVG.

Static

Set a single fill colour on the SVG.

Hover

Set a Start and End colour for the SVG. The Hover colour is displayed when the mouse cursor is over the SVG.

Stroke

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

Link Types
Description

None

No colour or classes will be applied to the SVG.

Static

Set a single fill colour on the SVG.

Hover

Set a Start and End colour for the SVG. The Hover colour is displayed when the mouse cursor is over the SVG.

Width

Set a stroke width for the SVG in pixels.

How to "cleanup" SVG's with Sketch

SVG Cleanup with Sketch App on the Elements Forum provides a good overview and discussion on the best way to get your SVG's ready for use in Elements.

You can download Sketch App here, and the SVGO plugin here.

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://lucide.dev, open-source library, over 1000+ svg icons.

  • 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://svgl.app, a beautiful library of company SVG logos.

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

  • Google Material Symbol Icons.

Further Reading

  • Practical SVG by Chris Coyier

Text

Perfect for headings and titles.

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

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

Size:

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:

Case:

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

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

Choose a font family, these are managed by the .

Choose a text size, these are managed by the .

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

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

blur-sm 

hover:blur-sm transition

hover:line-through

inline-block rotate-[2deg]

underline decoration-wavy underline-offset-[10px]
browse the Tailwind CSS Docs
Theme Studio
Theme Studio
Theme Studio
Theme Studio

Video

Add a video to your website

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

How to add Video

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

Supported Video Types

The video component supports the following file types:

  • YouTube

  • Vimeo

  • .mp4

Dropzone

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

Video Component Settings

Video

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

Options
Description

Autoplay

Set when (or if) the video should play automatically. The following options are available: Immediately, When in Viewport, or Never.

Muted

Set the video to muted by default.

Controls

Hide or show the video player controls. This setting only works with .mp4 files.

Loop

Specify if the video should loop. This setting only works with .mp4 files.

Thumbnail

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

Options
Description

Mode

Supports the ability to specify an Image for Light & Dark Mode.

Image

Set an image to be displayed as the thumbnail before the video loads. This should be a jpg file.

Description

Sets an Alt tag on the image. Used for SEO and Accessibility.

Overlay

Overlay a colour onto the image, perfect for making dimming the image and makeing the play button "pop".

Common Controls

Learn once, use everywhere.

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.

Common controls in Elements make it easier to create visually consistent, user-friendly websites, speeding up the design process and simplifying both learning and customization for users at all skill levels.

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.

Link

Layout

Sizing

Spacing

Transitions

Effects

Filters

Transforms

Borders

Advanced

Layout

Set advanced properties for Position, Z-index, Visibility, and more.

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

General

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

Position

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

Position Properties
Description

None

No position properties are set on the container.

Static

The element is positioned according to the normal document flow.

Relative

The element is positioned relative to its normal position in the document. You can adjust its position using top, right, bottom, or left properties. The space it originally occupied remains reserved.

Absolute

The element is positioned relative to its nearest positioned ancestor (an ancestor that has relative, absolute, or fixed positioning). If no such ancestor exists, the element is positioned relative to the initial containing block (usually the viewport). It is removed from the normal document flow, meaning it does not affect the layout of other elements.

Fixed

The element is positioned relative to the viewport, meaning it stays in the same position even when the page is scrolled. Like absolute, it is removed from the document flow and does not affect the positioning of other elements.

Sticky

The element is positioned relative until a scroll point is reached, after which it becomes “fixed” and sticks to that position until the scrolling container is out of view. It’s a mix of relative and fixed positioning. You must specify at least one of the top, right, bottom, or left properties for it to stick (e.g. Type > Individual > Top = 5px)

Z-Index

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

Z-Index Properties
Description

None

No Z-Index properties are set on the container.

Auto

Lets the browser automatically determine the Z-index of the container.

Custom

Set the Z-index manual for the container,can be a positive or negatiev value (e.g. -50, or 50).

Type (Inset)

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

Z-Index Properties
Description

None

No uniform or individual spacing properties are set on the container.

Uniform

Uniform combines the top, right, bottom, and left offset properties into a single option, allowing you to quickly set all four sides at once.

Individual

Individual set the top, right, bottom, and left offset properties.

Advanced

Advanced layout settings for Overflow, Isolation, and Visibility.

Overflow

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

Overflow Properties
Description

None

No overflow properties are set on the container.

Visible

Content that overflows the container will still be visible outside of its bounds.

Hidden

Content that exceeds the dimensions of the container is completely hidden (no scrollbars are displayed, and you can’t scroll to see the overflowed content).

Scroll

A scrollbar is always shown, regardless of whether the content overflows the container or not. The user can scroll to view the overflowing content.

Auto

Scrollbars will automatically appear only if the content overflows the container.

Isolation

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

Isolation Properties
Description

None

No Isolation properties are set on the container.

Visible

Forces an element to create a new stacking context. This isolates the element’s stacking order from the rest of the page, meaning its child elements won’t interfere with other elements on the page, even if they have z-index values.

Auto

This is the default setting that lets the browser determine the stacking context without forcing isolation.

Visibility

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

Visibility Properties
Description

Auto

This is the default setting that lets the browser determine the visibility of an element.

Visible

When set to visible, the element is fully visible on the page and takes up space in the layout as usual.

Invisible

When set to invisible, the element is not visible on the page and takes up space in the layout as usual.

Layout UI in Elements

Link

Link to a page, resource or website.

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.

Link Types
Description

URL

Link to an external website, a mailto link will automatically be created if an email address is entered.

Page

Link to a page within your project.

Anchor

Link to an Anchor on the page. Anchor ID's can be set in the Advanced settings on all built-in Components.

Resource

Link to a resource within your project.

Disabling Smooth Scroll for Anchors

Element websites are configured to smooth scroll when navigating to an anchor. Smooth scroll can be disabled by removing the class="scroll-smooth" on the html tag in the site Template code.

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.

Name
Value
Description

title

Go to Example Website

Provides additional information about the link, usually displayed as a tooltip when the user hovers over the link.

rel

noreferrer

Ensures that no referrer information (the URL of the current page) is sent to the destination.

rel

nofollow

Tells search engines not to follow this link for SEO purposes.

type

application/pdf

Specifies the MIME type of the linked resource. This is typically used when linking to downloadable files or specific content types. This example is for a pdf document.

Linking to an Anchor

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

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

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

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

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

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

Spacing

Add Margin and Padding to Components.

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.

When you set a margin-right on a component, it creates space to the right of it. However, if there’s nothing positioned immediately to the right — like another component or a container edge — you might not see any visible change. This is a common CSS quirk that can feel a bit confusing at first, especially when you’re expecting the element itself to shift.

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

Sizing

Set the Width and Height for elements.

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.

Position Properties
Description

Auto

No position properties are set on the element, the parent element and browser handles the width of the element.

Full

The element will take up the full width of the parent element.

Screen

The element will take up the full width of the viewport, e.g. 100vw (full viewport width).

Breakpoint

The element width will be to set to the Breakpoint classes setup in the Theme Studio.

Theme Spacing

Height

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

Position Properties
Description

Auto

No position properties are set on the element, the parent element and browser handles the height of the element.

Full

The element will take up the full height of the parent element.

Screen

The element will take up the full hight of the viewport, e.g. 100vh (full viewport height).

Theme Spacing

Min & Max Settings

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

Why Use Min-Width and Max-Width?

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

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

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

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

Using Custom CSS Values

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

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

Here's some examples:

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

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

  • 100vw - 100% of the viewport width.

  • 80vh - 80% of the viewport height.

Sizing UI in Elements

Choose from the pre-defined size classes set in the Theme Studio. You can also override the pre-defined classes and use .

Choose from the pre-defined size classes set in the Theme Studio. You can also override the pre-defined classes and use .

Custom CSS Values
Custom CSS Values

Transitions

Adjust animation curve, duration, and delay for transitions

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

Apply to

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

  • All - Apply a transition to all values.

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

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

  • Colours - Only apply transition to colours.

  • Opacity - Only apply transition to the opacity.

  • Shadows - Only apply transition to the shadows.

  • Transforms - Only apply transition to the Transform values.

Function

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

  • Custom - See Custom Timing Function (below)

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

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

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

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

Custom Timing Functions

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

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

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

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

Example Animation Curves

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

0.95,0.05,0.795,0.035

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

0.21,1,1,1.53

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

Duration

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

Delay

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

Transitions UI in Elements

Transforms

Apply effects like rotate, scale, skew, and more.

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.

Type Properties
Description

None

No effect classes will be applied to the component.

Static

Enable effects.

Hover

Enable Start and End state hover effects.

Custom ID's for Hover

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

Transforms

  • Origin - Set the origin of the transform.

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

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

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

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

Filters

A quick and flexible way to apply common visual effects

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.

Type Properties
Description

None

No effect classes will be applied to the component.

Static

Enable effects.

Hover

Enable Start and End state hover effects.

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

Effects

Apply box shadows rollovers and more.

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

Type

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

Type Properties
Description

None

No effect classes will be applied to the component.

Static

Enable effects.

Hover

Enable Start and End state hover effects.

Hover Over

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

Over Options
Triggers transitions when hovering over…

Self

this element.

Parent

the direct parent element.

Container

any parent Container element.

Grid

any parent Grid element.

Flex

any parent Flex element.

Custom ID

the parent with the specified custom ID*

*Custom ID Note

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

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

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

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

Box Shadow

Apply a box shadow to the Component.

Opacity

Set an opacity for the component.

Effects UI in Elements

Custom Components

Extend RapidWeaver by creating your very own 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 with custom UI controls. The possibilities of what you can create are endless!

A few things to note before you get started:

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

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

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

  4. To ensure compatibility with Elements you should use Tailwind CSS classes when 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.

1

Open the Components area in the sidebar of your project

Press the "+" button next to the "Custom" heading, and choose HTML. You should now see the component appear in the list.

2

Drag your newly created component onto the Page

Drag your HTML component into the page, you're now ready to start customizing it.

3

Edit your Custom Component

Next, open the Component Editor so we can view and edit the code. All changes made to the code update in realtime. Go ahead, change the text and watch the preview update.

The Component Editor is a panel so can be placed or added anywhere in the UI. Right-click an icon in the inspector to select it from the drop down menu.

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.

Borders

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.

Type Properties
Description

None

No effect classes will be applied to the component.

Static

Enable effects.

Hover

Enable Start and End state hover effects.

Style

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

Style Properties
Description

Solid

No effect classes will be applied to the component.

Dashed

Enable effects.

Dotted

Enable Start and End state hover effects.

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

Globals

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

Global Templates help ensure the design for you website is modular, reusable, and consistent.

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

Globals inside Globals

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

Templates

Start quickly, control deeply.

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

Advanced

CSS Classes

This text area is useful for adding extra Tailwind CSS Classes.

ID

You can create reusable templates, or .

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

global templates
Link window
create Anchors

Advanced

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

Site Options

  • Generate Search Engine Sitemap

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

  • Consolidate CSS Files

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

  • Generate Cache-Busting Links

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

  • Minify CSS and Javascript

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

  • Anonymize Requests to Third-Party Servers

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

Default Extension

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

Web Server Port

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

  • Auto: Automatically chooses an available port.

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

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

Template

Fully Customizable Site Template

The site template is only used during preview and export. It is not used in Edit mode.

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.

Properties

The Site Template has access to the following properties.

Property Name
Type
Description

{{site.title}}

String

Website title

{{site.url}}

String

Website URL

{{page.title}}

String

Page title

{{page.path}}

String

Page path from site root

{{page.languageAttributes}}

String

Page language attributes

{{page.resourcesPath}}

String

Path to site resources directory

{{page.opengraph}}

String

OpenGraph social meta tag

{{page.social.title}}

String

Title for social media

{{page.social.description}}

String

Description for social media

{{page.social.url}}

String

Full page URL

{{page.social.image}}

String

Image for social media

{{page.content}}

String

Page content

{{page.componentHeader}}

String

Headers required by components

{{page.componentCSS}}

String

CSS required by components

{{page.componentJS}}

String

JS required by components

{{page.componentPageStart}}

String

Code required by components at start of page

{{page.componentPageEnd}}

String

Code required by components at end of page

{{page.componentHeadStart}}

String

Code required by components at start of headers

{{page.componentHeadEnd}}

String

Code required by components at end of headers

{{page.componentBodyStart}}

String

Code required by components at start of body

{{page.componentBodyEnd}}

String

Code required by components at end of body

{{page.customHeader}}

String

Custom page headers

{{page.customCSS}}

String

Custom page CSS

{{page.customJS}}

String

Custom page JS

{{page.customPageStart}}

String

Custom code at start of page

{{page.customPageEnd}}

String

Custom code at end of page

{{page.customHeadStart}}

String

Custom code at start of headers

{{page.customHeadEnd}}

String

Custom code at end of headers

{{page.customBodyStart}}

String

Custom code at start of body

{{page.customBodyEnd}}

String

Custom code at end of body

{{page.bodyClasses}}

String

required inside of classes body tag to support background colour

{{page.bodyAttributes}}

String

Should be placed inside of body tag to support custom attributes

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.

<script src="{{page.resourcesPath}}/scripts/javascript.js"></script>

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.

{{page.customPageStart}}
{{page.componentPageStart}}

<!doctype html>
<html class="scroll-smooth" {{page.languageAttributes}}>
<head>
    {{page.customHeadStart}}
    {{page.componentHeadStart}}
    
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width">

    {{page.componentHeader}}
    {{page.opengraph}}
    {{page.customHeader}}
    
    <title>{{page.title}}</title>
    
    {{page.componentCSS}}
    {{page.customCSS}}

    {{page.componentJS}}
    {{page.customJS}}

    {{page.componentHeadEnd}}
    {{page.customHeadEnd}}
</head>
<body class="{{page.bodyClasses}}" {{page.bodyAttributes}}>
    {{page.customBodyStart}}
    {{page.componentBodyStart}}

    {{page.content}}

    {{page.componentBodyEnd}}
    {{page.customBodyEnd}}
</body>
</html>

{{page.componentPageEnd}}
{{page.customPageEnd}}

Example of adding Twitter/X social tags

You might like to add Twitter/X specific meta tags to your site so pages display correctly on their platform. Simply add the following to your site template.

    <!-- Twitter/X Card Tags (Ensures Proper Display on Twitter) -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="{{page.social.title}}">
    <meta name="twitter:description" content="{{page.social.description}}">
    <meta name="twitter:image" content="{{page.social.image}}">
    <meta name="twitter:url" content="{{page.social.url}}">

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.

General

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

Disabling Dark Mode.

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

Advanced Section in the Project Settings Window

Project Settings

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

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

Web Icons

Elements supports the following Favicons:

  • iPhone Retina

  • iPad Retina

  • iPad

  • Safari Pinned Tab (SVG, plus colour)

  • Classic Favicon (64, 32, and 16)

Further Reading

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

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

Publishing

Export locally or publish online

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

Elements can publish to the following locations and services:

  • Local (to your Mac)

  • FTP

  • SFTP / FTPS

  • Amazon S3

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

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

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

Recommended Website Hosting

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

How to fix Publishing Issues

FTP Publishing Issues and how to fix them

Can't get your website online or updated. Don't worry. 99% of the time the issue is due to incorrect setup of publishing details. This is due to the fact that everything needs to be entered 100% correctly otherwise publishing fails. By far the most common cause of publishing issues is that the credentials entered are not accurate. It’s incredibly important that you double-check the details you’ve entered. To view your configured publishing details, choose: File > Publishing Settings (Command-K) or choose the Publishing item under Settings in the sidebar. Check that all the fields are entered correctly: Server Address, Username, Password, Path, etc. Entering an incorrect Path is the most common cause of publishing problems in RapidWeaver. Some common site paths may include:

  • /

  • httpdocs/

  • www/

  • public_html/

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

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

Tweak Server Configurations

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

Concurrent Connection Limit

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

Switch from FTP to SFTP

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

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

Use a Standalone FTP Client

Re-add your publishing details

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

Check server space

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

Changes aren't visible on Website

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

In Safari, this is found on the History menu > Clear History…, in Google Chrome it’s found on the Chrome menu > Clear Browsing Data….

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

Sometimes users create an index.html and index.php file with the latter being the most recent. Browsers will ALWAYS use the index.html file as primary. If you want the index.php file to be seen, you can either rename or remove that index.html file in that directory.

Still need help publishing?

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

  • Quit RapidWeaver.

  • Re-open your project in RapidWeaver.

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

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

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

Error Messages

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

Contacting Realmac Software

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

  • Who are you hosting your website with?

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

  • How large is your RapidWeaver project file?

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

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

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

Web Icons Window in Project Settings

If you have no luck publishing inside RapidWeaver, we recommend entering your details into a third-party client to verify they work and are correct. and Cyberduck are both great FTP clients and can be downloaded freely for this test. If you're still having issues logging into your server with a third-party client it means your login credentials are incorrect. Please contact your hosting company to verify your details. If you successfully log in to your server with a third-party client, you can then export your site to a local folder with RapidWeaver, and then upload it directly using an FTP client as a temporary workaround. Now that's working, let's jump back over to RapidWeaver to try and resolve the upload issue:

Transmit

Theme Studio

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.

Colors

Manage your websites global color palette

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 a component. This can be anything from a font color to a background gradient.

Page

Set the default properties for all pages.

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

Theme

Change the style of your website in a single click

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.

Screens

Manage and modify breakpoints and container widths.

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

Font Family

Setup fonts for use in your website

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

Custom Fonts

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

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

Recommended formats (in order of preference):

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

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

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

Adding Custom Fonts

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

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

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

Theme Studio in Elements for macOS

Add an Icon Inside a Button

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

Adjust Smooth Scroll Speed

Set the scrolling Anchor speed using Smooth Scroll JS Library.

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

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

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

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

Note the speed option in the docs say this:

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

Typography

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.

Apply Anchor Scroll Padding

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

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

Cover
Button

A fundamental user interface element in web design.

The Accordion Component can be found under Interactive in the component list.
The Background Component can be found under Layout in the component list.
Set fill to currentColor or remove it, to allow Elements to set the fill colour of your SVG.
Remove width and height to let Elements set the scale of your SVG
Color Section
RapidWeaver Elements Component Transitions UI (Ocober 2024)
Component Layout Controls (October 2024)
RapidWeaver Elements Component Spacing (October 2024)