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.
Log in your domain, where you have previously installed WordPress.
Go to Appearance>Themes>Add new>Upload theme and upload installable Embrace.zip archive.
Activate the theme and begin installing and activating plugins.
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.
After that wait till the import process is completed and you see “Import is completed.” 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 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.
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.
Find “secondtouch-child” zip archive in theme package.
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”.
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)
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:
In order to update the theme manually, you need to perform the following steps:
- Log in your Themeforest account;
- Go to ‘Downloads‘ section;
- Click on the button in from of the theme name;
- Select “Installable WordPress file only” option from the dropdown menu and download the zip archive.
- Unzip ‘embrace.zip‘ archive and upload folder ‘embrace‘ via FTP to ‘wp-content/themes‘ directory replacing the old files.
- 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.
In order to activate auto update function, you need to enter your theme purchase code in Theme Options>Main Options>Item Purchase Code field.
Once done, you will receive notifications about the available versions in the Updates section of the admin dashboard.
In order to update the theme:
- Go to Updates section and perform an update from there.
- 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:
- Generate your Google Map API Key by following instructions in this tutorial.
- Go to Theme Options > Social Networks API section and find Map api key field there.
- Insert your API key and save settings.
- 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.
There are 7 page templates that can be used. You can select them in “Page attributes” section.
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.
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.
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
Visual Composer is a built-in tool for building your layouts and pages. It includes more than 40 different modules with most complete functionality that one could ever wish.
I think everybody will understand the assignment of each module.
So let’s review technical side of Visual Composer functionality.
When you create a page in “Pages>Add new” section, click on “Backend Editor” button to open Visual Composer editor.
You will see the Welcome blank page of Visual Composer.
If you want to use one of the pre-defined templates, choose one and edit it replacing the sample modules with the ones you like.
If you want to create a custom page, click “Add element” button to choose any module from the list.
Your page can have so many rows and columns you wish. After you have added the first module, hover over the button with horizontal lines and select one of the suggested row styles.
To add new element to the same row, click a tiny “plus” icon at the top or bottom of the current row.
To create a new row, add elements clicking the single “plus” icon located in the row below.
It is possible to interchange your modules between columns, rows or inside a column/row with drag and drop function.
Each column and row has background options. Add background to your columns/rows if needed.
The “Templates” button serves to save layout you created and gives possibility to use it on another page like a pre-built layout.
There is possibility to write additional css rules that will be applied only to that particular page. Click the “Cog” button and add your custom css code.
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.
Select post format you like and add content to the content fields.
Assign category to your post, add tags and set featured image.
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.
If needed, adjust settings of header and stunning header, that will be applied only for this particular post.
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.
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.
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
Portfolio slider gallery
Create a portfolio item in Portfolio>Add new section. On the right side of the edit page you will see Images gallery section.
Click on Add gallery images button and select images from the Media Library, by holding CTRL button.
After that go to Options>Portfolio options>Portfolio image display and select ‘Slider‘ option.
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.
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.
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.
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.
5. Sorting field and post order options determine sorting type of portfolio items on page.
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!
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.
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:
secondary side menu and
fixed header(sticky menu)
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;
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:
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:
footer section options.
There are main site color, secondary site color and links color options.
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.
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
set font size;
and color of the text.
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.
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.
Enter title for your first slider and click “Create page slider” button.
Begin adding content to the slider from the left panel. It can be any post type suggested in the panel.
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”.
If you have built several sliders, you can manage them under “Page slider>Manage page sliders” section.
You can add sliders to pages through shortcode “Crumina slider selection” that is located among Visual Composer shortcodes.
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.
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.
Or import your custom icon pack to IcoMoon service. The imported icons must be in SVG format.
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 .
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.
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).
3. Begin translating strings into your language.
4. When all strings are translated, save the file in .PO format. Example: nl_NL.po, fr_FR.po, he_IL.po etc.
5. After the .PO file is saved, a .MO file is generated automatically.
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.
2. Insert the following code after tag </section>
<?php global $withcomments;
$withcomments = 1;
comments_template( '/templates/comments.php' );?>