Glider theme installation

After theme purchase, download theme package from your Themeforest account.
Extract it and find installable “Glider.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 Glider.zip archive.
Activate the theme and begin installing and activating plugins.
If you want to import demo data, go to Appearance>Installer panel
and click “Run installer” button.
After that don’t do anything. Simply wait till the import process is completed and you see “Content Installed Successfully !” messages.
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.

Theme installation with full demo data

In order to get the theme with full demo data on your site, it is required to install the theme with help of Duplicator plugin.

Before starting installation, make sure that the database of this domain is separate and there is no any important information on it, because Duplicator will clear its database after you perform installation.

When you are ready to start installing the theme, please, perform the next steps:

  1. Download theme package from the ‘Downloads‘ section of your Themeforest account.
    gd13
  2. Unzip it and find ‘DemoDuplicator_files‘ and ‘DemoDuplicator_installer‘ files there. Click over them to download to your computer.
    gd14
  3. After you downloaded installer.php file and the theme zip archive to your computer, upload them to the root location of your domain.
    gd1
  4. Enter your site link in the browser input line as follows your-site-name.com/installer.php

    gd2-2

  5. There appears Duplicator Installer window, where you have to enter the following information:
    hostname;
    name of your database;
    username of your database;
    password of your database;
    – and switch to Connect and Remove All Data radio button.
    gd4
  6. After you entered all needed information, click on the Test Connection button to check if everything is correct. If you see Success, you can proceed installation. If you see Fail, you need to double check the above entered data.
    gd5
  7. After you set up connection, check ‘I have read all warnings & notices‘ message and press Run Deployment button.
    gd6
  8. Confirm the action.gd7
  9. The process has started and you see such window with running progress bar.
    gd8
  10. When the process stopped, click on the Run Update button.
    gd9
  11. When the update process is finished, click on the Test site button.
    gd10
  12. Now you can log in your with the following credentials:
    – username – admin
    – password – 1234567890

13. The theme is installed and now you need delete installer files. You can do this from the Duplicator-Installer window or directly from your admin dashboard.

gd3

 

 

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.glider-update1
  5. Unzip ‘glider.zip‘ archive and upload folder ‘glider‘ 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.

g-updates2

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

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

Page Builder

Page Builder by SiteOrigin plugin is used as the main page building tool in the theme. There are about 50 modules, that you can use to create any layout you need.

To get started create a page over Pages>Add New section. Enter the title of the page and switch to ‘Page Builder‘ tab.

page-builder1

Start adding widgets by clicking on the ‘Add Widget‘ button.

page-builder2

In order to add a new row click on the ‘Add Row‘ button and configure row settings such as number of columns and width of the columns.

page-builder3

page-builder4

Once you added widgets to the rows, you can configure advanced row settings by hovering over the Tool icon on the right side of the row and clicking on the ‘Edit row‘ button. In the popped up  window open those three tabs that are located on the right column of the window with ‘Row styles‘ title.

page-builder5

page-builder6

The settings you can adjust are the following:

  1. Attributes tab:
    Row Class – you can add extra class name for the row;
    Cell Class – you can add extra class name for the cell;
    CSS Styles – you can add your custom CSS rules that will apply only to that particular row.
  2. Layout tab:
    Bottom Margin – you can specify how much empty space will be under the row;
    Gutter – if there are several columns in the row, you can add some space bwtween them;
    Padding – you can also specify the inner space around the entire row;
    Row layout – you can keep standard width of the row or make it full-width or full-width stretched.
  3. Design tab:
    Background color – you can fill your row background with some noce color;
    Background image – or you can add an image to the row background;
    – Background Image Display – if you set a background image, you can select style of it with this option;
    – Border color – if needed select a border color for the row.

If you want to delete some row, hover over the Tool icon on the right side of the row and click on the ‘Delete row‘ button.

page-builder7

After you added all page elements save the page. That’s it! 🙂

Testimonials

You can create testimonials in the section “Testimonials” in admin panel.

In the editing page you are able to type text of the testimonial, put information about author in fields

“Author of testimonial”, “Author additional” and set features image (e.g. photo of the author)

When you have created a number of testimonials you can put them to your page via Page Builder using the “Theme: Testimonial display” widget

In the editing window, you will see a number of settings

When you have set up your testimonials, click “Done”.

Clients/partners block

You can create Clients/ Partners items in the section Clients/ Partners in the admin panel.

Click “Add new”, add some text, if needed in the text field, and set featured image.

When you have made several Clients/ Partners items, you can put them on your page via Page Builder, using “Box: Partners/ Clients list” widget.

In the editing window, adjust settings for the widget and click “Done”.

Features blocks

You can add your features in the section “Features blocks” in your admin panel. Simply click “Add new”. In the editing page you can type text of the feature and in the section “Feature box options” you can select any icon you want, which will be displayed nearby.

When you have created a number of features, you can put them to your page via Page Builder, using “Box: Features” widget.

In the editing window, you will be able to set up features settings, like title, link to full page, order of display, number of columns etc.

When you have finished customizing your features, click “Done”.

Price tables

To create Price Tables go to the section Price Tables>Add new.

In the editing page, create so many columns you need, by clicking on “add column”, and fill in all the required fields in each column.

Click “Publish”.

In the block “Shortcode” on the right side of the editing page, copy shortcode of the Price Table and insert it to the “Theme: Do Shortcode” widget in Page Builder.

      

Widgets

On the pages you create, you often use sidebars. To put some widgets to them, you have to go to the section Appearance>Widgets. On the left side of the page, there are all available widgets, which you can put to your sidebars. On the right side, there are all sidebars, including custom sidebars, which you have previously created in the section “Sidebars”.

Simply click on any widget, holding it, and drag to the sidebar.

Adjust settings for this widget and click “Save”

You can put several widgets to one widget.

Custom sidebars

Custom sidebars are created with help of Easy Custom Sidebars plugin. It is a free plugin and is available in the WordPress  repository by this link.

Install and activate the plugin under Plugins>Add New.

Go to “Appearance>Theme sidebars” section and create a 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

 

Glider menu customizer

Menu can be created in Appearance>Menus section. Type title of your menu and click on the ‘Create Menu‘ button.
You may add your menu items using any section in the left column.
For example, add menu items from “Pages” section. Simply select those pages you want to have in your menu and click on the ‘Add to menu‘ button.
You can reorder your menu items with the handy drag and drop function.
Create submenus – simply drag menu items a little to the right side.
When you finished building your menu, click on the ‘Save Menu‘ button.
After you have added all menu items, begin customizing your menu.
Just click on small triangle to open menu item.
Configure settings of your menu item.
Here your can put icon for your menu item. Icons can be set not only for parent menu items, but for submenus too.
You can display mega menu instead of submenu under your menu item. For this you have to create mega menu in the ‘Mega Menu‘ section of the admin dashboard.
After you have created at least one mega menu, you can choose it in ‘Enable mega menu’ dropdown.
You can also add short description to your menu and submenu items. It will be displayed under menu title.
Now you have to assign your menu to the main menu location.
For this switch to ‘Manage Locations’ tab and select your menu as main menu. The same you can do for footer menu, if you you want to have one.
PLEASE NOTE, if you used the main theme and then decided to switch to the child theme or to another theme, you have to assign menu to the main menu location again from Appearance>Menus>’Manage Locations’ tab.

Crumina slider

To create a new Crumina slider, go to Crumina Slider section>Add new section.

Enter title of your new slider and configure settings given below:

g-page-slider1

 

  1. First of all select sorting type of the slider elements in Choose Sorting of Posts/Pages dropdown.
  2. In Number of Posts/Pages dropdown you can select number of items that will be visible in one slide. For example, if you choose 4, there will appear 4 elements in the slide.
  3. In order to add elements to the slider, select them in Slider Items from Posts/Pages window by holding SHIFT button and clicking on the needed items with the mouse.
  4. Next step is to choose Order of posts/pages – ascending or descending.
  5. Limit description(number if chars) option allows you to set the number of symbols, that will be displayed in the description popup window. Please, note, if your post or page is created with Page Builder or Visual Composer plugins, description won’t be shown in the slider. To make it appear, you need to add a custom excerpt to such posts/pages.
  6. More Separator option allows you to add a custom separator in the end of the description. It can be ellipsis or ‘Read More‘ text etc.
  7. From the Set Slider Effect option you can select the way the slides will be replacing each other.
  8. Set Slider Timeout option enables you to set the speed of animation.
  9. Auto slider speed(ms) option determines the pause between slides change.
  10. Background color – you can set the background color of the description window.
  11. Opacity – select opacity of the description window.
  12. Button color/active button color – you can select the color of the scroll bar.
  13. Date – if checked, date will be shown above the title of the post/page.

 

When you’ve finished configuring your slider, click on the Save Changes button. The slider obtains its shortcode, that can be further added either to the text field in classic editor, or to the Text block in Visual Composer, or to the Theme:Do shortcode widget in Page Builder, depending on which tool you use to create a page.

g-page-slider2

 

 

 

Video post

To create a video post, go to Posts>Add new tab. Give title to your post and check ‘Video‘ post format in ‘Format‘ section of the page.

g-video1

After that scroll a little bit down to ‘Post Video‘ section. There you can add:

  • Youtube video link;
  • Vimeo video link;
  • Self hosted video file in mp4 format;
  • Self hosted video file in webM format.

g-video2

Once done, add a featured image to your post, assign it to some categories and tags and click  on ‘Publish/Update‘ button.

g-video3

 

Font manager

Typography of the theme can be configured with Google Fonts WordPress plugin, that comes bundled with the theme. First of all. make sure that you installed it and activated while installing the theme. If not, you can always do this in Appearance>Install Plugins section of your admin dashboards.

Once it is done, go to Appearance>Fonts to create a new font rule.

Click on ‘New font rule‘ button to open editing window.

Type selectors of the text elements in ‘Enter selector here‘ field, like body, div, p, h1, h2, h3 etc.

If you want to give one font rule to several elements, you have to enter selectors separated by commas

You can set up font family, font style, font size, color and other parameters with given options. All of them will be displayed in the large text field on the right side.

After you have finished customizing your font rule, click on ‘Save all changes‘ button.

Here is the list of the most used selectors:

#top-menu .link-text – for menu items text

h1, h2, h3, h4, h5, h6 – for all levels of headings

body, div, p – for the whole body, paragraphs and block elements

.top-text .subtitle – for subtitle in the top panel

.top-text .title – for title in the top panel

.top-text – for text in the top panel

Contacts page

You can create your contacts page in two ways:

1. Using the page template Contacts page. Go to Pages>Add new section, give title to your page and select page template Contacts page in Page attributes box. Click on Publish button.

In the bottom of the editing page, there appears ‘Additional text fields‘ section. You can type your corporate address and any other information there. Click on Update button to save changes.

The additional settings like:

  • custom contact form
  • Googel map(on/off)
  • Google map address
  • height of Google map
  • email address of the recipient…

you can regulate in Options>Contact page options section.

If you want to have team member blocks on your contact page, like shown on the screenshot below, you need to do the following:

Create a page, select Contacts page as a parent page, and select page template Team member page in Page attributes section.

In the ‘Boxed page background options‘ section, you can type member profession and a short description, that will be displayed in the team block on the contacts page.

2. Using Page Builder widgets

If you want your contact page look differently from that one in the demo, you can create it in Page Builder, using such widgets like:

– ‘Cr: Text Block’ for any additional information. This widget supports all HTML tags.

– ‘Theme: do shortcode’ for your custom contact form shortcode.

– ‘Box: Google map’ if you want a map be displayed on your contact page.

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.

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.

Suggest Edit