Element
Theme Installation
Genesis Framework Installation
The Genesis Framework must be installed before installing the theme.
Install Genesis Framework from Appearance > Themes > Add New.
Click Upload Theme, click Choose File, select the genesis zip file to upload and install.
It is not necessary to Activate the Genesis Framework.
Theme Installation
From Appearance > Themes > Add New.
Upload element zip file, install and activate.
Plugins Installation
Click “Begin installing plugins.” in the notice to install the necessary plugins.
Required Plugins:
Optional Plugins:
- Popup Subscribe (included).
- Easy Google Fonts.
- Genesis eNews Extended.
- Contact Form 7.
- Regenerate Thumbnails.
- WordPress Popular Posts.
- Smash Balloon Instagram Feed.
- Genesis Blocks.
- Genesis Simple FAQ.
- YITH Color and Label Variations for WooCommerce.
- YITH WooCommerce Quick View.
- YITH WooCommerce Wishlist.
Demo Content
Demo contents are the widgets and posts displayed in the theme preview. The widgets will be automatically placed in the widget areas and configured like in the preview.
Notes:
– You will have to edit certain widgets and pages like Genesis eNews Extended, Contact Form 7 and others to add your own email and settings.
– Install and activate your theme and the recommended plugins before importing the demo widgets. If a plugin is not installed and activated, any widgets related to that plugin will not import.
Import Demo widgets, customize settings and font controls
Click the button in Appearance > Import Demo Data:
If you’d like to add posts to your blog, import demo-content.xml file to Tools > Import > Run WordPress Importer.
Header Image
Add your header image in Appearance > Customize > Site Identity > Select Logo. Skip cropping to proceed if your logo has different proportions. Save & Publish.
1 – Upload header logo.
2 – Change header logo size.
3 – Upload footer logo:
4 – Change footer logo size.
Navigation Menu
Header Menu:
In Appearance > Menus, click to add a new menu:
Add a name and click “Create Menu”.
After selecting the pages and adding them to the menu bar, select a location from the box at the bottom (3) and save.
– Create another menu (2) or select pre-existing ones from the drop down (1).
Footer Menus:
In Appearance > Widgets > Footer 1 & Footer 2 edit the Navigation widgets and select the menus you want. You can also add more widgets if you want.
Menu Icons:
In Customize > Menus > Menu Icons you can enable certain icons and change the text:
1 – Enable the cart icon if WooCommerce plugin is active.
2 – Enable the wishlist icon if Yith wishlist plugin is active.
3 – Select the page the wishlist icon will lead to.
4 – Change the search popup text.
Top Header
Add widgets to the top area of the header in Appearance > Widgets > Top Header Left & Right Area:
Static Homepage
You can set a page as a homepage to hide posts:
1 – Create your home and blog pages in Pages > Add New.
2 – In Settings > Reading select a page for the homepage and posts page:
Homepage Content:
– Edit the homepage and add the blocks you want, in the demo page, the homepage has the Quote, Heading and Product Category blocks:
– You can add widgets to the homepage in Appearance > Widgets > Homepage 1 to 3:
Featured Boxes
Enable the featured boxes in Customize > Featured Boxes:
1 – Select image layout between portrait, landscape and square.
2 – Select the size you want to crop the image.
3 – Choose the placement of the widget between header and footer.
4 – Click the button to add a new image widget, you can add up to 9 images.
Text Boxes
– In Appearance > Widgets > Footer 1 to 3 you can add Text widgets:
Latest Posts
Customize the posts in the homepage, blog page and category pages in Customize > Theme Settings > Blog Posts:
1 – Disable the read more button or change its title.
2 – Select image layout between portrait, landscape, original and square.
3 – Crop images or select the full size.
4 – Disable meta like date and category.
5 – Disable the “shop this post” widget.
6 – Enable left or right sidebar.
7 – Change the post layout between 1 column, 2 columns, 3 columns, 4 columns and left/right.
8 – Select how posts show per page.
9 – Disable excerpts or change the word limit.
Upload Second Featured Image:
You can upload a second feature image to any post in the editor (3). See screenshot below.
Control Excerpts:
You can write a manual excerpt for posts if you’d like to avoid the auto generated excerpts (4).
Add Gallery:
You can add a gallery of images to posts (4) and to make it show up in the homepage and category pages select gallery from the post format drop down (1).
Add Video:
If you embed a video in a post you can make it show in the homepage and category pages by selecting video from the post format drop down (1).
Single Posts
Disable Single post features in Customize > Theme Settings > Single Posts:
Related Posts
Enable the widget in Customize > Related Posts:
1 – Add widget title, example “More on the blog”.
2 – Choose how many posts to show in total (up to 5).
3 – Select image layout between portrait, landscape and square.
4 – Crop images or select the full size.
Note: If the images aren’t even, regenerate thumbnails.
Add a text widget to Appearance > Widgets > Instagram/Pinterest Footer and paste the shortcode below:
[instagram-feed num=10 cols=10 showbutton=false showheader=false imageres=full]
Add a text widget to Appearance > Widgets > Primary Sidebar and paste the shortcode below:
[instagram-feed num=4 cols=2 showbutton=false showheader=false]
Connect your Instagram account in Instagram Feed Settings:
And disable the responsive layout as well as remove “Padding around Images” in Instagram Feed > Customize:
Add Pinterest Feed widget to Appearance > Widgets > Primary Sidebar. Add your username and board name:
Add your username as it appears in the address bar:
Shop The Post
Currently there are two popular websites where you can generate “shop this” widget:
– www.shopstylecollective.com.
Both of these websites will allow you to monetize the traffic you get, but Reward Style will require you apply before you’re accepted to create an account with them.
To add the widget to the post on the homepage, edit the post and paste the code in Shop This Post:
YouTube
Edit the YouTube widget to add your channel ID and how many videos to show in total.
Note: For this widget to work, a YouTube API key and your channel ID are required. Follow the steps here to get your own key. Find your channel ID here.
WooCommerce
Shop Page Widgets:
You can add widgets to the top area of the shop page like filter by attributes:
In Appearance > Widgets > WooCommerce Sidebar 2 add filter products by attribute widget and select drop down display type:
If you have WooCommerce plugin activated, you can follow these steps to have your shop look similar to the demo:
– In Customize > WooCommerce > Product Catalog:
– In Customize > WooCommerce > Product Images:
– In Customize > WooCommerce > Cart Page:
– In Customize > WooCommerce > Single Products:
1 – Make single product full width.
2 – Enable product breadcrumbs (example > shop > category > product title).
3 – Enable product category, tags and SKU:
4 – Enable the carousel layout for related products and change its title.
5 – Enable the carousel layout for upsell products and change its title.
6 – Disable the description tab, change its title and rearrange its order.
7 – Disable the additiona information tab, change its title and rearrange its order.
8 – Change the reviews tab title and rearrange its order.
9 – Change the layout of the gallery between default, thumbnails slider, left aligned thumbnails, left aligned thumbnails slider and full sized thumbnails:
10 – Change the layout of the tabs between default, accordion and vertical:
Note: Make sure you have the plugin Genesis Connect for WooCommerce installed and activated.
FAQ
The FAQ page is created using the accordion block from Genesis Blocks:
Yith Plugins
Wishlist (YITH WooCommerce Wishlist):
– In Customize > Menus > Menu Icons you can select the wishlist page that will be connected to the heart icon.
– YITH > Wishlist > Add to Wishlist Options settings are:
- – General settings: Show “View wishlist” link.
- – Loop settings: Yes and on top of the image.
- – Product page settings: After thumbnails.
- – Style & color customization: button with theme style, heart O and Heart.
Quick View (YITH WooCommerce Quick View):
– YITH > Quick View settings are:
- General options: Yes to enable quick view and quick view on mobile.
Widgets
Social Media:
Edit the social media widgets and add your links and keep the ones you don’t need empty:
Homepage Widgets:
You can add widgets to the homepage only, in the three sections homepage 1, 2 and 3.
Sign up (Genesis eNews Extended):
In your account (more instructions in the official help):
1 – Navigate to the Audience tab.
2 – Click the Manage Audience drop-down and choose Signup forms.
3 – Select Embedded forms.
4 – Choose the “Unstyle” option.
5 – Copy the highlighted code similar to the screenshot below inside action=””, (do not include the apostrophes):
6 – Paste the code in the form action field:
7 – The rest of the fields should have EMAIL, FNAME and LNAME in capital letters.
Font & Color Customization
Fonts
If not already installed, install Easy Google Fonts plugin and navigate to Tools > Import > WordPress.
Import element-fonts file and you’ll be able to change the fonts in Customize > Typography.
Colors
Change the colors in Customize > Colors, you can also choose one of the premade colors.
Popup Subscribe
You can view Post Popup Subscribe Plugin’s instructions here.