Create a Breezi Skin From Scratch
There is a really convenient and smart feature that allows you to apply broad and specific styles to your page or pages without having to re-do your content and save pre-designed and already set up styles for future use. This feature is called Skins and today we are going to show you how to create a skin of your own so you can use it for later and appliance or also to create specific skins for specific parts of your website!
What Are Website Skins?
A skin is a specific set of rules and styles applied to your content on your page that give it a feeling, color and a certain touch to your page without removing or replacing elements or as someone from Breezi said “fully layout, content, and app arrangement agnostic theme layer on top of your site”. Skins will provide aid to designers and website creators using Breezi that want to either apply already created Skins to their site or create one of their own for future use.
On the picture below you see a few of the skins that we offer!
Take a look at the next sections for a overview of the process of creating your own Breezi Skin.
Tag Your Text
Once you have your site created on Breezi and it’s content has been added, it’s time to work on your page style. We are gonna start with backgrounds and layout building elements. Start by defining and placing content on your website. Once all content has been placed you have to “Tag” it.
On Breezi you can use H Tags on text and these can be later modified trough are bulk style editor, this way making it’s design consistent. So the next step would be to start tagging your text once you have define each one of the tags you are going to use. It is not necessary to use all tags but try to be sequential and use order provided; meaning go from H1 to H6.
On the next image you can see how Tags are being added to the text. Double click on the text, and select the tag from the drop down menu at the top of our Edit In Place bar.
Using The Bulk Style Editor
Now that the layout is settled, content has been placed and text has been tagged it’s time to work on our Bulk Style Editor. Changes applied to your site trough the Bulk Style Editor will later be available to be saved into a Skin. Over here you will find an analysis and walk-through on the basic steps to follow to modify your site trough our Editor with the intent of creating a Skin for future use.
The Container Tabs
Open the Bulk Style Editor and start by working on each one of the tabs that show on the menu at the left of the pop up panel Clicking on the tab will show the main styles for that tab and component. Also, sections will show under that tab and are pertinent to specific settings for certain styles of that tab or component.
Take a look at this picture, you see how once that tab was clicked it also shows other sections underneath itself. This sections, once clicked, also provide for other levels of customization.
Go trough each level and tab of the pannel, if available, play with every setting and customize whatever you can until you feel satisfied with the result. Also close your pannel from once in a while and specially when you have made an important and great change on your website for changes to be saved.
The Container Tabs provide styling to your main layout elements. The Page Container Tab is the broadest of them all and the more you go down on the menu the more specific they are. Keep in mind all this elements are in some level, layered, meaning that the Page Container is at the bottom or back of them all and other styles applied on other tabs (Block, Section, Container, etc) will be applied on top of the previous one.
Once you are done with all the container tabs and their sections it’s time to work on your typography. Click on the Text Tab and start by editing regular text, once you are satisfied with the result go trough each one of the sections for this Tab.Sections included are H Tags and Links.
On the next picture we see how by editing the H4 Section Tab from the main Text Tab we change the text color and the line heigh and spacing. Once we save our Skin we’ll see how this very same settings will apply to any text that has a H4 Tag to it.
At this point your site content has been tagged and modifications to each one of this sections trough the Bulk Style Editor will only apply specifically to that tag. It is not necessary to have all tags in a website but it would be useful to modify them all to your aesthetic desire so they come in handy later when applying our currently being created skin to other pages.
Buttons & Images
Layout elements, containers and text have been styled so it’s time to work on your buttons and images. This is a small but important part of your website, if you do have buttons and images that you want their style to be consistent then you can work them out with our Bulks Style Editor.
On picture below we see how the same way that we have edited other values before, buttons can be edited too. select the tab and add style to it, once you feel happy with them close the pannel to automatically have your changes saved.
The Bulks Style Editor works by making changes to existent elements on your page and applying them to the selected blocks.
There are two things to keep in mind that will come in handy while using the Bulk Style Editor to create a Skin; the first is that if modifications done trough the editor are not applied if elements are non existant (let’s say applying styles to buttons when there are no buttons at all) this changes will not “translate” to a Skin since they where never applied
The second is that modifications are done only to the blocks and elements selected, for example if all blocks are selected and you are using the Images tab, all images on all blocks will be affected.
Saving Your Skin
Once that all the aesthetic elements have been modified trough our Bulk Style Editor it’s time to save our Skin. Click on the Skins tab on our Shelf at the bottom of our Editor, hit Save Current Page Skin, a pop up modal will come up that will ask you for your Skin Name, once hit is done hit Create! and have your skin automatically created for future use!
Following the previous steps will allow you to create a skin that has all layout, text, images and buttons styles saved so you can apply it for later but you can also just change text or color settings on our Bulk Style Editor to create partial skins that you can apply later.
Remember skins created can be applied to all or some of your pages and you can always try the ones that we provide on our Skins section!