Applying Styles to Multiple Items at the Same Time
What can you do with the Bulk Style Editor?
The Bulk Style Editor is a Breezi feature that will allow you to modify and update the style of various different items on the design of your website at once. Items like columns, sections, blocks, or just apps.
So for example, you could update the background color for all your columns in one click. Or also spacing. This will help you make consistent changes across elements on your website design. Another case: text. You can now edit text on different Text apps from one place. So you don’t have to go clicking on each one to find out which was the exact color you used before to apply it to the other apps.
It will be easy and faster to create a website and make your site’s design look homogeneous.
Design Properties to Edit
Basically, you can manipulate all the style dots’ options here. So you won’t have to click on each individual dot to update it. Some of them are:
- Background settings
- Inner Shadow
- Drop Shadow
What are those changes applied to?
Items to where you can apply the styling updates are:
This is the most general tab. Here you can quickly edit colors for the whole page. Like backgrounds for block, section, columns and apps.
Also here you will find text coloring. For normal state text, for links, and for rollover. This way you won’t have to go to each individual link and update its colors.
Blocks are the wide containers that span the whole browser window width. Blocks were formerly known as “containers” and we have updated this term.
Here you can update their background, add a background image, gradient or inner shadow.
They are contained inside blocks, but are not as wide as them.
In this tab you’ll be able to change their background, corner radius, spacing, add borders, gradient and drop shadow.
Columns are contained inside sections. Here you can edit background, corner radius, spacing, add borders, gradient, an drop shadow.
This refers to all apps. Here you can edit the same options you’ll find on the column containers, plus margins.
Inner App Containers
Some apps can have inner sections, like the Blog app, but not all of them. This tab will update styles for these sections. Here you can edit the same styles as in the “App Containers” tab.
The Text tab will let you update font family, size, color, link and rollover colors, style (bold, italic, underlined), letter spacing and line height.
Editing the options in this tab will not only affect the Button app, but all the submit buttons from contact apps too.
Here you can add or edit a background color, roll over color, corner radius, spacing, margin, width, border, gradient and drop shadow.
This one affects all image apps, like Images, Slideshow, Picture Showcase, Carousel, Blog, etc. But it won’t update inline images, like inside a Text app.
Here you can add corner radius, margins, borders and drop shadow.
Selecting Blocks to Edit
On top of the Bulk Style Editor window, you’ll see a selector of blocks. With it, you can indicate which specific blocks you want the styles applied to. You can select one, several or all of them. This dropdown will reflect the blocks currently used in your layout. Remember you can add/remove blocks as you see fit.
Merging All Controls
There is a checkbox below the Bulk Style Editor panel, labeled “Merge All Block Controls”. It’s enabled by default. If you disable it, you’ll find the exact same options mentioned above, but broken into blocks.
So if you have 4 blocks in your page, you’ll be presented with the style options for each one. So updating one won’t affect the others or the contained elements (section, column, app, etc).
Hover to Preview What you’ll Edit
If you hover over the different elements on the left, a soft yellow layer will show what will be affected by that element.
For example, here’s what it looks without hovering anything:
Here’s when hovering over Blocks.
And here you can see Columns highlighted.
Try hovering over different elements to see this feature in action!
Eventually you will be able to propagate the style changes made with the bulk style editor, to other pages of your site.
We’re working hard at it right now, so stay tuned!