visit demo site here
Table of Contents
- List of plugins used
- Color Scheme/Main Hex Codes
- Font List
- Uploading and installing theme
- Importing Demo Content
- Adding header or logo
- Customize the colors
- Navigation menus
- Homepage Widgets (Overview)
- Home Top: Carousel Slider
- Home Top: Full-Width Slider
- Home Split Left
- Home Split Right
- Home Numbers (Home 1, 2, 3, and 4)
- Home Testimonials
- Home Bottom: Instagram Slider
- Sidebar: Recent Posts Widget
- Social Media Icons
- Adding in Subscription Opt-In Box/Genesis eNews Extended
- Adding Footer widgets
- “Featured On” slider in Footer
- Other widget areas
- Setting up the Portfolio
- Setting up Tiled/Mosaic Galleries
- Setting up the Shop
- Setting up the “Blog” page
- Using the landing page
- Using the about page template
- Using the services page template
- Setting up the Pin-It Hover Button
- Setting up share icons at bottom of posts
- Setting up related posts at bottom of posts
- Using the call-to-action button style
- Genesis Columns Advanced: makes it easier to add columns to pages
- Genesis eNews Extended: for the subscribe areas
- Jetpack: for sharing icons at bottom of posts and portfolio option #2 gallery
- jQuery Pin It Button For Images: for the Pin-it hover button
- Instagram Slider Widget: for the instagram widget
- Meta Slider: for the carousel type of slider on the homepage
- 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 Slider: for placing a slider in the widget areas
- * WooCommerce: ecommerce plugin if you want a shop
- * Genesis Connect for WooCommerce: required if WooCommerce is installed
- * Easy Digital Downloads: an alternative to WooCommerce, don’t install both
Color Scheme Hex Codes
Main color: #191918
Hover color: #a0a0a0
You can download these fonts if you want to use them for other areas of your branding.
Uploading & Installing the Theme
See our video on installing our WordPress themes. Then, come back here for the theme set-up process!
Importing Demo Content
If you want to use the demo content to help set your site up, click here for instructions.
Adding the header or your logo 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. (You can also access this by clicking on Appearance >> Customize and then clicking “Site Identity”)
UPLOAD YOUR OWN HEADER: In your WordPress admin area, click on Appearance >> Header and then click on Header Image and upload your header. The recommended dimensions are 570 x 360 pixels.
Customize the Colors
Use the built-in color customizer to change some of the colors for the theme. Go to Appearance >> Customize and click on Colors. Change the colors to create your own custom color scheme.
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 menu on the left side of the site title/logo. You’ll probably only be able to fit 3 links in this area.
Secondary navigation menu: This is the menu on the right side of the site title/logo. You’ll probably only be able to fit 3 links in this area.
Mobile menu: ** IMPORTANT ** Primary & secondary menus are disabled on mobile, so you must create a mobile menu or else no navigation will show up. Create a third menu with all your links and use it for your mobile menu.
** Enable descriptions: scroll to the top of the menu page and click “Screen Options.” Where is says “Show advanced menu properties,” make sure “Description” is ticked. Then you can expand each navigation link and type in a description.
This theme features widgets on the home page:
- Home Top: put a carousel slider or full-width slider here
- Split Left & Split Right: put a Genesis Featured Posts or Genesis Featured Pages widget here. Instructions for: Split Left & Split Right
- Home 1, 2, 3, 4: put a Genesis Featured Posts or Genesis Featured Pages widget here
- Home Middle: put Genesis eNews Extended (opt-in form) widget here
- Testimonial 1, 2, 3: Put whatever content you want here using text widgets
- Home Bottom: Put an Instagram slider widget here
Control what shows up here by going to Appearance >> Widgets and dragging and dropping widgets into these areas.
Home Top: Carousel Meta Slider
Images should be sized 400px x 500px to achieve the same results as our demo.
- Step 1: In the sidebar of your Worpdress admin area, click on Meta Slider.
- Step 2: Configure your “Flex Slider” settings and advanced settings like so: click to view
- Step 3: Then, click “Add Slide” and upload your images.
- Step 4: Click the “Save” button
- Step 5: Scroll to the bottom of the page to the usage box. You should see a shortcode. Copy it to your clipboard.
- Step 6: Now, go to Appearance >> Widgets. Drag & drop a new Text widget into the Home – Top widget area. Paste in the slider shortcode and save.
Home Top: Soliloquy Slider (Full-Width)
If you don’t want the carousel slider, you can use a full-widths wider. Images should be sized 1600px in width and any height.
Using the Soliloquy Slider plugin, create a new slider by going to Soliloquy >> Add New. Upload your photos, configure settings. Then, go to Appearance >> Widgets and drag & drop a new text widget into the Home – Top widget area. Paste in the slider shortcode and save.
Add a caption to your image by clicking the blue icon and typing this in the caption box:
<h1>HELLO</h1> this is a caption <p><a class="CTA">click to read more</a></p>
Home Split Left
Put a Genesis – Featured Posts or Genesis – Featured Pages widget in the home split left widget area. Use these settings (and make sure the post or page that you are featuring has a featured image of at least 620px x 390px:
Home Split Right
Put a Genesis – Featured Posts or Genesis – Featured Pages widget in the home split right widget area. Our demo is using a featured post. Use these settings (you’ll want to feature the same post or page that you did in home split left):
Put a Genesis – Featured Posts or Genesis – Featured Pages widget in the Home 1, Home 2, Home 3, and Home 4 widget areas. Our demo is using featured pages. Use these settings for each widget:
This one is easy — just drag and drop a Text widget into Home Testimonial 1, Home Testimonial 2, or Home Testimonial 3. Add your text and save!
* If you want all of the boxes to be the same height, go to Appearance >> Editor, select the style.css file, and find the line:
/* Testimonials Height */
Change the value in min-height line to the minimum height of your boxes (may take some trial and error). Then, remove the /* and */ around it so the line is just:
Put an Instagram slider widget here (make sure you have the Instagram Slider Widget plugin installed & active on your site). Use these settings:
Sidebar: Recent Posts Widget
Use the “recent posts” widget in the sidebar to highlight recent or featured posts. (To highlight favorite or 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. Or, leave “all categories” selected to highlight all recent posts.) 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
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 or one of the Footer Widget areas. Change settings and enter in your URLs as necessary.
Genesis Enews (Subscription Box)
You can add in a subscription box in several different areas: page topper, widget above content, sidebar, after entry, after 2 posts on the blog page. 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.
For best results, keep the button text as “Go” or something short.
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.
Footer Widgets – “Featured On” Slider
Using the Soliloquy Slider plugin, create a new slider. Keep slider dimensions small, like 85px by 85px. Copy & paste the slider shortcode into a new text widget and put it in a footer widget area. Center it by putting it in between two center HTML tags like so:
<center> [soliloquy id="43"] </center>
Other Widget Areas
- Page topper: at the very top of the page
- Widget above content: located under the navigation bar, shows up on blog pages
- After 2 posts on blog page
- After entry: after a blog post
You are welcome to put whatever widget you want in these areas, however, we only will provide support for the Genesis Enews Extended Subscription box
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. If you have a bunch of photo albums, you can sort them by categories, or just upload a portfolio item for each category of pictures.
The featured image that you set for each portfolio item is what displays on the main portfolio page.
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 Tiled/Mosaic Galleries
You can use tiled, mosaic galleries, as shown here, by utilizing Jetpack, so make sure you have that plugin installed and activated. Make sure both Carousel and Tiled Galleries are activated. Then, create a new page, click Add Media and create a gallery. Make sure the following settings are activated:
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 up the “Blog” Page
To use the blog page template (the page where your most recent posts are displayed, from first to last):
- Create a new page (Pages >> Add New)
- Give it a title like “Blog”
- Under the “Page Attributes” box, choose “Blog” from the template dropdown menu:
- When you’re done, click “Publish”
* Note that you can choose if this page has a sidebar or not by scrolling to the “Layout Settings” area and choosing a layout.
Using the Landing Page
The landing page template removes all other elements (like the navigation bars, footers, etc.) from the page so only your content shows up. To use, create a new page by going to Pages >> Add New. In the Page Attributes section, make sure “Landing” is selected under “Template.”
Using the About Page
View set up instructions here
Using the Services Page
View set up instructions here
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:
Setting up Related Posts at Bottom of Posts
Make sure you have the Jetpack plugin installed & activated 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 Jetpack >> Settings and search for “Related Posts.” Ensure your settings match the following:
Using the call to action button style
Turn any link into a big button! Switch to the WordPress text editor and locate the link. It should look something like this:
<a href="URLHERE">hyperlink text here</a>
Add class=”CTA” to the code, so it looks like this:
<a href="URLHERE" class="CTA">hyperlink text here</a>
Q. My images aren’t displaying properly/are the wrong sizes.
Please install Regenerate Thumbnails plugin and run through the images in question to “reset” them. If your images aren’t filling up all the space (e.g. on the categories template page), make sure they are large enough.
Q. My images are still appearing blurry and unsharp.
Make sure you don’t have Jetpack’s Photon activated.
Q. How do I change the favicon?
Navigate to Appearance >> Customize and click on Site Identity. If you upload a site icon, it will appear as the favicon.
Still need help? Contact us via our contact form for additional support. Please note that we are only able to provide support for getting your theme set up like our demo: if you need additional support for increased customization, we will need to charge accordingly for our time.