Documentation TopTen WP Theme

Getting started
Theme installation and demo data import
Once you purchased the theme, begin installation process: 
● download theme package; 
● unzip it; 
● open ​THEME IN THAT FOLDER!​ directory and find installable t​ opten.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 U
​ pload Theme​; 
  
3. Choose t​ opten.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 the complete demo setup. Click on the ​‘Plugins & Demo Content’​ button 
below it and wait a few moments until the installation process is finished.  
Once the installation process is finished, you’re automatically redirected to the ​‘Demo 
Content Install’​ section. Choose demo data with the Elementor builder. Click on the 
‘Install’​ button and wait a few moments. 

Elementor Templates import

With the way that all your content will be deleted after importing Seosight demo content, 
our team offers you an alternative way – ​Elementor Templates​. 
For those who don’t want to install the demo data with Elementor, but want the same 
default theme pages as were in WP Bakery, we added templates of main pages and 
sections. You can find them in the theme package in the ETC folder. 
1. First of all, you need to unzip the folder which you download from Envato Market. 
2. Find Elementor-templates.zip archive in the ETC folder of the Seosight package. 
Pay attention​, that first, you need ​to install Elementor Page Builder​ under Plugins > Add 
New. 
Then, you’ll be able to upload Elementor Templates under Templates > Import 
Templates. 

 
3. The way to use it: 
Go to Pages, choose a page you want to edit, and click Edit with Elementor. 
In the new empty section click to the icon with folder (Add Templates) 
  
In the appeared window go to My Templates, choose the template you want to add 
(Page or Section), and click Insert. 

 
That’s all! 
Parent and Child Themes
After theme installation, you’ll have two themes – child and parent. A child theme takes 
the functionality of the main theme (parent theme), which gives you the possibility to 
customize an existing theme.  

 
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. 
The child theme will be automatically activated into your site after installation. So, 
instead of modifying the theme files directly, it’s better to customize the child theme for 
the following reasons.  
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 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 
exists in the parent theme in order for the modifications to take effect. 

Why you can’t rename the theme

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.  
 

Updating
Automatic updating
Automatic theme updates integrated in theme. To update theme correctly and set an 
auto-updates, please follow the instructions below. 
Theme updating 
Go to ​Admin Dashboard > Updates​, click ​Check Again​ to check new updates. 
Choose TopTen and click U
​ pdate Themes. 
  
Or you can go to ​Appearance > Themes​ and click ​Update now​. 
 
Auto-updates 
Go to ​Appearance > Themes​ and ​Theme Details 

 
Click ​Enable auto-updates​ and until now theme will be automatically updated. 
 
  
Now you see the result! 
  

Page Building
Elementor Preconfiguration Options
Before work with Elementor Page builder, we recommend to set following properties.
  

Sample page
Creating a new page 
The page is created under ​Pages > Add New tab​. Create a new page, enter the title and begin
adding content.
  
Content management 
Content can be added via:
● WPBakery Page Builder, which provides multiple elements for building pages.
● Elementor Page Builder, which is one of the famous frontend editors.
  
Both last builders have great many customization options, allowing you to adjust pages
according to your needs. You don’t have to install both Elementor and WP Bakery builders
together, but you can if you want.
Customize page elements
In the ‘Customize design’ box you can customize the following options:
● Header
● Stunning Header
● Before Footer Block
  
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. Text Color​ – click of field to choose color or clear field for default value.
4. Select menu to display​ – lets you enable custom menu on the current page.
5. Show aside open button?​ – will enable button and aside panel.
  
Stunning header 
It is possible to customize stunning header styling and components inside each page. These
settings are higher by priority than ones in ​Pages.​ Choose the Page you want to edit, click “Edit
Page” or go to ​Customize> Stunning Header​ sections.
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. Custom title text
3. Padding from Top/Bottom​ – you can set padding height between the title and section
border.
4. Background image​ – you can set one of the predefined background images or upload
your own one.
5. 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.
6. Color overlay​ – layer with colored overlay for background image.
7. Background color​ – you can set background color instead of background image. It will
be applied only when background image is disabled.
8. Text color​ – lets you change color of the page title and breadcrumbs.
9. Hide title​ – remove text with page title from stunning header section.
10. Hide breadcrumbs​ – remove breadcrumbs from stunning header section.
  
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.
  

Demo templates for Elementor

For those who do not want to install the demo data with Elementor, but want the same 
default theme pages as were in WP Bakery, we added templates of main pages and 
sections. You can find them in the theme package in the ETC folder. 

 
If you don’t have the “elementor-templates” folder inside your theme package, please, 
download the latest TopTen version. 
First of all, you need to install Elementor under Plugins > Add New. Then, you’ll be able 
to upload Elementor templates under Templates > Import Templates. 
 
Sliders
Fullscreen slider

 
Fullscreen slider is created under A ​ ppearance>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. 
  
More about buttons 
In order to create c
​ olored button​, please set following properties 
  
In order to create c
​ olored outlined button​, please set following properties 
  
Adding slider on page 
To add slider on your page, choose ​Slider​ widget in Elementor Page builder and select 
required slider from the sliders list. 
  
In order to make the slider fullwidth, edit row settings and choose ​Full Width​ option. 
  
 
Contact Forms

Contact form builder

Theme comes with integrated contact form builder. All forms are created and stored in 
Forms​ section of your admin dashboard. 
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 
You can add contact forms on pages with Form widget of Elementor Page Builder. 

 
In order to create F
​ orm ​as on the Demo, please set following properties 
  
 
Blog Posts
Single post
To create a single post you have to: 
● Login to your WordPress admin account 
● Go to ​Blog Posts​ tab 
● Click ​Add new​ tab 
● Give your post title 
● Start filling content using ​Visual​ or ​Text editor​, add Media if needed: 
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 h
​ ere​) 
● Featured image​ – set featured image that will be shown on blog page   

Post formats
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. 
  
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 

 
 
  
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: 
  
 
 
IMPORTANT: In order to display short post description on your blog, category, archive
pages you need to activate Excerpt under Screen Options. 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 
When you are done, go to the top right and click ​Publish​ button. 

Blog page
To create a blog page that will display all your blog posts go to admin panel P ​ ages​ and 
click ​Add new​. 
Give a title to your page and after that choose ​Blog​ in Page ​Attributes​>T
​ emplate 

 
If you want any content displaying before your posts you can put it into ​Visual/Text 
editor or add it with ​Elementor Page Builder​. 
When you are done, click P
​ ublish​ and get your blog page. 
Now you can adjust your blog settings. 
Blog page options: 
● Choose the position of your sidebars using ​Sidebar Picker 

 
Type of pages pagination​: 
● Number links​ – shows the page numeration 

 
● Load more ajax – s
​ hows the Load more button 
  
● Order​ – Designates the ascending or descending order of items 
● Order posts by​ – Select the sorting parameter 
● Categories​ – Choose the post categories you want to be displayed on your blog 
page 
● Exclude selected​ – if checked the categories selected above will not be 
displayed on your blog page 
● Items per page​ – set number of posts that will be shown per page 
  
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) 
  
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 

Portfolio
Portfolio Page
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 P
​ age attributes 
  
Click ​Publish​ button and see your portfolio 
If you need some content shown before portfolio items, then add it into T
​ ext/Visual 
editor​ or use E
​ lementor page​ ​builder 
  
Now you can work over portfolio design and options. 
Featured image 
Set featured image that will be shown on post page  
  
Sidebar Picker 
Select desired sidebar area. 
  

Single portfolio post

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 summary​ 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 P ​ roject Cover​ image tab. 
6. Click Publish button 
 
Portfolio options: 
You can add additional content into the default WordPress ​Visual​ or ​Text​ editor. It will 
be displayed under your featured image/gallery and project summary. 
Leave the field Project summary image empty if you want Featured image be shown 
instead. 
  
You can also simply use ​Elementor Page Builder p
​ age builder instead. 
 
Set desired sidebar position under S​ idebar Picker​ tab. 
NOTE​: The sidebar will be applied to the additional content of the portfolio 

 
Customize design 
Portfolio design options you can find under the tab ​Customize design​. Let’s observe 
them:  
thumbnail 
● Item size on Category page​ – controls the featured image size on the Portfolio 
category page 
● Behavior on Portfolio page 
 ● Thumbnail / Slider align​ – featured image/slider gallery position on a Single 
portfolio page 

 
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 summary area 
● Show date?​ – post creation date on the top of the project summary 
● 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 
  
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 the content 
● Header opacity​ – used when Absolute placed Header option turned on, controls 
header background transparency. 
● Select menu to display​ – select one of the menus you’ve created before under 
Appearance>Menus  
  
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​ – an image that will be displayed on a stunning header 
background. Select a 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 the image 
● Text Color​ – set the title and breadcrumbs font color 
  
Background settings 
● Change settings?​ – settings will be changed only for this page. If turned off, 
general settings will be applied. 
● Background image​ – an image that will be displayed on a portfolio post 
background. Select a given pattern or upload your custom image 
● Expand background​ – expand or repeat the portfolio post background image 
● Background Color​ – set the portfolio post background instead of the image 
  
Adding portfolio on page 
To add portfolio on your page, choose ​Post / Portfolio Grid ​widget in Elementor Page 
builder and select required slider from the sliders list. 
Please set following properties. 
  
 
Menu and Mega Menu
Menu setup
Menu can be created in two ways: 

1. Via C​ ustomize> ‘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 c
​ reate a new men​u link at the top of the page. 

 
● Enter a name for your new menu in the ​Menu Name​ box. 
● Click the C
​ reate 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 A​ dd to Menu​ button to add your selection(s) to the menu that you’ve 
just created. 
  
● Click the S
​ ave 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. 
  

Mega Menu Setup

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. 
Widge​ts and Sidebars

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

Sidebar Manager
TopTen 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 G
​ rouped pages: 

1. Select a group of pages you want this 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 a new 
sidebar and fill it in with needed widgets 
  
For S
​ pecific 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 a new one and fill it in with 
needed widgets 

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

 

Theme Options (Customize Panel)

Site Identity
Under ​Customize > Site Identity​ you can specify basic site information. 

 
Site Title 
Textbox for your site title in a dashboard: 

 
Tagline 
Textbox for a tagline to share your site: 

 
Site icon 
Site Icons are what you see in browser tabs, bookmark bars, and within the WordPress 
mobile apps. Upload one here! 
Site Icons should be square and at least ​512 × 512​ pixels. 
  

Colors
Customize > Colors​ menu allows customizing the general colors of the site. 
Let’s review every option in details. 
Background Color 
Background Color option allows you to set up the default background color for all pages 
build with WP Bakery or Elementor. 
An example of the primary accent color items you can see below. 
  
Primary Accent Color 
Primary Accent Color option allows to set up the color for ​general notification​ icon and 
the main parts of the site. Generally, it will replace almost all the orange elements of the 
theme. 
An example of the primary accent color items you can see below. 
  
Secondary Accent Color 
Secondary Accent Color option allows to set up the color for ​message notification 
icons​ and the second main parts of the site. Generally, it will replace almost all the blue 
elements of the theme. 
An example of the primary accent color items you can see below. 
  
Links Color 

 
 
Background Image
Customize > Background Image 
Background image section allows selecting an optional background image to use 
instead of the background image for all pages, built with WP Bakery or Elementor. 

 
To set up the background image, you need to follow the next steps: 

1. Click on the select image button to upload the image. 

2. Below the image, you will also be able to see the background image options. 
Under preset, you can select how you want the background image to be 
displayed: fill the screen, fit screen, repeat, or custom. 
3. You can also select background image position by clicking on the arrows below, 
it allows the image to be positioned Left, Center, or Right. Clicking on center will 
align the image to the center of the screen.  

The changes will be applied to the whole site, but easily can be changed for the
individual page in internal page settings.
 
Menus
Customize > Menus​ section allows you to create a new menu or edit one of the existing 
menus via the frontend. 
This menu panel duplicates almost all the backend menu options, which locate under 
Appearance > Menus: 

 
Editing menu 
Under Menus section you will see all your existing menus. 
  
You can open any of your menus and edit every menu items. Once you open a menu 
item, you can edit its navigation label, title, description, etc or remove that menu item at 
all.  

 
Under menu location, you can attach or edit any of your menus to the exact location. 
  
Menu creation 
To create a menu follow the next steps. 
1. Click on the ‘Create New Menu’ button, type name, choose the menu location (the 
place you want this menu to appear) and hit the ‘Next’ button. 
  
2. Begin adding menu items by clicking on the ‘Add items’ button. 
3. Choose items among available page types from the popped out right panel. 
  
4. Once the items are added, you can reorder them and create submenus with simple 
drag-and-drop function. 

 
5. When your menu is ready, hit the ‘Publish’ button. 
 
Header options
Header options are configured under Customize > ‘Header options’ tab.  
There you can adjust settings for: 
● top bar 
● sticky header 
● logotype 
● search field 
● aside panel 
● main header button 

 
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: 

 
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 is: 
Show search icon? – enable or disable search in header of your site. 

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

 
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. 

 
Main Header Button 
Main Header Button is a button, that is included in the Header. You can change it under 
Customize > Header options > Main Header Button. 
You have opportunity to hide it, to change text, color and link. 

 
Footer options
Footer options are located under Customize > Footer options. 
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 Navigation Menu. 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. 
 
Design customize
You can control website pre-loader, sidebar width and section paddings in 
Customize>Design Customize section. 
  
Preloader 
Customize > Design customize > Preloader 
Essentially, the preloader is what you see on the screen while the rest of the page’s 
content is still loading. 
  
Sidebar 
In this option, you can choose between wide and narrow sidebar on your pages. 
  
Sections padding 
This option allows you to change paddings between blocks in 4 variations: 
● Small 
● Medium 
● Large 
● Custom 
Let’s review this options: 
Small 

 
Large 
  
Custom 
  
 
Blog options
General blog options locate under Customize > Blog. 
Blog options allow controlling default settings of the single post item and blog page 
and consist of General options, Archive / Category options, and Single Post options 
tabs. Let’s review these tabs in detail below.  
General options tab allows to set up the following options: 
● Primary Blog page 
● Date to show 
● Prev/Next Order 
  
Primary Blog page 
Here you have possibility to select a page which breadcrumbs will be linked to. 
  
Date to show 
Select what date display in post meta. 
  
Prev/Next Order 
Swap posts that displayed in Prev / Next block. 
  
 
Stunning header
Stunning header for all pages 
Stunning header appearance is controlled via Customize > Stunning header section. 
This options are applied for all page types and are settings by default. 
  
Elements visibility  
Here you can manage stunning header elements visibility: 
● Show stunning header – you can enable or disable a stunning header for the 
edited section. 
● Show breadcrumbs – you can show or hide breadcrumbs under the title text. 
● Show title – you can show or hide a title inside a stunning header section. 
  
Color settings 
Click on field to choose color or clear field for default value. 
  
Background color 
Here you can select custom background color using a color picker.  
  
Background image 
Here you can upload your custom background image. 
  
Padding from Top/Bottom 
This is space from page title to the top and bottom borders. 

Important: write number with the prefix px 

  
The stunning header for a separate page
It is possible to customize stunning header styling and components inside each page. 
These settings are higher by priority than ones in Pages. Choose the Page you want to 
edit, click “Edit Page” or go to Customize> Stunning Header sections.  
  
 

Before Footer Section

Meet the new feature under Customize > Before Footer Section. 

 
To customize Before Footer Section, edit the current Elementor Template Section or 
create new. 
 
You can customize Before Footer Section for each page, click Edit page. 
 
Portfolio options
Single portfolio options let you control display of the single portfolio items. They are 
located under Customize> Portfolio options tab. 
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. 

Thumbnail / Slider align 

Lets you choose position of the portfolio featured image or image gallery. 

 
Show Like  
You can enable or disable likes on page. 
  
Show date 
Lets you enable/disable portfolio date of creation. 
  
Show share icons 
Lets you enable/disable social share buttons on page. 
  
Show related items 
You can activate related portfolio items at the bottom of the page. You can also set 
custom title for this section. 
  
Enable inner navigation 
Lets you enable links to previous and next portfolio items. 
  
Background image 
 
Select one of images or upload your own pattern. 
  
 

Additional JS
Put additional JavaSript codes into the field. 
NOTE: scripts are added without tag <script>
  
 

WooCommerce
In Woocommerce options section you can configure settings for the main shop page. 
Before configuring these options you have to install Woocommerce plugin and set up 
all Woocommerce pages and settings according to official ​Woocommerce 
documentation​. More detailed about Woocommerce options you can find in 
Woocommerce Shop​ documentation section.  
  
 

Homepage Settings

If you need to set up or change the homepage on your site, go to Customize > 
Homepage settings. 
There are two options: 
● Your latest posts – with this option, an automatically generated page with the 
list of your posts will be displayed as the homepage 
● A static page – this option lets you set any of the existing pages as a 
homepage.   
  
If you want to set up the exact page as a homepage, simply activate ​A static page 
option and select any page from the ​Frontpage​ 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 Olympus it is not required, so you can leave this field empty. 
Once you are ready, hit the P
​ ublish b
​ utton. 
 
The same options you can find on the backend under Settings > Reading.
  
 

Typography
Under Customize > Typography you can set up the styles for the main fonts on your 
site.  
  
Default font colors 
Default font colors section allows to set up the color for the primary and secondary 
font of the theme. 
Body font  
You can set up the main default body font for all your pages, built with page editors. 
For this font you can edit: 
● body font type; 
● font face (normal, italic or oblique); 
● style; 
● weight; 
● size; 
● spacing; 
● color. 

H1 – H6 headings 
H1 – H6 headings sections have the same font options as the body font. You simply 
can choose which heading you would like to edit and adjust the following: 
● body font type; 
● font face (normal, italic or oblique); 
● style; 
● weight; 
● size; 
● spacing; 
● color. 

Menu typography 
Menu typography allows to set up the same font options, but for the main menu. 
 

Additional CSS
This field is available for your styling customizations. Add your custom CSS codes 
below the field description. 

NOTE, if one of the codes is not correct, the other following codes will not apply. If you
make a mistake in code you will see the notice on the top, like this: