Complete Guide to BrandRafter Website Modules
Every page you build in BrandRafter is made up of modules — self-contained, drag-and-drop blocks you stack on top of each other to build a complete page. With 70+ modules available, it helps to understand what each category is for before you start building. Here is your complete map.
What are modules?
Think of a module as a pre-built section of a webpage: a hero banner, a row of testimonials, a pricing table. Instead of designing each section from scratch, you drag a module onto your page, then edit its text, images and settings in the panel on the right. Every module is fully responsive automatically, so it looks right on phones and desktops without any extra work from you.
Hero modules
Hero modules sit at the very top of a page and make the first impression. HeroBanner gives you a large headline, subtext and call-to-action button over an image or color background. VideoHero does the same thing but with a looping background video, which works well for restaurants, hospitality and anything visually driven.
Content modules
This is the largest category — the modules that make up the body of your page. TextImage pairs a paragraph with a photo side by side, useful for "About Us" sections. FeatureCards displays your services or product highlights in a grid. Testimonials showcases customer quotes and star ratings to build trust with new visitors.
Conversion modules
These modules exist specifically to turn a visitor into an enquiry. CTABanner is a focused call-to-action strip you can drop anywhere on a page. PopupWidget shows a timed or exit-intent popup to capture a visitor's details before they leave. AnnouncementBar sits at the very top of every page for limited-time offers or important notices.
Media modules
PhotoGallery lets you showcase a full set of photos in a grid with a lightbox viewer, ideal for portfolios, real estate listings or product photography. InstagramFeed pulls in a grid of your latest Instagram posts and links back to your profile, keeping your website content fresh without extra work.
How to add and arrange modules
In the builder, open the left-hand Sidebar and drag any module card onto your page canvas — it will show you exactly where it will land as you drag. Once placed, click the module to select it, then use the up/down arrows or drag handle to reorder it relative to the other sections on the page. You can add, remove and reorder modules as many times as you like before publishing.
Animation settings
Most content modules include animation options in their settings panel — fade-up, fade-left, scale-up and more — that trigger as a visitor scrolls the section into view. These are subtle by design; use them to add polish to your page, but avoid stacking too many different animation styles on one page, which can feel busy rather than premium.