visit demo site here
Table of Contents
- List of plugins used
- Color scheme hex codes
- Editing the header
- Uploading and installing theme
- Adding header
- Changing the color scheme
- Enabling navigation
- Change date appearance
- Adding homepage widgets
- Adding the slider
- Adding social media icons
- Adding “recent posts”
- Adding subscription box
- Adding footer widgets
- Setting a page to display your blog posts
Plugins
- Contact Form 7: for the contact form on the contact page
- Genesis eNews Extended: for the subscribe areas
- Genesis Responsive Slider: for the homepage slider
- Regenerate Thumbnails: if your images are looking wonky, you’ll need this
- Simple Social Icons: for all social media icons
Color Scheme Hex Codes
Default: #fbc7b9
Sea: #b9e6e1
Grey: #121212
Flamingo: #ff4b69
Navy: #00305f
Editing the Header
There are two ways to customize the header and add your site title. The font used in the demo is “Roboto” (Black) and can be downloaded for free via Google Fonts. Use the hex codes listed above to edit your header according to your desired color scheme.
IMPORTANT: Make sure you save your completed logos as “logo.png” and “logo@2x.png” and put them in the estherANDaurelia/images file BEFORE you upload your theme to WordPress!
1. Via Photoshop
—> Open header files/PSD-header.psd
—> Edit the site title layer
—> Save as logo.png in estherANDaurelia/images
Repeat for PSD-header-retinafriendly.psd, saving as logo@2x.png in estherANDaurelia/images
2. Via a free photo editor
—> Click here to go to PicMonkey!
Uploading & Installing the Theme
See our video on installing our WordPress themes.
Adding the header in WordPress
On your Genesis >> Theme Settings page, you have the option to choose a header. Choose “image logo” and save.
Changing the color scheme
On your Genesis >> Theme Settings page, you have the option to select your color scheme under “color style.”
To enable navigation
Go to Appearance >> Menu. Create and save a menu with your desired links. Then, select the name of the menu from the drop down box under either “primary navigation menu” (located below the header) or “secondary navigation menu” (located above the header).
For a video tutorial on adding in navigation menus, click here.
Change the date appearance so it fits in the circle:
Settings >> General >> change date format to custom: n.j.y
Adding Home Page Widgets
This theme features a widgetized home page with three areas: Home Left (intended for a slider), Home Right, and Home Bottom. Control what shows up here by going to Appearance >> Widgets and dragging and dropping widgets into these areas.
Adding in the Slider
Download and install Genesis Responsive Slider. To add, go to Appearance >> Widgets >> drag and drop “Genesis – Responsive Slider” widget to Home Left Area. You can then click on the “Slider Settings” page to set up your slider. This tutorial covers this process in its entirety. Here are our suggested 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 where you want it to appear. Use these settings:
Adding in “Recent Posts”
The demo has a “recent posts” section in both the footer and the sidebar. To add, go to Appearance >> Widgets >> drag and drop a “Genesis – Featured Posts” widget to where you want it to appear. Use these settings:
Adding in Subscription Box
The demo has a subscription box in the sidebar and in the bottom widget on the homepage. This tutorial covers how to set up your subscription box.
Adding in Footer Widgets
This theme features a 3-column footer. Control what shows up here by going to Appearance >> Widgets and dragging and dropping widgets into the Footer 1, Footer 2, and Footer 3 widget areas.
Setting a Page to Display your Blog Posts
If you’re using the front page layout but still want to have a page that displays recent blog entries, go to Pages >> Add New and create a new page called “Blog.” In the Page Attributions section, make sure “Blog” is selected under “Template.”
Still need help? Contact us via our contact form for additional support.
