Tips, Guides & Upcoming Features

By Mike Jauregui

Applying Styles to Multiple Items at the Same Time

on Wednesday, August 22nd, 2012 at 7:01 PMMike Jauregui

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.

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.

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.

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.

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.

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.

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

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

Here’s when hovering over Blocks.

All Blocks are highlighted with a yellow overlay

And here you can see Columns highlighted.

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.

Related Posts

Update!
We have just released a new feature that allows you to publish changes on demand! This means that changes are not reflected to your visitors until you manually publish them so your users won’t be seeing a half edited page. Check it out!
About Pu

What You'll Learn
In this tutorial, we'll cover how to create a circular button.
Steps
Add the Button app to your page, wherever you'd like.
Remove the secondary line of text by selecting the app's settings and changing "Display Slogan Text" to "N

In this post we’ll show you how to use anchor tags to navigate through different sections of the same (single) page.
This way, if you have a page with a lot of content that’s divided into sections, you’ll be able to click the navigation links and they’