Theme Installation

After theme purchase, download theme package from your Themeforest account.

Extract it and find installable “atlantis.zip” in “THEME IN THAT FOLDER !” folder.

Log in your domain, where you have previously installed WordPress.

Go to Appearance>Themes>Add new>Upload theme and upload installable atlantis.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.

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.atlantis-update1
  5. Unzip ‘atlantis.zip‘ archive and upload folder ‘atlantis‘ 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 Theme Options>Main Options>Item Purchase Code field.

a-update2

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

a-update1

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.

Single post

How to create a post?

 

Posts are created in “Posts>Add new section”.

 

There are 8 formats available for posts:

 

standard – this is a simple post, that means that no specific post formats are applied to it.

gallery – this post type shows image gallery in form of image slider and image thumbnails under it.

image – A single image. The first <img /> tag in the post could be considered the image. Alternatively, if the post consists only of a URL, that will be the image URL and the title of the post (post_title) will be the title attribute for the image.

quote – this is quotation. The content may be hold by a quote at the beginning of the text.

status – this is short status update, similar to Twitter status update.

video – A single video. The first <video /> tag or object/embed in the post content could be considered the video. Alternatively, if the post consists only of a URL, that will be the video URL. May also contain the video as an attachment to the post, if video support is enabled on the blog (like via a plugin).

audio – An audio file. Could be used for Podcasting.

chat – is a chat transcript, like so:

John: foo

Mary: bar

John: foo 2

More information about post formats you may find here https://codex.wordpress.org/Post_Formats

 

 

It is required to link your post to any category, that you have previously added in section Posts>Categories.

 

 

Add tags that will be further used for search function and additional navigation.

 

 

Finally, add featured image, that will be displayed on your blog pages and slider.

 

 

It is possible to change layout of your post too. This is regulated in Theme Options>Layouts settings>Single posts layout

 

 

Additional options settings for single posts you can configure in Theme Options>Posts list options>subsection “Inner post page options”

 

 

The post is ready.

Blog page

Blog page is created with “News Page” template.

After the page is created, all posts, that you created in Posts section, will be displayed on it.

Configure settings of blog page in “Select blog parameters” section.

Here you can:

  • choose number of columns on page;

  • set width and height of featured images. If you leave those fields empty, there will be applied settings set in Theme Options>Posts list options>Post thumbnail width (in px)/Post thumbnail height (in px) option;

  • put number of posts that will be displayed on one page;

  • limit posts display to some categories.

In “Page parameters” section you may put

  • full-width block;

  • and change layout of your blog page.

Detailed instruction on Header Style option and Stunning header options, please, find in “Stunning header (Page title)” and “Header options”tutorials.

Set featured image to your blog page, if you are going to show it in Page Slider.

Other blog options, like additional information, excerpt length, pagination type and thumbnail size, you can configure in Theme Options>Posts List Options section.

Single portfolio

How to create portfolio?
Single portfolio is created in “Portfolio>Add new” section.
The first thing you see, when you create a portfolio item, is a standard WordPress editor. There you can add any content if needed – images and text. It will be always displayed at the bottom of the portfolio item.
Under the text editor you will see “Portfolio video” section. You can add video links and upload self-hosted videos to corresponding fields.
In section “Portfolio description” add description of your portfolio item. The position of this text is regulated in Theme Options>Portfolio Options>Portfolio text location option.
“Projects details” section lets you add custom fields of your portfolio item. It can be author name, for example.
“Images gallery” section enables you to add image gallery to your portfolio item. Simply add imaged from Media library and reorder them in any way you like with drag and drop function.
It is required to put featured image to your portfolio item.
It is possible set up the featured image size of the portfolio item  in “Masonry thumb size” section.
Please, NOTE, this option is applied only on portfolio page in Masonry style.
Lastly, link your portfolio item to some categories, that you have previously created in Portfolio>Categories section, and add portfolio tags if needed.
Additional options for portfolio, you will find under “Theme Options>Portfolio options” section.

Custom portfolio slug

By default slug for single portfolio items is “my-product”.

 

 

There is option in the theme to change this slug to your custom one. It is located under Theme Options>Portfolio options>Custom slug for portfolio items.

 

Type your custom slug into the field.

 

 

After that go to “Settings>Permalinks” section and resave permalinks.

 

 

The slug is changed. It is applied to your single portfolio items and portfolio category pages.

Portfolio page

Portfolio page is created with “Portfolio” template.

 

Go to “Pages>Add new” section. Create a page and choose “Portfolio” template in “Page Attributes” section.

 

 

The page is generated and shows all your portfolio items, that you created in “Portfolio” section.

 

In the upper right corner of the edit page you will see “Portfolio category options” section. There you can choose categories and number of portfolio items that will be displayed on your portfolio page. Or you can leave it empty to show all of your portfolio works.

 

 

In “Page Parameters” section you can customize your portfolio page with existing options:

you can add full with block that will be displayed above all your portfolio works

you can change layout of your page.

 

 

Set featured image for your portfolio page, if you are going to display it in Crumina Page Slider.

 

 

Detailed instruction on Header Style option and Stunning header options, please, find in “Stunning header (Page title)”  and “Header options”tutorials.

 

 

Additionally to already described options, you can configure your portfolio page in Theme Options>Portfolio Options section.

 

 

There you can set:

main portfolio page, to which breadcrumbs will lead,

choose portfolio template for your portfolio page

adjust sorting type and order of portfolio items on your portfolio page.

 

 

Please, be attentive! If you choose portfolio template “Columns”, you will see more options to configure.

 

Creating a page. Visual Composer

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

 

Types of layouts

In the theme it is possible to choose types of layout for all post types: pages, single posts, single portfolios, blog pages, portfolio pages, search results, 404 page and woocommerce shop page.

 

 

These settings can be overwritten with individual settings in “Page Parameters” section of editing page.

 

Header options

Header options of the theme regulate style of header of the site.

 

Header options are located in “Theme Options>Header Options” section.

 

 

There you can put logo of your site in two variants – simple logo and retina logo, that will be displayed on retina devices.

 

 

Fixed header option enables you to turn on/off sticky menu.

 

 

Header style option offers you 4 variants of your header:

 

left-aligned – logo on left, menu on right;

right-aligned – logo on right, menu on left;

centered – logo and menu are centered;

semitransparent – part of stunning header covers logo and menu; this section is half-transparent.

 

Header style may be overwritten on particular pages with Header style option, that is available in settings of any page.

 

Top panel settings

Top panel is a narrow stripe above logo and menu. It is customizable within settings, that you can find in Theme Options>Header Options>Top panel options subsection.

 

 

There you can turn on/off:

 

top panel itself;

search field;

social icons.

 

 

You can choose style of your top panel – make it full width or boxed.

 

 

And finally there are options Left side and Right Side. There you can choose which content will be displayed on left and right sides of the top panel.

 

It can be:

text;

menu;

Woocommerce cart;

WPML Switcher;

or nothing.

 

 

Please, note, if you choose Woocommerce cart (http://wordpress.org/plugins/woocommerce/) or WPML switcher (http://wpml.org/), you have to install those plugins first.

Stunning header (Page title)

Stunning header is section with page title, breadcrumbs and background.

Stunning header options are located in Theme Options>Header Options>Stunning header options.

 

The option “Stunning page header” enables you to turn on and off stunning header on pages. When it is off, it displays page title (without background and breadcrumbs) on pages created with Default template. On other templates, it removes stunning header completely.

 

 

You can turn on/off breadcrumbs with option “Breadcrumbs”.

 

 

There are four variants of stunning header. Page title and breadcrumbs can be:

 

aligned on left;

aligned on right;

aligned in center;

or stand opposite to each other in one line.

 

 

Stunning header has typography options, where you can set font family, font size and font weight of the page title.

 

 

You can also choose color of your title in stunning header.

 

 

PLEASE NOTE, typography options work only if stunning header is turned on. If it is off, there are applied settings from Theme Options>Typography section.

 

Finally, you can set background color/image on your stunning header and set desired height of stunning header.

 

 

All these settings can be overwritten by custom settings in “Stunning header options” section inside each page.

 

Styling options

Design of the theme is regulated in “Theme Options>Styling Options” section.

Styling options are visually divided into three subsections:

  • main site color;

  • body background;

  • footer section options.

Main site color

At the top of Styling options section you can see main site color. It determines main color composition of your website.

Body background options enable you to

  • choose layout type of your website – boxed or full-width;

  • put background color/image to your website. If you chose boxed layout, you can put both body background (outside borders)and content background (inside borders)colors/images.

  • Fix position of your background image.

Footer section options include parameters for footer font color and footer background color/image.

Typography settings

Font settings you will find in “Theme Options>Typography” section.

 

Here you can choose font for body and all heading types – h1-h6.

 

 

Font parameters allow you to choose

font family;

set font size;

font weight;

text alignment;

and color of the text.

 

Login page

Standard WordPress login page can be customized in “Theme Options>Login Customization” section.

 

Here you can:

 

put login of your site, that will be displayed on login page;

paste page link, to which you will be redirected after you have logged in your website;

set background of your login page.

 

Coming soon page

There is separate page template for coming soon page. Create a page and choose “Coming Soon” template in “Page Attributes” section. Click “Publish”

 

 

Go down the page and find “Coming soon page options” section.

 

Fill in all fields in this section. And click “Update”.

 

 

Coming soon page is ready!

Contact page

Contact page is created with help of “Contact page”template. Simply create new page with this template and click “Publish”.

 

 

You get default contact page with contact information on left and contact form on right.

 

 

Contact information is edited in “Additional text” section in edit page.

 

 

Default contact form can be changed to your custom one. It can be created with plugin like Contact Form 7 http://wordpress.org/plugins/contact-form-7/ or similar plugins. Add custom form shortcode to “Custom form shortcode” field in edit page.

 

 

NOTE: email address, to which messages will be sent from contact form, is added in Theme Options>Advanced Options>”Contact options” section.

 

 

Contact Page from demo site is created with “Team Member” and “Google Map shortcodes” from Visual Composer.

 

 

You can add any other elements to your contact page using this tool as well.

 

Contact page template has additional page parameters, like any other page type in the theme.

 

You can:

 

put full-width shortcode to the page, that will be displayed above page content;

choose custom layout type for the page.

 

Detailed instruction on Header Style option and Stunning header options, please, find in “Stunning header (Page title)”  and “Header options”tutorials.

 

 

 

 

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

Generate custom icon font

Additional icon packs can be generate from your svg files by 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. The imported icons must be in SVG format.

icon-manager4

icon-manager5

icon-manager6

Under Preferences enter name of your custom icon pack and class prefix. They must be the same.

Under CSS Selector choose ‘Use attribute selectors’ option.

 

When you are done, download your icon pack .

icon-manager8

IMPORTANT NOTE: Multi-colored icons can’t be converted to icon font. Your icons must be one-colored.

 

Upload your icon pack via Appearance>Icon Manager and wait until the page is refreshed automatically. The icon pack will appear in Icon Manager section.

icon-manager9

icon-manager10

 

 

 

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/

Loco Translate – if you don’t like editing PO files, this plugin is a good alternative for translating through admin dashboard https://wordpress.org/plugins/loco-translate/

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

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