Follow the instructions here to get your website looking exactly like our demo!
Table of Contents
- List of plugins used
- Color Scheme/Main Hex Codes
- Font List
- Uploading and installing theme
- Importing Demo Content
- Adding header
- Changing the color scheme
- Navigation menus
- Homepage widgets
- Featured posts wdget
- Adding social media icons – navigation bar
- Adding social media icons – home, sidebar, footer
- Adding in Subscription Box/Genesis eNews Extended
- Adding footer widgets
- Setting up the Portfolio
- Setting up the Shop
- Setting a page to display your blog posts
- Setting up the Pin-It Hover Button
- Setting up share icons at bottom of posts
- FAQ
Plugins
- Contact Form 7: for the contact form on the contact page
- Genesis eNews Extended: for the subscribe areas
- Jetpack: for sharing icons at bottom of posts
- jQuery Pin It Button For Images: for the Pin-it hover button
- Portfolio Post Type: to support the portfolio
- Regenerate Thumbnails: if your images are looking wonky, you’ll need this
- Simple Social Icons: for all social media icons
- Soliloquy Lite: for the sliders on the homepage
- * WooCommerce: ecommerce plugin
- * Genesis Connect for WooCommerce: required if WooCommerce is installed
Color Scheme Main Hex Codes
Greys: #757575 and #d7d7d7
Pink: #ffdada
Pink 2 (links): #eac3c5
Gold: #dec291
Teal: #e6f6f3
Font List
You can download these fonts if you want to use them for other areas of your branding.
– Bebas Neue Book
– Caviar Dreams
– Lato
Uploading & Installing the Theme
See our video on installing our WordPress themes.
** IMPORTANT: IF YOU PURCHASED YOUR THEME AT CREATIVE MARKET, GENESIS.ZIP WILL NOT BE INCLUDED IN YOUR THEME DOWNLOAD. YOU WILL INSTEAD NEED TO PURCHASE GENESIS AT STUDIOPRESS. PLEASE SEE IMPORTANT-HOW-TO-PURCHASE-GENESIS.PDF IN YOUR THEME DOWNLOAD FOLDER FOR MORE INFORMATION.
Importing Demo Content
If you want to use the demo content to help set your site up, click here for instructions.
Adding the header in WordPress
Add your site title and tagline in WordPress by going to Settings >> General. For this theme, the site title is the top line, and the tagline is the bottom line.
UPLOAD YOUR OWN HEADER: Go to Appearance >> Header and upload your header. Your header should be 700 x 200 pixels before you upload.
Changing the color scheme
On your Genesis >> Theme Settings page, you have the option to select your color scheme under “color style.”
Navigation menus
Go to Appearance >> Menu. Create and save a menu with your desired links. For a video tutorial on adding in navigation menus, click here.
Primary navigation menu: This is the main navigation menu under the header area.
Secondary navigation menu: This is the navigation menu at the top of the page that shows up when you scroll down the page.
Homepage Widgets
This theme features a widgetized home page with six areas:
- Home A
- Home B – Left, Home B – Right
- Home C – Left, Home C – Right
- Home D
Control what shows up here by going to Appearance >> Widgets and dragging and dropping widgets into these areas. You have lots of options! Here is a layout of the homepage with each widget coordinated. To the right is a list of all possible widgets that could be used in each space. CLICK HERE FOR A SEPARATE PAGE OF INSTRUCTIONS FOR CONFIGURING THE HOMEPAGE WIDGETS.

Click to enlarge
Featured Posts Widget – Sidebar or Footer
Use the Featured Posts widget in the sidebar or footer to highlight recent or featured posts. To highlight featured posts, create a new category for your posts called “Featured” (to do this, just go to the Posts >> Categories page and add a new one) and mark each one you want to feature. To add the widget in the sidebar, go to Appearance >> Widgets and add a Genesis – Featured Posts widget to the primary sidebar. Use these settings:

Adding in the Social Media Icons – Navigation Bar
First, download and install Simple Social Icons. To add, go to Appearance >> Widgets >> drag and drop a “Simple Social Icons” widget to where you want it to appear. No need to change the color or size–just enter in your desired social media URLs and save.
Adding in the Social Media Icons – Home, Sidebar or Footer
First, download and install Simple Social Icons. To add, go to Appearance >> Widgets >> drag and drop a “Simple Social Icons” widget to the Primary Sidebar widget area, one of the Home widget areas, or one of the Footer Widget areas. Use these settings and enter in your desired social media URLs:

Genesis Enews (Subscription Box)
You can add in a subscription box in several different areas: the sidebar, homepage widget, or a footer widget. Do this by 1) installing Genesis eNews Extended plugin followed by 2) dragging and dropping a Genesis – eNews Extended widget into the widget area of your choice on the Appearance >> Widgets page. This tutorial covers how to set up your subscription box.
Adding in Footer Widgets
This theme features a 3-column footer widget area on the bottom. Control what shows up here by going to the Appearance >> Widgets page and dragging and dropping widgets into the Footer 1, Footer 2, and Footer 3 widget areas.
Setting up the Portfolio
First, you will need to install the Portfolio Post Type plugin and activate it. Once you’ve done that, you should see a “Portfolio” tab in the sidebar of your WordPress administration area. From here, you can add in your posts. I like to set up my categories first, and then you can add in posts and tag them in their specific category. The featured image that you set for each post is what displays on the portfolio category pages.
You can view your main portfolio at http://yoururl.com/portfolio/, and your category pages at http://yoururl.com/portfolio_category/your-category/
If you’re receiving a 404 error page when you view your portfolio, you might need to reset your Permalinks. To do this, go to Settings >> Permalinks and click “save” on the bottom, without making any changes.
To ensure your title displays on the portfolio page, go to your main category page and edit that category. Add your title where it says “Archive Headline”.
To watch a video tutorial on this set-up process, click here.
Setting up the Shop
This theme has built-in WooCommerce styling. For configuration, please click here.
Setting a Page to Display your Blog Posts
Please find instructions at our updated support site.
Setting up the Pin-It Hover Button
We’ve included a custom pin-it button with this theme. To set it up, you’ll need to install the jQuery Pin It Button For Images plugin. Once activated, click on Settings >> JQuery Pin It Button for Images and configure your settings. On the “Visual” tab, upload one of the pin-it buttons found in the /images folder of your theme download.
Setting up Share Icons at Bottom of Posts
You might have noticed the share icons that appear at the bottom of each post. To set this up, you’ll need to install the Jetpack plugin by going to Plugins >> Add New and searching “Jetpack.” The instructions will walk you through syncing Jetpack with your WordPress.com account (if you don’t have one, you can create one from free). Once you have it set up and synced, go to Settings >> Sharing and ensure your settings match the following:

FAQ
Q. My images aren’t displaying properly/are the wrong sizes.
Please install Regenerate Thumbnails plugin and run through the images in questions to “reset” them.
Q. How do I change the favicon?
Find instructions on how to swap out the default Genesis favicon for your own right here.
Q. Those patterns on the homepage buttons are ugly. Can I change them?
There’s a bit of work involved, but yes you can!
How to change out the three homepage buttons in Home – B – Right:
- Download button template.zip and unzip the file.
- Follow the instructions found in the readme.txt to edit the buttons.
- Upload the files you just created to the Media Library in WordPress, noting their URLs.
- Go to Appearance >> Edit CSS (or Appearance >> Editor if you don’t have Jetpack installed) and copy and paste the following code, replacing the URL in red with the new URLs:
/* TOP BUTTON */ .home-middle .page { background: url(images/top-button-bg.png) !important; } /* MIDDLE BUTTON */ .home-middle .page2 { background: url(images/middle-button-bg-solid.png) !important; } /* BOTTOM BUTTON */ .home-middle .page3 { background: url(images/bottom-button-bg.png) !important; }
- You’ll also need to swap out the URLs for the Media Queries (responsive versions). The image URLs you’d want to use for this would be images without borders of at least 570px wide. If you have a seamless repeating background tile, you can use that as well at any size since the image will repeat on its own.Follow steps 3 & 4 again, this time using this code:
@media only screen and (max-width: 1139px) { /* TOP BUTTON */ .home-middle .page { background: url(images/top-button-bg.png) !important; } /* MIDDLE BUTTON */ .home-middle .page2 { background: url(images/middle-button-bg-solid.png) !important; } /* BOTTOM BUTTON */ .home-middle .page3 { background: url(images/bottom-button-bg.png) !important; } }