Ask a Question ?
Design & Publish Websites Faster

How to Use Dot Profiles in Breezi

Update!

Now you can hide the Dots menu when you’re not using it. Check out the Design Mode options in this article.

Dot Profiles

It has always been our idea that designing should be faster, so creating a way for our users to manage and propagate our dots styles was a no-brainier. Today we’ll be showing you how this amazing feature also known as Propagatable Dots will allow you to save time on your design process while giving you pixel-level control over your website.

Propagate

Create styles that propagate across a number of components.

Creating Visual CSS Classes Through Dot Profiles

Using our Dots you’ll be able to edit apps and layout component styles such as borders, colors, spacing  margins and more. Each one of our apps and layout components has several dots that will help you to gain pixel-level control over it. Once that you get an idea on how our dots work, then you can start using our Dot Profiles. We’ve created a tool that is already built in the dots themselves that will help you propagate whatever styles you have placed on a specific dot by saving it as a style (commonly known as a css class) and apply it to other ones. This means that our web design application acts like a true visual css editor.

The process is pretty simple; you click on a dot, open it, style it, save it as a profile and then, once you open another dot, you simply apply and link the Dot Profile that was created to the newly opened dot.

And why should you use this? Well, saving and propagating dot profiles will allow you to save time by eliminating the hassle and time consuming task of editing each one of your  dots one by one. This, together with our Bulk Style Editor will help you design faster and have your site ready in no time.

Let’s say that you want all of your buttons to have the same background color, rollover color, corner radius and drop shadow but you don’t want to style them one by one since it would take too much time. Well, there’s a solution, as easy as editing just one of the buttons trough it’s Dot Profile, saving it as a profile and applying that profile to each one of your dots. This is very similar to creating css classes when you are creating a website through coding.

On top of that, if you link them all, and change the style at some point of your editing process, just push those changes on demand  and save and propagate that style trough every dot that has that profile applied to it.

Save And Propagate On Demand

One thing to keep in mind is that changes that you make to a dot that has a Linked Dot Profile applied to it (see Linked Dot Profile & Propagation below) won’t transfer to other dots linked to the same profile automatically, changes are pushed on demand and you have to press the Save And Propagate button at the bottom of  the modal.

Save & Propagate

Save & Propagate Button. Use this button to push changes made to that dot to other dot’s with the same profile linked to them.

Saving A Profile

The first thing to do will be to open a dot, once that you have styled it is time to save it, click on the Save Style as Dot Profile link at the bottom of the Dot Modal.

Saving

This is how you save a Dot Profile

Once that done another modal will come up, asking you to name your Dot Profile, under that field you can see the Saves as linked dot profile option (already checked by defaulted) that will link this dot to others that use the same profile allowing you to propagate further changes and styles later on. Uncheck this option if you don’t want all dots that have this profiled applied to them to be linked between each other.

Linked

Uncheck this option if you don’t want the profiled to be saved as a linked one.

Linked Dot Profiles & Propagation

Once you have named your Dot Profile the editor will ask you if you want this dot to also be linked (in case you never unchecked the Saves as linked dot profile option) to the new profile that you’ve just created. if you select Yes, Link It our editor will link your dot to that dot profile and any other dot that gets that profiled applied to later on.

Linked

Select if you want your current dot to be linked to the just created profile.

See how your linked dot will turn darker now.

Dot

See the difference between a dot that has no profile linked to it and one that does. Black arrow indicates darker dot that has a dot profile linked to it.

Loading & Applying A Profile

Now that you have saved your Dot Profile you can click on another dot and hit the Load Dot Profile link, another modal will pop up and show you your saved Dot Profiles, their names, classification and if they are linked or not. At the top of the modal you will encounter the classification of the dot that you are currently using, see further sections to have each dot class explained. Hover over the Dot Profile that you want to use and hit load to apply the profile.

Apply a profile

This modal will show while applying a profile to a dot. Black arrow shows the current kind of dot that is selected, red one shows the information for a specific profile; name, dot classification and link status.

If you clicked on a dot, and the profile that you are applying belongs to the same classification of that dot (i.e. applying a Button profile dot to a button dot), the editor will simply apply it and link it to other dots with the same profile (if the dot profiled is Linked of course, otherwise the editor will just apply the style to it).

Correlation

See how current dot being edited and profiled to be applied share the same kind of dot classification.

If you clicked on a dot and apply a Dot Profile that does not have the same classification (i.e. applying a Button profile dot to an image dot) our editor will let you know the previous stated and ask you if you still want to apply whatever styles match to that dot, in this case, the Dot Profile will not be linked at all.

Difference

Since dot being edited and profiled being applied don’t share the same classification linking will not occur.

Modify A Linked Dot

The good thing about this profiles is that applying one to a certain dot does not lock you into using that one.

In case your dot as a Linked Dot Profiled applied to it, you can still change it. Dark Dots that have Linked Dot Profiles applied to them can still be modified. A menu at the top of the modal of the dot you clicked on will show for this kind of dots. The menu will have the name of the Linked Dot Profile applied to it and a gear icon. Clicking on the gear icon will display a sub-menu showing you options to either Load Another Profile, Save It As A New Profile and Unlink It.

Gear

Click on the gear icon on already linked dots to modify them.

Unlinking the dot or loading another profile that is not linked to it will turn the dot you are currently on color back to normal.

The Dots Tab

There’s a tab on the Shelf at the bottom of our Editor that says Dots on it; with this menu you can manage your saved profiles and perform  an array of actions to them.

You can Edit the profile and change it’s style set up and Linked options, save it as a new profile, rename it or delete it. Remember that changes done while editing your Dot Profile are pushed on demand so be sure to hit Save And Propagate. Deleting Dot Profiles that are linked will cause all dots that have this Profile applied to them to be un-linked and their dot color will go back to normal.

Dots Tab

Click on the Dots Tab to see saved profiles, click on the gear icon to show options for each profiles.

Dot Classification

To help you manage the way your site is created we’ve categorized dots depending on the element that you are styling. There are dots for images, buttons, apps, sections, blocks, etc. Check out the next tab where you an have a brief explanation of what kind of dots you’ll find within our editor.

Dots

Dot classification.

Regarding Text

Text style (like size, font, alignment, etc.) is not savable as a dot profile.

You can use headings and the Bulk Style Editor for that.

Best Practices

Plan your website in advance, and categorize wich apps and layout components will have the same style, once this is done, edit one of them and save it as a profile, apply it to the others and have it linked for further changes.

Thank you so much for reading, please send any questions and post any comments under this section!

Menu