Ask a Question ?
Design & Publish Websites Faster

Use The Breezi Bulk Style Editor In An Optimal Way

Use the Bulk Style Editor for all the customization and labeling features that you get with style dots but allows you apply them in a broad and bigger way, this way editing styles to areas that need to be equal and consistent while still letting you to be selective.

Trough the use of our editor your site design and process is faster and easier, permitting a better consistency on the way the site feels and looks and still maintaining a high level of control.

Once you have mastered and understood the way the Bulks style editor works then you can use a certain processes with some specific or suggested steps that will improve your design.

Take a look at our resources section at the end of this post in this topic to understand the basic and intermediate features of our Bulk Style Editor (In case you haven’t!) and continue to learn and implement a better way to implement this key feature.

Follow A Logical Process

Once you have set up your whole page and all content has been added, categorize content and start thinking on the way this will look. In case you still don’t have the content that has been added then throw some Lorem Ipsum around so you get a feel on how your flow will be. Use this as a place holder.

Keep in mind the editing flow and process has to be done from the more innate parts of your design to the details and extras, following a logical and non destructive process; this means making sure subsequent changes that you do don’t overwrite changes that you have done already (unless you do want to lose them).

For example, start by editing layout elements, then regular text, followed by  H Tags and Links and leave little details and special cases at the end. Take a look at the next sections to see an actual process used by many of our users and designers.

This image shows you can our Bulk Style Editor is designed so you work your elements from top to bottom and going through each one of it’s tabs.

Main

This is our Bulk Style Editor

At the end the goal is to follow a sequential, logical and non destructive proces serves as a simple and smooth flow to design your site.

Merging & Un Merging All Blocks

Using the bulk style editor is really easy to select all blocks at once or a couple of them and edit them which also means that you have to be extra careful and specific enough to always see how many and which blocks you have selected in order for you not to apply changes where you don’t want to.

Make sure that if the “Merge Selected Block Controls” box is checked, all blocks will be affected, uncheck this box if you need to work on a specific one and navigate trough the use of our Blocks Drop-down Menu seen at the top (see image below) or by the collapsable menus that show on each one of the tabs (see image below)

On this image we see how at the top of the editor you can use a drop down menu to select the blocks that you want to work on.

Blocks

All blocks are selected.

 

On this image we see how at the bottom of our pannel also you can deselect all blocks to work on each one automatically by checking or unchecking this box.

All blocks

Check or uncheck this box to toggle between working with all blocks or not.

Just remember that you have to be extra careful with the blocks you have selected until checking your blocks selected becomes a habit and a implicit course of work.

The Tabs

The next thing that you have to do is get familiar with each one of the tabs that we use and how they function. Some tabs are similar but they have been divided and categorized for a better and proper use, before starting to use the Bulk Style Editor get familiar on how editing styles on your site works, see our resources section to see beginner tutorials and How To’s. On the following sections there is an overview on how each one fo the tabs serves a purpose and how to properly work with them.

On this image you will see that the tabs are under the blocks menu highlighted in red, each one of them can contain a collapsable section menu.

Tabs

Some of the tabs in the Bulk Style Editor

Tab Section

When you select a tab, an initial tab state will show and will let you change the main styles and variables for tab specific part of your layout but you can also browse trough each one of the sections that this tab has presenting other options that make your design really customizable.

This is how the sections will look like. they show once you have clicked a tab. Not all tabs contain sections.

Sections

Sections are highlighted in green!

The All Colors Tab

Once your content and/or placeholders are in site and place, it’s time to work on your general feel and look.  Open the Bulk Style Editor and see the first tab that comes up. The All Colors Tab is the most general tab that you will encounter and is the most basic one.

Managing trough this app has a big effect on your layout and being the most general one does not mean it has low impact. This one changes all core items on your site and does not discriminate between tags (see later), blocks or other layout building elements (unless the  ”Merge Selected Block Controls” is unchecked).

All Colors Tab

This are the features that you can find on the All Colors Tab

Use this tab first and wisely, once that you have used this tab and you are satisfied with it’s result (be aware that the more we use the Bulk Style Editor the more customized our site will feel and this is just the first step and not a final result) avoid touching it again (unless you want everything or a whole block style scrapped and modified).

Working Your Tabs Out

The next step a is a tricky and subtle one. Page, Block, Section, Column, App and Inner App Tabs are the core of your layout and are responsable for the way your layout is set up and how it behaves and they have their own tabs in our Bulk Style Editor.

Each one of this tabs comes with a specific dot that handles their styles and that can also be worked out through our Bulk Style Editor.  Click here to have a brief but good explanation on how all this layout elements work and how each one of them has their own function.

Go from the broader and bigger layout components to the smaller ones, think of it as a layered design. The Page Tab is the one at the back or at bottom of all of them and changes you do to layout elements on top of this one will be seen also on top.

On the next image we’ve run Firefox 3D Tilt Inspect add on a website to show you a comprehensible idea on how layers work.

Layers

Using Firefox 3D Tilt Inspect feature we show you a somewhat view on how our layers work!

For example, choosing a background color for a Section and then another one for a Column and setting both containers background color opacity at 25% will create a mixture of both colors. Take a look at the following images and see how the layers work.

Text, Links & H Tags Hierarchy

The use of tags to improve readability, SEO and add hierarchy has been around for a while, so it would be optimal to use them trough your design process. The first thing that you have to do will be to define them. Select a tag and define it’s use, keep in mind that the lower the H Tag number the higher the importance.

On this picture we show you how we have added text tags to some text elements in our page.

Tagging

Text and titles are being tagged.

Once you have defined and planned it’s use it’s time to add those tags to your site. You don’t have to use all tags but don’t skip them. For example if you are planning to use three tags on top of the normal text one those tags would be H1, H2 and H3. and not H1, H4 and H2.

Take a look at this image, see how trough our program you can ad tags to text and how the tags are linked to a specific use or title.

Tags

Different tags for different purposes.

Open your Bulk Style Editor pannel and go to the Text Tab. It’s really important to work in a sequential way so start working with your normal text, follow your way through all the sections; go for links and then go from H1 to H6. Edit each one of their tags style until you feel comfortable. Leave details and specific styles that you want for specific apps for later, use actual dots to obtain the desire purpose.

Buttons

The buttons area a really easy and specific part of your website that can be edited really fast by the use of it’s own tab. We recommend you, in case you have any buttons, to start editing almost at last, once most of your basic website style has been settled, this to make them work with your design in a proper aesthetic way. Editing through this tab will only change buttons, once you are satisfied with the general feel of them the you can go one by one editing them to a finished and specific style.

On this image we see how color applied trough the editor applies to the color of the button on the website.

Button

Button being edited trough our Bulk Style Editor

Images

The last tab of our editor works in a simple but yet effective way, it let’s you control styles that all images have and works in a similar but simple way than the Buttons Tab. Use this in case you want all your image in a specific part of your website or in all of it to have a certain feel and consistency. Be aware InLine Images are not affected by this.

Image Tab

Images on site being edited trough the editor.

Best Practice and Useful Tips

  • Plan whatever you can in advance, that way when using the editor you will know what styles to add. Plan colors, fonts and content.
  • Categorize and define tags by assigning a use. Oonce you have set them on your content, start editing them. Define titles, subtitles, section titles and other associating them to a specific H Tag.
  • Do everything in a logical and sequential flow; this way avoiding to have to re design or return and re do things since you skipped some parts. Go from top to bottom of your layout, from top to bottom on the bulk style editor and open each tab section. Work your tags in a sequential way also.
  • Once you are done with a tab or a really important section, close the Bulk Style Editor pannel. This will allow you to save changes and take a look at your site on preview mode.

What to avoid and common errors

  • Going back to general and less specific tabs and re edit them. By doing this you may trash specific and minimal changes that you have done on your site.
  • Leaving a tab unused. Try do edit your site as much as you can trough the Bulk Style Editor. It will save you time and improve consistency.
  • Not checking what blocks are selected. If you do this you may edit blocks that you have already felt that you were satisfied with and that wanted to avoid editing.

By this time you should already have a simple and useful idea on how to work your design with our Bulk Style Editor. all this recommendations at the end are just that, and since designing trough our web tool is limitless there is no right or wrong way as long as you feel that you are happy and satisfied with your design. Take a look at our resources section to see previous tips and tutorials that you can use to gain knowledge and drop a comment in the bottom section, thank you for reading!

Resources

How to Use the Layout Builder to Fully Customize Your Site’s Structure

Bulk Style Editor

Bulk Style Propagation

Extend Your Bulk Style Editor Updates to All Your Pages

 

Menu