Ask a Question ?
Design & Publish Websites Faster

Applying Styles to Multiple Items at the Same Time

What can you do with the Bulk Style Editor?

The Bulk Style Editor is a 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.

Sample minimal site

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
  • Colors
  • Spacing
  • Margins
  • Gradient
  • Inner Shadow
  • Borders
  • Drop Shadow

What are those changes applied to?

Items to where you can apply the styling updates are:

All Colors

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.

All Colors tab

This is the most general tab, here you can edit colors for the whole page

Block Container

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.

Block Containers tab

This tab will affect all blocks in your page

Section Containers

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.

Section Containers tab

Here you’ll be able to edit sections (contained in blocks)

Column Containers

Columns are contained inside sections. Here you can edit background, corner radius, spacing,  add borders, gradient, an drop shadow.

Column Containers tab

This tab is for editing only columns (contained in sections)

App Containers

This refers to all apps. Here you can edit the same options you’ll find on the column containers, plus margins.

App Containers tab

Changes in this tab will affect all apps

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.

Internal Apps tab of the Bulk Style Editor

Changes in this tab will affect only the inner sections of an app (not available for all apps)

Text

The Text tab will let you update font family, size, color, link and rollover colors, style (bold, italic, underlined), letter spacing and line height.

Text tab

Styles in this tab are text-specific

Buttons

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.

Buttons tab

Options on this tab will affect buttons in your page, like from the Buttons app and submit forms

Images

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.

Images tab

Options from this tab will not affect inline images (inside the Text app for example)

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.

Available blocks to update from the bulk style editor

Select one or more blocks to edit; styles will only be applied to those selected

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).

Merge All Block Controls

This checkbox, if enabled, has the styles applied to all blocks (or sub elements of every block)

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:

Bulk Style Editor open: not hovering any element of the left menu

Bulk Style Editor open: not hovering any element of the left menu

Here’s when hovering over Blocks.

All Blocks are highlighted with a yellow overlay

All Blocks are highlighted with a yellow overlay

And here you can see Columns highlighted.

All Columns are highlighted with a yellow overlay

All Columns are highlighted with a yellow overlay

Try hovering over different elements to see this feature in action!

Coming soon

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!

Menu