This theme documentation will be a wonderful guide for you in your site creating
Download the archive with Sidious theme from Themeforest.net. Unpack it.
There you will find:
1. Demo content
5. The theme itself (Sidious.zip)
Log in your site. Go to Appearance>Themes. Switch to the “Install Themes” tab>click 'upload'
Select from your computer location Sidious.zip file, and click 'Install now'.
On the “Manage Themes” tabs, there appears notification box, which requires you to install the recommended plugins. Click 'Begin installing plugins'
Check all plugins, select “Install” in the list below and click 'Apply'
That's all! Theme is ready to be used.
This paragraph is optional and you may ignore it if you would not like to use demo content for your site. Go to Metro Visual Builder section to find out how to build your site fast and easy. But if you are going to use the demo content, follow the instructions below.
To make things easier we developed one click import for you. Simply go to "Options">"Getting Started"> and click Import Demo Data in your admin panel.
We would like to pay attention that you need to install WooCommerce and YITH WooCommerce Wishlist before if you want to import shop as well. These plugins are optional and not included to theme but you can download them following these links: WooCommerce YITH WooCommerce Wishlist
The theme is ready for work.
Select a page, which will be your homepage in Settings>reading>static page
Then go to Appearance> Menus> and select a menu from the list. The menu will be displayed on your site after that.
Go to Layer slider WP>All sliders
Open layerslider-Import.txt file from the “import” folder. Copy the content of this file and paste it to the field “Import sliders”> click Import
The new Metro Visual Builder is a powerful tool for creating your pages. It includes more that 30 modules. Each one has its own settings.
Follow Pages>Add new to create a new page
It's very important to choose Page Attributes>Template "For page builder" template if you create page using page builder
Depending on the page template you select with right, left or both sidebars, there will be displayed default sidebars left or right, which are located in Appearance>Widgets.
If you want to display your custom sidebars, which you will create in Appearance>Sidebar Generator (will be described in the tutorial 'Sidebar Generator'), select them in the section 'Select custom sidebar'.
If you wish to choose the image for this page displayed in the Page Slider, add a featured image by pressing "Set featured image" in "Featured image" meta-box.
Metro Visual Builder is activated by default. That's how it looks
You can use both red bars for adding sections to your page. The only difference between them is, that the first one adds sections to the top, above other sections, and the second one – to the bottom, below other sections.
When you click 'add section' you have to select number of columns, which will be used in your section.
When the columns are selected you can start to add modules. Simply click 'add module' button
and start choosing modules from the list.
There are four groups of modules for faster navigation there. They are: Content Modules, Presentation Modules, Video Modules and Custom Content Modules. The name of each group helps to understand what these modules developed for.
Content Modules, for example, developed to display some information you would like to public
Presentation Modules developed to display good-looking content, often used as advertisement
It's really easy to understand what the Video Module is made for: playing video, of course
And, at last, Custom Content Modules are made for those, who want to use some self-developed code.
If you want to delete one section, click the 'delete section' button.
If you want to delete all sections from your page, simply click 'delete all blocks'
Metro Visual Builder makes it possible to move your modules to other sections. Simply drag and drop them to the row or column you need.
It's really easy to work with any module. They all have almost the same settings. For example, lets try to add Testimonials Module and personalize it.
You can see 'Back to module list' button on the picture below. Use it if the wrong module was chosen.
You can type the title for your module in the 'Title' field
All the clients you wish can be added by pressing 'Add clients' button
You will see a new client's block after clicking 'Add clients' button. Click it as well to add client's information and upload the related image.
Simply fill in the form and upload image you would like to by displayed. To move the boxes drag-n-drop them, to remove just check 'remove' check-box
Appear effect should be selected from the drop-down list. This means that you can choose the animation effect for the module content appearance.
For better customization you can type the name of CSS class for each module and create CSS with this class in Options>Main options>Custom CSS
Click 'Save changes' and enjoy your testimonials block
If you want to color your title be in red, you must select in Title allocate "Yes".
If you want to add "Read more info" option, you must type the "Link (URL)" or choose the page from drop-down list that appears after clicking "Link to page fields" and "Display the "read more" link", "Read more" link text"
Each section has its own row settings
It gives you possibility to set a background image, using the marked button.
You can set the background-repeat option simply choosing one from "Background repeat" drop-down list.
If you use an image as a background for any element and wish it not to be repeated you have to choose "no-repeat" option. The background for module, block or row will not be displayed at all if you choose "none".Parent element's background will be shown (row or column, for example). This option works the same way for all blocks of page builder
You can set the background attachment option the same way, choosing the option from "Background Attachment" drop-down list.
This would give you a possibility to fix the background image when scrolling page or use parallax to make your web-site even more interesting for visitors, better-looking and unusual.
Background-color and text color could by setted using the color-picker or by typing the HTML-code of the color you need (as shown below).
We would like to pay special attention to (Background check) option. If you set some dark picture for module, row or sell background or background color is dark you can choose (Dark) from (Background Check) drop-down list and the text on it will be light and better visible. Light background is used as default, that means that text on it is dark for better visibility.
If you need the offset at the top or the bottom you can use "Row padding Top" and "Row padding Bottom" options.
If you need the full width row simply select yes in (Row full width) field.
There are four pre-built classes to personalize the text. They are (text-light), the same as font-weight:200 CSS property (text-normal) - font-weight:400 (text-semibold) - font-weight:600 and (text-bold) - font-weight:800
You can also type CSS properties you need to personalize the row in some special way in "Additional CSS rules" (see the next picture).
If you would like to display "Back to top" button on the row, you select choose "yes" in the "Display back to top" drop-down list:
You can also use video as a background.
1) upload video. mp4, ogg or vebm formats supported;
2) select "Yes" from "Display Video" drop-down list;
3) select "Yes" in "Loop Video" if you want to repeat the video when it's finished;
4) if you need to blur the video simply select "yes" option in "Video Shadow" drop-down list;
5) upload the image through the "Video Poster" for mobile devices. That's all.
Don't forget to press "Save changes" button.
The way of display columns can be setted by pressing the "Column Settings" button.
Column Settings form has almost the same options as Row Settings. First of all, you can add CSS classes (not only rules) to personalize the column faster and easier.
You can also set paddings for every side you need
And a column span for small devices could be chosen from the drop-down list
"Save changes" button should also be pressed to save all the settings you've made
When your menu is ready, it's a perfect time to customize header. We've made 9 different types of header for you. There are two ways to choose one. First one is to select header you wish from the list in "Select header type" box following Pages>Add new or Pages>All pages, then "Edit"
The second way to choose header is to follow Options>Layouts settings and choose header type for each page type.
To create a page slider goto Page slider section in your admin panel and click 'Add new'.
In 'Basic settings' select sorting type of items, order, number of slides and cache time.
In the section 'Slider elements' adjust the appearance of your items in slider.
Check if you want to display title, post category, icon, post description etc.
In the section 'Select content' you can select categories of different posts types and pages to be displayed in the slider.
When the slider is created, click 'Save changes'.
Copy the shortcode of the slider
It's time to go to Pages>Add new. Pay attention, it's very important to choose 'Page with large right aside' from the drop-down list in 'Page Attributes' meta-box. Then click Publish or Update if page's not created yet.
and paste it to 'Shortcode module' in 'Block before content' meta-box as shown. Then type the text from the picture below if you would like to display some urgent news under the slider. Excerpt_length parameter means the length of the message. Page ID is the id of the page, that will be used as breaking news info. Link_url and css are optional parameters and can be used if you need to set some link or special css rules for this message.
You'll find the fool information on how to create Layer Slider in layerslider folder attached to this archive. We would like to tell a few words about how to display it on the page after the slider's ready. Copy the Layer Slider shortcode id just the same way you've done to Page Slider.
Follow Pages>Add new link and create the shortcode module. Now simply paste the shortcode id to the 'Shortcode' field.
And the last thing: go to row settings and select 'none' from the 'Row padding Top' drop-down list.
Contacts page is created using page template 'Contacts page'.
After the template is selected, click 'publish'.
By default you get google map and contact form on your contacts page.
It is possible to put additional text to the field 'Additional text fields',
which will be displayed in the blue box on the google map.
If needed, you can add some blocks from Metro Visual Builder to your contact page. They will be placed to the left from the contact form.
Additional settings for the contacts page can be defined in Options>Contact page options.
It is also possible to create contacts page only by means of Metro Visual Builder, without setting 'contacts page' template as a basis.
General layout settings can be adjusted in Options>Layouts settings.
You can define the layout settings for each page type and they will be applied as default settings. You can also select custom layout for every page.
There are many pre-built templates included. You can select the one you need from the 'Template' drop-down list of 'Page Attributes' meta-box
If you would like sidebar to be displayed on the page you can simply use any template with sidebar. There are ten pre-built custom sidebars developed for you. Simply select one from the list in 'Select custom sidebar' meta-box. Visit 'Custom sidebars'. section to learn more about it. You can also create your own sidebar following Appearance>Widgets if you want section.
We would like to pay attention to 'blog with user layout selection' page template.
If you select this page template and click 'publish' ('update'), you will see 'Select blog parameters' section.
The default settings for this layout are defined in options>layouts settings>archive pages layout. The other layouts are the custom ones.
If you would like not all blog categories to be displayed on the page you can choose the categories you need.
Simply check 'Display posts of certain category' and select the categories by checking the boxes with the category's name.
In the field 'Number of posts to display' put number of posts, which will be displayed on one page.
The same principle is applicable for portfolio templates.
Portfolio is created in Portfolio>Add new
After you have entered the title of your portfolio item, you can start adding images. In the section 'Images gallery', click 'Add gallery images' and select a number of images by holding CTRL button. Click 'Add to gallery'.
When the images are added, you can reorder them by dragging and dropping to another place.
It is important to set featured image to your portfolio item, which will be displayed on slider or main portfolio page.
You can link your portfolio items to one or several categories.
If you want to create a new category, click on 'Add new portfolio category' under the list of existing categories.
To add video item to your portfolio, add the link to the video to the field oEmbed in the section 'Portfolio Video'
or upload videos in the mp4 or webM format from your computer location.
You can also add description to your portfolio item in the text field of classic editor
By default in portfolio item will be activated additional portfolio fields: Skills and Clients, which you will be able to edit or to delete in section Custom fields>custom fields.
There is a huge list of 23 pre-built portfolio templates. All you have to do is to choose one from the drop-down list in "Page attributes" box.
You can check the demo to see how it looks.
Additional settings for portfolio you will be able to adjust in the section Options>portfolio options
Posts are created in Posts>Add new.
They can be made in five formats: standard, gallery, video, quote, audio.
To make a post in a standard format, type any text in the text field of classic editor
Add image by clicking on 'Add media'. Select image from media library and click 'Insert into post'.
If you make a gallery post, switch to format 'gallery'. Click 'add media', 'create gallery', select some images you need and click 'create a new gallery'
You can reorder the images the way you want by dragging and dropping. In gallery settings select, which post type images will be linked to and select number of columns, in which they will be displayed on post.
When the settings are adjusted, click 'Insert gallery'.
In the section 'featured image' set a featured image to your post
To make a video post switch to video format. There will appear section 'Post video' on page
Add youtube or vimeo video ids, or upload self hosted videos from your computer location in format mp4 or webM. Video ID must be of the form "22439234" or "vuvc02sg9P0".
To make an audio post switch to audio format. There will appear section 'Post audio' on page
Use audio embed code or upload self hosted audio file from your computer location in mp3 format.
If you want to use audio embed code, you must use link with .mp3 at the end of links. For example, http://designshack.net/tutorialexamples/MP3/SearchTheWorld.mp3
If you want to upload self hosted audio file from your computer location, you must select file and then in following settings click "File URL" and "Use as Self hosted audio file in mp3 format".
Link your post to one or several categories from the list. To create a new category click on 'add new category' under category list.
Additional post settings you can adjust in options>posts list options
If you want to disable the block "Author Info", in "Options">"Posts list options" turn off "Author Info"
You can find the widgets following the link Appearance>Widgets
You can see all the parts of the page where widgets could be placed
Simply drag the widgets from to the place you need as you can see on the picture below. To remove - drag it out.
Timeline is the best tool to display chronology of your events in the theme.
You can create it following the link Timeline>Add new
Type the index number of the item in 'Order' field of 'Attributes' meta-box to display timeline items in correct order.
You can display all the timeline items on your page using Metro Visual Builder module.
You can create an interesting hiding block for better personification.
It's easy to do. Create a new page. Than follow the link "Options">"Main Options" and select it in "Top Panel Inner Page" option.
When the Top block is created, click 'Save changes'.