Theme installation

After theme purchase, download theme package from your Themeforest account.
Extract it and find installable “OneTouch_2.0.zip” in the root folder of theme package.
Log in your domain, where you have previously installed WordPress.
Go to Appearance>Themes>Add new>Upload theme and upload installable OneTouch_2.0.zip archive.
Activate the theme and begin installing and activating plugins.

Demo data import

If you want to import demo data, go to Appearance>Installer panel section. Before starting import make sure, that Wordpress Importer plugin is not installed or at least inactive, because it may conflict with theme import.
Click “Run installer” button and wait.
When import process is completed, you will see “Content Installed Successfully !” messages.

If import didn’t work for the first time, it means, you have to increase max_execution_time parameter in php.ini file on your server. After that restart import.

IMPORTANT NOTE! If you are going to customize theme files, we strongly recommend to install child theme at once. Child theme is located in “Child Theme” folder of theme archive.
More information about child theme you can find here http://codex.wordpress.org/Child_Themes

Child theme. How do I use it?

It is very important to install child theme in case you are going to modify theme files according to your needs.

The greatest advantage of the child theme is that you can store the modified theme files in it and they will never be lost after you update the parent theme.

Why?

Because child theme doesn’t require updates.

How to get started with the child theme?

The principle of work of the child theme is the same for all themes. So let’s review only Secondtouch theme as an example.

First of all you have to install the parent theme, as described in “Theme installation” article. You can find it either in the Documentation file of the theme package or in our online documentation.

Find “secondtouch-child” zip archive in theme package.

install-secondtouch11

 

Install it the same way as the parent theme over Appearance>Themes>Add new. Activate it.

How to upload modified files to the child theme?

Child theme fully inherits functionality of the parent theme. So you don’t have to copy all files from the parent theme. You have to copy only those files you have modified. The modified file has to have the same path as this file in the parent theme.

For instance, if you want to modify the top panel of the theme, you need to edit section-panel.php file that is stored in “templates” folder. After you have modified this file, you have to upload it to the child theme in the same folder, as it is stored in the parent theme. Example “templates/section-panel.php”.

 

 

 childtheme1

How to add my custom CSS to the child theme?

You can insert your custom CSS codes directly to the style.css file, that is stored in child theme folder by default or to

  • Theme Options>Advanced Options>CSS Code (Onetouch, Atlantis, Embrace, Ultron)
  • Theme Options>Main Options>Custom CSS (Maestro, Glider, Secondtouch)

childtheme2

 

Karat-child4

If you choose the second way, don’t worry – custom CSS won’t be lost after you update the parent theme.

Getting theme updates

There are two ways to update the theme to its latest version:

  • manually;
  • automatically.

MANUAL UPDATES

In order to update the theme manually, you need to perform the following steps:

  1. Log in your Themeforest account;
  2. Go to ‘Downloads‘ section;
  3. Click on the button in from of the theme name;
  4. Select “Installable WordPress file only” option from the dropdown menu and download the zip archive.onetouch-update1
  5. Unzip ‘Onetouch2.zip‘ archive and upload folder ‘Onetouch2‘ via FTP to ‘wp-content/themes‘ directory replacing the old files.
  6. After that go to Appearance>Install Plugins section and update the required plugins. If there is no such section in your admin dashboard, it means that all plugins are up-to-date and there are no new versions available.

AUTOMATIC UPDATES

In order to activate auto update function, you need to enter your theme purchase code in Options>Main Options>Item Purchase Code field.

one-updates2

Once done, you will receive notifications about the available versions in the Updates section of the admin dashboard.

one-updates1

In order to update the theme:

  1. Go to Updates section and perform an update from there.
  2. After that go to Appearance>Install Plugins and update the required plugins from there.  If there is no such section in your admin dashboard, it means that all plugins are up-to-date and there are no new versions available.

If you encounter any problem while updating automatically, please, update manually.

Google map activation

In order to make Google Map work on your site, it is required to activate your Google Map API Key in theme options of the theme.

Please, follow the next steps:

  1. Generate your Google Map API Key by following instructions in this tutorial.
  2. Go to Options > Advanced options section and find Map api key field there.
  3. Insert your API key and save settings.
    google-map-api-onetouch
  4. When you are ready, you can add map on your pages via Metro Visual builder or Visual Composer editors.

Posts. Post formats

Posts are created in section Posts>Add new

 

Give title to your posts and click ‘Publish’.

 

 

Now we will review all post formats and will create all of them.

 

Standard post format.

Check ‘Standard’ in section ‘Format’

 

 

Add some text to text field in Classic editor.

 

 

If you want to add some image after text, click ‘Add new’ and select image from Media library.

 

 

You can adjust settings of the post in section ‘Attachment details’, if needed.

 

After that click ‘Insert into post’.

 

 

After all content is added, assign a category or several categories to your post (post categories you have previously created in section Posts>Categories)

 

 

Set featured image to your posts in section ‘Featured image’ > Set featured image

 

 

Click ‘Update’ and view your post.

 

 

 

Chat format.

 

 

Check ‘Chat’ in section ‘Format’

 

 

Put some text to text field in Classic editor.

 

 

Assign category to your post and click ‘Update’.

 

 

The post is ready. View it!

 

 

Post format ‘Image’ is similar to ‘Standard’ post format.

 

Gallery format.

 

Check ‘Gallery’ in section ‘Format’

 

 

And now click ‘Add media’

 

 

Click ‘Create gallery’, choose some images holding Shift button and clicking with left mouse, and click ‘Create a new gallery’

 

 

In gallery settings, select ‘Media file’ and number of columns. Click ‘Insert gallery’.

 

 

Assign some categories to your post, set featured image and click ‘Update’

 

 

View your post!

 

On single post page it will look like that

 

 

On blog page it will look like slider with small thumbnails inside big image.

 

 

Quote format.

 

Check ‘Quote’ in section ‘Format’

 

 

Simply add some text to the text field in Classic editor.

 

Assign categories to your post and click ‘Update’.

 

 

That is how your post will look like on single and blog pages.

 

 

Video format.

 

Check ‘Video’ in section ‘Format’

 

 

Add some video link to the text field in Classic editor

 

 

If needed, add text below it

 

 

Assign categories to your post and click ‘Update’.

 

 

That is how your post will look like on single and blog pages.

 

 

 

 

Posts have additional options in Options>Posts list options> Inner post page options

 

 

  • Author info – if you disable author info, it will be removed from single post page

  • Thumbnail on inner page – if enabled – featured image will be displayed on single post page; if disabled – will be removed from single post page.

Blog page

Blog page is created in Pages section. It can be of two types:

 

1. Standard blog

2. Masonry blog posts

 

1. To create blog page of a standard type, add new page, give it title and select page template ‘News page’, click ‘Publish’.

 

 

Now the page is created. It displays all existent posts, that you have previously created in section ‘Posts’.

 

In the upper right corner you see ‘Blog parameters’, that you can adjust, if needed. You can put number of items and select particular category to display on this page.

 

 

It is also possible to change layout of your blog page. It is regulated by section ‘Layout parameters’

 

 

If ‘Default’ layout is selected, blog page has layout, that is set in Options>Layouts settings>Archive pages layouts.

 

But you can change standard layout, if you select other layout from the suggested ones:

no sidebars

sidebar on left

sidebar on right

2 left sidebars

2 right sidebars

sidebar on either side

 

 

If needed, it is possible to put additional blocks from Metro Visual Builder, that will be displayed on the top of your blog page.

 

 

2. To create blog page in masonry style, add new page, give it title and select page template ‘Masonry posts, click ‘Publish’.

 

The page is created with all existent posts, that you have previously created in section ‘Posts’.

In the upper right corner you see ‘Blog parameters’, that you can adjust, if needed. You can put number of items and select particular category to display on this page.

There are additional options for blog pages, that are located in Options>Posts list options>Archive page options.

 

Let’s review them briefly.

 

1. Crop thumbnails – you can adjust width and height of featured images on blog page.

 

NOTE: This option affects only new uploaded images. To make these settings influence already uploaded images, you have to go to section ‘Tools’>Rebuild thumbnails and rebuild already existent images.

 

2. Post additional info on standard blog/ Post additional info on grid post template – you can enable or disable additional information on blog page, like author, tags, categories and date.

Portfolio. Portfolio types

Portfolio. Portfolio types

Portfolio items are created in section ‘Portfolio’.

 

Click ‘Add new’

Type name of your portfolio item

 

Type some text in the text field in Classic editor. If you want to activate Visual Composer or Metro Visual Builder in your single portfolio, go to Settings>Metro Visual Builder/Visual Composer>General Settings and check “Portfolio” checkbox.

 

 

Assign some categories to your portfolio item (Categories you have prreviously created in section Portfolio>Categories)

 

 

Add featured image and click ‘Publish’

 

 

View your portfolio on page.

 

 

This was a description of a standard portfolio item.

 

Now we will create gallery portfolio item.

 

Follow all steps described for the standard portfolio item.

After that add gallery images in section ‘Images gallery’

 

 

If needed, you can reorder them by drag and drop principle.

 

Save portfolio item and view it.

 

 

Let’s create video portfolio item

 

Follow all steps described for standard portfolio item.

 

Add video link to oEmbed field

 

or upload your custom video in mp4 or WebM format.

 

 

Save porfolio item and view it on page!

 

There are additional options for single portfolio item in Options Panel

 

You can find these options in Options>Portfolio options> subsection section for customize single portfolio page.

 

 

Portfolio text location option determines where text on single portfolio item will be displayed.

 

If ‘to the right’ selected, text will be located like on this image

 

 

If ‘full width’ selected, description will be displayed in full width under the image, like on this example

 

 

Option ‘Portfolio image display’ refers only to gallery portfolio items.

 

If selected ‘Slider’ images will be displayed like slider gallery

 

 

If selected ‘Items’, images will stand one beneath another, like on this image.

 

Portfolio page

To create portfolio page go to ‘Pages’ section> Add new> give name to your page and select template ‘Portfolio’. Click ‘Publish’.

 

 

Page is created. View it on your site!

 

 

Portfolio page has number of options that you can adjust on your own way.

You can find them in Options>Portfolio options.

 

 

Now we will briefly review all of them.

 

1. Portfolio page – select main portfolio page, that will be displayed in your breadcrumbs

 

 

2. Panel for items sorting – you can activate or deactivate sorting panel on your portfolio page

 

4. Filter type:

  • jQuery filtering – when you click over portfolio categories on page, they change within this page.
  • Category pages – when you click over one portfolio category, you open page of this one category. To return to previous page, you have to click ‘Back’ button.

 

5. Portfolio select template – this options enables you to change style of your portfolio page

  • Metro bricks – one large and two small tiles as in recent portfolio items block.

  • Square items – portfolio images are shown as square tiles of the same size

  • Circle items – portfolio images are round and of the same size

  • Masonry items – portfolio images are rectangular and on different size

 

6. Post columns – you can choose, how many columns will be on your portfolio page. Maximal number of columns is four.

 

7. Sorting field – you can select type of portfolio items sorting

8. Post order – you can select order of your portfolio items: ascending or descending

9. Show title on portfolio item – you can enable or disable title on hover box on portfolio page.

10. Show portfolio item description – you can enable or disable description on hover box on portfolio page.

11. Display link on portfolio page items – if enabled, you will be able to open single portfolio page on image click; if disabled, images will not be clickable and will be displayed as a simple portfolio gallery.

 

 

There are additional ‘Portfolio category options’, that you can find in edit page of your portfolio page.

 

 

You can set number of items, that will be displayed on page, and select particular categories to be displayed, if needed.

Metro Visual Builder

The new Metro Visual Builder is a powerful tool for creating your pages. It includes about 20 modules, each of which has its own settings. The modules are divided in four sections:

  • content modules

  • presentation modules

  • video modules

  • custom content modules

How does Metro Visual Builder work?

You create a page in section Pages>Add new

Metro Visual Builder is activated by default. That’s how it looks

You can use both blue 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. For this click on ‘add module’ button

and start choosing modules for each column.

Each module has its settings, that you will adjust on your own way.

If you want to delete one section, click ‘delete section’ button.

If you want to delete all sections from your page, simply click on ‘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 columns you need.

Each section has its own row settings

It gives you possibility to set a background color or a background image to each row of your page.

In the background options you can also select type of background repeat, background attachment and to set row paddings, if needed.

To make your page full width, select template ‘Page for Metro Builder’.

 

 

To make page with sidebar and full width slider above the content,

enter slider shortcode to ‘full width shortcode’ field,

select template ‘default template’,

and set type of layout in section ‘select page layout’ (if by default ‘default template’ does not have sidebars).

 

Metro Visual Builder shortcodes

This is a list of Metro Visual Builder shortcodes. You can add them to any post type you need.

The shortcodes will work on pages, where Metro Visual Builder is turned off. If it is turned on, the shortcodes won’t be shown on your page.

First of all, make sure that Metro Visual Builder is turned off.

Add shortcodes only to text tab of the classic editor.

If you add shortcode of the module, that can have some elements, like tiles module and testimonials, you have to duplicate shortcode inside the outer shortcode. Example:

Most of shortcodes contain sample information, like text, titles etc, that must be changed manually.

Content modules

1. Recent portfolio items – this module displays the latest portflio works. You can display works from one or several categories.

[mvb_recent_works main_title=”Recent projects” categories=”” show_meta=”1″][/mvb_recent_works]

2. Recent post row – this module shows latest works from your posts.

[mvb_recent_news main_title=”Recent news” categories=”” no_of_posts=”4″ all_of_posts=”8″ excerpt=”0″ excerpt_length=”12″ unique_id=”mvbacc_52206913ef0fc”][/mvb_recent_news]

3. The content module – this module shows content of your pages.

[mvb_content main_title=”sample box” icon_title=”” css=””][/mvb_content]

4. Text module – you can add any text you need to this module.

[mvb_text main_title=”” effects=”fadeIn” css=”padding-top-90″]Looks like One touchBut it is not one touchLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerciLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diamnonummy nibh euismod tincidunt ut laoreet dolore magna aliquam eratvolutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation[/mvb_text]

5. Blog posts module – this module is for displaying your blog posts

[mvb_blog_posts main_title=”Recent works” categories=”” no_of_posts=”5″ excerpt=”0″ excerpt_length=”25″ thumbnail=”1″ show_meta=”0″ show_data=”1″][/mvb_blog_posts]

6. Tiny post list – this module is for displaying your blog posts in mini format.

[mvb_blog_posts_2 main_title=”” categories=”1,8,9″ no_of_posts=”3″ show_meta=”1″][/mvb_blog_posts_2]

 

Presentation modules

1. Promo row – you can put any promo to this module.

[mvb_promo_row image=”3561″ main_title=”” effects=””]<h2>Hey people! My name is Crumina and let me introduce my new Metro Theme – “Second <span class=”normal”> touch”</span></h2><br class=”mvb_break”><h6>COMRADES! WE MUST INCREASE THE EFFICIENCY AND QUALITY OF WORK IN EVERY WORKPLACE!</h6>[/mvb_promo_row]

2. Our team – this module serves to display information about your team members.

[mvb_our_team main_title=”Our Team” presentation_box=”” css=””][mvb_presentation_box image=”3789″ image_flip=”3790″ main_title=”Connor Gibson” sub_title=”Interface Designer” tw_link=”1″ fb_link=”1″ li_link=”1″ gp_link=”1″ in_link=”” vi_link=”1″ lf_link=”” vk_link=”” yt_link=”” de_link=”” pi_link=”” pt_link=”1″ wp_link=”” db_link=”” sh_keys=”image,image_flip,separator11,main_title,sub_title,content,separator0,tw_link,fb_link,li_link,gp_link,in_link,vi_link,lf_link,vk_link,yt_link,de_link,pi_link,pt_link,wp_link,db_link,separator-effects,effects,css”]Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas faucibus mollis interdum. Curabitur blandit tempus porttitor. [/mvb_presentation_box][/mvb_our_team]

3. Pie chart module – this module enables you to put a circular chart divided into sectors, illustrating numerical proportion.

[mvb_charts main_title=”” presentation_box=”” unique_id=”mvbtab_52319c748c703″ css=””][mvb_presentation_box main_title=”Amazing visual editor” sub_title=”and a small subtitle for typography” icon=”linecon-params” item_size=”normal” percent=”30″ chart_main=”” chart_bg=”” link_url=”#” page_id=”” sh_keys=”main_title,sub_title,icon,item_size,percent,separator,chart_main,chart_bg,separator2,link_url,page_id,content,separator-effects,effects,css”]Touch is fully responsive. And when we say responsive, we mean it won’t only work on mobile devices; it’ll look damn good too![/mvb_presentation_box][/mvb_charts]

4. Tiles module – it enables you to create metro tiles in the theme.

[mvb_tiles main_title=”” tab=”” effects=”fadeIn” css=”padding-top-90″][mvb_tab image=”” tab_title=”Multilingual” color=”36bae2″ color_hover=”ff6565″ icon=”linecon-globe” link_url=”” page_id=”3365″ tile_content=”” sh_keys=”image,tab_title,color,color_hover,separator,icon,link_url,page_id,tile_content”][/mvb_tab][/mvb_tiles]

5. Tabs module – you can put some information to tabs sections

[mvb_tabs main_title=”” heading=”h3″ heading_color=”1e2382″ tab=”” unique_id=”mvbtab_525fe0f5b7fd0″][mvb_tab tab_title=”Tab1″ tab_selected=”0″ sh_keys=”tab_title,tab_selected,content”]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eget ante eget tortor malesuada ultricies placerat suscipit odio. Nulla aliquet, risus et placerat euismod, enim leo auctor justo, at ultrices nulla augue vel nunc. Duis odio lectus, convallis in convallis quis, euismod vitae mi.[/mvb_tab][/mvb_tabs]

6. Vertical tabs – you can put some information to vertical tabs sections

[mvb_tabs_list main_title=”” tab=”” unique_id=”mvbtab_525fe075164b3″][mvb_tab tab_title=”” icon=”linecon-lightbulb” sh_keys=”tab_title,icon,separator,content”]Proin adipiscing cursus odio, nec vehicula diam iaculis quis. Nulla rutrum dapibus lorem ut ornare. Maecenas in libero sagittis, dapibus quam vel, bibendum mi. Ut dictum nunc sit amet auctor sagittis. Nam imperdiet mattis massa, a viverra purus condimentum cursus.[/mvb_tab][/mvb_tabs_list]

7. Accordion module – you can put some information to accordion sections

[mvb_accordion main_title=”” accordion_panel=”” unique_id=”mvbacc_525fdb1ebd20c”][mvb_accordion_panel panel_title=”” icon=”linecon-cloud” sh_keys=”panel_title,icon,content”]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eget ante eget tortor malesuada ultricies placerat suscipit odio. Nulla aliquet, risus et placerat euismod, enim leo auctor justo, at ultrices nulla augue vel nunc. Duis odio lectus, convallis in convallis quis, euismod vitae mi. Nulla non tortor erat. [/mvb_accordion_panel][mvb_accordion_panel panel_title=”” icon=”” sh_keys=”panel_title,icon,content”][/mvb_accordion_panel][/mvb_accordion]

8. Google maps – with help of this module you can display google maps on your site

[mvb_gmaps main_title=”On the map” address=”Ukraine, Kiev” height=”282″ zoom=”14″ effects=”0″ css=”” unique_id=”mvbtab_520b741354005″]<p><strong>Development Park</strong></p><br class=”mvb_break”><p>Marbella Bussiness center Marbella, 12345, Spain</p><br class=”mvb_break”><p>Phone: +34 012 345 678<br />sansikaff@gmail.com</p><br class=”mvb_break”><p> </p><br class=”mvb_break”><p><strong>Design Department</strong></p><br class=”mvb_break”><p>Artstudio Street 45 Marbella, 12345, Spain</p><br class=”mvb_break”><p>Phone: +34 012 345 678<br />sansikaff@gmail.com</p>[/mvb_gmaps]

9. Image module – you can put a single image to this module

[mvb_image image=”3582″ main_title=”About our company”][/mvb_image]

10. Call to action – you can put some call to action text to this module

[mvb_call_to_action button_text=”Buy this theme” icon=”linecon-pencil” new_tab=”1″ link_url=”” page_id=”3365″ description=”COMRADES! WE MUST INCREASE THE EFFICIENCY AND QUALITY OF WORK IN EVERY WORKPLACE!” effects=””]Hey people! My name is Crumina and let me introduce my new Metro Theme – “Second touch”[/mvb_call_to_action]

11. Client logos carousel – this module enables you to show logos of your clients/partners

[mvb_clients main_title=”Our clients” single_client=”” effects=”flipInX” css=”” new_tab=”1″ unique_id=”mvbacc_51ff9703f01e3″ description=”Droin facilisis varius nunc. Curabitur eros risus, ultrices et dui ut, luctus accumsan nibh. Fusce convallis sapien placerat tellus suscipit vehicula. Cras vitae diam ut justo elementum faucibus eget a diam. Etiam sodales a sem vitae fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.”][mvb_single_client image=”3569″ main_title=”Client1″ client_url=”#” sh_keys=”image,main_title,client_url”][/mvb_single_client][/mvb_clients]

12. Presentation box – you can add any information to this module. It will be displayed with the square tile and text under it. You can choose color and icon displayed on tile.

[mvb_presentation_boxes main_title=””]

[mvb_presentation_box image=”3562″ main_title=”Excellent Metro UI style” sub_title=”Great metro interface” color=”” icon=”linecon-sound” alignment=”1″ link_url=”#” page_id=”” read_more=”1″ read_more_text=”Read more” effects=”” disable_flip=”0″ sh_keys=”image,main_title,sub_title,separator,color,icon,alignment,separator1,link_url,page_id,content,read_more,read_more_text,separator-effects,effects,disable_flip,css”]The colorful and stylish metro UI interface will win your attention from the first sight.[/mvb_presentation_box]

[/mvb_presentation_boxes]

13. Presentation big icon – this module is represented by a big ion and some text under it.

[mvb_presentation_boxes_icon main_title=”Our features” presentation_box=””][mvb_presentation_box main_title=”Unbelievable options” sub_title=”Great possibilities” icon=”moon-pencil-3″ icon_color=”36bae2″ icon_hover_color=”ff6565″ icon_size=”80″ link_url=”#” page_id=”” read_more=”0″ read_more_text=”” sh_keys=”main_title,sub_title,separator,icon,separator01,icon_color,icon_hover_color,icon_size,separator00,link_url,page_id,content,read_more,read_more_text,separator-effects,effects,css”]Rich options provide flexibility in customizing each post type or a section of your layout.[/mvb_presentation_box][/mvb_presentation_boxes_icon]

14. Testimonials module – show testimonials of your clients with this module.

[mvb_testimonials main_title=”Testimonials” effects=”fadeInDown” unique_id=”mvbacc_521330146d76e”][mvb_testimonial_user image=”3793″ main_title=”Sandy Rivers” client_job=”Microhard main developer” sh_keys=”image,main_title,client_job,content”]Just wanted to say hi and tell the world that this theme is by far the most advanced theme that we have purchased from Themeforest. It looks great and it feels that everything has been sorted out well.[/mvb_testimonial_user][/mvb_testimonials]

Video modules

1. Video module – to this module you can add video links.

[mvb_video main_title=”Sample video”]http://www.youtube.com/watch?feature=player_detailpage&v=XjLsBUQzL9c[/mvb_video]

Crumina Page Slider

Crumina Page Slider Installation

After you have installed the theme and imported all integrated plugins, you can start creating your sliders using Crumina Page Slider plugin.

  1. Go to Page Slider section in your admin dashboard.

  2. Click ‘Add new‘ button.

  3. Type name of your slider into the field ‘Slider name‘.
    second-slider1

  1. Now you can start customizing your slider using the settings below.

All slider settings are divided into 4 sections:

  1. Basic settings

  2. Slider elements

  3. Select content

  4. Select colors

Let’s review all of them by turn.

Basic settings

second-slider2

There are 7 options in basic settings

1. Select slider template.

There are two templates available for slider –

 – 1 big and 4 small tiles (like in Second Touch theme that you can view under this link http://theme.crumina.net/second/second-layout-2/)

 – 1 big and 2 small tiles (like a standard One Touch slider style http://theme.crumina.net/onetouch2/ )
second-slider3

 

2. Choose sorting type of Posts/Pages. You can choose sorting type of your slider elements (date, post ID, slug, title and random order)
second-slider4

 

3. Choose order of Posts/Pages. You can choose ascending or descending order of your slider elements.
second-slider5

 

4. Number of posts slides. This option enables you to display so many slider you want. One slide is a number of posts that is currently visible in the content section of your page.

5. Number of slides of other post types. This option has the same function as the previous one. But it determines slides of other post types, like portfolio and products.

7. Number of pages slides. This option determines number of pages slides that will be displayed in slider.
second-slider10

 

7. Cache time. Set cache time for your slider elements for better slider performance. It is not recommended to leave this field empty or to put ‘0‘ value.
second-slider11

 

 

Slider elements settings

With help of these settings you will be able to determine, what slider elements will be displayed in slider tiles.

second-slider6

Here are these options:

1. Enable post/page title. If option is checked, title will be shown on your slider tiles. If the option is unchecked – title will not be shown.

2. Enable post type icon. If option is checked, icon will be shown in front of the title.

3. Enable post category. If option is checked, category box will be displayed in the upper left corner of the tile.

4. Enable post description. If option is checked, short description will be displayed on the tile. If unchecked – it will be hidden.

5. Limit description. You can decide how many words will be shown in tile description.

6. Enable link to full page. If option is checked, slider elements will be clickable.

7. Choose type of link to full page. You can choose if only the title of post is clickable or the entire box.

8. Delay between cycles in seconds. This option allows you to activate auto-slide option for your slider. Simply add any value in seconds, and the slider will start scrolling autmatically.

second-slider7

9. Start from the first slide. By default the slider is opened from the middle slide on page load. If you want to make it open the first slide, check this option.

second-slider19

 

 

 

Slider content settings

It is possible to display different post types in one slider – portfolio, posts, products and pages. Choose custom post types following description on the right from the post types list.

second-slider8

 

 

Select colors settings

These settings enable you to set colors for different slider elements.

1. Set category and scrollbar color. This color will be the same for categories boxed and scrollbar of the slider.

2. Set elements background color. This option determines background color of all tiles (if set in Second Touch style) and of even tiles (if set in One Touch style).

3. Set odd elements background color. This option determines background color of odd tiles (only for slider set in One Touch style)

4. Set opacity. You can set hover box opacity of all slider elements.

second-slider9

 

 

 

After all settings are cinfigured, click ‘Save changes‘ button and return to main slider page by clicking on ‘Back to the list‘.

 

second-slider12

Adding slider to page

  1. Create a page in section Pages>Add new.
  2. Give a title to your page.
  3. Copy the slider shortcode from “Page slider” section.second-slider13
  4. Paste the slider shortcode to the ‘Shortcode‘ module of Metro Visual Builder or to another content field, if Metro Visual Builder is not used on that page.
    second-slider14
  5. Select page template ‘Page for Metro Builder‘ (if your theme is One Touch) or “For page builder” (if your theme is SecondTouch)
    second-slider15
    second-slider16
  6. If you want to make the slider fullwidth, add the following rules to Row settings>Additional CSS rules field:
    max-width:100%;if your theme is Onetouch;
    second-slider17
    width:100%;if your theme is Secondtouch.
    second-slider18
  7. Save the page to view the slider on the frontend.

 

 

Display post title instead of the icon in small tiles of Crumina Page Slider

You have to edit
templates/template-1b-4s.php file on line 214.
Find
<a href=”<?php the_permalink(); ?>” class=”link”> </a>
and replace it with this line

<a href=”<?php the_permalink(); ?>” class=”link”><?php the_title(); ?></a>

After that you have to style your titles to make them correspond theme style.

Add the CSS codes below to Options>Main Options>Custom CSS (or to Options>Advanced Options>Custom CSS in Onetouch theme)

.crum-slider .small-element .entry-thumb a.link {
font-size: 20px;
font-weight:600;
color: rgb(103,163,0);
padding: 25% 7px 0 7px;
line-height: 25px;
}
.crumina-slider-wrap .entry-thumb > a.link:before {
content: none;
}

You can change values to any other you need

Contact page

Contacts page is created with template ‘Contact Page’.

 

 

This template have fixed structure – Google map in full width, and below contact information on left and contact form on right side.

 

 

To get such template, you need only to create page in Pages section and select template type ‘Contact page’.

 

Though, Contact page can be customized with Metro Visual Builder and additional options, that are located in Options>Contact options.

 

Let’s review all of them:

 

1. You can add additional blocks from Metro Visual Builder above the map, like it is shown on this page

 

 

2. It is possible to remove google map if needed. This option is located in Options>Contact options>Display map on contacts page?

 

 

3. It is possible to set height of google map in Options>Contact options>Height of google map

 

4. You can change map zoom level in Options>Contact options>Zoom level

 

5. Address on google map is set in Options>Contact options> Address on google map. You can add several locations if needed.

 

6. It is possible to replace default contact form with the custom one. You can do this in Options>Contact options>Custom form

 

Custom forms can be created with additional plugins, like Contact form 7, Gravity forms and others.

 

7. Assign email address, to which emails, sent from contact form, will arrive.

 

8. Set protection type from spammers – question or captcha. You can do this in Options>Contact options>What protection to use

9. Contact information, that is displayed in front of contact form, can be changed in edit page, ‘Additional text block’.

Theme localization

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

You can translate them in two ways:

WPML String Translation – this is a paid plugin with its own documentation http://wpml.org/

POedit software – free translation editor.

All Crumina themes are fully translated into two languages – Russian and German. Translation files for Russian and German and default trasnlation file are located in:

“lang” folder (Secondtouch, Maestro, Glider)

“translation” folder (Onetouch, Atlantis, Embrace)

 

How to translate with POedit into a different language?

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

2. Open crum.pot or default.po file in it (depending on the theme you are using).

trsnslation-2

3. Begin translating strings into your language.

trsnslation-3

4. When all strings are translated, save the file in .PO format. Example: nl_NL.po, fr_FR.po, he_IL.po etc.

trsnslation-4

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

trsnslation-5

6. Upload both files , .PO and .MO, via your FTP client to translation/lang folder. Translation will be applied automatically, if you have installed WordPress in corresponding language.

Icon manager

Apart from icons available in the theme by default, you can use your own icon packs.

Go to “Appearance>Icon Manager” section. Click “Upload new icons” button and upload your icon packs.

icon-manager1

 

Additional icon packs you can download or generate from your svg files using Icomoon service.

You can select free icons suggested in the app.

icon-manager2

 

icon-manager3

Or import your custom icon pack to IcoMoon service.

icon-manager4

icon-manager5

icon-manager6

In Section “Preferences” give your icons pack title and leave class prefix as is.

icon-manager7

 

Download your icon pack .

icon-manager8

 

Upload your icon pack via Appearance>Icon Manager and refresh the page. The icon pack will appear in Icon Manager section.

icon-manager9

icon-manager10

 

 

 

Styling options. Color schemes

Styling options are located in Options>Styling options

 

Let’s review all available options briefly.

 

1. Main site color, secondary site color – these colors determine theme color scheme. You can select any color combination you like!

 

2. Links color option – you can assign links colors in regular, active and hover state.

3. Boxed body layout – if checked, site content will obtain borders on both sides.

 

 

4. Body background image – you can set background image. This option works only in boxed body layout. Background image will be displayed outside borders.

 

 

5. Body background image repeat – if you set background pattern as body background image, you can set repeat type.

6. Fixed body background image – you can make your background image. When you will scroll down the page, image will be static.

7. Body background color – you can set body background color instead of image. This option works only in boxed body layout. Background color will be displayed outside borders.

 

8. Content background color – this is color that will be displayed in the content section, if your layout is set to boxed style.

9. Content background image – you can set image instead of color for your content section.

 

If your layout is set to boxed style, it will be displayed in the content section.

 

 

10. Content background image repeat – if you set background pattern as content background image, you can set repeat type.

 

11. Footer background color – this is color that will be displayed in footer of your website.

12. Footer font color – you can set color of footer font separately from body font color.

13. Custom footer background image – you can upload your background image to be displayed in your footer.

14. Footer background image repeat – if you set background pattern as footer background image, you can set repeat type.

Typography

Theme default font can be changed in Options> Typography section.

 

In this section you can set up fonts for body and site headings separately.

In each subsection you can select:

 

font family

font weight

font size

and font color

 

Layouts settings

Layouts settings are adjusted in Options>Layouts settings

 

 

In this section you can adjust position of sidebars in each layout type.

 

Single pages layout determines position of the sidebars on pages that are created with ‘default’ template.

 

 

NOTE: It is possible to set individual layout for pages, created with ‘Default’ template in edit page.

 

 

Archive pages layout determines position of sidebars on blog page, posts categories pages, serach pages by tags and author, and pages created with template ‘News page’.

 

 

NOTE: It is possible to set individual layout for pages, created with ‘News Page’ template in edit page.

 

 

Single posts layout determines position of sidebar on single post pages, that are created in section ‘Posts’.

 

Search results layout determines position of sidebar on page with search results.

 

404 page layout determines position of sidebars on 404 page.

Advanced options

Advanced options

Advanced options serve for your additional codes, that you want to add to your theme.

 

You can find them in Options>Advanced options.

 

 

 

They include three fields:

 

Tracking code – you can paste your tracking code generated with Google Analytics service.

Css Code – you can paste your css codes to this field

Js Code – you can paste your custom js codes here

 

Widgets

There is a number of widgets in the theme, that can be used in sidebars.

To add widgets to sidebars go to Appearance>Widgets section.

 

On the left section you will see all widgets available in the theme.

 

On the right side you will see sidebars. If you create custom sidebars, they will be displayed with the default sidebars.

 

To add widget to a sidebar, click with left mouse over widget and select from the list of sidebars the one, to which you want to add a widget.

Custom sidebars

Custom sidebars are created with help of Easy Custom Sidebars plugin, that is integrated in the theme.

Go to “Appearance>Theme sidebars” section and create new custom sidebar

custom-sidebar1

 

Start adding pages/other post types, on which standard sidebar will be replaced by your custom one.

custom-sidebar2

 

In “Sidebar properties” section select which sidebar will be replaced by your custom one.

custom-sidebar3

 

Click “Save sidebar”. After that go to “Appearance>Widgets” section and add widgets to your custom sidebar

custom-sidebar4

 

Woocommerce shop items import

If you want to import woocommerce shop items, follow steps below.

 

First of all install Woocommerce plugin.

 

Simply go to section Plugins>Add new> in search field enter Woocommerce and click ‘Search plugins’

 

 

Install plugin, that is the first in results

 

 

 

Go to Tools>Import>Wordpress

 

 

Click ‘Install now’

 

 

Click ‘Activate plugin and run importer’

 

 

Select from your computer location file called ‘Woocommerce_demo_items.xml’ , that is located in ‘Demo_Data’ folder and click ‘Upload file and import’

 

Check ‘Download all files and attachments’ and click ‘Submit’

 

 

Click ‘Have Fun!’

How to add comments to page

This method works for all Crumina themes.

1. Find the needed template file where you want to add comments.

To ensure the file you edit is correct, compare the name of the template in Page Atributes box of the edit page with Template name in the top part of the template file.

comments-page1

comments-page2

2. Insert the following code after tag </section>

<div class="row">
<?php global $withcomments;
$withcomments = 1;
comments_template( '/templates/comments.php' );?>
</div>
comments-page3
3. Save template.
Suggest Edit