I start every Divi website project by installing a child theme. Of course it is my own flavor, aptly named DiviChild. Surprising to the non-coders out there, WordPress child themes don’t have much going on. They draw their power from the parent theme of which they are a child of. The same goes for Divi. My DiviChild theme is simple and straight forward. It is designed to give me (or any developer) a clean slate from which to start developing a new WordPress website on.
I’ve added a few (very few) bells and whistles. Found in the child theme functions.php file, they incorporate a couple tools that I find myself using over and over. For example, I sometimes find it necessary to add a little padding or margin between elements in a text module, blurb module, or other module that accepts text content. Instead of relying on writing out the css, I simply drop in my child theme’s pre-canned shortcode to accelerate the process.
Use [ spaceme height=”12″ ] to create user defined margin between elements. The default is 12px. You can change the height to any number that works for you.
HTML Output :: <div style=”margin-top: 12px; width: 100%; display: block;”>some content </div>
I can throw that in anywhere in the content as needed 🙂
Clear All Shortcode
Use [ br ] to create a hard break between items.
I observed how the original Elegant Themes shortcodes are still packaged in the Divi theme, but for the cute icon buttons, the css has the wrong url! My DiviChild theme has corrections for this built in.
Seldom used dashboard widgets that clutter up your experience have been removed. These include:
- Incoming Links
- Quick Press
- Recent Drafts
- Right Now
Custom Button Shortcode Included
On many occasions I find myself needing a custom button that may be inserted in multiple locations throughout the website content. So much easier and faster to use a shortcode.
Default Button Usage: Use shortcode [ btn link=http://yourwebaddresshere.com ]Button Label[ /btn ]
The following button is the default. Edit the child theme style.css file to customize the visual appearance.Button Label
Link Target: use _self, _top, or any valid html target. ie. target=”_blank”
Border Color: Use hex code or any named color. ie. border=”red”
Background Color: Use hex code or any named color. ie. background=”black”
Label Color: Use hex code or any named color. ie. color=”white”
Title: Any text – This is the hover tool tip. ie. link=”Google”
Shortcode using all options:
[ btn color=”white” background=”black” link=”https://google.com” target=”_blank” border=”#555″ ]Visit Google[ /btn ]
Flash Buddy’s child theme for Divi.
Subscribe for Divi Freebies
Plugin update notifications :: stay abreast of new and or updated items by opting in to my very occasional email newsletter. I swear by all that is right and holy your email address will never be shared, sold, traded or otherwise abused and I seriously doubt you'll see anything more than plugin/code update notifications when they are of the utmost importance.