Serif font: Didonesque
Sans-serif font: HK Grotesk
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.
From Appearance > Themes > Add New. Upload alt.zip, install and activate.
Click “Begin installing plugins.” in the notice to install the necessary plugins.
List of all Plugins
- Contact Form 7 (for the contact page).
- Easy Google Fonts.
- Genesis eNews Extended (for a subscribe forms).
- Kirki Toolkit (important for color and slider customization).
- One Click Demo Import.
- Regenerate Thumbnails.
- WordPress Popular Posts.
- Instagram Feed.
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.
– 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.
Recommended header image size: 1000 x 1000 px. If you use an image with different dimensions, you may need to crop the image in the upload process. Add your header image in Appearance > Customize > Header Image > Add New Image.
Upload the image and crop or skip crop if available. Save & Publish. You can adjust the area size if the image is too small or too large.
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, check “Main Menu” box at the bottom and save.
Create another menu (for the footer) and save it as the Footer Menu:
Extra Menu Details
You can make menubar sticky and enable arrows for dropdowns in Appearance > Customize > Menus > Menu Details.
Slider and other features are disabled by default. Enable the slider in Customize > Slider:
- 1 – By default it will show your latest posts, but you can upload images manually.
- 2 – Or show posts from a certain category.
- 3 – Or show a selection of posts by adding their IDs manually.
- 4 – Select how many posts the slider will loop through.
- 5 – Select how many posts to show at once.
- 6 – Set a height for images in pixels.
- 7 – Crop images or select the full size.
Enable featured posts widget in Customize > Featured Posts, select a category from the drop down or add the IDs of posts manually.
- 1 – Select where to place the widget in the header or footer.
- 2 – Add a title for the widget.
- 3 – By default it will show your latest posts, but you can show posts from a certain category.
- 4 – Or show a selection of posts by adding their IDs manually.
- 5 – Crop images or select the full size.
Customize the posts in the homepage, blog page and category pages to your liking in Customize > Theme Settings > Posts:
- 1 – Add a title for the widget.
- 2 – Change the read more button title.
- 3 – Change the posts layout, available options: left & right alternating images, 2 columns, 3 columns, 4 columns and masonry.
- 4 – Enable left or right sidebar or disable it.
- 5 – Disable text excerpts and read more buttons.
- 6 – Enable “shop this post” widget as a popup or below the read more button.
- 7 – Change the image layout, available options: Original (uncropped), portrait, square and landscape.
- 8 – Select a size to crop the images.
Disable Single post features in Customize > Theme Settings > Singular Content:
Posts Featured Images
Enable featured image for single posts in Customize > Single Posts Featured Image.
Align the title box to the left, right or center:
Enable the widget in Customize > Related Posts:
- 1 – Add a title for the widget.
- 2 – Select the date to filter posts by.
- 3 – Select how many posts to show, up to 5.
- 4 – Change the image layout, available options: Original (uncropped), portrait, square and landscape.
- 5 – Select a size to crop the images.
Note: If the images aren’t same size, regenerate thumbnails.
- 1 – Navigate to Instagram Feed > All Feeds and click “add new” button:
- 2 – Select “User Timeline” and click “next”:
- 3 – Click “add new” to connect your Instagram account and then “next”:
- 4 – In the “customize” tab, click “Feed Layout”:
- 5 – Set padding to 0 and select 10 number of posts for desktop and any column number (it will be overriden by the theme):
- 6 – Disable the header and load more button:
- 7 – Save the feed and click “embed”. Copy and paste the shortcode into a text widget in Appearance > Widgets > Instagram Header:
- 8 – Create a new feed with 6 posts and 6 columns for Appearance > Widgets > Instagram Footer
Add Underline Designs – Pinterest widget with 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:
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 After Entry Area:
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, set products per row to 3, enable the cart icon in the menubar and enable the sidebar if needed:
- – In Customize > WooCommerce > Product Images, the images are cropped to 1000px and 3:4 ratio:
Note: Make sure you have the plugin Genesis Connect for WooCommerce installed and activated.
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.
Add a LinkTree inspired page without signing to a different platform.
- 1 – Create a new page in Pages > Add New.
- 2 – Select “Links” from the templates dropdown:
- 3 – Save and refresh the page.
- 4 – At the bottom of the page editor, you’ll see new additions:
- 5 – Click “add another button” to add links for people to visit.
- 6 – You can also highlight a certain number of your posts at the bottom, or disable it if you don’t need it.
Edit the social media widgets and add your links and keep the ones you don’t need empty:
You can add widgets to the homepage only, in the three sections homepage 1, 2 and 3.
Call to Action Banner:
You can add a banner to your blog with the Underline Designs – Banner widget:
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
If not already installed, install Easy Google Fonts plugin and navigate to Tools > Import > WordPress. Import alt-fonts file and you’ll be able to change the fonts using Google Fonts in Customize > Typography > Theme Typography.
Change the colors in Customize > Colors.