Layer styles

The layer styles can be found in the Design panel on the right in your Ycode canvas. Here’s where you can jazz up elements like titles, paragraphs and give them their own style.

You can also set default styles that can be applied to all your H1s, for example. These headings will then all have the same typography, font size, etc.

Creating new styles

Select an element and make any changes you want to it on the design panel, once that is done go to the Layer style menu and click on + New.

Finally, just give the style a name and click on Save.

Applying style

You can now apply this new style to other elements by simply choosing the element, going to the Layer style menu and selecting the style.

Updating styles

If you want to update any of your styles, select an element with the style you want to update applied and make any changes you want to that element.

Once you’re done go to the Layer style menu and click on Update, this will update the style on all elements that have the same style applied.

Note: You can customize an element with a style applied to it without updating the style, this means any changes will only be applied to that element.

Detach

With Detach you are separating the element from the default/customized/new style, it becomes completely detached, and you can't apply it to another element because it's separated/detached.

To detach an element it first needs to have a style applied to it, then go to the Layer style menu and click on Detach.

Other features

By clicking on the three dots on the Layer style menu you will have additional options, let’s talk about them!

  • Reset: this will reset any changes you’ve made to a style, this is great if you want to test and see how some design changes will look before committing.

  • Rename: you can rename the style name at any time.

  • Delete: this will delete the layer style, however, the elements with that style applied to them will keep the design settings even after deleting the style.

This is all you need to know about layer styles!