Title: Mortar for Bricks Builder
Author: Samir Haddad
Published: <strong>23 Haziran 2026</strong>
Last modified: 4 Ağustos 2026

---

Eklentilerde ara

![](https://ps.w.org/mortar/assets/banner-772x250.png?rev=3583135)

![](https://ps.w.org/mortar/assets/icon-256x256.png?rev=3583135)

# Mortar for Bricks Builder

 [Samir Haddad](https://profiles.wordpress.org/samirhp/) tarafından

[İndir](https://downloads.wordpress.org/plugin/mortar.1.5.0.zip)

 * [Detaylar](https://tr.wordpress.org/plugins/mortar/#description)
 * [Değerlendirmeler](https://tr.wordpress.org/plugins/mortar/#reviews)
 *  [Kurulum](https://tr.wordpress.org/plugins/mortar/#installation)
 * [Geliştirme](https://tr.wordpress.org/plugins/mortar/#developers)

 [Destek](https://wordpress.org/support/plugin/mortar/)

## Açıklama

Mortar makes building in Bricks faster and cleaner. It adds a set of focused workflow
tools to the Bricks editor, each explained with a live example, so you always know
what a tool does before you turn it on.

Generate BEM classes in bulk, expand CSS shortcuts into full code, convert smart
values, change semantic tags, and move faster through the structure panel. Everything
lives in one clean panel, and every module is optional, so you switch on only what
you need.

**Included modules**

 * **BEM Generator:** create and rename CSS classes with BEM naming in bulk, right
   from the structure panel.
 * **CSS Recipes:** type a shortcut like `@clickable-parent;` and it expands into
   full CSS.
 * **Smart Values:** press Enter to turn `--space-m` into `var(--space-m)`, `var(--
   x) * 2` into `calc(var(--x) * 2)`, `20ctr` into `1.25rem` and `20cte` into `1.25em`(
   px to rem or em). It also works in the Custom CSS code editor: type a value and
   press the semicolon key to expand it.
 * **HTML Tags:** change an element’s semantic tag without leaving the structure
   panel.
 * **Style Indicators:** a coloured bar per element so you see at a glance what 
   is styled via class or via ID.
 * **Sidebar Shortcuts:** a configurable quick-insert rail for your most-used elements.
 * **Auto-Select Class:** selects the class automatically after you create or rename
   it.
 * **Export ID Styles to Class:** move ID-level styles onto the first CSS class 
   in one click.
 * **Expand Children:** expand or collapse an element’s entire subtree at once.
 * **Editor Theme:** colour the Bricks builder to match your brand. Pick your accent
   and surface colours, with presets, your own saved palettes and one-click apply.
   The Custom CSS code editor follows your theme too, with a dark, readable colour
   scheme.

Every module follows the same clean settings panel, with a description and a live
example.

**Independence and trademark**

Mortar is an independent project. It is not affiliated with, endorsed by, or sponsored
by Bricks Builder or its makers. “Bricks” is a trademark of its respective owner
and is used here only to describe compatibility.

## Ekran Görüntüleri

[⌊The Mortar settings panel inside the Bricks editor — every module with a description
and a live example.⌉⌊The Mortar settings panel inside the Bricks editor — every 
module with a description and a live example.⌉[

The Mortar settings panel inside the Bricks editor — every module with a description
and a live example.

[⌊BEM Generator — bulk-create and rename classes with BEM naming, right from the
structure panel.⌉⌊BEM Generator — bulk-create and rename classes with BEM naming,
right from the structure panel.⌉[

BEM Generator — bulk-create and rename classes with BEM naming, right from the structure
panel.

[⌊CSS Recipes — type a shortcut like @clickable-parent; and it expands into full
CSS.⌉⌊CSS Recipes — type a shortcut like @clickable-parent; and it expands into 
full CSS.⌉[

CSS Recipes — type a shortcut like `@clickable-parent;` and it expands into full
CSS.

[⌊Smart Values — turn --space-m into var(--space-m) with one keypress.⌉⌊Smart Values—
turn --space-m into var(--space-m) with one keypress.⌉[

Smart Values — turn `--space-m` into `var(--space-m)` with one keypress.

## Yükleme

 1. Upload the plugin ZIP via **Plugins  Add New  Upload Plugin**, or copy the `mortar`
    folder to `wp-content/plugins/`.
 2. Activate **Mortar** through the **Plugins** screen.
 3. Open the Bricks Builder editor — a Mortar icon appears in the top toolbar.
 4. Click it to open the settings panel and enable the modules you want.

## SSS

### Does it require Bricks Builder?

Yes. Mortar runs only inside the Bricks Builder editor (tested with Bricks 2.x).

### Where are the settings?

Inside the Bricks editor, click the Mortar icon in the top toolbar. The panel lists
every module with a description and an example.

### Can I turn modules off?

Yes. Every module has its own toggle; save and reload to apply.

### How do updates work?

Through the WordPress Plugins screen, like any other plugin from the directory.

## İncelemeler

![](https://secure.gravatar.com/avatar/95665e4de837703ccca6a1e999efc33f7929f3c34efe83ad68d2969fb61e85c9?
s=60&d=retro&r=g)

### 󠀁[I really like this](https://wordpress.org/support/topic/i-really-like-this-5/)󠁿

 [NoWe](https://profiles.wordpress.org/nowe/) 25 Haziran 2026

Thats what has been missing for a long time

![](https://secure.gravatar.com/avatar/6eb7871ff39b1bd4080709fd1927acf71413585e9d369c173ece3e4589cd22ee?
s=60&d=retro&r=g)

### 󠀁[Very well thought-out tool for Bricks Builder!](https://wordpress.org/support/topic/very-well-thought-out-tool-for-bricks-builder/)󠁿

 [Christian G.](https://profiles.wordpress.org/christian44/) 24 Haziran 2026

Very useful plugin if you work with Bricks Builder on a daily basis 😉It helps speed
up the workflow and keeps the editor more organized. The bulk BEM system and CSS
Recipes save a lot of time in real projects. It is also great that everything is
modular so you can enable only what you need. It clearly focuses on improving productivity
inside the builder 👏🏼👏🏼

 [ 2 incelemeyi oku ](https://wordpress.org/support/plugin/mortar/reviews/)

## Katkıda Bulunanlar ve Geliştiriciler

“Mortar for Bricks Builder” açık kaynaklı yazılımdır. Aşağıdaki kişiler bu eklentiye
katkıda bulunmuşlardır.

Katkıda bulunanlar

 *   [ Samir Haddad ](https://profiles.wordpress.org/samirhp/)

[“Mortar for Bricks Builder” eklentisini dilinize çevirin.](https://translate.wordpress.org/projects/wp-plugins/mortar)

### Geliştirmeyle ilgilenir misiniz?

[Kodu görüntüleyin](https://plugins.trac.wordpress.org/browser/mortar/), [SVN deposuna](https://plugins.svn.wordpress.org/mortar/)
göz atın ya da [RSS](https://plugins.trac.wordpress.org/log/mortar/?limit=100&mode=stop_on_copy&format=rss)
ile [geliştirme günlüğüne](https://plugins.trac.wordpress.org/log/mortar/) abone
olun.

## Değişiklik Kaydı

#### 1.5.0

Mostly bug fixes, a few of them data loss. Updating is recommended.

 * BEM Generator: running it twice on the same block no longer leaves elements without
   their class.
 * BEM Generator: renaming no longer deletes classes that other parts of the site
   were using.
 * BEM Generator: “Copy ID styles to Class” no longer strips content, loops and 
   conditions from the element, and it keeps the classes it already had.
 * BEM Generator: modifiers with spaces or symbols now become valid class names.
 * BEM Generator: elements inside components are found again.
 * Export ID Styles to Class: no longer moves content into the class. Accordion 
   items and form fields could be lost.
 * Export ID Styles to Class: exports to the class whose menu you opened, not always
   the first one.
 * Mortar’s buttons now always show up in the structure tree.
 * Editor Theme: your own builder CSS is no longer overwritten, and it comes back
   when you turn the theme off.
 * Editor Theme: a save that fails is now reported instead of showing success.
 * Sidebar Shortcuts: the rail hides together with the structure panel.
 * Expand Children: expanding a large branch no longer closes branches that were
   already open.
 * The builder feels lighter: the plugin was loading twice.
 * Deleting the plugin now restores the Bricks editor theme and cleans up after 
   itself.

#### 1.4.0

 * Smart Values: type a pixel value with the “cte” suffix and press Enter to convert
   it to em, for example 20cte becomes 1.25em. This joins the existing “ctr” shortcut
   for rem.
 * Smart Values now works in the Custom CSS code editor too. Type a value and press
   the semicolon key to expand it: –primary becomes var(–primary), a math expression
   is wrapped in calc(…), and 20ctr or 20cte convert to rem or em.

#### 1.3.0

 * Smart Values: type a pixel value with the “ctr” suffix and press Enter to convert
   it to rem, for example 20ctr becomes 1.25rem. Works in element fields and in 
   the Custom CSS code editor.
 * Editor Theme: the Custom CSS code editor now follows your theme, with a dark,
   readable colour scheme. Optional overrides let you set the editor background 
   and syntax accent.
 * Expand Children: fixed a bug where expanding an element could jump the selection
   to one of its children. It now keeps your current selection.

#### 1.2.1

 * Fixed: on sites updating from an earlier version, the Editor Theme module could
   open an empty panel. It now enables and opens correctly on existing installs.

#### 1.2.0

 * New module: Editor Theme. Colour the Bricks builder to match your brand. Pick
   your accent and surface colours and the whole editor follows, with presets, your
   own saved palettes, and one-click apply.
 * Fixed a bug where the settings panel could get stuck when dragged quickly across
   the canvas.

#### 1.1.2

 * Style indicators: more accurate (they no longer light up for elements without
   real CSS styling) and they now refresh instantly when you add or remove a class.
 * Auto-select class: faster and lighter when moving between elements.

#### 1.1.1

 * Performance: lighter, more stable editor during long sessions, with less background
   work and no slow memory build-up.

#### 1.1.0

 * Sidebar Shortcuts: manage the rail right in the editor. The new “+” button opens
   a popup to add, remove and reorder shortcuts, and changes save automatically.
 * HTML Tags: fixed a bug and improved element-tag detection, so the correct tag
   now shows reliably on more elements, including Button and Image.
 * Accessibility: keyboard support to add, remove and reorder shortcuts in the popup.

#### 1.0.0

 * First public release on WordPress.org.
 * Settings panel (master–detail) with a description and live example per module.
 * Modules: BEM Generator, Style Indicators, Sidebar Shortcuts, HTML Tags, Auto-
   Select Class, Export ID Styles to Class, CSS Recipes, Expand Children and Smart
   Values.
 * Accessibility: visible focus rings, ARIA labels and keyboard activation.

## Meta

 *  Sürüm **1.5.0**
 *  Son güncelleme **20 saat önce**
 *  Etkin kurulumlar **10+**
 *  WordPress sürümü ** 6.2 veya üstü **
 *  Test edilen sürüm **7.0.2**
 *  PHP sürümü ** 7.4 veya üstü **
 *  Dil
 * [English (US)](https://wordpress.org/plugins/mortar/)
 * Etiketler
 * [bem](https://tr.wordpress.org/plugins/tags/bem/)[bricks](https://tr.wordpress.org/plugins/tags/bricks/)
   [css](https://tr.wordpress.org/plugins/tags/css/)[page builder](https://tr.wordpress.org/plugins/tags/page-builder/)
   [workflow](https://tr.wordpress.org/plugins/tags/workflow/)
 *  [Gelişmiş görünüm](https://tr.wordpress.org/plugins/mortar/advanced/)

## Puanlar

 5 üzerinden 5 yıldız.

 *  [  2 5 yıldızlı inceleme     ](https://wordpress.org/support/plugin/mortar/reviews/?filter=5)
 *  [  0 4 yıldızlı inceleme     ](https://wordpress.org/support/plugin/mortar/reviews/?filter=4)
 *  [  0 3 yıldızlı inceleme     ](https://wordpress.org/support/plugin/mortar/reviews/?filter=3)
 *  [  0 2 yıldızlı inceleme     ](https://wordpress.org/support/plugin/mortar/reviews/?filter=2)
 *  [  0 1 yıldızlı inceleme     ](https://wordpress.org/support/plugin/mortar/reviews/?filter=1)

[Your review](https://wordpress.org/support/plugin/mortar/reviews/#new-post)

[Tüm değerlendirmeleri görün](https://wordpress.org/support/plugin/mortar/reviews/)

## Katkıda bulunanlar

 *   [ Samir Haddad ](https://profiles.wordpress.org/samirhp/)

## Destek

Söyleyeceğiniz bir şey mi var? Yardım mı lazım?

 [Destek forumunu görüntüle](https://wordpress.org/support/plugin/mortar/)