- Pre-Installation Setup
- Theme Installation
- How to Import Demo Content
- How to Configure the Genesis Theme Settings
- How to Configure the Site Title Header Text
- How to Use a Background Image or Color
- How to Configure the Navigation Menus
- How to Configure the Home Page
- How to Configure the Featured Widget Area
- How to Configure the Welcome Widget Area
- How to Configure the Home – Middle Widget areas
- How to Configure the Primary Sidebar Area
- How to Configure the Footer Widget Areas
- How to Create a Blog Page
- How to add a logo to the Equilibre theme
Thank you for selecting the Equilibre theme. Following are the instructions for setting up your site to look like the Equilibre theme demo.
Make sure you have the following installed:
- WordPress version 3.6+
- Genesis Framework version 2.0+
Before you begin, you will need to install and activate the following plugins Of course, you may substitute your favorite plugin, but this is the one used in the Equilibre theme demo:
Once you have completed the pre-installation steps and you have the Genesis Framework installed, you may install the Equilibre theme.
- Upload the Equilibre theme folder via FTP to your wp-content/themes/ directory.
- Go to your WordPress admin dashboard and select Appearance.
- Activate the Equilibre theme.
For your convenience, an export file of the Demo site is available to assist in the setup of your Equilibre theme. You’ll find more information about this in the Importing Demo Content tutorial.
In your WordPress admin, navigate to Genesis > Theme Settings. Configure the Theme Settings as follows:
- Click a thumbnail to select the Default Layout.
- The Equilibre theme uses the Content > Sidebar option.
The Equilibre theme demo is configured to display Breadcrumbs on Posts, Pages, Archives, 404 Page, and Attachment Pages.
- For Content Archives, the default setting of “Display post content” is used by the demo.
- Leave the “Limit content to __ characters” option blank or set to 0.
- Leave “Include the Featured Image?” checkbox unchecked.
- Using the drop down box, select “Numeric” for the “Post Navigation Technique.”
Be sure to click the “Save Settings” button to preserve your changes.
The site title and description for your site can be set by navigating to Settings > General.
- The Site Title will display in the upper left corner of your site.
- The Site Description will display in the upper left corner of your site, directly below the Site Title.
- Be sure to click the “Save Settings” button to preserve your changes.
The Equilibre theme demo can be configured to display an image behind the content area of the site.
- Navigate to Appearance > Background in your WordPress admin panel.
- Use the “Browse” button to select the background image you wish to use from your computer.
- Once the image has been selected click the “Upload” button to load the image for use on your site.
- Alternatively you can use the “Choose Image” button to select the background image you have loaded to your site previously.
- The Display Options settings for Position, Repeat, and Attachemnt can be set depending on the optimal settings for the image you have chosen.
- To select a Background Color to show around, or instead of a background image in click “Select Color” and choose a color or enter a hexidecimal color code.
- Click the “Save Changes” button to preserve your changes.
The Equilibre theme supports only the Primary menu locations provided with the Genesis Framework.
To create your custom menu, go to Appearance > Menus. Once you have saved your custom menu,click on the “Manage Locations” tab and select your custom menu from the Primary Menu dropdown and save. Your menu will show beneath the header.
The Equilibre theme demo home page is configured via several widget areas.
- Featured: A full width widget area configured using the Genesis Responsive Slider widget
- Welcome: A full width widget area configured to display a welcome message or call to action.
- Home Middle Section: configured for 3 Home Middle Widget Areas
Note: If no Widget areas are active in any of the Home Page Specific Widget Areas a Blog Style Home page will be displayed. If you wish to use a Static Page for your home page do not add widgets to the Home Page widget areas since this will override the Home Page setting.
To activate the Slider feature of the Equilibre Theme Home page add the Genesis – Responsive Slider widget to the Featured widget area. The Post Excerpt is hidden in mobile display in the Equilibre Theme.
How to Configure the Genesis Responsive Slider Settings
The Equilibre theme includes all of the settings necessary in order to display the Genesis Responsive Slider widget as it is displayed in the Equilibre theme demo. If the settings do not match the settings below navigate to Genesis > Slider Settings in your WordPress admin panel and click the Reset Settings button.
- Choose a term to determine what slides toe include. The demo displays posts with category slider
- Number of Slides to Show: 2
- Time Between Slides (in milliseconds): 8000
- Slide Transition Speed (in milliseconds): 1600
- Maximum Slider Width (in pixels): 1060
- Maximum Slider Height (in pixels): 450
- Display Post/Page Title in Slider? Yes
- Display Post Content
- More Text: [Continue Reading]
- Limit Content to 100 Characters
- SLider Excerpt Width (in percentage): 40
- Excerpt Location (vertical): Bottom
- Excerpt Location (horizontal): Left
- Be sure to click the “Save” button to preserve your changes.
Note: You may wish to Install and Run the Regenerate Thumbnails plugin in order for the featured images to be available in the appropriate size for the slider and other sections of the home page.
The Equilibre theme demo Home Page displays a welcome area below the slider.
The Equilibre theme demo uses a Text widget.
If you don’t know how to write HTML you can install the plugin Black Studio TinyMCE Widget. This plugin adds a new Visual Editor widget type that allows you to insert rich text and media objects in your sidebars.
Below the Welcome area, there is a Home Middle section configured three Home Middle widget areas. Each of the three widget areas utilize a text widget configured to show a Font Awesome Icon and a Genesis Featured Page widget.
Text widget with Font Awesome Icon
<div style="text-align: center;"><i class="fa fa-gift fa-5x"></i></div>
Genesis Featured Page
The following widgets are used in the Primary Sidebar area that displays to the right side of the content area.
- Genesis eNews Extended
- Recent Posts Widget
- Search Widget
Genesis Goodies wrote a great written tutorial on MailChimp
The Equilibre theme demo uses the included 3 Footer Widget areas. You may use any widgets you like in these areas.
Footer 1 Widget Area
- Recent Post Widget
Footer 2 Widget Area
- Text Widget
Footer 3 Widget Area
- Text Widget
wpbeginner wrote an article on how to add google maps in WordPress
When using a widgetized home page it can be helpful to create a general blog style page to display elsewhere on your site. For instructions on how to create this page follow the following steps:
- Navigate to Pages > Add New in your WordPress Admin Panel
- Create a New Page named “Blog”
- In the right sidebar of the Page edit screen select the Blog option in the template dropdown menu.
- Leave the Content of this page blank, it will not be displayed when using the Blog page template.
- Publish the page.
Once the page has been published you can view the page to see a blog style list of recent posts. Link to this page in the custom menu of your choice.
In the Genesis > Theme Settings you will have a “Header Settings” box where you can select to show the “Image Logo” or “Dynamic Text” logo.
The dynamic text will show the site title and description from the “General Settings” in your WordPress dashboard. If you select “Image Logo,” it will show the logo.png file or email@example.com (retina display) from your theme images directory.
To change your image logo, you need to access your site via FTP and navigate to the child theme images directory /wp-content/themes/equilibre/images. Once there, replace the default logo.png file and firstname.lastname@example.org with your own logo images.
logo.png 360px * 124px
email@example.com 720px * 248px