The Genesis Design Palette Pro plugin gives you control of styling and customizing a variety of StudioPress Pro Child themes without knowing code.
In this tutorial you will wrap your brain around:
- The different customizations you can make on almost all Pro child themes.
- The options that are available including changing the fonts, colors, padding, and background of your theme elements.
- How this plugin works with the Genesis Framework.
- How you may be using this plugin for the child theme you are using.
- The child themes that this plugin supports.
- A variety of extensions to further customize your site like adding Google fonts.
In this first video I will walk you though this plugin while using the Genesis Framework. Most of these options will be also found with the child theme options for this plugin as well.
In this second video I will give you a couple of examples of how this plugin works with the StudioPress Pro child themes. Each theme will have an additional option specific only to that child theme. Although I am not doing tutorials on each child theme, but this tutorial will give you a good idea of what to look for when using the Design Pro Palette plugin with a child theme that is supported.
With this premium plugin comes free extensions that extend the the ability to do customizations without knowing code. I will be adding tutorials as more extensions are released.
Entry Content Style Extension
This extension allows you to easily customize the content that goes directly into a post or page, such at your Headings, eg. H1, H2, H2, etc. and your bulleted and numbered lists.
eNews Widget Extension
If you use the plugin Genesis eNews Extended Widge, then you will love this. The beauty of the widget is that it always pulls in the colors and fonts of your child theme. But with this extension, you can now even further customize the look of this plugin without knowing code.
Google Webfonts Extension
Want more font choices than what you child theme is giving you? I didn’t do a video on this extension because once it’s installed and activated, your fonts choices increase anywhere that the Design Palette Pro plugin allows it. See the screenshot below to view the comparison of fonts.
There are other extensions available and are more suited to people who are more comfortable with CSS.
Freeform Style: Creates a new available section to add your own CSS.
CSS Export: Adds a button to the Design Palette Pro settings tab to export a raw CSS file.
In these video highlights I have chosen to share screenshots of the settings for each tab, so this is pretty long. I also include a brief description of the elements that tabbed area affects.
Genesis Design Palette Pro Plugin Interface
I found the interface very intuitive with the ease of refreshing the preview at any time, as well as being able to switch between desktop, tablet and mobile view.
General Site Styles
This gives you an option to change the background, some global typography, and an easy way to add the favicon to your site.
The ability to change header background color, padding and fine tune the site title and site description. And if your theme has a header widget area, you have options for that as well.
The ability to change your fonts in the both your primary and secondary navigation bars as well as background color. It also gives you an easy to change the alignment on the bar, so now you can center your navigation menu if you want.
When changing the content area, such as a blog post or page, it’s best to be viewing a full post or page to see what changes are being made. Not only can you change fonts and colors, but also the padding and margin area. Also, the Post Meta and Post Footer.
This is where you will be able to customize the Read More link, breadcrumbs, pagination and author box.
Not only can you style the comment area and single comments, but also the comment form.
Style both your primary and secondary sidebars down to the smallest detail.
If you are using your footer widgets, now you can customize those as well.
An opportunity to change font and background to your copyright area.
There are a few cool options here. First, you will want to set the theme you are using to the plugin. And if you ever want to preview a specific page or post besides the homepage, you simply add that URL into the preview box and reload the preview with that page or post. Ideal if you want to see how your changes are affecting a full post view. And lastly, if you have done a bunch of customizations using a specific child theme, and want to use those same ones on another site using the same child theme, the data export and import will do the trick for you.
Child Theme Settings
If you are using this with a child theme, likely you will get additional customization settings specific to that child themes homepage. For example, if we switch to the Metro Pro Child Theme, now you have a new tab called Front Widgets that allows you to customize the Widget Area Title Rows, Top Widget Area, Middle Widget Area, and the Bottom Widget Area.
Below are screenshots of the extensions that I provided a video tutorial on.
Genesis Design Palette Pro eNews Widget – Do you use the Genesis eNews Extended Widget. If so, now you have the ability to customize that specific widget through this plugin.
Genesis Design Palette Pro Entry Content – What to customize your H1, H2, H3, H4, H5 and H6 headers? Or maybe just one of two of them. How about your bulleted and numbered lists? This extension makes it easy to do just that and only affects these styles that are in your post or page entry.