Estranged

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 estranged zip file, install and activate.

Plugins Installation

Click “Begin installing plugins.” in the notice to install the necessary plugins.

List of all Plugins

• Contact Form 7.
• Easy Google Fonts.
• Genesis eNews Extended.
• Kirki Toolkit.
• Multiple Featured Images.
• One Click Demo Import.
• Regenerate Thumbnails.
• WordPress Popular Posts.
• Instagram Feed.
• Multiple Featured Images.
• Minimal Social Icons (included with the theme).
• Popup Subscribe (included with the theme).
• Elegant Shop (included with the theme).

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 and Contact Form 7 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 Content

– Choose XML to upload demo posts and pages (for blogs without content):

And upload the file titled “demo-content”.
 
– Choose WIE or JSON to upload demo widgets:

And upload the file titled “demo-widgets”.

Header Images

Recommended header image size: 1000 x 1000 px.
 
If you use an image with different dimensions, you you can skip cropping to proceed with uploading.
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 also adjust the size of the image.

Navigation 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, check “Main Menu” box at the bottom and save.

– Create other menus (2) or select pre-existing ones from the drop down (1).
– Select a location for each one of the menus (3).

Slider

Enabled 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 – Select one of the 3 slider styles:

7 – Select image layout between portrait, landscape and square.
8 – Crop images or select the full size.

Featured Posts

Enable featured posts widget in Customize > Featured Posts.

1 – By default it will show your latest posts, but you can show posts from a certain category,
2 – Or show a selection of posts by adding their IDs manually.
3 – Crop images or select the full size.
4 – Select how many posts to show in total (up to 6).
5 – Add widget title, example “Featured Posts”.
6 – Choose the placement of the widget between header, footer and between posts.
7 – When selecting the between posts position, type the number of posts to show before the widget. Example the featured posts will be placed after the third post on the homepage.

Featured Boxes

Enable the featured boxes in Customize > Featured Boxes > Settings:

Upload up to 3 images Customize > Featured Boxes > Image 1, Image 2 and Image 3 :

Latest Posts

Customize the posts in the homepage, blog page and category pages to your liking in Customize > Theme Settings > Posts:

1 – Select post layout between 1 column, 2 columns, 3 columns, 4 columns, masonry, tiles and left/right.
2 – Disable or enable the “shop this post” widget pop up:

3 – Select image layout between portrait, landscape, original and square.
4 – Crop images or select the full size.
5 – Select how posts show per page.
6 – If you enable the sidebar, you can make it sticky.

Tabs

Enable the widget in Customize > Tabs:

1 – Make the widget full screen.
2 – Choose the placement of the widget between header, footer and between posts.
3 – When selecting the between posts position, type the number of posts to show before the widget. Example, the tabs will be placed after the third post on the homepage.
4 – Each tab has a title and content fields which you can use for shortcodes, shop codes or any other type of content you want.
5. Click the button to add more tabs.

Homepage Intro

Enable the widget in Customize > Homepage Intro:

1 – Upload background image.
2 – Upload logo if available (optional).
3 – Change the logo size in pixels.
4 – Add title (optional).
5 – Add text (optional).
6 – Add a title for the down button title.

Posts Featured Images

Enable featured image for single posts in Customize > Posts/Pages Featured Image > Posts or > Pages for static pages.
1 – Disable parallax to make the image appear normal and not sticky.
2 – Enable title and other details white box.
3 – Choose the placement of the white between left, right and center (overlapping the image from the bottom).
4 – Add image height in pixels.
5 – Crop images or select the full size.

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 squares, regenerate thumbnails.

Instagram

Add a text widget to the sidebar and paste the shortcode below:
[instagram-feed num=4 cols=2 showbutton=false showheader=false imageres=full]
Add a text widget to Instagram/Pinterest Footer and paste the shortcode below:
[instagram-feed num=6 cols=6 showbutton=false showheader=false imageres=full]

Connect your Instagram account in Instagram Feed Settings:

And disable the responsive layout as well as remove “Padding around Images” in Instagram Feed > Customize:

Pinterest

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:
– www.shopstylecollective.com.
– www.rewardstyle.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 After Entry Area:

YouTube

Edit the YouTube widget to add your channel ID and how many videos to show in total. Find your channel ID here.

WooCommerce Settings

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 2.
– In Customize > WooCommerce > Product Images, the images are cropped to 500px and 3:4 ratio:

– Make sure you have the plugin Genesis Connect for WooCommerce installed and activated.

Widgets

Social Media:

Edit the social media widgets and add your links:

Homepage Widgets:

You can add widgets to the homepage only, in the three sections homepage 1, 2, 3 and 4.

Footer About Me:

In Appearance > Widgets > Footer 1, you can add an image and text widget and they will be placed next to each other creating the about me widget:

Popular Posts:

You can add Popular Posts widget to the sidebar with these settings:

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 estranged-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.