• Skip to main content

Premium WordPress Themes

  • Genesis Pro
  • Blocks
  • Custom Blocks
  • Framework
  • Themes
  • WordPress Hosting
  • Agencies
  • My StudioPress
← Go back to StudioPress Blog

Design Tips

Spruce Up Your Genesis-Powered Website with Content Boxes and Color Buttons

Brian Gardner on September 11, 2012

A few months ago I published separate tutorials on how to add content boxes and how to add color buttons to your website. Apparently that struck a cord because there was a number of people who left comments those posts.

With that said, I thought it’d make sense to make this process available here at StudioPress, considering we get a lot more traffic here than I do on my site.

Colored Content Boxes

Here are the 6 content boxes that this tutorials will show you how to implement:

This is an example of a Content Box, which is easy to implement and can be used to put emphasis on a particular thought or sentiment.
This is an example of a Content Box, which is easy to implement and can be used to put emphasis on a particular thought or sentiment.
This is an example of a Content Box, which is easy to implement and can be used to put emphasis on a particular thought or sentiment.
This is an example of a Content Box, which is easy to implement and can be used to put emphasis on a particular thought or sentiment.
This is an example of a Content Box, which is easy to implement and can be used to put emphasis on a particular thought or sentiment.
This is an example of a Content Box, which is easy to implement and can be used to put emphasis on a particular thought or sentiment.

In your text editor, all you need to do is wrap the text in a div with a class applied to it. Here’s how that should look:

Add Content Box CSS to Your Style Sheet

In your theme’s style.css file, place the following code and edit as necessary:

Color Buttons

Here are the 6 color buttons that this tutorials will show you how to implement:

Blue Button Link

Gray Button Link

Green Button Link

Purple Button Link

Red Button Link

Yellow Button Link

In your text editor, all you need to do is add a class to your link. Here’s how that should look:

Add Color Button CSS to Your Style Sheet

In your theme’s style.css file, place the following code and edit as necessary:

It’s THAT simple. So go on, add some content boxes or some color buttons to your website, and stand out!

About Brian Gardner

Designer. Founder of StudioPress. Creator of Frost.
Connect with him on LinkedIn or follow him on Twitter.

Footer

© 2025 WPEngine, Inc.

1WP Engine is a proud member and supporter of the community of WordPress® users. The WordPress® trademarks are the intellectual property of the WordPress Foundation, and the Woo® and WooCommerce® trademarks are the intellectual property of WooCommerce, Inc. Uses of the WordPress®, Woo®, and WooCommerce® names in this website are for identification purposes only and do not imply an endorsement by WordPress Foundation or WooCommerce, Inc. WP Engine is not endorsed or owned by, or affiliated with, the WordPress Foundation or WooCommerce, Inc.

Products
  • Genesis Pro
  • Blocks
  • Custom Blocks
  • Framework
  • Themes
  • WordPress Hosting
  • Agencies
Company
  • Brand Assets
  • Terms of Service
  • Acceptable Use Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • Facebook
  • Twitter
  • Dribbble