Mistral Template Configuration Guide

Getting Started

Welcome

First of all we want to thank you for purchasing our Mistral WordPress Theme .

Although the guide contains a lot of things the theme itself is pretty easy to use with its intuitive interface, and contains many tips and examples.

Take this guide as a reference in case of doubts and feel free to explore the rich settings of this theme.

If you are unable to find your answer here in this documentation, feel free to ask for help from our support team, all you have to do is submitting a ticket via Support Ticket system or email us: nebulawp@gmail.com.

If you like this theme, please support us by rating us 5 stars .

Theme Informations

  • Name: Mistral WordPress Theme
  • Version: 1.1
  • Author: Nebula WP

Download & Installation

Download packages

After purchasing Mistral Template from ThemeForest download and unzip package.

Once unzipped you would find the following files and folders:

  • mistral.zip - the theme file
  • guide.zip - the documentation
  • demo-content.xml - demo contents you can import
  • theme-options.txt - to make your website looks exactly like the demo website
  • plugins - contain Nebula Additions Plugin for offline installations
  • licensing - the theme license

Install Theme

There are 2 ways to install a Wordpress theme.

Installing Theme From the WordPress Dashboard

This method is the easiest and racommanded.

  1. Go to Appearance > Themes and click Add New
  2. Select Upload Theme
  3. Click on Browse and select mistral-theme.zip, then click Install Now
  4. Wait while the theme is uploaded and installed then activate the theme

install

Installing Theme via FTP client

This method is recommended for people that have problems with the previous method, for example caused by hosting upload limits.

  1. Unzip mistral-theme.zip file, you will get a folder named mistral
  2. Use a FTP client like FileZilla and upload only that folder to wp-content/themes folder on your host
  3. Go to Appearance > Themes and activate Mistral Theme

Install plugins

After installation and successful activation of this theme you will see a notification in the top of the page that says the theme needs some plugins to function properly.

This theme requires Nebula Additions, Meta Box and Simple Lightbox, and recommends Contact Form 7 and Page Builder by SiteOrigin. All plugins (required and recommended) are free and available on WordPress.org (Nebula Additions is included in theme package).

To install these plugins:

  1. Click on Begin installing plugins
  2. Select all plugins then choose Install and click Apply to install all plugins
  3. After Installing all Plugins, select Activate then click Apply to active all plugins.

plugin1

plugin2

plugin3

Install Demo Content

If you are new to WordPress and have problems with setting up, Mistral comes with a demo content file that allow you to import contents of theme's demo version.

To do that:

  1. Go to Tools > Import and click on WordPress
  2. Install and then Activate the plugin (only if not already installed)
  3. Click Browse and select demo-content.xml file from the download package
  4. Click Upload file and import
  5. At this point you can choose to assign an existing author or a new one to the imported contents. You also should check the checkbox Download and import file attachments.

demo1

demo2

demo3

Setup homepage and blog page

Create two blank pages, one named Home with Template as Home, and the other named Blog (already present if you import demo contents). To set these pages as real home and blog pages go to Settings > Reading, choose A static page (select below) and select Home as Front page and Blog as Posts page.

home1

home2

Restore Theme Options

If you want to make your website looks like the demo website you need to import theme options.

Go to Mistral Settings > Backup & Restore, click on Browse and select the theme-options.txt present in the download package, then click on Upload file.

option

To create the navigation menu for your site follow these steps:

  1. Go on Appearence > Menus
  2. Select an existing to edit, or insert a name and click Create Menu for a new one.
    When you import theme data, WordPress automatically create a navigation menu, so select it if you want to have same menu as in live preview.
  3. Select items you need on your menu from the left column and click on Add to Menu. Add from Home Sections if you need anchors to home sections.
  4. Select Header Menu in Theme locations and then click on Save Menu

menu1

menu2

Mistral supports natively Entypo icons in Header Menu.

To add them from menu setting page you need to:

  1. Click on Screen Options on top-right corner
  2. Check CSS Classes
  3. Expand the menu item you want assign an icon and insert the icon name in CSS Classes field. You will find a complete Entypo icon name list here.

iconmenu

iconmenu2

Theme Options

One of the highlights of Mistral Theme is the unique, quick and easy-to-use theme options system.

Through this system you can easily edit almost every part of template without any code knowledge. Thanks to its intuitive interface specially created for Mistral you can fit the theme around your needs, with the best results and without risks to break the layout.

You will find Mistral theme options in Mistral Settings.

General

general

  1. Fade in loading: Switch on/off the fade effect on page loading
  2. Favicon: Upload your favicon, for more info about it visit this page.
    From WordPress 4.3 available in Appearence > Customize > Site Identity > Site Icon.
  3. Touch Icon: Touch icons are the favicons of mobile devices and tablets.
    From WordPress 4.3 available in Appearence > Customize > Site Identity > Site Icon.
  4. Under Construction Mode:If you active this, your website will be put under construction mode. Note that, if you enable construction mode, you have to create a page use template "Under Construction" to make this mode work correctly.
  5. Under Construction Content Title and content of Under Construction Page
  6. Under Construction Background Image Background image of under construction page

Design

In this section you can customize the appearance of your website to make it unique by changing colors and fonts.

design

  1. Primary Color: Choose a primary color for your site. Set by default as #2980B9
  2. Secondary Color: Choose a secondary color for your site. Set by default as #33383B
  3. Menu/Titles Font: Font of titles and navigation menu. Generally a more bold font than content, but you can also set the same.
  4. Content Font: Font of various contents of website, like posts and pages.
  5. Custom CSS: Need more customization? Add your custom CSS properties here

header

  1. Website Logo: If blank template shows the site name instead. Optimal height 90px.
  2. Show Social Bar: Switch in/off the social bar displayed on top of website
  3. Navigation Menu Position: Choose if show navigation menu on top or bottom of slide
  4. Fixed Menu: Fixed menu position on page scrolling
  5. Menu Width 100%: Navigation menu content occupy 100% of width. Useful for menus with more items
  6. Meta Tags: Add here your custom meta tags

Home

In this section you can set every home page parameter. We created an option tab for most used sections in a homepage to guide you to fill it in the best way.

Sections Order

Switch show/hide home page sections and order by dragging them in the right order. Don't forget to save whe you finished.

order

Slider

slide

  1. Slide Type: Choose behavior of your slide. Static Image displays one image and one caption, Images Slider displays up to 3 sliding images and captions and Caption Slider displays one image with up to 3 sliding captions.
  2. Parallax Scrolling: Switch on/off parallax scrolling effect on background images. With this effect background scrolls slower than content.
  3. Fade Effect: Images and captions slides with a fade effect
  4. Sliding Speed: Set the sliding speed, the value is in milliseconds.
  5. Background Image: As the name says
  6. Overlay Content: Based on Slide Type chosen displays fields to fill overlay content

About

Use this section to show information about you or your corporate. It's possible to fill the content with visual editor or add HTML and shortcodes.

Features

features

  1. Header: Set title and subtitle of section
  2. Icon Format: Choose if use an uploaded image as feature icon or an entypo icon font
  3. Features Layout: Choose if display features all in a row or listed
  4. Features Blocks: Fill features and order them as you want

Call to Action

A call to action (CTA) is an instruction to the audience to provoke an immediate response, usually using an imperative verb such as "call now", "find out more" or "visit a store today".

cta

  1. Header: Insert the CTA message and subtitle
  2. Button: Insert text and link of the button
  3. Background Image: As the name says
  4. Parallax Scrolling: Switch on/off parallax scrolling effect on background images. With this effect background scrolls slower than content.
  5. Background Color: As the name says. Set a color if you aren't using an image.
  6. Text color: Choose color based on background tonality

Services

Add/remove services you need to show in homepage and drag & drop in the order you prefer.

services

  1. Header: Set title and subtitle of section
  2. Services Blocks: Fill services and order them as you want by drag & drop
  3. Add Services: Add up to 15 services boxs

Portfolio

Remember that to add new portfolio items you must go on Portfolio in main menu.

portfolio

  1. Header: Set title and subtitle of section
  2. Show Taxonomies: Show a taxonomies selector above portfolio items in homepage
  3. Number of Items: Set the max number of portfolio items displayed in homepage
  4. Items per row: As the name says
  5. Space between elements: As the name says

Blog

blog

  1. Header: Set title and subtitle of section
  2. Number of Items: Set the max number of blog items displayed in homepage
  3. Layout: Choose through 3 different layout for homepage blog section
  4. Show Date: As the name says
  5. See Other: Show a See Other button above blog items

Team

team

Set section header and if show members description.
Remember that to add new team members you must go on Team in main menu.

Testimonials

Remember that to add new testimonials you must go on Testimonials in main menu.

testimonials

  1. Header: Set title and subtitle of section
  2. Background Image: As the name says
  3. Parallax Scrolling: Switch on/off parallax scrolling effect on background images. With this effect background scrolls slower than content.
  4. Background Color: As the name says. Set a color if you aren't using an image.
  5. Text color: Choose color based on background tonality

Contacts

contacts

  1. Header: Set title and subtitle of section
  2. Show Map: Choose if display the map in homepage
  3. Zoom Level: Homepage map zoom level
  4. Background Image: As the name says
  5. Parallax Scrolling: Switch on/off parallax scrolling effect on background images. With this effect background scrolls slower than content.
  6. Background Color: As the name says. Set a color if you aren't using an image.
  7. Text color: Choose color based on background tonality

Custom #1 & Custom #2

These sections are designed to allow you to create yourown personal home sections using visual editor, HTML and shortcodes.

custom

  1. Header: Set title and subtitle of section
  2. Content: Content of custom section that you can fill using visual editor, HTML and shortcodes
  3. Content width 100%: Display content with 100% of width.
  4. Background Image: As the name says
  5. Parallax Scrolling: Switch on/off parallax scrolling effect on background images. With this effect background scrolls slower than content.
  6. Background Color: As the name says. Set a color if you aren't using an image.
  7. Text color: Choose color based on background tonality

Blog

These settings affects archives and blog page.

blogpage

  1. Post Thumbnails: Set the size of thumbnails. If Big the picture will be displayed on top of post preview. If Small the picture will be displayed on left side.
  2. Content to Show: Choose the content to show as preview. Post content displays the content including HTML formatting, Post excerpt displays the content without HTML formatting and Post content before more tag displays as the name says. For more informations abour more tag visit this page.
  3. Number of Words: Set the max number of words to show in post preview. This parameter doesn't affect Post content before more tag.
  4. Read More: Displays or not a read more link after post preview
  5. Read More Text: The text of read more link
  6. Show Post Date: Allow you to hide post date in blog, and archive pages

footer

  1. Show Footer's Widget Area: Displays or not the widget area in footer
  2. Number of Widget Areas: Choose how many widget arear you need in footer
  3. Copyright: Insert here ghe copyright of your website
  4. Footer Social Link: Show/hide social links in footer
  5. Footer Scripts: Add here scripts or code you would like output before the end of body tag. For example Google Analytics code or something else.

Contacts & Social

Contacts

These informations are used in homepage contact section and in contact page template.

contact-page

  1. Numbers and Mails: For multiple phone numbers or mails add them separated by comma. Example: +1 000 0000,+1 111 1111 or Office: +1 000 0000,Reservations: +1 111 1111.
  2. Contact form shortcode: Add here the contact form shortcode generated by Contact Form 7 or other plugin.
  3. Address: A full street address displayed in home and contact page. This address is also used from Google to generate the map.
  4. Zoom Level: Contact page map zoom level
  5. Additional Informations: Additional informations displayed below contacts. Useful to add informations like business hours or contact preferences. HTML allowed.

Social

In this section you can add your social links that will be displayed in header and footer.

Additional Contents

Mistral comes with additional contents (post types): Portfolio, Team Members, Testimonials.
Each of these contents has a specific role inside Mistral Theme.

Portfolio

portpage

How it looks in frontend. The red arrows show you where previous content of fields is placed.

portpage2

  1. Title: The title of portfolio item
  2. Content: Insert here the description of the item. The description is displayed on right side. You can use visual editor or plain HTML to format it.
  3. Project Type: Is the equivalent of posts category
  4. Featured Image: Select a featured image used as preview of the item
  5. Images: Add here images of your work
  6. Format: You can choose the format with which displays images from four different models.
  7. Additional Informations: Additional notes displayed below images. You can use visual editor or plain HTML to format it.
  8. Work Link: A link to work done, for example a website you built

Team Members

teampage1

How it looks in frontend. The red arrows show you where previous content of fields is placed.

teampage2

  1. Title: The full name of the team member
  2. Short Description: A short description, like a bio
  3. Job: The position held by team member
  4. Order: Set the position number where is displayed
  5. Featured Image: Picture of the member
  6. Social Profiles: Social links

Testimonials

testimonialpage1

How it looks in frontend. The red arrows show you where previous content of fields is placed.

testimonialpage2

  1. Title: The full name of testimonial
  2. Testimonial Feedback: Add here opinion that the testimonial have about your business
  3. Testimonial Jop: As name says
  4. Featured Image: A picture of the testimonial

Pages & Widgets

Page Templates

Mistral is provided of some extra page templates, specific for different needs.

pagetemplates

  • Contacts
  • Full Width
  • Home
  • Portfolio
  • Under Construction

Contacts template is designed to create a contact page. Like other page templates you just need to create a page with this teplate and link it where you need. The page will be automatically filled with information inserted in Contact Options.

Full Width is a model of page to create your custom page layouts using visual editors like Page Builder by SiteOrigin. For a complete guide to Page Builder by SiteOrigin visit this page.

Home is the page template designed for the homepage as we said before on this guide. Click here to learn how to use this template.

Portfolio works like Contacts and displays portfolio items. Create a page with this template and then add it to your menu.

Under Construction template is similar in function to other templates. You must create a page with this template to use Under Construction mode. To learn about Under Construgtion Mode click here.

Widgets

Mistral Template includes some custom widgets: Mistral - Features, Mistral - Services, Mistral - Team.
These widgets are designed to be used only inside pages with visual editors (like Page Builder by SiteOrigin) to display the respective homepage section. Useful to create specific pages for features, services or team.

Other

Contact Form 7

Contact Form 7 is an amazing and easy to use plugin to create contact forms.

To have the best visual results with Mistral Theme our advice is to change the default form code generated by CF7:

<p>Your Name (required)<br />
	[text* your-name] </p>
<p>Your Email (required)<br />
	[email* your-email] </p>
<p>Subject<br />
	[text your-subject] </p>
<p>Your Message<br />
	[textarea your-message] </p>
<p>[submit "Send"]</p>
		

To:

[text* your-name placeholder "Your Name"]
[email* your-email placeholder "Your Email"]
[text your-subject placeholder "Subject"]
[textarea your-message placeholder "Your Message"]
[submit "Sent"]
		

As you can see we removed all HTML tags and insert title of fields as placeholder, with the sintax placeholder "Placeholder Name".