Global Colors Variables.

Issue is when we create global default colors with Theme Styles setting those color variables does not sync with the color palettes everywhere and we are not able to use the global colors as variables. So I decided to fix this issue.

When color variables are created wit snn-brx all of those color variables are accessible everywhere and inside all bricks color palettes shows visualy as well.

It is possible to add hex colors and any other valid css color units as well. Automatic Light and Dark color shades are possible as well. Set the shade (n) count and this feature will auto generate the shades for you and show it on color palettes.

Bricks DEV Team welcome to develop this global color var system. Its really easy.  I would gladly deprecate this feature if that happens. We have global theme styles, color palettes and variables but all of them are not connected together and not showing in color palettes.  STATIC HEXES ARE NOT WAY TO DEVELOP SITES.

SNN-BRX comes AI ready. 

For your all TEXT, RICH TEXT, HEADING or CSS related AI generation needs this feature can help.

There is OpenAI API and OpenRouter API support so you can use any popular model you like and love.

New Select Animation is here !

Now your animations are one click away and very EASY.

Now it is possible to animate Section, Container, Block, Div, Heading, Text and Rich Text elements easily.

Simple Scroll Trigger animations or SplitText Animations or you can make scroll false and make it Entrance Animations or Loop Animations with duration or delay.

Responsive Controls. Ability to disable animation on Desktop or Tablet or Mobile possible as well.

All popular gsap animations are possible and easy.  Have fun.

Other GSAP Features

There is 3 way to create GSAP animations

First if you know basic CSS you can code data-animate attribute animations manualy and that gives you supreme control over your animations and dom elements.

Second way to make GSAP animations are the GSAP Elements. Both for Nestable element and the text elements have basic GSAP animation options they dont need much CSS knowledge to use it and very easy to make GSAP anmations with them.

Third is Select Animation on elements.

Dont forget to Enable the Feature and Libraries.

This elements gives you ability to create custom style of maps single or multiple locations are possible.

Custom colors and custom icons.

Custom descriptions and popup texts with rich text.

Lottie Elements are SVG elements. It brings tons of advantages.

Lotties/SVGs scalable, loads fast, it has interactions, possible to loop it easily and seo friendly.

This is why I love using lottie elements when I need it.

This theme made Security in mind. 

I added tons of security features and settings. Math Chatpcha works with with normal login, register and password reset. It supports WooCommerce Login and Register as well for the default template page only. 

I added this feature since everyone want to make custom logins but nobody thinking about customizing the native wordpress login and register.

I think thats easier, safer and better because it is just wordpress core and future proof.

I use this on my every website and client websites as well. Clients love it  🙂

404 logs are very important especially when you are making a new website for a old client or making a re-make for a website and they have tons of old pages and indexes …etc

This logs gives you to ability to log those 404 logs and ability to fix SEO indexes.

There are tons of uses for 404 logs even some security uses as well on some cases. You can detect Bots and Automated Vulnerability seeking attackers…etc

This gives you redirect your old URLs, Pages to New ones. Save your SEO indexes. Fix your 404 errors.

I use it all the time and almost every website needs it.

It does have logs and counter as well you can track how many clicks your redirect rules getting. 

Very basic feature for setting yur SMTP and Logging the outgoing mails.

Because I primarily create websites for European clients, I developed this feature, but I am sure it will be useful for anyone worldwide.

I added the ability to include multiple services and scripts.

Services can be accepted either as optional or mandatory, depending on your region or country’s legal requirements. You can configure this with the banner.

Features include custom colors, positioning options, translatable texts, the ability to disable it for logged-in users, a text editor, a multi-service repeater, script injection into the head, top of the body, or bottom of the body, and custom CSS settings.

The only exception would be if your website contains advertisements, operates as a marketplace with users, or allows open registration. In such cases, this banner may not be sufficient, depending on regional laws. If that is the case, consult an expert familiar with your local regulations

Add basic level Accessibility Widget to your site. Change color, size and position.

* This widget doesnt fix your all your accessibility issues always build, code, scan and optimize your website properly.

I think some of you love this feature 🙂

Adding Media Folders to organize your media library.  I think it is mostly usefull when you need to loop query your media library and filter it with tags/folders.

Very usefull feature enjoy using it.

This feature brings you control over your user roles and capabilities.

It is possible to edit existing roles or create new roles depending on your needs.

This editor reads and shows capabilities dynamicly it shows all the Core WordPress Capabilities and on top of that if there are custom Capabilities coming from plugins or themes it will show them as well.

Add your custom codes in more organized and secure way. Very powerfull feature. Maybe even too powerfull…

Multiple Location to run your codes depending on your output location needs.

Frontend Head, Frontend Footer or backend wp-admin head or functions.php direct codes.

Revisions will create backups on every save and it is easy to preview old save point and recover it.

It does have independent Error Logs just in case if any error happens it will show up in here and if any Fatal Error happens snippets will be temporarily disabled until error fixed and snippets enabled again.

WARNING: If you dont know what you are doing and copy/pasting code without knowledge just dont enable this feature.

EXPERIMENTAL BETA

This feature is very advanced and gives you some abilities that bricks import doesnt. 

You can copy paste your own classes or add external classes that you like and love.

Tailwind, Bootstrap or Animate.css ..etc add whatever you want.

Import clasess and variables. just copy paste your classses and variables and generate and save it thats it. Now you will be able to use it inside bricks easily.

Creating custom elements are really easy for bricks builder because thanks to modern way of how bricks backend is developed with php and vuejs.

Timeline Element
A visually appealing vertical timeline component that displays a series of timeline points with customizable line colors, dot borders, and widths. Ideal for showcasing events or milestones in a chronological order with responsive design.

Multi-Step Form
Converts a standard form into a multi-step wizard with progress bar and navigation buttons. Supports custom form selector, button styling, and text labels for back and next buttons, improving form usability.

Text Select Action Social Share
Adds a floating action bar with social sharing buttons that appear when users select text on the page. Supports customizable actions and links with placeholders for selected text and page URL, enhancing user engagement and content sharing.

Read More and Toggle Text
Displays collapsible text content with a configurable height limit and toggle button. Supports linking to a native button by selector for toggling expanded/collapsed states with smooth height transitions.

Frontend Post Form
A frontend post submission form with support for post types, taxonomies, post status, featured image upload, user role restrictions, rich text editor with toolbar, and AJAX submission. Includes customizable button styles and messages.

Like Button
A customizable like button with icon toggling, like count display, and support for logged-in user only mode. Stores likes either by IP or user meta, with REST API endpoints for AJAX handling and balloon tooltip texts.

Comment List
Renders a styled list of comments with avatars, author links, timestamps, and inline editing and deletion capabilities for authorized users. Includes AJAX handlers for editing and deleting comments.

Comment Form
A rich-text comment submission form with toolbar controls, media upload support, website field toggle, and customizable button styles. Includes inline editor with font size, font family, color pickers, and image alignment tools.

Scroll Line Vertical Indicator
A vertical scroll progress indicator with a movable dot that tracks scroll position relative to selected DOM elements. Customizable height, width, colors, dot size, and fixed positioning for enhanced UX feedback.

Event ⇄ Action Selector
A logic element that binds DOM events on trigger selectors to various actions on target selectors, including class toggling, attribute manipulation, scrolling, cloning, replacing HTML, custom JS, and more. Highly flexible for interactive behaviors.

SVG Text Path Element
Displays text along customizable SVG paths such as waves, arcs, circles, and spirals. Supports custom SVG uploads, rotation, start offset, word spacing, and path stroke styling for creative text effects.

Lottie Animation
Embeds Lottie JSON animations with controls for looping, autoplay, play on hover/click, scroll triggers, animation speed, height, and optional link wrapping. Integrates GSAP ScrollTrigger for scroll-based animation control.

GSAP Text Animations
Provides advanced text animation presets and controls using GSAP with options for looping, scrolling, splitting text, randomization, pinning, staggering, and scroll markers. Supports various DOM tags and typography styling.

GSAP Animations (Nestable)
Enables complex GSAP animations on nested elements with detailed controls for position, scale, rotation, opacity, filters, grayscale, custom CSS, looping, scrolling, pinning, duration, delay, scrub, stagger, and scroll triggers.

GSAP Animations CODE (Nestable)
Allows users to input raw GSAP data-animate CSS strings for custom animations on nested elements, providing maximum flexibility for advanced animation effects.

GSAP Multi Element Register
Adds a custom animation selection control to multiple Bricks elements (section, container, block, div) allowing users to apply predefined GSAP animation presets via a select dropdown.

Flipbox (Nestable)
A flipbox container supporting front and back content areas with multiple flip animations (left-right, top-bottom, fade, spin, slide). Customizable height, perspective, and animation style for interactive content flipping.

Conditions (Nestable)
A utility wrapper element that conditionally shows or hides its children based on various behavioral rules such as show once, max views, cooldown, date ranges, device type, user roles, referrer, URL contains, and session limits. Includes inline CSS and JS for logic.

Compare Image
Displays two images side-by-side with a draggable slider handle to reveal the difference between them. Supports custom labels, slider icon, and colors for an interactive before-and-after comparison.

Smoke Text Element
Creates a smoke-like visual effect on text where individual letters animate with a blur and fade on hover, simulating a dissipating smoke effect. Supports inline editing and typography customization.

Animated Headline
Creates animated SVG stroke underline or strikethrough effects for headlines with customizable colors, stroke width, height, loop animation, duration, rounded paths, and custom SVG uploads. Supports multiple DOM tags and typography styling.

Animated VFX Text
Displays text with advanced visual effects using the VFX.js library, supporting multiple shader effects like glitch, RGB shift, rainbow, warp, slit scan, pixelate, and wavevy. Supports custom DOM tags and typography styling.

Advanced Image
Displays an image with advanced CSS filter controls including blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, and sepia. Filters are applied inline for real-time visual adjustments.

Polkadot Halftone Image
Applies a halftone polkadot effect to images using canvas processing with adjustable grid size, brightness, contrast, gamma, smoothing, and dithering options. Creates a stylized retro or artistic image effect.

Matrix Rain
Adds a Matrix-style falling characters animation overlay on a specified DOM element. Customizable character color, background fade, speed, density, font size, and direction for a dynamic visual effect.

OpenStreetMap Custom Element
Integrates OpenStreetMap with customizable markers, map center, zoom, styles, scroll zoom, popup font size, and CSS filters. Supports custom icons and popups for rich map presentations.

Custom HTML, CSS, and JS Code
Allows insertion of arbitrary custom HTML, CSS, and JavaScript code blocks directly into the page, enabling advanced customization and embedding of external code snippets.