Css hero плагин wordpress

What is CSS Hero: introduction

CSS Hero is the definitive WordPress plugin to easily customize the look of your Themes and Plugins with an easy and intuitive point and click interface. It will allow you to easily change colors, fonts, backgrounds, pretty much whatever on your site.

Purpose of the plugin

It’s like a precise painting brush to refine the looks of your site.
It is NOT a bulldozer to revolutionize your Theme’s structure, or edit content in any way.

How does it work, technically?

In a nutshell, it’s nice, clean, and non-destructive: CSS Hero is a live WordPress Theme editor that works without modifying any of your theme files.

It’s easy to grasp visual CSS editing interface will allow you to visually tweak your site, without harming performance & speed: CSS Hero is widely compatible with many environments and it is built to be light and tolerant.

You can use CSS Hero to visually customize the vast majority of WordPress Themes and Plugins out of the box: CSS Hero does it’s best to pick up the right CSS selectors automatically.

From a technical standpoint, CSS Hero only generates and enables an extra CSS stylesheet that cleanly overrides your Theme’s original stylesheet.

This CSS stylesheet is a single static file, so your site will not be any slower when browsing it.

No other resources are consumed, no other script is added, no php, no js, no bloat whatsoever is added to your site.
For your convenience, your edits are also stored as data in the database as well, in a specific, separate database table, typically wp_csshero5.
These data are accessed only while editing with CSS Hero and hold up your editing history as well.
Performance-wise, since all the heavy lifting is just done by your own browser, and only while using the editor, the server side impact it’s almost zero.

Источник

A complete website
customization toolkit

you can enjoy an [almost] unlimited source of amazing, royalty-free, high quality images to use in your projects.

Search by keyword, choose an image and a size, and instantly apply as a background-image of any site element.

Finding great images has never been so easy.

Live Mobile Preview

While editing your website with CSS Hero, you can preview in real time the effects of your customization on your mobile phone, right into your hands.

There’s nothing like viewing the real thing on your physical device.

Scan the QR Code on the bottom bar of the CSS Hero editor interface with your mobile device.

Any new edit will be now visible also on your mobile in real time.

Now that it’s all over and done, now that you find, now that you’re whole

Now that it’s all over and done, now that you find, now that you’re whole

Use any Font

Easily embed any kind of font, built-in support for Google Fonts , Typekit and now upload your custom fonts is available too ( .otf , .ttf and .woff supported).

Video Backgrounds

Video speaks louder than words and now you can bring your web pages to life with video backgrounds. A wide selection of free footage from Coverr

is available at your fingertips.

On-scroll Animations

Easily apply on-scroll animations to any element on your pages, choosing among a wide set of effects such as fade , flip , slide , zoom — and fine tune their parameters.

Animations are implemented in CSS Hero using the AOS animation library

, which is solid, lightweight and versatile.

HTML \ CSS Inspector

A built-in inspection tool, to accurately analize and target the right elements that you want to edit.

Live Javascript Editor

Adding your own JavaScript code and integrating popular libraries in your sites is now possible directly from the front page of your website with live linting and rendering .

Sitewide Preview

Watch how your CSS site edits propagate to every corner of your site and gather a global visual overview of your project

Use CSS readymade snippets, or store and recall your own

CSS Hero comes with a library of CSS snippets that you can immediately apply to your page elements.

For example, you can instantly turn a plain link into a cool looking button.

Moreover, you create your own custom CSS snippets and assign them to multiple elements of your site, while keeping a central point of control — instead of relying on a messy «copy-paste» approach.

Источник

The Live WordPress Theme Editor.
No code required.

CSS Hero is the definitive WordPress plugin to easily customize the look of your site, with an easy and intuitive point and click interface.

Trusted by the leaders

Take full control over your site’s appearance in real time

Simply mouseover and click the element you want to edit in real time, no coding skills needed. WordPress theme customization made easy.

Use our color picker to try out color and background changes instantly! The plugin stores your last used colors to help you build your own color palette.

Font Styles and Typography

Add a touch of class with your own fonts, a huge collection of Google Fonts is at your fingertips. TypeKit fonts are supported as well.

Easily tune element margins and paddings: just drag a slider to see the changes on the page instantly.

Spice up your site elements: building gradients, box-shadows, text-shadows and all the modern CSS properties is now a point and click affair.

If you’ve ever been one of those folks that worries that you don’t know enough CSS to make a site look like you want it to, you can stop stressing right about now

Natively Responsive

CSS Hero allows you to easily edit, preview and control how your site looks like on desktop and handheld devices. Use standard breakpoints or your custom ones .

Test tablet\mobile edits before pushing them online, crafting a responsive theme has never been so easy.

Customize the way your theme appears on handheld devices, commit device-specific edits and preview them in a click.

Fear of breaking your site’s responsiveness with your editing? A life-saver desktop only feature allows you to limit some of your specific edits to desktop devices only, with one click.

Safe and non-destructive editing

CSS Hero is a live WordPress Theme editor that works without modifying any of your theme files. It is widely compatible with many environments and it is built to be light and tolerant.

No vendor lock-in

Export your work as CSS or LESS code: you can export your site personalizations instantly and download it to file, for backup purpose as well.

No file alteration

CSS Hero does not physically alter theme/plugin files in any way. Shut down the plugin and your sites looks will revert to what they were before installing this tool. It’s 100% safe.

No performance degradation

From a technical standpoint, CSS Hero only generates and enables a single , static extra CSS stylesheet that cleanly overrides your Theme’s original stylesheet.

The best WordPress CSS editor plugin: code or no code .

Get extra control on your customisations with a full fledged CSS and LESSCSS editor with live rendering. Add your extra rules, copy and paste and easily export your work with one click.

Add your own code

Inspect, refine and edit the CSS Hero generated CSS code with live preview.

Avoid typical CSS mistakes

Your code is automatically checked by the smart CSSLint engine.

Add your own Media Queries

Extend your CSS Hero code to new media queries.

Save \ Export

Save — and enjoy the results — or export tidy CSS code.

A perfect combo with your loved WordPress tools

CSS Hero works on any WordPress theme and plugin and helps you to visually customize all site elements, from header to footer.

114.871 WordPress sites had their design boosted by CSS Hero

Don’t just take our word for it, see what our fantastic customers are saying about CSS Hero, the most intuitive WordPress CSS editor plugin.

Pricing Options

Each new purchase comes with a 30 days money back guarantee .
An active membership will grant you access to plugin updates, private support and new product activations.

Choose an annual plan or get a lifetime subscription .

Starter

Personal

Pro

Lifetime Pro

Each new purchase is granted 100% money back within 30 days from purchase date.

Frequently Asked Questions

Can I use CSS Hero on my WordPress builder or Theme?

CSS Hero has been tested on most WordPress themes and plugins (like DIVI, Elementor, Beaver Builder, Genesis framework. ) and it will be basically compatible with any WordPress environment. Have a look at our plugins and themes demo pages.

You can buy with confidence as, in case CSS Hero won’t properly work in your environment, we offer a full 30 days money back guarantee.

What can I exactly do with CSS Hero?

If you need to customize your WordPress theme, CSS Hero can most probably help you a lot.

CSS is the language that allows websites to look different; CSS Hero is a convenient WYSIWYG Theme editor for WordPress that will help you making visual changes to your website with a point and click interface, instead of coding. CSS Hero will automatically generate the required CSS code, and deploy it to your website upon saving.

A clean visual interface will let you leverage advanced CSS features like background fades in a snap, and is rich of small helper tools which will make your life easier, removing the need to remember values, color codes, keywords. You will find almost all CSS properties in CSS Hero, with preset values, color pickers, shadow generators. you can instantly try everything pushing further your CSS knowledge boundaries.

If you are a newbie or a CSS pro, you will love what CSS Hero does — plus, you can easily learn or improve your knowledge of the CSS language (and LESS actually) while playing with it.

What if I make a mistake? Do I risk messing up my site? Is CSS Hero solid?

A full history is maintained of all your edits — thus you can preview and recall instantly all the versions of your Hero-generated CSS.

You can always undo with CSS Hero — and you can even reset single properties, so that if you made a wonderful job of personalizing your site, but you have messed the site header for example, you can always reset that element only — so that your personalizations are erased and that element will revert to the original Theme definition.

Basically, you should never be in trouble.

Will CSS Hero make my site slower?

From a technical standpoint, CSS Hero does only add to your site frontend a single, static extra CSS stylesheet that cleanly overrides your Theme’s original stylesheet. Period.

There is NO significant performance degradation, and zero added workload for your server.

Can I remove CSS Hero after I’m done with the design?

Yes, definitely. Performance-wise this is not worth the effort as CSS Hero is an extremely lightweight plugin — but of course you can do so if you want. You can always export the generated CSS code and save it wherever you desire: there is no vendor lock-in at CSS Hero.

You can paste the exported CSS code in the WordPress Customizer Additional CSS field, and shut down the CSS Hero plugin: your personalization work will be kept.

Will it mess up my Theme? How does it work code-wise? Where is my data saved?

CSS Hero is a live WordPress Theme editor that works without modifying any of your theme files.

It is widely compatible with many environments and it is built to be light and tolerant.

Your edits are stored securely on your database — but your users will be served a static CSS file only.

If I don’t renew my plan after a year, what will happen to my site? Is the renewal automatic?

No problem at all! Renewal is required only for updates and support. Your CSS changes will continue to work perfectly and the product will still launch. The renewal is not automatic, CSS Hero will never charge you any amount if you do not dispose it directly. You’ll just receive an offer to renew your account one month before expiring date. We have distinct deals for upgrading and renewing your plan, so take a look at our newsletter. We work to make our heroes happy!

What does it mean «activate for one year on new sites, edit forever your sites»?

Each plan expires after 365 days from the purchase date. At the end of that period CSS Hero will continue working, but you will not be able to install CSS Hero on NEW (other) sites. At the end of your CSS Hero annual plan, your plan will NOT automatically renew.

Will CSS Hero Be Addictive?

Yes, definitely. Once you discover how much fun you will have with this tool, you will become a Hero-junkie too.

For some it’s the WYSIWYG live CSS customization, for other folks the effective color management, or the ability to instantly test background image uploads. We want you to be hooked on Hero!

Источник