WordPress Setup

To install this theme you must have a working version of WordPress already installed. If you need help installing WordPress, please follow the instructions in WordPress Codex

If you are a very new to WordPress world, I recommend you to check some useful resources on how setup and use WordPress:

• WordPress Codex – general information related to WordPress installation on your server.
• First Steps with WordPress – a brief overview of WordPress admin panel.
• FAQ New to WordPress – useful “how to’s”.

Server Requirements

To use Watson WordPress Theme your server must meet the following requirements:

• Server must be running WordPress 5.X or higher. It’s recommended to always use the latest version of WordPress.
• Server must support PHP 7.0 or higher.
• Elementor plugin should be 2.7.3 or higher.

Recommended PHP Configuration

						
	memory_limit = 256M

	upload_max_filesize = 32M

	post_max_size = 32M

	max_execution_time = 180
						
						

What's Included?

After you’ve made a purchase on Themeforest, you’ll need to download theme files from your Themeforest Account. To do this, simply navigate to Downloads tab and find purchased item Watson - Resume, CV, vCard WordPress.

All Files & Documentation

In the package you will find:

Below is the folder structure and needs to be uploaded to your website root directory:

• watson.zip - main theme file. You can install it through WordPress admin panel. If you install it via FTP then unzip it first and use the extracted folder.
• watson-child.zip - child theme. For advanced users who are about to make code changes.
• Demo Content - folder that contains all the demo data. Demo is really helpful to get you familiar with all the theme features and possibilities. Setting up demo data is covered in this user guide.
• Documentation - folder with the user guide.

Installable WordPress file only

watson.zip - main theme file. You can install it through WordPress admin panel. If you install it via FTP then unzip it first and use the extracted folder.

Installing via WordPress Panel

Follow the steps below to install theme through WordPress admin panel:

Step 1: Login your WordPress admin dashboard

Step 2: Navigate to Appearance > Themes

Step 3: Click on Upload Theme

Step 4: Click on chose file, select "watson.zip" and click Install Now.

Step 5: After upload is finished, click on Watson to Activate

Installing via FTP Upload

If you would like to install the theme via FTP, follow the next steps:

Step 1: Login to your hosting server via FTP client.

Step 2: Go to the folder /wp-content/themes

Step 3: Upload "watson.zip" extracted content

Step 4: Login your WordPress admin dashboard Upload Theme

Step 5: Navigate to Appearance > Themes

Step 6: Click on Watson to Activate

Install plug-ins

If installation was successful, you'll see a notice about required plugins for Watson, to proceed click "Begin installing plugins".

You'll see a list of plugins, select them all and choose Install and then hit Apply button. If everything will go OK, you should see them in Plugins » Installed Plugins list in wp-admin and you should activate all the new plugins.

Set Up Elementor

After you have installed plugins, you need to set up some settings in Elementor. Go to Dashboard » Elementor » Settings » General and check options like on image below:

Importing Demo Content

If you want to have the same content on your website as Live Preview of Watson theme, you'll need to import demo content.

To do that please go to Appearance » Import Demo Data. Scroll down you will see demo types. Choose which demo you want to import and click Import Data.

After that next page will appear choose whether or not you want to install the recommended plugin. These plugins are recommended by One Click Demo Import plugin. They are not required for the Watson theme to work. After that click Continue & Import. Please wait while the demo is importing.

After the content was succesfully imported, you need to setup the site menu. Please read more about how to setup the Primary menu below.

Setting up the Primary Menu

Go to Appearance » Menus, and make sure you have at least a menu created and set it as 'Primary Menu'. If you have multiple menus Watson will pick the first menu defined. If you have no menu created, go ahead and create one.

Setting up the front and blog page

Go to Settings » Reading, and select the front page you wish to have for your website.

Configuring Contact Form 7 plugin

Go to Dashboard > Contact > Contact Forms > Add New. Name the form and paste the below in the textarea.

<div class="row">
    <div class="col-md-6 mb-50">
        <span class="input">
            [text* your-name id:cf-name class:input__field]
            <label class="input__label" for="cf-name">Name</label>
        </span>
    </div>
    <div class="col-md-6 mb-50">
        <span class="input">
            [email* your-email id:cf-email class:input__field]
            <label class="input__label" for="cf-email">Email</label>
        </span>
    </div>
    <div class="col-md-12 mb-30">
        <span class="input">
            [textarea* your-message id:cf-message class:input__field rows:5 ]
            <label class="input__label" for="cf-message">How can we help you?</label>
        </span>
    </div>
    <div class="col-md-12 text-center">
        <button type="submit" id="cf-submit" class="btn-main">Send Message</button>
    </div>
</div>
						

Then at the top of page you'll see the shortcode, for example:

[contact-form-7 id="824" title="Contact Form"]

General Settings

General settings described below:

• One Page Mode - Enable or disable the settings for one page mode on the website.
• Page Transition Animation - Choose page transitions for the one page mode. You can choose between 36 animations.
• UI Color - Enable you to choose ui/layout color between dark and light.
• Preloader - Enable preloader while the page is loading.
• Preloader Text - Text which is shown in the preloader for example your name.

vCard Settings

vCard setting described below:

• Header Title - Header title of the website for example your name.
• Header Image - Header image of the website for example your image.
• Copyright Text - Any html content (usually a copyright text) displayed in the menu sidebar footer.
• Social Icons - Social icons displayed in the menu sidebar footer.

Colors Settings

Colors settings described below:

• Primary Theme Color - Choose primary theme accent color.
• Custom Color - Enable or disable custom color for the whole website.
• Navigation background Color - Background color of the menu/navigation sidebar.
• Navigation border Color - Border color of the menu/navigation sidebar.
• Profile Name Color - Profile name color is the header title color show in menu sidebar.
• Navigation Link Color - Color of the navigation links.
• Social Icon Color - Color of the social icons show in menu sidebar.
• Copyright Text Color - Color of the copyright text shown in the menu sidebar.
• Background Color - Background color of the whole website.
• Heading Color - Heading color of the whole website.
• Primary Color - Primary color of the whole website.

Portfolio Settings

Portfolio settings described below:

• Custom Slug - Watson's portfolio post types are using 'portfolio' slug for permalinks you can change that value in here. Note: After you change this setting maybe you need to update your permalinks once. This is done by going to Settings » Permalinks and clicking Save Changes
• Portfolio Single Page - Enable it for displaying every portfolio item into there own page. Disabling it will show portfolio item as a lightbox popup.
• Previous Portfolio Page Caption - Caption of the button linking to the previous portfolio page.
• Next Portfolio Page Caption - Caption of the button linking to the next portfolio page.

Blog Settings

Blog settings described below:

• Defaults Posts Page Title - Title of the default blog posts page.
• Previous Post Page Caption - Caption of the bottom navigation button linking to the previous single blog post page.
• Next Post Caption - Caption of the bottom navigation button linking to the next single blog post page.

Typography Settings

Typography settings described below:

• Custom Typography - Enable or disable custom typography.
• Profile Name Font - Profile name font is the header title font show in menu sidebar.
• Heading Font - Custom Font for the website headings font.
• Primary Font - Custom Font for the websites primary font.

Error Page Settings

Error page settings described below:

• Error Page Title - The title displayed in the error (404) page.
• Error Page Info Text - Error message describing why the error occured.
• Back Button Caption - the message displayed with the 'Back to website' button.
• Back Button URL - url of the home website.

Elementor Page Builder

Elementor is a visual page builder plugin for WordPress enabling the creation of web pages in a live, visual way. It replaces the basic WordPress editor with a live frontend editor, so you can create complex layouts visually, and design your website live, without having to switch between the editor and the preview mode. The page builder enables you to reach a top-notch quality of design without needing to use code or CSS, and without relying on developers for help. For more information, please check this tutorial.

In Elementor Builder you will see some tabs named;

Basic - Basic Elementor page building elements.

Pro - Elementor Pro page building elements.

General - General Elementor page building elements.

Site - Site elements, requires pro licence for Elementor.

Woocommerce - Woocommerce elements, requires pro licence for Elementor.

Watson Theme - Some content elements specialized only for Watson Theme.

WordPress - Basic WordPress shortcodes.

You can find more information about Elementor widgets here: https://elementor.com/widgets/

Page Templates

There are 2 types of page templates available in Watson:

• Default template - This is the default template.
• Full Width template - As name implies this is full width template.

Pages

Pages in Watson Theme is build with Elementor page builder. The steps of creating pages are as shown in video below:-

Portfolio

Pages in Watson Theme is build with Elementor page builder. The steps of creating pages are as shown in video below:-

Spacing between Elementor

Spacing in Watson Theme can be done using 2 ways. Either you can use elementor spacer widget or you can use spacing classes that comes with Watson. The CSS classes are as follows:-

• mt-0, mt-5, mt-10 ... mt-100 - margin top of the elements row
• mb-0, mb-5, mb-10 ... mb-100 - margin bottom of the elements row
• pt-0, pt-5, pt-10 ... pt-100 - padding top of the elements row
• pb-0, pb-5, pb-10 ... pb-100 - padding bottom of the elements row

Credits

Plugins

• Elementor
• CMB2
• Kirki Customizer Framework
• Contact Form 7
• One Click Demo Import

Scripts

• jQuery
• Bootstrap
• FontAwesome 5
• Linear Icons
• Owl Carousel 2
• Isotope
• Magnific Popup
• Simple Bar
• Fitty Js
• Smooth Scrollbar

Fonts

Fonts used in watson theme are Google Fonts

Icons

Icons used in watson theme are Font Awesome and Linearicons

Images

Demo images (NOT included in the package)

Support

If you need any help or support please contact us through the ThemeForest https://themeforest.net/user/cosmos-themes

Please do not forget to rate this theme!

Thank You

Once again, thank you so much for purchasing our theme.