When you want to launch a WordPress site quickly and professionally, Genesis has long been the go-to option for a winning combination of expertly coded solutions with an eye for design. And launching your Genesis site with a StudioPress child theme comes with the knowledge that you’re using a trusted solution built for both success & growth.

But what happens when you need to publish a site and you don’t have the coding skills to customize your dream theme? Or, when you are a coder, but don’t have the time to sift through another stylesheet to make the changes your client is requesting?

That’s when Design Palette Pro comes in to help level up your website. 

Design Palette Pro customizes your Genesis site without any need to code

Thanks to its intuitive point-and-click interface, Design Palette Pro makes it easy to completely customize a website in minutes. With these user-friendly controls, it helps to accelerate your launch timeline, allowing you to tailor every section of your site to pixel perfection. Plus, with its built-in preview window, it’s possible to see all of your intended changes before committing to them. 

Design Palette Pro lets you personalize your StudioPress theme like a pro, without ever touching a line of code. With it, every section of your site becomes easily adjustable. Whether you want to change your background colors, update your fonts, or adjust the spacing around your menu bar, Design Palette Pro has got you covered. 

The best way to illustrate this is with a few examples, so let’s dive into some potential usage scenarios:

Updating colors with Monochrome Pro

Monochrome Pro is a natural choice for a website looking to have a stunning visual aesthetic with a minimalist design. But, while there are a few included options to change some colors, Monochrome doesn’t include options to change all colors, such as the header background color or the front page hero link. If you wish to have complete control over your colors, Design Palette Pro can step in and avoid the need to hire a developer. 

For example, if you were inspired by the pantone 2021 color of the year and wanted to incorporate its message of strength and hopefulness into your website, Design Palette Pro can easily assist with this uplifting change. 

By going to the Header Area section within Design Palette Pro, you can use the color picker to choose any color, or enter a hexadecimal color code. For the Pantone Yellow, the hexadecimal color code is #F5DF4D. Once that code is entered into the General Header – Background Color field, Design Palette Pro’s preview panel automatically updates to reflect the new color. 

If you want to stay consistent with this accent color change, it can also be applied to other parts of the site, such as the front page hero link color. To do so, go to the Front Page section and look for the Large Heading – Link color picker. Once the same hexadecimal color code (#F5DF4D) is entered there, the preview panel will once again update to reflect the change. Clicking the Save Settings button at the top of the page will then push these changes to the live site.

Increasing font sizes for improved accessibility with Infinity Pro

Infinity Pro is an instinctive option for a business looking to launch a flexible website that is both stylish and modern. Part of any responsible website launch should also include an accessibility review, which ensures that everyone who is using the site has a good user experience and is able to access all of the content. While Infinity Pro may not come with this level of customization out of the box, Design Palette Pro is here to help.

For example, the business may want to make certain that the menu bar uses an accessible font size. This ensures that any user, including those with blindness, vision loss, and reading disorders, will find the website to be readable and legible. Fortunately, adjusting the font size is just a few clicks away with Design Palette Pro. To do so, go to the Navigation section, look for the Typography – Top Level – Font Size setting, and change the size from 10px to 16px. 

You may find that bumping up the font size increases the menu bar to two lines. Not to worry! It’s also possible to scroll down to the Menu Item Padding – Top Level setting and adjust the Left and Right controls from 20px to 10px. This will reduce the space between menu items and should get everything back onto a single line. 

Finally, once the menu font size has been increased, it may feel like the site title doesn’t carry the same level of prominence as before. Thankfully, this is another quick fix with Design Palette Pro. To adjust, go to the Header Area section and look for the Site Title – Font Size setting. Adjusting this value from 18px to 24px will help make this section stand out again. Then to publish your changes, click the Save Settings button at the top of the page.

Taking a few moments to make these changes with Design Palette Pro will not only make your website more accessible, but it will also enhance the website experience for all.

Changing font families with Breakthrough Pro

Breakthrough Pro is a popular selection for websites looking for a sleek, modern layout. But, while the default look pairs two elegant fonts together, there aren’t any built-in options for users to conveniently change to any other fonts. Fortunately, Design Palette Pro seamlessly includes font family selection as one of its many customization options. 

For example, if you wanted to freshen up your font selection for a quick facelift, Design Palette Pro can handle this request, applying a new look and feel to your website with only a few clicks. 

To update the site title font, from within Design Palette Pro, go to the Header Area section and look for the Site Title – Font Stack setting. Click the drop-down menu to reveal a selection of curated sans-serif, serif, and monospace fonts. From there, you can easily change from the default font of PT Serif to a new font, such as Gill Sans. 

If you make this change to the site title, you may also want to update the front page hero title, to keep your fonts consistent. This change can be made by going to the Front Page section and looking for the Large Heading – Font Stack setting. Make the same change there, from PT Serif to Gill Sans, to update that font as well. 

Next, since the heading fonts were updated, you may want to also change the body font to complete the font revamp. To do so, go to the General Body section and look for the Typography – Font Stack setting. From there, you can use the drop-down menu to change from the default Alegreya Sans font to a new font, such as Helvetica. Once your font families have all been updated, click the Save Settings button at the top of the page to publish your changes.

Finally, it’s worth noting that if you wish to have even more font family selections, Design Palette Pro has a free extension, Google Web Fonts, which offers support for all of Google’s 1,300 fonts. To learn more about using that extension and the options it provides, check out our companion article, Changing Your Website Fonts with Genesis Sites.

Wrapping Up

These examples are just a small sampling of what can be accomplished with just a few clicks in Design Palette Pro. A completely fresh look for your site is possible in no time, without ever needing to touch a line of code. With the live preview updating as you go, you are able to customize every aspect of your website and see your changes applied in real time. 

Whether you want to freshen up your colors, update your fonts, or fine tune your spacing, anything is possible. If you want to free up time, while saving money, Design Palette Pro can help you to craft your dream website today.