Cloning Styles: Copy & Paste

From version 1.5 of CSS Hero we’ve introduced a feature which we think will result extremely useful to speed up your design process by giving CSS Hero the ability to selectively clone element styles and replicating them with ease.

If you’re already familiar with CSS Hero you’ll surely know that Hero provides each editable element on your website with a blue label. That label highlights the element very own CSS selector and it’s description in order to give you a visual feedback of what you’re about to customise.


Now, when hovering an element with Hero 1.5 you’ll have a new feature at your fingertips, meet the Copy Style button:


By clicking this small button Hero will store all the element’s look and feel for you. Once you copied an element’s style you can easily choose to paste it to another element in order to make it look exactly like the one you copied it from. To do this you just have to click on the green Paste Style button that will show up once you’ve copied one.


That’s it, easy huh?

By default CSS Hero will clone only the most important style properties such as font-size, color, background color and a few others however you can still refine that by choosing which properties you want to paste.


In the following video we’ll show you how this works and how to refine the list of pasted properties.

Cloning CSS properties is a great shortcut to speed up your work and to easily replicate element styles but you should keep in mind that this feature should be used mainly to copy small element styles such as titles, texts, buttons, links and so on. If you’re willing to achieve a more concrete cloning you should consider learning more about CSS Hero’s love story with custom CSS classes:

CSS Hero is the definitive plugin to customize your WordPress themes with an easy and intuitive WYSIWYG interface.


Become a CSS Hero affiliate and earn 40% on each sale right now. Spread the CSS Hero word and share the wealth with us!
Start Earning →

Follow the Hero