Design

Visual tools for crafting unique website experiences

Bricks streamlines website design with flexbox, grid, global styles, and custom color palettes. Powerful animations, filters, transforms, gradients, image masks, video embeds, shape dividers, styled elements, icon libraries, custom CSS, built-in lightboxes, and so much more.

My Agency Recently started using bricks. It's the best decision we have ever made. My development team and I love how you can add code, edit CSS, and make your own elements in a modern and responsive coding environment. I also work with my design team, and we love how easy it is to design in Bricks, allowing us to make art in minutes.

Brick's intuitive layout, fast-performing builder, and access to almost any CSS property you may want to change makes it the perfect builder for both beginners and seasoned WordPress pros.

Michael RaimondiOwner, MultiCoastMedia

It's everything I was always looking for in a WordPress page builder. Flexibility for custom designs and amazing page speed. Perfect for designers who know their way around CSS.

Wolfgang Stefani Freelance Webdesigner at wolfgegenlicht.de
Wolfgang StefaniFreelance Webdesigner, wolfgegenlicht.de

The design aspect of creating a website has become a pleasure since I started using Bricks. My coding skills have improved, and my overall satisfaction, whether mine or my clients', is superb. I also sleep better knowing that my websites built with Bricks won't crash on a Sunday morning.

Darius Zak Freelance Web Designer
Darius ZakFreelance Web Designer

Being able to style elements using classes (in a visual way) is new to me and I'll never look back. It's easier to maintain, scale, and keep a consistent design.

Paige Coulier Spiderless Web
Paige CoulierWeb Designer/Developer, Spiderless Web

I love to design and build efficient and optimized sites. Bricks has brought the joy back into using a page-builder.

Simon Clay Managing Director - Sly Design Ltd
Simon ClayManaging Director, Sly Design Ltd

Bricks Builder has leveled up our Wordpress template services. Its intuitive interface and diverse elements make develop Wordpress sites a breeze. From stunning layouts to fluid responsiveness, it's definetly a game-changer. Crafting Wordpress websites for our customers make every day a little party.

Jan Karel Broer Owner Brovisuals
Jan Karel BroerOwner, Brovisuals

Bricks is pushing me to a whole new level. I finally have the freedom to build websites I have long sought and not found. Now, websites are beautiful and fast at the same time.

Sebastian GerlaTeacher

This is the most promising builder: I came for the builder's performance, stayed for the design and capabilities, and fell in love with the constant updates and public roadmaps.

Rafa DomínguezCEO, Minato Studio

With just one Theme, you can create a website that is high-performing, beautiful, easy to maintain and has delighted consumers. Bricks has earned the title of best Page Builder in the WordPress market.

Phu Truong UI/UX Designer & Website Developer of WeekThink Digital Marketing Agency
Phu TruongUI/UX Designer & Website Developer, WeekThink Digital Marketing Agency

My agency started using Bricks about 1 year ago in an attempt to find a better way of building sites that allowed us to build truly custom layouts, not just drag-n-drop mashups! When we discovered Bricks Builder it was a breath of fresh air that gave our entire agency a new excitement for design and development!

Chris GillPresident & CEO
Flexbox and CSS Grid

Fluid and responsive layouts with CSS Flexbox and Grid

Create fluid and responsive designs that automatically adapt to different screen sizes and viewport changes. Build any layout with Flexbox and CSS Grid. Add responsive column layouts with a few clicks. Rearrange your layouts via precise drag-and-drop in the canvas and structure panel.

A collage with the CSS grid settings panel next to two product cards using CSS grid too.
The css element classes dropdown panel next to some styled product cards
CSS Classes

Create your own modular & scalable design system through CSS classes

Assign externally created CSS classes to any element or create, style, and manage your own CSS classes, pseudo-classes, and pseudo-elements right inside the builder. With CSS classes, you can enhance modularity, reduce code duplication, and maintain consistency throughout your website, improving maintainability and reducing specificity issues.

Global Styles

Global Colors, Typography and Elements

The Theme Styles panel with global style settings for colors, typography, links, and more next to a colorful hero section example of an art website.
Global Styles

Streamline your website design with theme styles

Create a cohesive look and feel across your website with Theme Styles in Bricks. Effortlessly define layout, colors, typography, and more. Apply styles globally or to specific pages.

The Global Color Palettes panel where you can define custom color palettes in HEX, RGB, HSLA and RAW (CSS variables, color keywords) format.
Color Palettes

Consistent styling with global color palettes

Enhance your website's style and brand consistency with global color palettes. Create and update custom color palettes site-wide, allowing for easy maintenance and a visually cohesive design.

Collage of typography styles with a huge "A" in the middle.
Typography

Unleashed typography flexibility

Make your website stand out through typography. Access Google Fonts, integrate with Adobe Fonts, or upload custom fonts. Full support for variable fonts to fine-tune for font styles while ensuring your website continues to load as fast as possible.

Global Elements

Reusable global elements

Create, style, and save elements as global elements to reuse them anywhere on your site. Updating a global element automatically updates all instances site-wide.

Images and Videos

Celebrate visual storytelling

Image gallery settings panel in front of a metro gallery layout.
Images and Image Galleries

Lazy load images and galleries

Add single images or entire image galleries with multiple layouts effortlessly. Advanced lazy loading helps to keep your website lean & loads it fast. Responsive images ensure that only the most relevant image size is loaded.

meeting-camera
Videos

Embed and lazy load any video

Embed YouTube, Vimeo, or local videos. Customize your HTML5 video player, open any video in a lightbox.

A yellow, scratched wall with black letters and numbers
Built-in Lightbox

Enhance visual engagement

Bricks' native lightbox works for images, videos, and galleries. Group & unite images via lightbox IDs. Engage your audience with a sleek, immersive viewing experience: no plugins or complexities.

A metro gallery layout with yellow images from Unsplash
picture-polaroid-landscape
Unsplash Integration

1M+ free professional photos

Browse a vast library of high-quality royalty-free photos from Unsplash directly inside the builder. Download with a single click. Ready for use on your website without any cost, permissions, or attribution required.

Colorful blobs
Image masks

Creative image masks for unique designs

Choose from ready-made or your own custom shapes (SVGs) and apply them to any image to add a unique touch to your visuals. Effortlessly transform your images into captivating masterpieces.

More Design Features

Endless styling options at your fingertips

Custom CSS

Unlimited styling possibilities with custom CSS

Take complete control of your website's design with custom CSS. Available for any element, page, or globally to apply any style imaginable beyond the already powerful builder settings.

reorder-down
Animations

Bring your website to life

Maximize user engagement with Bricks' animations. Apply fade-in, slide-out, and many more effects for a truly interactive website experiences. Or showcase creative headlines with animated typing.

CSS Filter settings panel to control blur, brightness, contrast and more in front of a blurred abstract background.
CSS Image Filters

Enhance images with stunning effects

Add a touch of magic to your visuals with CSS filters. From blurs to sepia tones, achieve stunning effects without tedious image editing in Photoshop.

The gradient/overlay settings panel allows you to add an infinite number of colors stops to your gradients and overlays.
Gradients & Overlays

Mesmerizing gradients & overlays for stellar designs

Dazzle your visitors with captivating designs using gradients and overlays with unlimited color stops. Add stunning linear, conic, radial and even repeating gradients to backgrounds, text, overlays, or specific CSS selectors. Stand out from the crowd with eye-catching designs. All without the need for coding.

CSS Scroll Snap

Enhance user experience with CSS Scroll Snap

Ensure a seamless but snappy scrolling experience using CSS Scroll Snap, which anchors the viewport to specific elements post-scrolling.

layout-module-1
Icon Libraries

Access a world of icons with built-in libraries

Icons made easy. Access popular libraries: FontAwesome (Solid, Regular, Brands), Iconicons, Themify, and your own custom SVG files.

rotate-vertical
CSS Transforms

Transform and animate

Modify shape, size, position, and orientation of any element to create visually appealing effects for a dynamic web design. Add interactivity and visual interest. No coding required.

Shape Dividers

Endless shape dividers

Break up and make your sections work with each other. Create a flow through your content that engages your visitors. by adding stunning horizontal and vertical ready-made or custom dividers.