Seosight WP


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:

  1. go to Appearance>Themes;
  2. On the next page, click the Add New button and then Upload Theme; install-m0
  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:

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. updates-m3
  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.

page-s1

Content management

Content can be added via:

Design options

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

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. page-s4
  2. Header opacity - lets you control opacity level of the header section. page-s5
  3. Select menu to display - lets you enable custom menu on the current page. page-s6

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. page-s7page-s8
  3. Background image - you can set one of the predefined background images or upload your own one. page-s9
  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. page-s10
  6. Text color - lets you change color of the page title and breadcrumbs. page-s11

Sidebar management

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

page-s12

The options are:

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

page-s13

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:

kc1

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. kc2
  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. kc3 kc4

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

kc5

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

kc6

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.

kc7

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:

  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. kc8 kc9
  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%. kc10 - put cursor over the columns border and move it to left or right changing size of the column. kc11
  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. kc12 - 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. kc13
  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. kc16 kc17 kc18 Or click on the 'PASTE COPIED ELEMENT' button on the bottom bar. kc15
  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. kc19 In the appeared popup click on the 'PLUS' icon. kc20 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. kc21 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. kc22 kc23

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:

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:

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:

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

Table of Contents:

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:

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:

'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:

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

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. 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:screenshot_1
  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  post-options
  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: screen-optionsTo 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 

    excerptOr 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. more-tagOTHERWISE 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

list

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:

videoback

Audio Post Format

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

Enter link for audio that will be embedded

audopost-inside

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

quote-opt

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

linked-post

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

template

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

content-before

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 sidebar
  2. Type of pages pagination:
    • Number links - shows the page numeration number-links
    • Load more ajax - shows the Load more button load-more
  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 pagepost-options

Header design:

  1. Adjust Header Options:
    • Change settings? - settings will be changed only for this page. If turned off, general settings will be applied. header
    • 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:

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.descritpion
  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. additional-info 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. kctab
  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 port-options

Design options:

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

  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 des-like   soc-share
  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

template

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

content-before

Now you can work over portfolio design and options

Portfolio options:

  1. Select desired sidebar area in Sidebar Picker sidebar
  2. Sort panel - show/hide a panel with categories taxonomy sorting
  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 number-links
    • Load more ajax - shows the Load more button load-more
  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 port-option

Header design:

  1. Adjust Header Options:
    • Change settings? - settings will be changed only for this page. If turned off, general settings will be applied. header
    • 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. portfolio-s1
  2. Show Like - you can enable or disable likes on page. portfolio-s2
  3. Show date - lets you enable/disable portfolio date of creation. portfolio-s3
  4. Show share icons - lets you enable/disable social share buttons on page. portfolio-s4
  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. portfolio-s5
  6. Enable inner navigation - lets you enable links to previous and next portfolio items. portfolio-s6
  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. portfolio-s7

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.

Creating a mega menu

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

Mega menu background image

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

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.

themeoptions17

  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 save-button

Let's take a look at Theme Widgets

Banner

Banner with a background image, text, icon and button

Category list

shows taxonomy objects with number

Contacts

displays contact information with description and icon

Follow us

adds links to your social accounts

Latest News

shows the preset number of latest posts

Login

adds login form

Menus

allows to display custom  menus in two columns

Tags cloud

shows the preset number of tags

Text with button

adds a text block with title, short description and button

 

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.

themeoptions1

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.

themeoptions2

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.

themeoptions3

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

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:

 

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:

header-opt2

Search

Search options are as follows:

header-opt3

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-panel1

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.

aside-panel4

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-panel1

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.

aside-panel4

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

There are only 2 options:

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. stunheader2
  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. stunheader3
  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.

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:

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.

d-localization1

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

Example:
seosight-nl_NL.po
seosight-fr_FR.po
seosight-he_IL.po etc.

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!