Elementor - CSS Hero

Learn how to easily customize your Elementor powered website by visually editing each element. You'll just need to install and activate the CSSHero WordPress plugin.

About this Plugin

Elementor Page Builder is a drag and drop page builder that enables webmasters to create high-end websites at record speeds that are perfect down to every last pixel. With over 20,000 active installs, the Elementor Page Builder plugin is one of the most popular page builders available in the plugin repository.

This one of a kind live page builder features a wide range of advanced capabilities that allow it to deliver unparalleled designing speeds and an incredibly user-friendly interface. These include live, front-end editing, instant page loading, tons of page elements, and animation effects. It truly is one of the best, most feature-filled page builders around. Elementor takes all the back-end coding out of designing so that you never have to guess what your web page will look like.

Elementor ships with a complete library that contains over 20 handcrafted templates. Users can also create their own custom design templates and add them to the library. Best of all, each template is fully customizable with the Elementor Page Builder plugin which means that you can go back and modify its design later on.

Double Your Live Editing Game With CSS Hero on Elementor

Although the Elementor Page Builder plugin comes with tons of options right out of the box to help you create unique web pages and layouts, you can take things to the next level by pairing it with CSS Hero. This winning duo works seamlessly together enabling website owners to customize everything from header background colors to typography elements.

Main Features:

  • Allows users to create high-end designs.
  • Blazing fast designing speed and page load time.
  • Front-end, live page editing.
  • Tons of premium-quality functionality like box shadows, advanced buttons, hover effects, background overlay, and entrance animations.
  • Template library with over 20 pre-designed templates.
  • Mobile editing toolset for a fully responsive design.
  • 28 powerful widgets for easy drag and drop page building.
  • User-friendly interface.
  • Multilingual and RTL support.

Now With Support for Custom Classes

Elementor Custom Class  with CSS Hero

Elementor Custom Class with CSS Hero

CSS Hero offers support for custom classes and works great with sections, columns, and elements. Navigate to Pages > Add New from your site’s dashboard and edit it with the Elementor Page Builder.

Select template.

Choose from one of 20 pre-designed templates.

By clicking the Add Template button, you can choose from one of 20 pre-designed templates to add to your page. CSS Hero enables website owners to fully customize its design from the front-end. Those of you who would like to add a little zing to their site’s design can mess around with the drag and drop page elements – columns, text, image, text editor, video, button – to create a truly custom site.

Easy-Access Options Menu (Coming soon)

Unlike before, right-clicking any page element allows webmasters to access a drop-down menu with some useful options:

CSS Hero.

Customize globally or specifically with CSS Hero!

  • Edit Only This. If more than one instance of the same element is available on the same page, CSS Hero will edit only the chosen one. The modifications made will extend to all the elements on other posts and pages that are exactly the same as the selected element.
  • Edit Only On This Post. By selecting this option you can apply edits on all the occurrences of the selected item only on the post you’re editing.
  • Edit Only On This Page. This option allows you to apply edits on all the occurrences of the selected item only on the page you’re editing.
  • Edit Only On This Post Type. With this option, you can apply edits on all the occurrences of the selected item only on the post type you’re editing.

NOTE: This feature will be available in the next CSS Hero release.

CSS Hero and Elementor: A Winning Combination

If you’re designing pages with the Elementor Page Builder then you should be customizing them with CSS Hero. The CSS Hero plugin is now fully compatible with Elementor giving you a winning combination when it comes to creating web pages for your WordPress site.

If you use (or plan to use) this Plugin...

CSS Hero can help you deeply and quickly customize the Elementor Plugin, solving some common issues like:

  • How to customize fonts in the Elementor WordPress Plugin, to make font biggers or change typeface for titles and header texts
  • How to change CSS background image on the Elementor WordPress Plugin and build background fades
  • How to change colors and styles on Elementor WordPress Plugin

Plugin Details

User Feedbacks

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

Affiliate

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