Seosight WP

• by: Crumina

A WordPress child theme takes the functionality of another theme, named parent theme. It gives you the possibility to customize an existing theme. Instead of modifying the theme files directly, you can activate the child theme and work within it.

All customizations are stored in the child theme and anything in the child takes priority over the parent. So if the same file exists in both child and parent, the file from the child will control that aspect of the theme.

Working with child themes, your customizations are safeguarded from future upgrades because you only upgrade the parent theme, which you never edit, while the customizations are protected in your child theme which you don’t upgrade.

Why use a Child theme?

Safe Updates. You can easily modify your website using child themes without ever changing the parent theme. When a new version of the parent theme appears, you can safely update it as all your modifications are saved in the child theme.

Easy to Extend. A child theme has a great flexibility. It does not require writing a lot of code. You can modify only those template files and functions that you need.

ATTENTION: When you install the theme you must upload both parent and child theme folders to /wp-content/themes/ but you should only activate the Child theme via Appearance > Themes.

Modifying files from the Parent theme folder

While you should never edit files in your Parent theme, if you really must, the safest way to do it is to download a copy of the file you want to modify on your computer, make the changes, and then upload it into your child theme folder.

INFORMATION: This way of modifying the files can be used for any files from the parent theme — note that you must re-create the same folder structure in your child theme that exist in the parent theme in order for the modifications to take effect.

Once you purchased the theme, begin installation process:

• download theme package;
• unzip it;
• open THEME IN THAT FOLDER! directory and find installable seosight.zip archive in it.
• Log in your site with freshly installed WordPress and:

1. go to Appearance>Themes;
2. On the next page, click the Add New button and then Upload Theme;
3. Choose utouch.zip and press the Install Now button;
4. Activate the theme.

Upon theme installation and activation you are redirected to the Auto Setup page. You are offered three options:

It is recommended to choose between 'Plugins & Demo Content' or 'Plugins Only' options.

Let's review complete demo setup. Click on the  'Plugins & Demo Content' button below it and wait a few moments until installation process is finished. 

 When installation process is finished, you're automatically redirected to the 'Demo Content Install' section. Click on the 'Install' button and wait a few moments.

By the end of the demo import process, you're automatically redirected to the home page.

To set up front page for your site go to Settings>Reading Settings

1. Front page displays:
   • Your latest posts - check the radio button if you want your home page show your latest blog posts.
   • A static page (select below) - check it and select from the drop-down list a page that you want to be your Front page NOTICE!: Don't select anything for Posts page, otherwise you will get the default WordPress blog page and won't be able to customize it using theme options.
2. Blog pages show at most - enter the number of blog posts you want to be displayed on one blog page
3. Syndication feeds show the most recent - set the number of posts that will be sent out at once via your RSS
4. For each article in a feed, show:
   • Full text - full posts content will be included to the feed if checked
   • Summary - first 55 words are included in the feed, along with the option to continue reading the rest of the post.
5. Search Engine Visibility - check it to ask search engines not to index your site. Please note that this option cannot force Google and other search engines not to search your site.

When you are done, please don't forget to Save changes

When setting up a WordPress site, we often use pre-made WordPress themes. Very often we rename themes in order to represent them as our own products. But it often leads to unpredictable issues. In this article we will tell you why you can't rename themes.

Be it a premium theme or a free one, like Twenty-Sixteen, they are getting updated by their creators providing some new features or fixing bugs. It is very important to keep your theme up-to-date for maximal compatibility with WordPress and other plugins you might use with your theme.

Most modern themes come with automated update function, that lets you get updates directly from your admin dashboard. If you renamed your theme, this function isn't available for you anymore, because updates are linked to the particular theme name. Of course, you can download the latest theme package and upload the files via your FTP client (for example via Filezilla program). But very often this option is ignored and you continue using an outdated theme for months until you realize it's time to update. But it is already too late, because of two possible reasons:

• there is a great difference in the code between your current version and the latest update. Since you haven't updated for a long time, update may run not that perfect as you expected;
• you might have already edited the theme code with your custom changes, so update will erase them for sure.

So how to go about this problem if you want to rename the theme and still get updates for it?

The one and only solution is to use a  CHILD THEME. Each modern theme comes with a child theme. It fully inherits parent theme functionality, it serves for all possible code modifications and it doesn't require updates. Child theme can be renamed!

If you are going to rename your theme, it is recommended to install the child theme from the start of your work. Follow the next steps:

1. Install and activate the parent theme according to its documentation.
2. Install and activate the child theme right after that. The child theme comes packaged with the parent one, so you will easily find it. In all Crumina themes it is located in the 'Child theme' folder of the theme package. Logical, isn't it?
   
3. Open the style.css file of the child theme and rename all fields except 'Template' and 'Text Domain' fields, since they are linked to the parent theme and must remain with the default names for you could get automated updates. 
    
4. You can also upload your own screenshot instead of the default one.
   

That's all! Now your theme is renamed. You can make any code modification in the child theme without touching the original code. You can update the parent theme without worrying for your changes. And the most important thing - automated update function is still available for you. 

In order to update the theme manually, follow the next steps:

1. Download the theme package.
2. Unzip the package and find installable ZIP archive in 'THEME IN THAT FOLDER !' directory.
3. Unzip it and upload the folder via your FTP client to wp-content/themes directory replacing the old files.
4. Go back to your admin dahsboard and check for the plugins updates. If there is no update notifications, your plugins are up-to-date.

The Dashboard Update Screen provides information on available updates. The number of available updates appears as a notification bubble next to the Updates menu item.

1. Click on the Dashboard panel
2. Click the Check Again button to check for the latest available updates.
   

   

From this page you can update:

1. WordPress - updated regularly with security patches, make sure you always have the latest version of WordPress installed. You have the option to download the latest version and update your WordPress manually (this is usually done by developers and users that are familiar with WordPress. We advise you to use the regular, automatic install)
2. Plugins - One of the most important plugins that you need to keep updated is Unyson. Your theme needs this plugin in order to work properly so it's a good thing to keep it up to date.
3. Themes - in this section you'll find the themes that you can update. Select the theme you want to update from the list and click the Update Themes button. We frequently release updates and bug fixes so please keep your theme up to date.REMINDER: Note that any customization you've made to the theme files will be lost (if they were made in the parent theme folder). Please consider using the Child Theme for modifications. Read more about parent and child themes here.
4. Extensions - If you see this text: New extensions updates available press the Update Extensions button in order to update your extensions. These are very important as they are the back bone of your theme and it's important to keep them up to date.
   

   

Page is created under Pages>Add New tab. Create a new page, enter title and begin adding content.

Content management

Content can be added via:

• standard Wordpress editor
• King composer editor. It comes as a main page builder in the theme and provides multiple elements for buiding pages. All elements have great many of customization options, allowing you to adjust them to your liking.

Design options

In the 'Customize design' box you can customize the following options:

• Header - top page section with logo and menu in it.
• Stunning header - page title section, displayed right below the header section.

Header. In order to edit header section, switch 'Change settings?' toggle to 'Yes' and customize the following options:

1. Absolute placed Header - if enabled, header will be placed above the content.
2. Header opacity - lets you control opacity level of the header section.
3. Select menu to display - lets you enable custom menu on the current page.

Stunning header. In order to edit stunning header, switch 'Change settings?' toggle to 'Yes' and customize the following options:

1. Show stunning header? - you can enable or disable stunning header on the current page. If disabled, the rest options below will be hidden.
2. Padding from Top/Bottom - you can set padding height between the title and section border.
3. Background image - you can set one of the predefined background images or upload your own one.
4. Expand background - this option makes background image stretch across the entire stunning header section. It is required in those cases when the image is smaller than the stunning header section.
5. Background color  - you can set background color instead of background image. It will be applied only when background image is disabled.
6. Text color - lets you change color of the page title and breadcrumbs.

Sidebar management

You can control display and position of the sidebar on page in the 'Sidebar Picker' box.

The options are:

• Default -  sidebar settings are applied from Appearance>Widgets>Manage Sidebars section.
• No sidebar
• Right sidebar
• Left sidebar

NOTE: If you choose Right sidebar or Left sidebar, you can also specify which if the existing sidebars to show.

King Composer plugin comes bundled with Seosight and is the main page builder in the theme. It provides backend and frontend editors. You can use one that is more convenient for you.

To start editing with Backend Editor you need to:

• create a page under Pages>Add new tab,
• fill in Title field,
• click on the 'Edit with KingComposer' button to activate editor mode.

Table of contents:

1. Adding elements
2. Row settings
3. Section management

Adding Elements

Start adding elements to your page. You can do it in two ways:

1. Click on the 'Elements' button to add any element from the list.
2. You can choose column layout for your section first, and then add elements to each column by clicking on the 'Add Elements' link or  'PLUS' icon.

All KC elements are divided in tabs by functionality and have small thumbnails above titles to demonstrate their role in the theme.

Each KC element has a lot of customization option that are also divided into tabs:

• 'General' tab - you can add content and configure main settings of the element.
• 'Styling' tab - allows you to customize design of your element - colors, font size nad font family, background color/images, paddings, margins, borders etc. Styling options are different for each element.
• 'Animation' tab - you can enable animation and choose animation type for particular element.
• 'Presets' tab- this option lets you save settings of the module and use them in another section or page.

Row Settings

Each section has a number of options that you can customize the way you want. Click on the 'PENCIL' icon on the top right corner of the section box to open row settings.

The row settings are:

1. 'General' tab - here you can adjust: - dimentions of the row and columns - set Youtube video or Parallax image background - add row ID and extra class names for the row and container
2. 'Styling' tab: - Typography options - Background options - Box options - margins,paddings, borders of the row. - Custom - here you can add custom CSS codes that will be applied to the current row.
3. 'Animation' tab - you can enable animation effect, animation speed and delay for the current row.
4. 'Presets' tab - this option lets you save settings of the row and apply them in other rows on the current or other pages.

Section Management

There is number of options allowing to manage sections on page according your needs. They are:

• Columns number
• Custom columns width
• Rows reorder
• Publish/unpublish rows
• Copy rows and elements
• Save rows

1. Columns number. You can change number of columns in the row whenever you want. Simply click on the 'LIST' icon on the top left corner of the section box and select required column number.
2. Custom columns width. You can set custom column width in the row. There are two ways to do this: - click on the 'LIST' icon on the top left corner of the section box and enter columns width in % into the input field. The total number must be 100%. - put cursor over the columns border and move it to left or right changing size of the column.
3. Rows reorder. You can reorder rows on page in two ways: - Hover over 'CURSOR MOVE' icon on the top right corner of the section box. In the appeared box enter order number of your row and click on the blue buttom with arrows. - Hold the 'CURSOR MOVE' icon with left mouse and move the row to the target location on page.
4. Publish/unpublish rows. You can unpublish selected rows, if you don't want them to be visible on the frontend. Simply click on the blue toggle to disable the row. Click on the gray toggle to enable it again.
5. Copy rows and element. You can copy created rows and elements and paste them to any place in the editor. Call contextual menu with the right mouse click over row or element. Select 'Copy' option. Click over another row/element with right mouse and select 'Paste' option. The row or element will stand below it. Or click on the 'PASTE COPIED ELEMENT' button on the bottom bar.
6. Save rows. You can save created rows as presets and use them later on other pages.  Click on the middle icon on the top left corner of the section box. In the appeared popup click on the 'PLUS' icon. You will be redirected to a new page. All you have to do is to give title to your section and click on the 'Publish' button to save changes. In order to use the saved section, click on the blue icon on the bottom bar of the editor and select it from the appeared popup.

There are 5 animation variants for sections in Seosight theme. They are located under 'Animate' tab in Row Settings and are represented by thumbnails.

If you want to enable one of them in your row, simply choose the desired animation type and save changes.

Custom Images in row animations

1. Install and activate  Child Theme

2. Copy the folders 'images/animated' from the main theme to the Child theme

3. Upload your images to 'animated' folder naming them the same as default images. 

Note: We recommend to upload images of the sizes equal  to the default images dimensions. 

Fullscreen slider is created under Appearance>Sliders section. Click on Add New button and configure general slider settings:

• Title - enter title of your slider
• Fullheight slider - enable this option if you want your slider to occupy full height of your browser window
• Infinite loop - enable this option to activate autoscroll function of the slider
• Auto Scroll delay - choose time between slides change
• Slide labels - these are the colored tabs under the slider. If you want to show them, enable this option.

When you are done, hit Create button on the right hand side of the screen.

Now you are in the slides editor. Click on Add New button to add a new slide.

Configure the slide using the options below:

• Image - the uploaded image can be used as a slide element or as its background. Switch 'Main image position' toggle to activate desired mode.
• Title & Description - fill in these fields to display some content inside your slide.
• Buttons - add some buttons if needed and configure their settings in the Button editor.
• Content placement - there are 3 layouts of content position to choose - centered, left and right.
• Slide background color - the chosen color will be displayed as a background of the bottom tabs. It will be used on the slide body too, if you don't use image as a background.
• Text color scheme - the chosen color scheme will be applied to the entire text content of the slide.
• Tab title & Tab subtitle - fill in these fields to display on the bottom slide tab.

When you are done, hit Add Slide button to save changes and proceed creating new slides.

When the slider is ready, hit Save button on the right hand panel.

Adding slider on page

To add slider on your page, choose 'Slider' shortcode in King Composer editor and select required slider from the sliders list.

In order to make the slider fullwidth, edit row settings and choose 'Stretch all content & wrapper' option.

As alternative to the integrated contact form builder, forms can be created with Contact Form 7 plugin. It comes bundled with the theme and is fully supported by it.

With help of Contact Form 7 you can create any form you need. You can do the following:

• come up with any form layout,
• add any field type to your form,
• enter custom text into form fields,
• set any text for thanking messages.

NOTE: For creating a form minimal HTML knowledge is required.

Table of Contents:

• Creating a form
• Custom form layout. Making columns
• Adding form fields
• Field labels
• Required fields
• 'Submit' button
• Mail configuration
• Adding form to the page and further configuration

Creating a form

Before creating a form make sure that Contact Form 7 plugin was installed and activated according to 'Theme installation' tutorial.

Begin creating a form:

• Go to Contact >Add New on the left panel of your admin dashboard
• Enter title of the form
• Under the 'Form' tab below you will see default form layout. You can customize it or clear the field and add form fields from the upper tools panel.
• Configure additional settings under 'Mail' and 'Messages' tabs.
• When you are done, hit 'Save' button.

Custom form layout. Making columns

If you think that default form layout is too simple, you can create custom layout with different columns, like in Seosight demo or other.

In order to create a form with several columns, you need to wrap your field shortcode into HTML <div></div> tags with bootstrap grid classes inside them.

NOTE: More information on bootstrap grid you will find in this tutorial.

Adding form fields

First of all add <div></div> tags with bootstrap classes, put cursor between them and add required field from the top panel.

In the popped up window fill in 'Name' and 'Default value' fields. On demand check ' Use this text as the placeholder of the field' and 'Required field' checkboxes.

Hit 'Insert tag' button and continue adding fields by analogy.

IMPORTANT: If you want to add a form with square border on one side, like the one on the image below, you need to enter classes inline-first and inline-last into 'Class Attribute' field.

Field labels

The above information describes the way to add form fields with placeholders. If you want your fields to have labels instead, you should wrap field shortcodes into  <label></label> tags as in the example below.

Required fields

If you want to make form fields required as shown in the form above, you need to do the following:

• add a star symbol after the label name with  tags like that ^*
• add class="checked-icon" into the openning <label> tag like that <label class="checked-icon">

'Submit' button

Once you've added all form fields, add Submit button shortcode without any HTML tags.

If you want to have custom layout for the Submit section, for example, like on Seosight contact page, HTML formatting is required.

TIP: All contact forms used in Seosight demo are included in demo import. You can use them as a basis for your own forms.

Mail configuration

After you have finished adding form fields, switch to the 'Mail' tab and set up email submission and message template options.

By default Mail options look something like this

You need to customize the fields according to your website and form configuration.

In the To field enter email address which emails will be sent to.

In the fields From, Subject, Additional Headers, Message Body replace default shortcodes with ones used in your form. All of them are listed on the top of the Mail tab.

In the From field edit default <wordpress@example.com> code in accordance with your website URL. 

For example, if my site is at  http://seosight.local , the code must be <wordpress@seosight.local>

If some of the fields are not used in your contact form, for example Subject, you can replace [your-subject] shortcode with a plain text.

When you are done, send a test email and check the email template. If some fields are displayed as shortcodes or there is no text in your message body, then something is wrong in your settings. Check them once again and configure according to this tutorial. 

Adding form to the page and further configuration

When the form is ready, add it to your page via 'Contact Form 7' shortcode in King Composer editor.

Switch to 'Styling' tab and choose:

• colorscheme of your form
• color of the submit button

You can configure further options under Box Style, Input and Button tabs.

When you are done, save settings and view the form on page.

Starting with version 2.0. Seosight theme comes with integrated contact form builder. All forms are created and stored in Forms section of your admin dashboard.

IMPORTANT NOTE: If you have updated the theme, but the Forms section didn't appear on the left panel of your admin dashboard or you see an error in it, please refer to Contact form builder troubleshooting for futher instructions.

Contact form building

To create a new form go to Forms>Add new and type in the title of your form. Title is displayed only on the backend and is needed only for easier navigation through your forms.

Begin adding fields by using elements represented under Form fields tab. 

Once you have added a field, click on it one time to open settings window. Each field type has its own settings. Configure each field and press "Save" button.

You can create almost any form layout you need. Control fields width with the arrows on the top left corner of the field.

On the top of the form, you can enter title and subtitle. They will be displayed on the frontend before the form itself.

As soon as the form is ready, switch to the Settings tab to set up email and form messages.

Under Settings>Mailer you can set up send method and test connection by sending a test message. You can also fill in the "From Name" and "From Address" fields, that will be displayed in all received emails.

Adding form on page and its further customization

You can add contact forms on pages with Form module of King Composer editor. You can use Backend as well as Frontend editor for this.

NOTE: If you want your form fields to have square border on one side, enter inline-form class into 'Extra Class' field.

Switch to Styling tab to configure styling options. There you can set color scheme for the form (White or Dark) and color of the submit button:

There are futher options that let you choose custom settings for each element in the form. They are:

Box style

• Align - alignment of the form title and subtitle and submit button
• Padding - lets you control space inside the form container
• Margin - lets you control space outside the form container

• Input - these settings let you choose font size, text color, background, border and border radius for the input fields.

• Button - includes options to choose custom settings for the submit button - text and background colors, font size, border and border radius.

When you are done, save changes.

IMPORTANT: Frontend Editor option was added in Seosight version 2.0. 

The main advantage of the Frontend editor is that you can edit page directly on the frontend and view changes in real time.

To start editing with the frontend editor click on the 'Live editor with KC Pro!' button, if you stay in the backend...

.... or on the 'Live Edit with KC Pro!' link on the top admin bar, if you view page on the frontend.

When the editor mode is active, you can see the same editor box as in the backend editor.

To add element click on the 'Elements' button or select columns layout first and then add elements by clicking on the 'PLUS' icon.

Once you have added an element, configure its settings and save changes by clicking on the 'CHECK' icon or press CTRL+S .

In order to add more elements to the same column or row, click on the element with the right mouse button, hover over  'Add Element' option and choose one of the popped out options - Before or After.

Rows and elements management

There is a number of option allowing you to manage rows and element in the frontend editor. They are:

• Edit/double/copy/delete options
• Rows and elements reorder
• Columns width management

Edit/double/copy/delete options. If you need to edit, double, copy or delete the element, hover over its title on the top right corner of the element box. Below will appear navigation icons to choose.

The same is related to the row - if you need to edit row, hover over the 'Row' title to edit, copy, double or delete it.

Rows and elements reorder. If you need to move element to another row or you want to move row to another location, simply click and hold the row/element name and drag the row/element to the target location.

Columns width management. You can change width of the columns in the row with simple drag and drop function. Simply hover over the square between the columns, hold it with the left mouse button and drag the mouse to the left/right changing width of the columns.

Once you finished editing the page, clikc on the 'Save changes' button and then 'Exit Editor' on the top admin bar.

To create a single post you have to:

1. Login to your Wordpress admin account
2. Go to Blog Posts tab
3. Click Add new tab
4. Give your post title
5. Start filling content using Visual or Text editor, add Media if needed:
6. If needed you may also fill in additional fields on the right:
   • Post format - select needed post format from the given variants under Format tab (detailed info about each of them you can find here)
   • Blog Categories - choose a category to which the post belong to, or create a new one
   • Tags - add needed tags to your post (posts with similar tags will be shown by click on the definite tag)
   • Sidebar picker - choose needed sidebar and its position for your post page (detailed info here)
   • Featured image - set featured image that will be shown on blog page  
7.  If you need to use other standard WordPress post options you should check them under Screen Options tab that you can see on the top: To read more about standard WordPress options, please follow the link   
8. IMPORTANT:  In order to display short post description on your blog, category, archive pages you need to activate Excerpt under Screen Options (see point 7). Fill in the excerpt field that appeared on the page below 

   Or you can use tag Read More tag in your Visual or Text editor. The text written before this tag will be shown on your blog, category, archive pages. OTHERWISE The entire post content will be displayed on your blog, category, archive page

9. When you are done, go to the top right and click Publish button.

You can control your post style with 'Post Format' option. Seosight theme supports most common WordPress post formats, you can read about them here:  https://codex.wordpress.org/Post_Formats

To choose of what format will be your post, just select desired one from the radio-button list and start filling the content

Let's overview all post formats represented in the theme:

Standard Post Format

Use it to create a simple post with regular style. It is default post format and no ordinary options required.

More about a blog post creation you can read here:

Video Post Format

Displays video player on your blog and post page.

Just add the link to YouTube or Vimeo video in appeared Video post options:

Audio Post Format

Displays audio player on your blog /category/ post page.

Enter link for audio that will be embedded

Quote Post Format

Displays a quote block on a blog archive page.

Add a quote in a visual/text editor and fill in the fields appeared after quote post activation

Link Post Format

Allows to show post linked to another page/site.

To create link post, add the text you want to be displayed on blog into text editor and wrap it with the link

To create a blog page that will display all your blog posts go to admin panel Pages and click Add new.

Give a title to your page and after that choose Blog in Page Attributes>Template

If you want any content displaying before your posts you can put it into Visual/Text editor or add it with KingComposer.

When you are done, click Publish and get your blog page.

Now you can adjust your blog settings.

Blog page options:

1. Choose the position of your sidebars using Sidebar Picker
2. Type of pages pagination:
   • Number links - shows the page numeration
   • Load more ajax - shows the Load more button
3. Order - Designates the ascending or descending order of items
4. Order posts by - Select the sorting parameter
5. Categories - Choose the post categories you want to be displayed on your blog page
6. Exclude selected - if checked the categories selected above will not be displayed on your blog page
7. Items per page - set number of posts that will be shown per page

Header design:

1. Adjust Header Options:
   • Change settings? - settings will be changed only for this page. If turned off, general settings will be applied. 
   • Absolute placed Header - set the header over content
   • Header opacity - used when Absolute placed Header option turned on, controls header background transparency.
   • Select menu to display - select one of the menu you've created before under Appearance>Menus (more detailed here)
2. Stunning header:
   • Change settings? - settings will be changed only for this page. If turned off, general settings will be applied.
   • Show stunning header? - controls the panel with page title and breadcrumbs under the header
   • Padding from Top/Bottom - set the padding of stunning header
   • Background image - image that will be displayed on stunning header background. Select given pattern or upload your custom image
   • Expand background - expand or repeat the stunning header background image
   • Background Color - set the stunning header background instead of image
   • Text Color - set the title and breadcrumbs font color

Blog options are located in Customize > 'Blog options' tab. They control display of the blog page, post categories and tags pages.

There are only two options for archive pages:

• display author icon
• display meta data

Once you have chosen required options, hit the 'Save & Publish' button.

How to create portfolio post

To create portfolio post, please follow the instructions below:

1. Login to your WordPress admin panel
2. Go to Portfolio>Add new
3. Add the title of your portfolio post page
4. Fill in Project summery fields on the right - this information will be displayed in the top part of the content near the featured image or project gallery.
5. Set featured image to your portfolio post under Project Cover image tab.
6. Click Publish button

Portfolio options:

1. You can add additional content into the default WordPress Visual or Text editor. It will be displayed under your featured image/gallery and project summery. You can also use KingComposer page builder instead, but you need to activate it for portfolio type content. For this:
   • find KingComposer tab in your dashboard
   • go to General settings>Supported Content Types
   • check fw-portfolio. Now you have   KingComposer tab in your  portfolio project page.
2. You can assign your portfolio to an existing Category or create a new one if needed
3. If you want Gallery slider in your summery area, then upload images to  Project Gallery, otherwise Project Cover Image will be displayed

Set desired sidebar position under Sidebar Picker tab.

NOTE: The sidebar will be applied to the additional content of the portfolio

Design options:

Portfolio design options you can find under the tab Customize design. Let's observe them: 

1. Thumbnail:
   • Item size on Category page - controls the featured image size on Portfolio category page
   • Thumbnail / Slider align - featured image/slider gallery position on a Single portfolio page
2. Project content:
   • Change settings? - settings will be changed only for this page. If turned off, general settings will be applied.
   • Show Like - like counter icon in project summery area
   • Show date? - post creation date on the top of project summery
   • Show share icons? - icons for sharing your post in social network
   • Show posts navigation - Next/Previous Project buttons under your project content
   • Show Related items - slider that shows projects of similar category    
3. Header:
   • Change settings? - settings will be changed only for this page. If turned off, general settings will be applied.
   • Absolute placed Header - set the header over content
   • Header opacity - used when Absolute placed Header option turned on, controls header background transparency.
   • Select menu to display - select one of the menu you've created before under Appearance>Menus (more detailed here)
4. Stunning header:
   • Change settings? - settings will be changed only for this page. If turned off, general settings will be applied.
   • Show stunning header? - controls the panel with page title and breadcrumbs under the header
   • Padding from Top/Bottom - set the padding of stunning header
   • Background image - image that will be displayed on stunning header background. Select given pattern or upload your custom image
   • Expand background - expand or repeat the stunning header background image
   • Background Color - set the stunning header background instead of image
   • Text Color - set the title and breadcrumbs font color

To create Portfolio page that will show all your portfolio posts go to your dashboard Pages tab>Add new. Type a page title and select Portfolio template in Page attributes

Click Publish button and see your portfolio

If you need some content shown before portfolio items, then add it into Text/Visual editor or use KingComposer page builder

Now you can work over portfolio design and options

Portfolio options:

1. Select desired sidebar area in Sidebar Picker
2. Sort panel - show/hide a panel with categories taxonomy
3. Action on panel link click - Sort items or open portfolio category by tab click
4. Type of pages pagination:
   • Number links - shows the page numeration
   • Load more ajax - shows the Load more button
5. Order - Designates the ascending or descending order of items
6. Order posts by - Select the sorting parameter
7. Categories - Choose the post categories you want to be displayed on your blog page
8. Exclude selected - if checked the categories selected above will not be displayed on your blog page
9. Items per page - set number of posts that will be shown per page

Header design:

1. Adjust Header Options:
   • Change settings? - settings will be changed only for this page. If turned off, general settings will be applied. 
   • Absolute placed Header - set the header over content
   • Header opacity - used when Absolute placed Header option turned on, controls header background transparency.
   • Select menu to display - select one of the menu you've created before under Appearance>Menus (more detailed here)
2. Stunning header:
   • Change settings? - settings will be changed only for this page. If turned off, general settings will be applied.
   • Show stunning header? - controls the panel with page title and breadcrumbs under the header
   • Padding from Top/Bottom - set the padding of stunning header
   • Background image - image that will be displayed on stunning header background. Select given pattern or upload your custom image
   • Expand background - expand or repeat the stunning header background image
   • Background Color - set the stunning header background instead of image
   • Text Color - set the title and breadcrumbs font color

Single portfolio options let you control display of the single portfolio items. They are localed under Customize>'Single Portfolio options' tab.

The options are as follows:

1. Thumbnail / Slider align - lets you choose position of the portfolio featured image or image gallery.
2. Show Like - you can enable or disable likes on page.
3. Show date - lets you enable/disable portfolio date of creation.
4. Show share icons - lets you enable/disable social share buttons on page.
5. Show related items - you can activate related portfolio items at the bottom of the page. You can also set custom title for this section.
6. Enable inner navigation - lets you enable links to previous and next portfolio items.
7. Primary portfolio page - lets you choose main portfolio page. Once you set the page, there appears 'Shapes' icon between the navigation links. You will be redirected to the selected page on click over this icon.

IMPORTANT NOTE: If you need custom settings on selected portfolio items, you can customize them in the page editor of the single portfolio item.

By default King Composer editor is enabled for pages. If you want to use it in portfolio projects and posts, it can be enabled for them too.

All you need to do is to go to King Composer > General Settings in your admin dashboard and check 'post' and 'fw-portfolio' checkboxes. When you are done, click Save Change button.

After that you can edit your posts and portfolio projects as described in  King Composer - Backend Editor and Row animations in King Composer tutorials.

Menu can be created in two ways:

1. Via Customize> 'Menus' tab. This is a simplified menu editor. You can create menus, add menu and submenu items, reorder them, and assign menu to the primary menu location.
2. Via Appearance>Menus section. This is an extended menu editor. Beside the above described possibilities, you can add icons to your menu items and create mega menus.

Simplified menu editor

To create a menu follow the next steps:

• Go to Customize> 'Menus' tab.
• Click on the 'Add a Menu' button, type name of your menu and hit the 'Create Menu' button.
• Begin adding menu items by clicking on the 'Add items' button.
• Choose items among available page types from the popped out right panel.
• Once the items are added, you can reorder them and create submenus with simple drag-ad-drop function.
• When your menu is ready, hit the 'Save & Publish' button.

Extended menu editor

Create menu

In order to create menu via the extended editor, follow the next steps:

• Go to Appearance>Menus section in your backend editor.
• Click the create a new menu link at the top of the page.
• Enter a name for your new menu in the Menu Name box.
• Click the Create Menu button.

Add menu items

Once a menu is created, you can add items into it. On the left column you can find different custom links, pages or categories that can be used as menu items.

• Select the Pages (or another) tab.
• Press the View All link to bring up the pages published on your website.
• Select the pages you want to add by selecting the checkbox next to each page title.
• Click the Add to Menu button to add your selection(s) to the menu that you've just created.
• Click the Save Menu button on the right hand side once you have added all the menu items you want.

Add icons to menu

If you want to add icons to your menu, click on the triangle sybmol in front of the menu item name to open its settings and by clicking 'Add Icon' button select an icon from the list.

Add submenu items

If you need to add submenu items, move them under the parent menu item and shift a little to the right side with drag-and-drop function. Click the Save Menu button on the right hand side.

Menu location

Once your menu is ready, assign it to the main menu location by checking 'Top primary menu' checkbox under the 'Menu Settings' title. Click the Save Menu button on the right hand side.

Creating a mega menu

Mega menu in Seosight is created in Appearance>Menus section. To create one you should follow the next steps:

• Edit existing menu or create a new one as described in 'Extended menu editor' topic.
• Add a new menu item, that you want to be a parent item of the future mega menu. It can be any page type that you choose on the left hand column.
• Below the parent item add items that will serve as columns in the mega menu. The columns items must be shifted one level to the right side.
  

  IMPORTANT NOTE: If you want columns items to be unclickable titles, add them via 'Custom Links' tab and enter http://# or https://# in 'URL' field. If you want them to be simple clickable links, add them via 'Pages' or any other tabs.

• Begin adding items that will be located under the mega menu columns. Place them under the appropriate column and shift on level to the right side.
• Once all items are added, open settings of the parent mega menu item by clicking in the triangle symbol in front of its name and check 'Use as Mega Menu' checkbox to activate mega menu option.
• Hit the 'Save Menu' button.

Mega menu background image

In order to add a background image to your mega menu:

• edit the parent mega menu item by clicking on the triangle symbol in from of its name
• click on the 'Settings' button
• upload an image via the popped out window.

Columns customization in mega menu

There are additional settings for columns that you can use in your mega menu. Expand columns settings by clicking on the triangle symbol to see all settings.

1. Hide - this option lets you hide the column title and keep only its content.
2. This column should start a new row - if checked, this column will stand to the new row in the mega menu window.
3. Description - you can add simple text or HTML to this field. It can be used as description under the column title or be used as independent content even without any items below it.
4. Add icon - you can add icons to your columns names with this option.

To add and style your content in sidebars and footer you can use widgets. Go to Appearance>Widgets.

There are default WordPress widgets that take the theme style though. More about WP widgets you can read here:  https://codex.wordpress.org/WordPress_Widgets

And there are also additional theme widgets. To add a widget to your sidebar/footer, just choose it and drag to the right side inside needed area. Then start configure settings filling in needed fields and selecting desired options.

NOTE: To add an additional field in the widgets that allow it (like Follow us widget), you need first save previous options for to activate Add new button

Let's take a look at Theme Widgets

Seosight gives you possibility to control sidebar position on every page and post of your site. You can adjust sidebars settings inside the page/post settings via Sidebar Picker

Or you can set needed sidebar position for group of pages or specific pages in Appearance>Widgets>Manage Sidebars 

For Grouped pages:

1. Select a group of pages you want ths sidebar be displayed on
2. Set a sidebar position for the selected pages
3. Choose what sidebar will be used for the selected group of pages or add new sidebar and fill it in with needed widgets

For Specific pages:

1. Select a type of the page: blog post, portfolio post, page or category
2. Type a title of the page in the search field and select needed pages
3. Set desired sidebar position for selected pages
4. Choose a widgetized sidebar from a list or add new one and fill it in with needed widgets

Don't forget to save changes after you are done!

Theme options panel lets you control general settings across the site. You can reach it via Appearance>Customize menu in the backend editor or by clicking on the 'Customize' link on the top black admin bar in the frontend. Options are divided by meaning and are represented by several tabs. Let's take a closer look at them.

In order to set favicon and site title go to  Customize > 'Site Identity' tab. Fill in Site title and Tagline fields and upload favicon by clicking on the 'Select Image' button.

Once you are ready, hit the 'Save & Publish' button.

If you need to set/change home page on your site, go to Customize > 'Static front page' tab. There are two options:

1. Your latest posts - if you choose this option there will be displayed an automatically generated page with the list of your posts.
2. A static page - this option lets you set any of the existing pages as a homepage.  Simply activate 'A static page' option and select any page from the 'Front page' dropdown list.

Once you have activated 'A static page' option you can see another dropdown list called 'Posts page'. This option is required to enable posts page in default Wordpress themes. In Seosight it is not required. So you can leave this field empty.

Once you are ready, hit the 'Save & Publish' button.

Header options are configured under Customize > 'Header options' tab. There you can adjust settings for:

• top bar
• sticky header
• logotype
• search field
• aside panel
  

  

Top bar

By default top bar is disabled. Go to Customize>Header options>Top bar and activate it by switching toggle to 'Show'. Below will appear all options available for the top bar.

Top bar options let you adustthe following pareameters:

• Theme style - you can choose between white and dark colors of the top bar.

• Languages selector - you can display laguage switcher in the top bar. NOTE: this options works only if you have installed some multilingual plugin like WPML or Polylang. 
• Text fields - this option lets you add one or several text fields with company information, like email, phone, address etc.
• Social networks - this option lets you add so many social networks you need.  
• Login/Logout block - you can enable login link that will let your members log in via the top bar.

Sticky Header

You can show/hide sticky header on scroll:

When sticky header is activated you can also set the animation when it appears/hides on scroll or turn it off: 

PS: The sticky header option is available from the v.2.1.

Logotype

Logotype options are as follows:

• Logotype image
• Logo in Retina? - if enabled, your logo will display twice smaller than the original size.
• Logotype text
• Logotype description.

Search

Search options are as follows:

• Show search icon? - enable or disable search in header of yoour site.
• Select search style - select style of the search window when expanded.

Aside panel

Aside panel is a hidden menu that is opened by clicking on the round red icon on the right side under the top menu.

Aside panel activation

Aside panel can be activated in Customize > Header options > Aside sidebar.

You can also activate logo and add some text that will be displayed on the top of the aside panel.

Adding widgets to the aside panel

In order to add some widgets to the aside panel, go to Appearance>Widgets section and add any widgets you like into Hidden Widgets Area with drag-and-drop function.

Footer options are located under Customize > 'Footer options' tab.

They control look and feel of the footer section of the theme and are divided into 5 subtabs:

1. Design
2. Widget section
3. Contacts section
4. Copyright field
5. Scroll Top button

Design

Design tab provides styling options of the footer section. Here you can configure:

• Text color
• Titles and Links Color - color of widgets titles and links
• Background image - you can choose one of the predefined patterns or upload a custom image.
• Expand background - this option lets you stretch the image across the whole footer section. It is required if the uploaded image is smaller than the footer section, but you don't want it to get repeated.
• Fixed footer effect - makes the footer fixed.
• Background color - if you disable background image, background color will be displayed instead.

Widgets section

Under 'Widgets section' tab you can adjust settings of the text block, that is displayed on the image below.

The provided options are as follows:

• Show text block - you can enable or disable text block.
• Edit text block content - click on this button to open Text Block editor. Here you can enter title and text, that will be displayed in the text block.
• Text block width - you can control the width of the text block. The width is measured in grid columns.
• Social networks - this option lets you display social icons under the text block. Simply click on the 'Add icon' button and enter link to your network account and select corresponding icon from the dropdown list.

Contacts section

Under 'Contacts section' tab you can control contact information,  like email address, phone number and physical address. Simply click on the 'Add box' button and fill in requird fields. To remove the box, click on the 'cross' icon.

Copyright field

Copyright field options let you control style of the copyright section. You can adjust:

• Copyright text - enter custom text to the copyright section
• Background color
• Section height: large, medium or small
• Text color.

Adding widgets to footer section

Beside all above mentioned features, you can add other widgets to the footer area. Widgets can be added via Appearance>Widgets>Footer widget area section.

The widgets used in the footer in the Seosight demo page is called Theme Widget:Menus. It is displayed on the right hand side of the Widgets section with custom text.

Position and size of the footer widget depend on the width of the left hand text. It occupies 7-columns of the row in demo site, that lets the menu widget stand beside it in the vacant 5 columns. If the the left hand text would occupy 12 columns, the menu widget would start the new row.

Scroll Top Button

The scroll-to-top button can be customized under Customize > Footer options > 'Scroll Top Button' tab.

There are only 2 options:

• enable/disable the scroll-to-top button;
• make the button fixed.

When you are ready, hit the 'Save & Publish' button.

Aside panel is a hidden menu that is opened by clicking on the round red icon on the right side under the top menu.

Aside panel activation

Aside panel can be activated in Customize > Header options > Aside sidebar.

You can also activate logo and add some text that will be displayed on the top of the aside panel.

Adding widgets to the aside panel

In order to add some widgets to the aside panel, go to Appearance>Widgets section and add any widgets you like into Hidden Widgets Area with drag-and-drop function.

The scroll-to-top button can be customized under Customize > Footer options > 'Scroll Top Button' tab.

There are only 2 options:

• enable/disable the scroll-to-top button;
• make the button fixed.

When you are ready, hit the 'Save & Publish' button.

Page title (stunning header) activation

Page title section is called Stunning header and is represented by the page title text and background behind it.

By default stunning header is turned on. If you want to hide it, go to Customize>Stunning header and switch Show stunning header? toggle to 'Hide'.

In the same section you can control size of paddings on the top and bottom of the stunning header.

Stunning header customization

There is a number of options that let you customize look of your stunning header. Here are they:

1. Background image - you can choose one of the predefined patterns as a background or upload your custom image. If you don't want to have image on the background, choose the first square. In this case, background color will be applied.
2. Expand background - this option makes your background image stretch across the whole stunning header area. This option is needed if the uploaded image is smaller than the stunning header area.
3. Parallax effect - allows to enable parallax effect for the background image.
4. Background color - select background color for your stunning header. It will be displayed if the background image is disabled.
5. Text color - choose color of the text inside the stunning header with the colorpicker.

When you are ready, hit the 'Save & Publish' button.

Subscribe panel activation

Subscribe panel before footer section is represented by the subscribe form on the animated background. The subscribe form is generated by Email Subscribers & Newsletters plugin, that comes bundled with the theme. Before customizing the subscribe panel, make sure that this plugin is activated.

By default subscribe panel is enabled in the theme. If you don't need it on your site, you can disable it under Customize > Subscribe panel tab by switching Show Email subscribe section toggle to 'Hide'.

Subscribe panel customization

Customization options for subscribe panel are located under Customize > 'Subscribe panel' tab as well. They are as follows:

• Customize subscribe form - click on the 'Edit subscribe form' button to open editing window. Enter custom title and description for your form there. You can also enable 'Show Custom form here?' option and enter custom subscribe form shortcode generated by another plugin or simple HTML text. It will be displayed instead of the default subscribe form.
• Text color - you can choose custom color of the text in the subscribe panel.
• Background color - you can choose custom background color of the subscribe panel.
• Background image - instead of the backgrund image you can enable one of the predefined background patterns or upload your own image.
• Expand background - this option lets you stretch the image across the whole area of the subscribe panel. This option is required if the uploaded image is smaller than the subscribe panel area, but you don't want it to get repeated.
• Show animated images? - this options lets you enable animated images pop up once the subscribe panel appeared in the viewport.

Once you finished adjusting the settings, hit the 'Save & Publish' button.

Subscribe form on individual pages

If you want to disable subscribe form customize it for individual pages, there are corresponding options under 'Subscribe panel' tab in each page editor. To start customizing the form, you need to switch 'Change settings' option to 'Yes'. Below will appear the same options as in Customize panel.

You can control primary and secondary colors of the theme in Customize>Design Customize section.

The elements that apply primary and secondary site colors are buttons, icons, hover elements, title delimiter and some other KC shortcodes.

NOTE: KC shortcodes won't apply settings from 'Design customize' section, if they have colors other than primary or secondary. In this case, you should edit the shortcode and choose custom color from its 'Styling' tab.

There is a list of words and phrases in the theme that can be translated into different languages.

You can translate them with different tools:

• WPML String Translation - this is a paid extension for WPML plugin. So if you use WPML to create a multilingual website, you can use WPML String Translation extension to translate translatable strings of the theme.
• Loco Translate plugin - it is a free translation plugin that you can download from Wordpress repository. It has its own documentation. All you have to do is to follow it step-by-step.
• POedit - this is the most popular translation editor for Wordpress. There is a free and pro version of it. free version will be more than enough to translate the theme.

Seosight comes with a translation file seosight.pot that include translatable strings for the theme. It is located in wp-content/themes/seosight/languages/ folder.

How to translate with POedit?

1. Install POedit on your computer http://poedit.net/ .

2. Open seosight.pot file in it (located in wp-content/themes/seosight/languages/)

3. Begin translating all or some phrases into your language.

4. When all phrases are translated, save the file in the following format  {theme_domain}-{ru_RU/en_GB}.{mo|po} .

5. After the .PO file is saved, a .MO file is created automatically.

6. Upload both files (.PO and .MO) via your FTP account into  wp-content/languages/themes/ folder.

Translation will be applied automatically, if you have installed WordPress in corresponding language.

NOTE: It is highly recommended to save a copy of your .PO file on your computer location.

If demo import process fails on your installation and you get an error kind of  cURL error 28: Connection timed out after 10001 milliseconds, we recommend an alternative way to import demo data. 

1. Find demo-content.zip archive in 'etc' folder of Seosight package.

2. Unzip it and upload to the root folder of the theme ( wp-content/themes/seosight)

3. Go to Tools>Demo Content Install where you will see two demo options. You need to install Local Demo.

That's all!