As of November 24, 2014, the Divi Theme has become ‘Hero’ ready, which means the plugin CSS Hero is available for use with your Divi Theme.

CSS Hero is a premium plugin, which allows you to point and click on elements on your Divi page and visually see your changes WYSIWIG (what you see is what you get).

I realize there are many people building websites who have a deep knowledge of CSS and can easily customize a WordPress theme, however, there will always be people new to WordPress, new to customizing themes, and new to customizing the Divi Theme.

I have been having fun with WordPress on and off since 2007, however, it wasn’t until I started using Divi last summer that I became really interested in learning to customize Divi.

I was working with a designer, Marianne Mcniff at McNiff designs, and together we were building some websites for a few friends we had in common.  Marianne is a seasoned designer and her design layouts included sophisticated color palettes, creative layouts, custom fonts and other typography, custom art, and custom photography.

In the beginning, I nearly panicked. I really didn’t know how to make Marianne’s designs come to life with Divi. I did what many people are doing, searching on Google, stumbling across Eileen’s post, and joining the Facebook group and asking lots of questions. People were always friendly and helped me out, but I felt a little stuck and dependent on others until my CSS skills improved.

When CSS Hero was released, I was eager to learn and downloaded it to experiment. With a glance, I could see many of the CSS elements and properties I could change. I was instantly impressed and felt saved by the bell, or in this case, saved by CSS Hero.

There seems to be a strong reaction to CSS Hero. Those that know CSS well don’t really need it, but for people learning CSS like myself, it helped me to understand the capabilities of CSS, and I was able to customize my website more quickly. And in the end, I could view the generated CSS and see how the code was constructed.

CSS Hero not only helps me customize more quickly, but is a teacher for me as well since I can see the code generated for each change.

Try out this demo at CSS Hero and see for yourself.

If you haven’t seen CSS Hero, here are a few screen shots to give you an idea how it looks.

Inside CSS Hero, select the main menu on your Divi theme and the elements you can modify will appear.

select-main-menu-link-css-hero

Click on ‘top menu – main menu element’ and view what you can modify for a specific element.

top-menu-main-menu-element-text

Click ‘text’ and view the properties you can modify with CSS Hero.

css-hero-top-menu-main-menu-element

In this example, I changed text-transform to UP, the font size to 18px, and the font to Orbitron.

css hero changes to main menu

View the generated CSS, select TOOLS->SHOW GENERATED CSS.

css hero show generated css

View the generated CSS in minified mode.

minified css css hero

Click NORMAL CSS and view in normal mode.

normal css css hero

View CSS, copy and paste into your epanel or leave in CSS Hero!

Susan Ramos
Susan majored in computer science a long long time ago and has worked as a custom software development professional ever since, working for Fortune 100 companies and a Big 4 accounting firm.

She's now exploring the world of web publishing and sharing what she learns along the way.

https://www.nerdsusan.com