Install

You can do it in two ways:

FTP Upload:

1. Download the Theme archive and extract the files it contains.
2. Using an FTP client to access your host web server.
3. Unzip the Monni.zip archive, put its contents (folder called Monni) in the wp-content/themes directory provided by WordPress.
4. Go to Appearance>Themes, find Monni and activate it.

Wordpress Upload: Navigate to Appearance> Add New> Themes Upload. Go to browser, and select the zipped theme folder. Hit Install Now and the theme will be uploaded and installed.

Once the theme is uploaded, you need to activate it. Go to Appearance>Themes and activate your chosen theme.

After you install the theme on the Home Page you will see your latest posts on the Home Page.

Required plugins installation

This step is very important, because your theme functionality depends on these settings, so please follow this section carefully. At the top of the Admin / Appearance page there will be a message with installation/activation link:

Details of the work with the plugins, you can read its documentation Learn more about Visual Composer,Learn more about Slider Revolution

Click Install/Activate for the recommended plugins:Plugins we highly suggest to install and activate that Monni Theme requires them to work properly:

Recommended plugins (based on sections of the theme you want to use):

Updating premium plugins

Each theme update will contain latest version for premium plugins. You need to update the theme to latest version and you will get latest updates of premium plugins bundled with Monni. These plugins can be updated automatically however they require to purchase them which you don’t need to.

Demo​ ​installation

Monni Theme comes with demo data. Demo content of our theme can be imported with the help of 'One Click Demo Import' plugin and dummy data file. Below you can find the instructions on how to do that.

You can upload demo-data.xml file and use templates or create new ones using the Monni elements from Fragrance.

1. Navigate to Plugins -> Add new.
2. Find and install "One Click Demo Import" plugin. Activate it.
3. Go to Appearance -> Import Demo Data and Select dummy data file. Find it in the folder import > monni-data.xml
4. When the demo import finished you can delete plugins "One Click Demo Import".

WordPress will download all the content for the demo and then you will get a message saying that everything​ ​has​ ​been​ ​installed.

You will get all the pages from the demo. You can combine and change the layout as you wish. For easier copying of an element, you can save rows and / or sections into templates.

1. Select the desired row. Click edit row.
2. In the settings window that opens, click Element Setting > Save as Template.
3. Enter Template title and click Save Changes.

Now you can add entire sections from templates you have saved at once.

Import Revolution Slider

After you have installed the plugins, you can import the sliders. To do this,

1. Navigate to Slider Revolution
2. Click Import Slider and choose one of pre-defined sliders in the folder import > Rev Slider

After that, the selected slider will be available for use. For more details on how to edit slider images and text, see here.
Slider names match import file names.

Setting up the static Home Page

Select page from pre-designed templates that are available if you downloaded demo-data file.

After this in menu under Settings -> Reading have the default options set to “A Static Page” and select your home page.

Menu Setup

To setup the menu please navigate to Apperance -> Menus page. Enter a name for your menu and add links to the menu by using the options given on the left sidebar. You can manage your menus using the drag and drop functionality. After setting up your menu, select the menu you just created from the theme locations dropdown box and hit the "Save" button.

WordPress comes with a menu management panel, which makes building your sites navigation very easy and flexible.

For more info on how to setup your menu please see here

Theme comes with three menu display locations

• Primary Menu - it uses for header
• Mobile Navigation - it uses for mobile devices

If you don't use 'Mega Menu' you can use one menu for all locations

Mega Menu

If you want to use Mega Menu like on our demo, you need to install 'WP Mega Menu' plugin

Mega Menu available only for Classic Top Menu style.

For the same style you need to import mega menu theme. For this go to WP Mega Menu > Themes and Select and import theme monni-mega-menu-theme.txt file. This file you can find in folder import.

Aftere there please go to Appearance > Menus select your menu. (Mønni Top Menu if you import demo). At the left sidebar in "Mega Menu Settings" Check to enable mega menu and select monni-theme and click save.

Setting up header

One of the first things you might want to do is to set up the header area. This section contains the logo, menu, search bar and social icons.

• Navigate to Appearance> Theme Options> Header from the WordPress admin panel;
• Choose an option from the drop-down menu

Manage the display of social icons you can on the tab Appearance> Theme Options> Social Network

This theme uses the new custom post options to display specific page templates and posts. Each page template is created by selecting a page template from Page attributes panel.

Configuration of the Blog page

Create a page, give it a name. In the Attributes page, select Blog Layout. In the Page Setup you open settings.

Here you enter the number for the desired number of posts on the page and check the category that you want to display.

To create a Masonry layout, choose Full Width Page template and build page with Visual Composer, use Monni Grid Post Element .

Settings for the portfolio are similar to the blog settings.

Each Portfolio Item created with VC. So you can copy the desired layout and fill it with your data. To make the page builder available for posts, navigate to WPBakery Page Builder > Role Manager > Post types > Custom and check post.

1. Open the desired layout from the existing data in the demo.
2. Switch to classic mode and copy the entire code.
3. Create a new post and paste the copied code.
4. Set post featured image and assign a category.
5. In the settings bellow set Portfolio Item's details.
6. Add category and share buttons by adding element Monni Portfolio Info.

The Portfolio section of the Portfolio Layout is used to set the width and height parameters for the posts that you want to use to display in Monni Portfolio Metro element.

To display images correctly in an element Monni Portfolio Openable , load images of the same size (width and height).

All data is available, if you downloaded the file monni-data.xml. Below you can see an example of setting the portfolio used in the demo site.

For Contact page use plugin Contact Form 7.

1. Navigate to Plugins> Add New;
2. Search 'Contact Form 7';
3. Install and activate plugin.

Then navigate to Contact and add a new forms with marcup, that I place bellow. Here is an example of fields that are in my contact form. You need to use this markup to all the elements appear correctly.

<div class="row">
<div class="col-sm-6">
    <p>[text* text-459 placeholder "Your Name*"]</p>
</div>
<div class="col-sm-6">
    <p>[email* email-404 placeholder "Your Email*"]</p>
</div>
</div>
<p>[textarea textarea-6 placeholder "Your Message"]</p>
<p>[submit "Send Message"]</p>

Use data file demo-one-page.xml.

For this purpose in Row Settings set ID. You need to set it for the section, and then in the menu to create a link with the same name. Example:

Below is the information about how you can update your theme, our instructions, warnings, and recommendations.

Manual theme update

1. Download latest package;
2. Go to appearance > themes and activate any other theme (e.g. – one of the standard);
3. Delete old theme;
4. Install the theme from newest package.

The following things will NOT be affected if you update the theme:

• ALL settings you applied through the admin panel (in appearance, settings, tools etc.);
• Content of your site (pages, posts, media files, portfolio items etc.);
• Plugins.