Choosing A CSS Editors for Beaver Builder
Video demo with write up below.
1. The WordPress CSS Plugins
For over 18 months I have been trying all the great new WordPress CSS Editors. They've helped a lot of Beaver Builder users particularly non-coders. Here, I will try my best to highlight their pros and cons
Ultimately I decided to stay with my own editor Stylizer for these reasons:
- I also work with HTML and do WordPress jobs where it's not appropriate to load a plugin
- I prefer an overview of the cascade (as discussed in part one).
- I try to avoid over-qualified CSS and use of !important.
- I use CSS that's not included in presets (like pseudo elements ::before used here).
- I was faster with the editor I've used for 8+ years.
Much is about personal preference and will depends on your goals. Certainly some experienced coders like working with these plugins.
CSS Hero
Point and click editor with live demo with the Beaver Builder theme here.
Yearly Costs:
$29 (one site) $59 (5 sites) and $199 (999 sites).
The one site version does not include their pro-inspector which is like regular code editor.
Pros: Easy to use with plently of one click advanced CSS effects. Does not automatically add the !important overwrite. External style sheet hosted on their server. Good training document and videos. Ability to save preset styles.
Cons: UI difficulties with grey on black and scrolling selectors. Does not group "media queries" together. Does not always select the right things even with over overqualified rules. Lock in to yearly payments.
YellowPencil
Very similar to CSS hero but works differently.
One off Cost
$25 per single use licence from codecanyon or the free version.
Pros: Easy to use more responsive then CSS Hero and easier interface. One click advanced effects. Groups media queries. No lock in. You do not need to enter a licence key to use. Targets areas better than the others.
Cons: It's success in targeting comes at a price in adding "!important" and "nth-child" where not needed. Puts the CSS in the source code not as an external sheet. Overqualified CSS.
MicroThemer
This is not a point and click editor like the two above. You have to create a name for each selector and assign it to a "folder".
One time Costs
$45 for 3 sites $90 unlimited (life support with both) and there's a free version too.
Pros: Organised CSS. Does not create overqualified rules. Uses an external stylesheet.
Con: Does not find the right selectors (ie. custom class selectors added to Beaver Builder's advanced tab are not found - only IDs are). Often adds "!important!. Assigning selector names make the process slow.
Site Origin CSS
Free plugin from the WordPress repository.
Pros: Simple and clean interface with the basics covered. Free and well supported,
Cons: Puts CSS in the document header (internal CSS). As with Microthemer it does not find custom class selectors on ID's.
CSS CASCADE ORDER (simplified)
1. BUILDER LAYOUT CSS - (global and page plugin css)
2. BOOTSTRAP FRAMEWORK - (CSS framework the BB theme is based on)
Microthemer (External CSS stylesheet goes here)
CSS Hero (External CSS stylesheet goes here)
Site Origin (Internal CSS goes here)
Yellow Pencil (Internal CSS goes here)
3. BB THEME SKIN CSS - (the BB theme on settings. The selected options from the customizer)
4. CUSTOM CSS - (internal custom CSS printed in the source code from the Code > CSS in the customiser)
5. CHILD THEME STYLESHEET - (style.css)
6. Any CSS added via BB Template Shortcodes
Note
Many users copy the styles created from the above plugins and delete them from each install. This means not having to pay higher license fees. But you lose some animation effects.
CSS Hero and Microthemer require you to activate the WordPress install on your account where Yellow Pencil does not.
If you clone a CSS Hero site it does not use new licence!
Stylizer 6
This existed long before the recent WordPress Plugins, but does not do much marketing and does not have an affiliate scheme.
One off Cost
$79 for life updates (one licence for 2 computers). I moved from Stylizer 5 to 6 and the discount was 50%. 30 day free trial.
Pros: Can be used on any site without login. Even WP or BB itself You can see the cascade and quickly copy from one sheet to another. With ftp you can tweak a client site without logging into WordPress install. Easy to test across browsers and identify the right selectors.
Cons: No special effects and CSS animations. For that you need to copy from another training sites. Not integrated with WP so you need to either copy and paste or set up ftp.
...and a few affiliate links (well you never know)
Special thanks to Nathan Wrigley from the Picture and Word Web Agency in Scarborough UK... and of course from the Beaver Builder Facebook Group.