Home Blogger version 1.0.10 by dtbaker

item_preview

Theme Installation

Please watch this instructional video showing how to install this WordPress theme and setup default content:

Below are the step by step instructions:

  1. Purchase the theme from ThemeForest.net
  2. After purchasing go to your Downloads page ( http://themeforest.net/downloads )
  3. Click on the Download button and choose the Installable WordPress file option and save this ZIP file to your desktop.
  4. Login to WordPress Dashboard.
  5. Go to Appearance > Themes > Install Themes
  6. Click the Upload tab
  7. Choose the downloaded ZIP file from your desktop and click upload
  8. Download the Child Theme zip file from here
  9. Go to Appearance > Themes > Install Themes again
  10. Click the Upload tab
  11. Choose the child theme ZIP file that you just downloaded and click upload
  12. Choose the ‘Activate’ option after upload
  13. Follow the Setup Wizard prompts (see video for example)
  14. (if you need to run the setup wizard again please go to Appearance > Setup Wizard)

Here is a screenshot showing step by step instructions for downloading and installing the WordPress theme:

download_screenshot

Child Theme Customizations (optional)

Sample Child Theme Available for download here: home-blogger-child.zip

Customizing Fonts

Font Customization can be done easily in three parts of the website.

1. Go to Appearance > Customize menu. Click "Typography" then "Default Typography". Here you can change the "Logo", "Widget Headings" and default "Paragraph" font styles. You can control font style, colors, paddings, margins and sizes. Here is a screenshot of the font customization options.

2. Go go Pages and click the "Edit with Elementor" option against the page you wish to edit. Click the 3-line (hamburger) menu button at the top left of the page. Then click "Global Fonts". This lets you pick the global Header, Body and Accent Text fonts. Here is a screenshot of those settings:

3. Go go Pages and click the "Edit with Elementor" option against the page you wish to edit. Click on the page element you wish to edit (e.g. a text block) and then click the Style option. Here you can change the "Typography" drop down from Default to Custom. Now you can set the font color, size, family, weight, transorm, style, line height and event letter spacing. Here is a screenshot of those settings:

Advanced Customization: if you need assistance with advanced customizations then please hire someone from Envato Studio (look in the WordPress category)

Create a photo gallery or simple image slider

Here are instructions on creating the photo gallery:

  1. Create a new page in WordPress
  2. Click "Edit with Elementor"
  3. Drag the "Image Gallery" element over onto the page area
  4. Click the "Add Images" button and select your images
  5. Click the "Save" button
  6. Your gallery should now be live

Here are instructions on creating an image slider:

  1. Create a new page in WordPress
  2. Click "Edit with Elementor"
  3. Drag the "Image Carousel" element over onto the page area
  4. Click the "Add Images" button and select your images
  5. Change the image slider settings
  6. Click the "Save" button
  7. Your slider should now be live

Setup the Contact Page

  1. Make sure the Contact Form 7 plugin is installed
  2. Login as admin and choose “Contacts” menu on the left.
  3. Open the default “Contact Form 1” and make any changes as neccessary.
  4. Copy the shortcode (it will look something like [[contact-form-7 title=”Contact form 1″]] )
  5. Create a new page called “Contact”, type the words “Please fill in the form below to contact us” and paste in the shortcode from before.
  6. Save the page and check the contact form works (ie: do you receive an email from it?)
  7. Click edit page again and add a map using the google map shortcode (more details below under shortcode)

IMPORTANT: If you have imported demo content please change your email address. Go to Contact > Contact Forms then open up each form and set the correct email address in the "Mail" tab.

Setup the Main Menu

(not required if you have setup default content as above)

Go to Appearance > Menu and follow the standard WordPress menu creation process.
Detailed instructions on creating a menu are located on the WordPress website here: http://codex.wordpress.org/WordPress_Menu_User_Guide

Background Images / Colors

Changing the website background image is easy. Simply go to Appearance > Customize > Background Image. Here you can select a background image and choose various options such as size, position and time. Here is a screenshot of the background image window:

Changing the website background color is easy. Simply go to Appearance > Customize > Colors. Here you can select the Header Text color and the Background Color. Here is a screenshot of the background color options: (note: to change the top logo font color you may need to go to Apperance > Customize > Typography > Default > Logo).

Columns

Creating columns is really easy with Elementor. Go to the page you wish to edit and click the "Edit with Elementor" button. Click the column icon and click the + icon to create a new column. Here is a video showing how it works:

Included Widgets

Widgets Positions / Sidebars

It is very easy to change the position of the sidebar on every page of the website.

You can change it in the header “admin bar” while you are viewing the page:

Or you can change it on the “edit page” metabox area here:

The Widgets and Sidebars in this theme are handled by the Widget Area Manager plugin. This plugin should be installed automatically, but can be installed manually from that website if needed.

You can easily change the sidebar and footer on any page of this website.

Google Map

Google Map API Key

First you need to set an API key, so your Google Maps will work correctly on your website. Follow these steps:

Adding a Google Map with Elementor.

Adding a Google Map to a widget area (sidebar/footer).

Header Images

You can change the Header Image from the Appearance > Customize > Header Image area.

There are some pre-set heaer images, but you can also upload your own images.

Insert Page Content

This theme comes with a handy "Insert Page" feature. This allows you to insert one page into another page or widget.

This feature allows you to create re-usable parts for your website. For example; create a "Pricing Table" that you can insert onto multiple pages. This way you can only make a single change and it will update on all the pages automatically.

Insert Page Content into Widget/Sidebar

Insert Page Content into another Page using Elementor

Page Border

It is very easy to change the page border style, simply go to the page you wish to change, click Edit Page, and change the style in the sidebar meta area: You can also change the overall default top border style from the Theme Customize area. Just go to Appearance > Customize > Page Style and choose the defaults there. These defaults will apply to all pages, and you can change it on a per-page basis as above. An example of page border is available here: http://home-blogger.dtbaker.net/pages/top-border/

Page Title

This is a page with a “Normal” title. It is not “Floating” in the center like the other pages.
It is very easy to change the page title style, simply go to the page you wish to change, click Edit Page, and change the style in the sidebar meta area:

You can also change the overall default header style from the Theme Customize area. Just go to Appearance > Customize > Page Style and choose the defaults there.
These defaults will apply to all pages, and you can change it on a per-page basis as above.

Quick Reference Guide

We've created this quick reference guide to show you all the theme-specific features. Keep this handy while starting out.

(click to view larger)

Front End Quick Access Guide:

Back End Dashboard Quick Access Guide:

Live Backend Demo

Do you need to test out a theme feature in the admin backend? Need to see how the installer works before running it on your own website? Feel free to test everything here:

Updating

Please follow this exact process when updating the theme

  1. Go to the Envato Market menu
  2. Click settings tab
  3. Click login with oAuth button
  4. Approve permissions
  5. Go to Appearance > Themes and click "Update" button for theme
  6. Click Dashboard menu
  7. Click Begin Updating Plugins menu button

A video showing this process is available below:

Translations

Please try installing the free plugin called Loco Translate. Once installed go to the Loco Translate menu, then choose Themes, then choose the theme, then click "New Language" and follow the prompts.

Alternatively, the WordPress POT file for this theme is available in the /languages/ folder of the theme zip file. Instructions on translating WordPress themes with POT file are available here: https://poedit.net/wordpress

Photoshop Files

Photoshop files are available from this special URL after purchasing this theme: http://dtbaker.net/files/envato/resources/. Please login with your Envato account to access the latest version of the purchased resources.

Advanced Editing

Please consider using a Child Theme for any changes. This will help stop theme updates overwriting your customisations.

Changelog

Here is a list of theme changes: