Theme installation

After you have purchased the theme, go to “Downloads” tab in your Themeforest account and download theme package to your computer.

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

e-install1

 

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

Go to Appearance>Themes>Add new>Upload theme and upload installable Embrace.zip archive.

e-install2

 

Activate the theme and begin installing and activating plugins.

e-install3

e-install4

 

 

 

 

 

If you want to import demo data, go to Appearance>Installer panel section and press “Import” button.

Before importing demo data, make sure that you didn’t install WordPress Importer plugin or it is inactive, since it may conflict with theme’s importer and can interrupt the import process.

e-install5

 

After that wait till the import process is completed and you see “Import is completed.” messages.

e-install6

 

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.

e-install7

 

More information about child theme you can find in this documentation article.

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

e-updates2

 

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

e-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 Theme Options > Social Networks API section and find Map api key field there.
  3. Insert your API key and save settings.
    google-map-api-embrace
  4. When you are ready, you can add map on your pages via Visual Composer editor.

Page building. Page templates

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

The content can be added either withthe default WordPress editor of with Visual Composer.

page-build2

There are 7 page templates that can be used. You can select them in “Page attributes” section.

page-build1

 

Default template – is a standard page template.

No page header – template without page title.

Blank page – has no header and footer. Displays only content part.

Coming soon – template for maintenance mode.

News page – blog page, that shows summary of your posts.

Portfolio – shows summary of your portfolio items.

Contact page – special template with contact form and google map.

 

Each template has its settings. After you have selected template and have clicked “Update” button, pay attention to the settings in “Options” section.

page-build3

There you can change:

– header options;

– stunning header options;

– page parameters.

 

Select what settinsg you want to edit, and the settings window will appear below.

page-build4

 

Apart from these parameters some templates, like coming soon, news page, portfolio and contact page templates, have their specific settings.

There are additional settings for blog and portfolio pages too. You can adjust them in Theme options>Posts list options (for blog page) and Theme Options>Portfolio options (for portfolio page).

 

Visual Composer in Embrace

Single post in Embrace

Create posts in “Posts>Add new” section.

There are 7 post formats, that are displayed in tabs horizontally above the post title.

single-post-embrace1

Select post format you like and add content to the content fields.

Assign category to your post, add tags and set featured image.

single-post-embrace2

If you want to show featured image and author information in the post, go to Theme Options>Posts list options>Inner post page options and adjust the corresponding settings.

single-post-embrace4

If needed, adjust settings of header and stunning header, that will be applied only for this particular post.

single-post-embrace3

Save changes after the post is ready.

Blog page. Posts list options

Blog page is created with “News page” page tempate. More info see in “Page building. Page templates” topic.

After you have created the page, you will see “Select blog parameters” section, where you can adjust settings for your blog page.

blog-embrace1

There are some global settings for blog page, some of which are common with the ones on the blog page. These settings are located in Theme Options>Posts list options.

There you can set general settings for all blog pages on your site:

– number of items on one page;

– pagination type;

– post additional info;

– crop thumbnails dimensions;

– enable/disable short excerpt on blog page.

 

blog-embrace2

The “Inner post page options” section is related to single post and is described in “Single post in Embrace” topic.

Single portfolio item in Embrace

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.
Below you see Header Options section – you can adjust custom settings of the header, that will be applied in this particular portfolio item.
single-portfolio-embrace1
Under the Header Options section 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.
You can decide where will be displayed portfolio description – to the right from the image or below it. The corresponding option you will find in Theme options>Portfolio options>Portfolio text location.
single-portfolio-embrace2
“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.
Images can be displayed in 5 variants. The corresponding option is in Theme Options>Portfolio options>Portfolio image display.
single-portfolio-embrace3
It is required to put featured image to your portfolio item.
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 options

Portfolio page is created with “Portfolio” page tempate. More info see in “Page building. Page templates” topic.

After you have created the page, there should appear all portfolio items. So, before creating portfolio page, make sure you have created some portfolio items in Portfolio section.

Portfolio page can be customized within portfolio options in Theme Options>Portfolio options section.

portfolio-page-embrace1

Shortly about the options:

1. Portfolio page – select among all pages on your site main portfolio page. It will be displayed in breadcrumbs on single portfolio items.

portfolio-page-embrace2

 

2. Custom slug for portfolio items option is described in a separate topic called “Custom portfolio slug” .

3. Portfolio select template – select one among three suggested templates for portfolio page.

portfolio-page-embrace3

4. Number of portfolios and pagination types options – can be adjusted for all portfolio pages on your site. The same two options are available inside each portfolio page and can be adjusted individually.

portfolio-page-embrace4

5. Sorting field and post order options determine sorting type of portfolio items on page.

portfolio-page-embrace5

The “Section for customize single portfolio page” options are related to single portfolio items. They are described in “Single portfolio item in Embrace” topic.

 

Contact page in Embrace

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.

 

You can add any module to your contact page using Visual Composer.

Contact page template has additional page parameters, like any other page type in the theme. More about them find in “Page building. Page templates.” topic.

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!

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.

 

Main options of the site

Main options are located in Theme Options>Main options.

There you can:

– upload favicon of your website. Favicon hould be of ICO or GIF format;

– turn on/off responsive mode of the website;

– enable/disable Back-to-top button;

– type footer text.

main-opt-embrace1

Header options in Embrace

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.

 

Header style option offers you 4 variants of your header:

 

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

with banner – logo on left, you can put any banner to the right of it;

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.

 

Apart from already described options, you can add/hide addiotional elements to your header:

search bar

woocommerce cart

secondary side menu and

fixed header(sticky menu)

header-options-embrace1

Top panel settings in Embrace

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 in Embrace

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

Styling options are visually divided into three subsections:

  • color schemes;

  • body background;

  • footer section options.

Color schemes

There are main site color, secondary site color and links color options.

styling-embrace1

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.

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.

 

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.

 

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

 

Crumina page slider

Once you installed Crumina Page slider plugin as described in “Theme installation” topic, go to “Page Slider” section in admin dashboard to create a slider.

page-slider-embrace1

Enter title for your first slider and click “Create page slider” button.

page-slider-embrace2

Begin adding content to the slider from the left panel. It can be any post type suggested in the panel.

page-slider-embrace3

Make sure that you have set featured images to all your posts/pages.

After you have added content, adjust settings in sections “Page Slider Properties” and “Page Slider Template Options”.

page-slider-embrace4

 

If you have built several sliders, you can manage them under “Page slider>Manage page sliders” section.

page-slider-embrace5

You can add sliders to pages through shortcode “Crumina slider selection” that is located among Visual Composer shortcodes.

page-slider-embrace6 page-slider-embrace7

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