To search across docs Ctrl+F (Windows, Linux and Chrome OS) and ⌘-F (Mac)

Welcome to Mood theme

First of all, thank you for your purchase! ...and excuse me for my poor English.

Before you get started, please make sure to always look at our documentation (here). To search through the entire documentation please press Ctrl+F (Windows, Linux and Chrome OS) and ⌘-F (Mac).

Mood can only be used with WordPress and we assume that you already have WordPress installed and ready to go. If you do not, please read the section below.

Wordpress

To install this theme you must have a working version of WordPress already installed. If you need help installing WordPress, follow the instructions in WordPress Codex or watch one of the several video tutorails available on YouTube or Vimeo. Below are all the useful links for WordPress information.

Requirements

To use Mood you must be running (in part as for Wordpress, read here)

  • WordPress 4.7 or later
  • PHP 5.6 or greater (even if Wordpress recommends PHP 7 at least)
  • MySQL 5.6 or greater
  • max_execution_time 180
  • memory_limit 128M (default PHP value, check here)
  • post_max_size 64M
  • upload_max_filesize 64M
  • max_input_vars 5000.

If you don't know how to set some of these vaules, contact your provider support.

What you have purchased

When you purchase this theme from ThemeForest, you need to download the Mood files from your ThemeForest account. Navigate to your downloads tab on ThemeForest and find Mood.

Click the download button to see the two options. All files & documentation link contains everything, the Installable WordPress file only link contains the installable WordPress theme file. Below is a full list of all the things included in the main files:

  • Documentation (that contains this very page)
  • Licensing
  • Wordpress Theme that contains
    • a folder called "mood" you can upload via FTP
    • a ZIP file called "mood.zip" you can upload from the Wordpress backend
    • and a ZIP file called "mood-child.zip", an ready-to-use child theme for Mood

The premium plugins are included in the theme itself, and you can find them on "mood / inc / plugins". They are:

  • js_composer.zip
  • revslider.zip
  • meta-box-tabs.zip
  • mood-addons.zip
  • mood-menu.zip

Theme support

The theme comes with 6 months of included support and free lifetime updates for your theme. Once the 6 months of included support is up, you have the opportunity to extend support coverage up to 6 or 12 months further. If you choose to not extend your support, you will still be able to submit bug reports via email or item comments and still have access to our online documentation knowledge base and video tutorials.

Envato clarifies item support here http://themeforest.net/page/item_support_policy You can have support through the comment section of Mood on ThemeForest or by contacting the author though its profile page.

Support is limited to questions regarding the theme’s features or problems with the theme. The theme author can't provide support for code customizations or third-party plugins. If you need help with anything other than minor customizations of your theme, we suggest enlisting the help of a developer.

Installation and updates

How to install the theme

I highly recommend to watch the video tutorial here below as well.

You have two options to install the theme (read above where the files are located):

  1. by using an FTP client (FileZilla, Dreamweaver, FireFTP or similar) upload the folder called "mood" to
    your_root / wp-content / themes
  2. directly from the Wordpress backend, go to Appearance → Themes → Add new (theme) and click the "Upload theme" button on the next page. With the browse button find the aforementioned "mood.zip" file, then click "Install now".

After activating Mood, you will see (top of the screen) a message with the list of the recommended plugins. They aren't mandatory, but many functions of the theme are demanded to them and the One Click Demo Installer imports content that depends on them in many cases. In particular:

  • Mood Menu (to create mega-menus)
  • Mood Addons (with custom post types, Visual Composer extensions ecc.)
  • Contact Form 7
  • Meta Box
  • Meta Box Tabs
  • Slider Revolution
  • Stag Custom Sidebars
  • WPBakery Visual Composer

After installing and activating plugins, run the WooCommerce wizard if you want have installed WooCommerce.

One click demo installer

After you have installed the recommended plugins go to Appearance → Customize → Demo installer → Complete demos. You'll find several screenshots, one for each demo available. Just click one of them and start the demo installation process.

As you can read in the modal box, you are importing a complete demo. This includes posts, pages, comments, widgets, media. All the theme options available in the Customize page will be overridden and lost so it is highly recommended a backup if you don't want to lose your previous data.

The entire process can take about 5 minutes, but it can be also different because of internet conntection, traffic on the server etc.

In the video above, from about 1:30 you can see the One Click Demo Installer in action.

Import Content

If you don't want to use the One Click Demo Installer but you need, for instance, to migrate a local installation of Mood to your live server, you can go to Tools → Import → Mood Importer. It is a script based on the plugin Wordpress Importer, but with some enhancements to fit the theme, like the ability to import mega menus and to avoid to duplicate images if possible.

To import/export widgets use the plugin Widget Importer & Exporter and to import/export the Customize panel just use the plugin Customizer Export/Import.

Revolution Slider allows to import/export content from their own option panels.

How to update the theme (and the plugins included)

Not recommended: you can update the theme by activating a different theme for a while, deleting Mood from the theme list and upload it again via the Wordpress backend. But it could cause some loss of data, some unregistered widgets or menu.

Still not recommended: you can upload a new version via FTP and override all the old files.

Recommended: you can go to Appearance → Theme updates and enter your Envato user name (the same you used to purchase the theme) and your Item purchase code: what I'm talking about. In this way you will receive a notification when a new version of Mood is available and you will be able to update it from your backend.

You'll also receive a notification for the following plugins and will be able to update them from your backend as well, without filling out any other form, but only if Mood is installed and activated:

  • Mood Menu
  • Mood Addons
  • Meta-Box Tabs
  • Revolution Slider
  • WPBakery Visual Composer

N.B.: you may activate the theme on one Wordpress installations only. This means you won't receive any update if you use the theme on different installations. But you can unregister a copy of Mood to activate it on a different installation, if you prefer. Just leave the fields blank and click Check and save license button

Customizations

As said above, the theme author can't provide support for code customizations or third-party plugins. If you need help with anything other than minor customizations of your theme, we suggest enlisting the help of a developer.

However, it is good to talk about the right way to make customizations:

  • customizations to the CSS can make through Visual Composer → Custom CSS;
  • customizations to the PHP functions can be added to wp-content / mood-includes / includes.php. Mood should have been created these directory and file during its first installation. If you can't see them you can create them manually and use them to add filters or overrid functions. Since the directory is out from the theme folder, it won't be deleted when you update the theme
  • for other customizations it is recommended to use a child theme. There is a child theme ready to be use in the file you have downloaded from ThemeForest (read here for more info). About child themes: https://codex.wordpress.org/Child_Themes

Live Customizer

Demo installer

As described above it allows to install the demo content of one of the preset skin demos.

Layout

Style

Here you can decide to display a boxed or wide layout and also the width (N.B.: in pixels) of the content width and page wrap.

Body background

Set the page background color or image, also set the other background image parameters: background position, size, repeat and attachment.

Page background

The page background only allows you to set a color that will be the background behind the text.

Top bar

Behaviour

Decide to display or to hide the topbar.

Typography and colors

Set both the text color and the background color of the topbar. If you'll set the header as transparent in the header section, the topbar will inherit that behaviour.

This section also allows you to select the font family among some web safe fonts and the entire list of Google fonts (regularly updated). You may also use a Typekit font if you prefer. For more info click here.

Besides the font family you can select: font weight, subsets, font size, letter spacing, line height and case (uppercase or normal).

Left elements

Here, with a drag & drop interface, you can add elements to your top bar and populate its left side. You can select among simple text, icons and (if WPML is active) the language switche. You can add a link, an ID, a class (for CSS purposes) and decide whether to hide the element under certain screen resolutions.

Right elements

Read the section above.

Header

Layout

Mood comes with six different header layouts:

  • the boxed and floating one
  • the wide and floating one
  • the wide centered one
  • the overlay one
  • the wide overlay one
  • and the side one

In this section you can also set if you want that your header is sticky when you scroll the page, if you want to hide it when you scroll down, and the heights of the header (both when you load the page and when you scroll the page down). You can also set the window width (in pixels) under which turn the navigation menu in its mobile version.

First, you can decide to display the site title below or beside the logo.

Since Mood allows to display a transparent header that becomes opaque when you scroll down, in this section you can set a logo for the header when it is opaque and a different version of the logo when the header is transparent.

You can also decide a max height for the logo: even if the logo won't be taller than the header height, here you can decide if you want to make it smaller than its original size.

Site title

Here you can type the site title that will be visible in the header or, if you prefer, you can hide it with a simple checkbox (uncheck it). In addition, you can select the text color, the font family among some web safe fonts and the entire list of Google fonts. You may also use a Typekit font if you prefer. For more info click here.

Besides the font family you can select: font weight, subsets, font size, letter spacing, line height and case (uppercase or normal).

Site description

Here you can type the site payoff that will be visible in the header or, if you prefer, you can hide with a simple checkbox (uncheck it). In addition, you can select the text color, the font family among some web safe fonts and the entire list of Google fonts. You may also use a Typekit font if you prefer. For more info click here.

Besides the font family you can select: font weight, subsets, font size, letter spacing, line height and case (uppercase or normal).

Colors

Display header border and set here the text color and the background color of the header.

With a simple checkbox you can decide to display the header as transparent and two fields below the checkbox allow you to set a transparent background and the text color for the transparent header.

N.B.: the transparent header will be displayed only if the page allows it. If the first section below the header isn't a fullwidth/fullscreen slideshow or a section with a fullwidth/fullscreen background image the header will be displayed as opaque.

Navigation

Display some elements that indicate if first level menu items has children items. You can select among: bullets, arrows or nothing.

With two simple checkboxes, decide here if you want to display in the header the search icon, trigger for the overlay search form (integrated with the plugin SearchWP Live Ajax Search, if you have activated it) and the shopping cart (only if WooCommerce is activated).

Besides, you can set all the first level menu colors: current page border color and tag label values (background and text color: they will be used for cart amount and the small labels you can add to menu items).

You can select the font family among some web safe fonts and the entire list of Google fonts. You may also use a Typekit font if you prefer. For more info click here.

Besides the font family you can select: font weight, subsets, font size, letter spacing, line height and case (uppercase or normal).

Display some elements that indicate if first level menu items has children items. You can select among: bullets, arrows or nothing.

Here you can also set the child level menu colors: top border color, background and text color.

You can select the text color, the font family among some web safe fonts and the entire list of Google fonts. You may also use a Typekit font if you prefer. For more info click here.

Besides the font family you can select: font weight, subsets, font size, letter spacing, line height and case (uppercase or normal).

Here you can set the overlay menu colors: background color (and its transparency), text color and accent color.

Display some elements that indicate if first level menu items has children items. You can select among: bullets, arrows, ellipsis or nothing.

You can select the font family among some web safe fonts and the entire list of Google fonts. You may also use a Typekit font if you prefer. For more info click here.

Besides the font family you can select: font weight, subsets, font size, letter spacing, line height and case (uppercase or normal).

With a checkbox you can decide to separate the social icons area with a border (but also header must have a bottom border in Customizer → Header → Colors).

Below the checkbox, a drag & drop tool allows you to add the elements you prefer, with icons, links, titles, IDs and classes.

Here you can decide the default pagination for post and portfolio items (works), also when used as shortcodes. You'll be able to replace the default value on singular cases.

Typography

General

This section allows you to select the site default text color, together with the accent color (used for the textual links, for instance), the accent alternative color (used when accent color is the background of the element, so the alternative color will be the text color over it), the alternative color (used for subtitles, small links etc.) and the error and success colors (used for form message or across ecommerce sections).

You can also select the the font family among some web safe fonts and the entire list of Google fonts. You may also use a Typekit font if you prefer. For more info click here.

Besides the font family you can select: font weight, subsets, font size, letter spacing, line height.

Alternative

Alternative font family is used in the text editor as a specified CSS class. By default it is an elegant serif font.

Quotes

Quotes are usually displayed by using a serif font, but in this section you can set the font you prefer, of course.

Headings

For headings from H1 to H6 you can select the text color, the font family among some web safe fonts and the entire list of Google fonts. You may also use a Typekit font if you prefer. For more info click here.

Besides the font family you can select: font weight, subsets, font size, letter spacing, line height and case (uppercase or normal).

Code

When you use across the site the tag pre or the tag code you are displaying preformatted text and you can select here the font family among some web safe fonts and the entire list of Google fonts. You may also use a Typekit font if you prefer. For more info click here.

Besides the font family you can select: font weight, subsets and font size.

Custom font face

Mood allows to use Typekit fonts, you only have to enter the details of your Typekit account in the live customizer. For more info click here.

Aside sections

A sticky element is an element that stays fixed when the rest of the page scrolls. Sticky elements also can change this behavior and stay fixed if they have space, scroll together the other when they reach the edges of their container, as the image shows.

In this section you can decide if all your sidebars will be sticky (a custom option in the page builder allows you replicate the same behaviour for the columns created by Visual Composer).

Sidebar effect on reveal

Here you can set a global effect to apply when regular widgets are scrolled into view.

The footer can be fixed, this means that it will be shown when you scroll to the bottom of the page as the rest of the site above is a curtain. A javascript function, though, calculates whether the footer is taller than the browser window or than the content above it, in those cases the footer won't be fixed, to avoid that parts of it can't be readable.

You can also hide the footer with a simple checkbox, if you prefer.

Even if it isn't properly contained in the footer, ideally the "back-to-top" button can refer to this section. Here you can select to display or hide it.

The content of the footer could be due to widgets. In this case you have to go to Appearance → Widgets and add widgets to the sidebars Footer #1 up to Footer #4. They represents the four columns the footer is split into. If one of those widget areas will be empty, the width of the footer will be split for the columns with content.

If you want to use a more articulated footer, you can also use a page to display as footer. In this case you will be able to use the page composer to create a stunning layout. The page used as footer will be excluded from the search results, of course, and it will return a 404 error if you try to reach it directly.

In this section you can set the background color, text color and heading color of footer. This could be necessary since, in most cases, footer has colors completely different from the rest of the page.

The info bar is the last bar below below the footer.

On this section you can decide to hide or display the bar, its background color and its text color.

There are also two sections (Left elements and Right elements) two the elements you prefer to the info bar: text, icons, links.

Latest posts page

Latest posts page can be your home page or a secondary page, it depends on what you select on Settings → Reading → Front page displays or in Customizer → Static front page → Front page displays: "Your latest posts" or "A static page" option.

Content

If "Your latest posts" option is selected, you need to define a page that will be used to retrieve the page template, metabox in general, and the content (if you you have one). You can define that on the field "Select a page to refer as your latest posts page when your front page is your latest posts page as well".

In the field below ("Content on latest posts page") you can decide whether to display only posts (together with the sidebar if you have one) or to display some content above the latest posts or to display the content only without any post.

You can also decide the order of your posts, of course.

Design

Even if not all the options available on this section have been built to be combined, here you can decide:

  • grid (rows or vertical cascading grid aka masonry )
  • text position (below the image, over the image, floating on the right or floating on the left)
  • the effect on scroll
  • the amount of elements per row (also settable for tablet landscape view, tablet portrait view and mobile phones portrait view)
  • to display a border around the post
  • the gutter between element
  • the pagination (numbers or infinite loading button)
  • the aspect ratio of the image, by setting its ratio width and height (click here for more info)

Elements

Even if not all the options available on this section have been built to be combined, here you can decide:

  • to display the featured image (or the media relative to the post format)
  • to display the category links
  • to display the post title
  • the title heading tag
  • to display the likes counter
  • to display post reviews
  • to display author name
  • to display the date and how to display it (from now or as absolute date)
  • to display the comment amount
  • to display the content, the excerpt or nothing
  • to display the read more button

Post categories and Post archives

Content

Set the order by and the order options for post category and post archive pages across the site.

Design

Even if not all the options available on this section have been built to be combined, here you can decide:

  • template (default, left sidebar, right sidebar, wide page with left sidebar, wide page right sidebar, wide page)
  • sidebar
  • grid (rows or vertical cascading grid aka masonry )
  • text position (below or over the image, if the post has a featured image or a video)
  • the effect on scroll
  • the amount of elements per row (also settable for tablet landscape view, tablet portrait view and mobile phones portrait view)
  • to make the width of the first post double (look at the image here)
  • the gutter between element
  • the aspect ratio of the image, by setting its ratio width and height (click here for more info)

Elements

Even if not all the options available on this section have been built to be combined, here you can decide:

  • to display the featured image (or the media relative to the post format)
  • to display the category links
  • to display the post title
  • the title heading tag
  • to display the likes counter
  • to display author name
  • to display the date and how to display it (from now or as absolute date)
  • to display the comment amount
  • to display the content, the excerpt or nothing
  • to display the read more button

Pages

404 page

Here you can manage the look of 404 page, add a background image, a color overlay, set the header transparency and the text color, and also whether display it as a fullscreen page.

Search page

Set the effect that the items on the search result page will have on scroll.

If WooCommerce is active you can also decide to limit the search results to the products only.

Here you can also set the page template (default, left sidebar, right sidebar, wide page with left sidebar, wide page right sidebar, wide page) and, if supported by the page template, the sidebar.

Lastly, you can manage the title section by showing it or hiding it, adding a background, setting an overlay color and text color. You can also edit its height (intended as percentage of the window height), manage the title properties (font size, text align, vertical align) and display a scroll down indicator.

Portfolio works

Archive page

Select here a page to refer as your main portfolio archive page: it will be used to retrieve page template, sidebar and metaboxes in general.

You can also decide the order of the portfolio items in the default archive page.

Design

Even if not all the options available on this section have been built to be combined, here you can decide:

  • grid (rows or vertical cascading grid aka masonry )
  • text position (below the image or to reveal on hover state, at the bottom or at the middle)
  • overlaid color, i.e. the color that will appear on hover state (you can select among the global text color and the global accent color, while the color of the textual elements will be the global page background color)
  • effect on scroll
  • the amount of elements per row (also settable for tablet landscape view, tablet portrait view and mobile phones portrait view)
  • gutter between element
  • border radius of the elements
  • the pagination (page numbers or infinite loading button)
  • the aspect ratio of the image, by setting its ratio width and height (click here for more info)

Elements

Even if not all the options available on this section have been built to be combined, here you can decide:

  • to display the visual tag filter above the portfolio items
  • to display the project category links on each item
  • to display the post title
  • the title heading tag
  • to link the title to the post or to nothing
  • to display the likes counter
  • to display the read more button (with text position below activated only)
  • to open featured media in a modal box (ColorBox)

Single projects

On this section you can also decide whether to display the likes countet, the related items and the work tags below the content of the single portfolio projects. The related items are put in relantionships between each other thank to their tags.

WooCommerce

General

On this section you can set what effect to use to reveal the products on scroll on product archive pages.

You can also activate quickview on listed products.

Lastly, here you can set the text color and the background color of the sale tag.

Shop page

The shop page is the main product page you have to set on WooCommerce → Settings → Products → Display.

In this section of the Customizer you can set the products per row (also settable for tablet landscape view, tablet portrait view and mobile phones portrait view), the gutter between products, the effect to use to reveal the products on scroll and the image aspect ratio (width and height), for more info click here.

Single products

In this section you can disable the zoom effect it is applied to the main product image when you pass the mouse over it.

Here you can decide to display related products below the product content. Related products are based on product tags. Upsell products are instead decided by you on the product backend, more info are available here.

In this section you can set the amount of products to display, the gutter between products, the effect to use to reveal the products on scroll and the image aspect ratio (width and height), for more info click here.

Thank you page

Select a page to use as starting content of the thank you page, the page the customer will see after the checkout process. The content of that page will be displayed above the order details.

This page will be used also to retrieve page template, sidebar and metabox values in general.

Performance

With a simple checkbox, here, you can decide to load the custom CSS (generated by the options you set on the Live Customizer) as a static file or directly in the head tag, as inline code (default: inline code). Loading the CSS as a static file could be better: this reduces the length of the page and the generated file can be loaded via CDN, for instance, or combined with other files. But some servers can create issue with this feature, so both the options are available. In particular often you have to manually change the file permissions of the file to allow Mood to edit it. When this is necessary you will see a message below the checkbox (look at the image). Click here for more info about file permissions.

You can also activate a maintenance mode page. Once selected, not logged user can't reach any other page of your site than the one you have selected.

Lastly you can decide at what screen resolution (max-width in pixels) you want to disable parallax effect.

Sharing

Services

A useful drag & drop tool allows you to decide what your sharing section (displayed above the text content) will contain.

Post type

Select here what post types you want the sharing section will be applied to.

Google API key

In order to use all the tools available in Mood to display Google maps (Visual Composer modules, metabox etc.) you have to enter in this section an API key provided by Google. To get your Google Maps API key visit this link and follow the info.

On this section you can also decide to dequeue the Google map scripts loaded by the theme. You can need to activate this feature because of plugin compatibility issues.

Buttons

Buttons are a very important part in the theme. A custom module created ad-hoc in Mood for Visual Composer allows you to customize buttons on fly, but in this section you can define the default button design, by settings border radius, border color, border color on hover state, border width, text color, text color on hover state, background color, background color on hover state and, of course, the font values: the font family among some web safe fonts and the entire list of Google fonts. You may also use a Typekit font if you prefer. For more info click here. Besides the font family you can select: font weight, subsets, font size, letter spacing, line height and case (uppercase or normal).

Single posts

Decide in this section whether, on single post pages, to:

  • display the category list at the top;
  • display the author name at the top;
  • display the date at the top (and as relative o absolute date);
  • display the like button (heart icon);
  • display related posts;
  • display post tags;
  • display author info.

Visual Composer

Some functions of Visual Composer plugin are disabled by default. This for many reasons: sometimes they are redundant and the functions that come with the theme are enough, sometimes they simply don't reflect the spirit behind the theme and they would create inconsistency, sometimes the theme's author simply considered them (how to say...?) not so appealing and preferred hide them.

However they aren't lost, you can activate them again in this section. But, because of the reasons aforementioned, they aren't supported at all.

Site identity

This function doesn't come from Mood but it is included in Wordpress. However by default Mood sets on this section the favicon, so we have preferred to include it in the documentation.

Menus

This section doesn't come from Mood, it is a Wordpress core function. Just pay attention: mega menu features are disabled here, so if you manage your menus in this area you will lose all the settings related with the mega menu. I recommend, instead, to always manage menus on Appearance → Menus.

Typography

Across the Live Customizer, Mood allows you to select font parameters for many elements, from the default font of the body, to the headings, the pre tag, some special sections etc.

The fonts available are the web safe ones (Time New Roman, Arial, Trebuchet...) and the Google fonts. The Google font list is regularly updated.

There is an extra option in the font family select box: "None (for CSS customizations)". You can select it if you want to use a custom font, loaded by you in a child theme, for instance, or if you want to use a Typekit font. Mood allows to use Typekit fonts, you only have to enter the details of your Typekit account in the live customizer. Once your account is correctly set, copy the font family name as provided by Typekit and paste it in the "Custom font family" field.

As said above you can select the option "None (for CSS customizations)" but you can also select a Google font instead, even if you fill the field "Custom font family". This could be particular useful if you need to select a particular font weight for your custom font. The font weight options change if you select, for instance, Open Sans or Montserrat. The options available are different, of course. So the only way to select a particular font weight for a custom font, for instance the weight 100, is to select a font like Raleway in the "Font family" select box, this will provide you the ability to choose among a large range of font weights.

The options set in the Live Customizer will reflect not only on the front end, but on the backend as well, as you can see in the image above, where are shown Acta Display and Proxima Nova, two fonts from Typekit.

Text editor

The visual text editor (tinyMCE) have some extra features in Mood:

  • the ability to select the font size (intended in ems);
  • the formats drop down box that contains the groups
    • styles
    • effects
    • line height

Styles group allows you to assign many CSS classes to your text and assign to it particular looks:

  • subtitle: the text will be rendered in italic with an alternative color
  • alternative font: will be used the alternative font you have set in the Live Customizer
  • alternative color: will be used the alternative color you have set in the Live Customizer
  • accent color: will be used the accent color you have set in the Live Customizer
  • pull left: the text block will be pulled to the left (look at the image below)

  • pull right: the text block will be pulled to the right
  • first letter: the first letter of the text block will be bigger than the other ones
  • first line: the first line of the text block will have a different style
  • horizontal line: the text will be crossed by a horizontal rule. The rule can be stay on the left of the words, on the right or on both sides, it depends on the text alignment
  • no margin: if the elements has margins set by the CSS, with this option you will remove them
  • align left: element will float to the left
  • align right: element will float to the right
  • quote right: (available for block quotes only) element will float to the right
  • quote left: (available for block quotes only) element will float to the left
  • uppercase: the text in the element will be rendered with uppercase property active

In the Effects group you can decide the effect the element will adopt when revealed on scroll.

Images on fly

Mood uses in many cases a script to resize the images on fly. This with the intention to reduce the amount of images that physically occupy space on the server. This also allows you, in many cases, to define the ratio and the origin from where the image will be cropped, for instance on Live Customizer or Visual Composer.

The width is often calculated according to the content width by the amount of elements per row. But, for particular cases (fullwidth sections, for instance) you can set a optional image width.

In the same way you can resize an image on fly when you put it directly in the text editor, by using, for instace, the Single image shortcode provided by Visual Composer. As you can see in the image on the right, below the image thumbnail you can type the image size. You can select among the registered image sizes:

  • thumbnail (150 x 150);
  • medium (300 x original a.r.);
  • large (1024 x original a.r.);
  • mood_thumbnail (100 x original a.r.);
  • mood_large (global width x original a.r.);
  • mood_medium (half global widthx original a.r.);

But you can also enter a custom size, for instance 300x100, where 300 is the width and 100 is the height. The custom size must be entered in this way, without empty spaces or other characters but number and the sign x between the width and the height.

If you want to assign a custom size that respects the original ratio of the image, just set the height as zero, so, for instance 300x0

The cons is that, once the script stores an image with a name, if you replace it by keeping the same name, the script won't replace it for the custom sizes it created on fly. So you have to use this workaround instead:

Add this snippet to a child theme or the file wp-content / mood-includes / includes.php as described here, and refresh your site. N.B.: after refreshing the site you have to delete the snippet.

Visual Composer

Mood comes with 17 custom shortcodes created for Visual Composer.

Responsive style

On many of the Visual Composer modules provided by Mood and for some of the default ones, the theme provide an extra tab called Responsive style that allows you, in general, to override some settings (margin, padding etc.) at particular window widths you can define on the tab itself.

Custom shortcodes

Mood Buttons

You are able here to override the default buttons defined in Live Customizer. Together with the default settings (colors, borders etc.) you can select the alignment, the width of the button, the animation during the page scrolling. You can also add an icon, decide its color, position etc. Also shadows are settable.

You can also decide to create a dual button, i.e. a button split into two parts, with different text, links, colors and so on.

Responsive style tab is available as well.

Mood Icon Box

This module not only allows you to select among the almost 2000 icons provided by Icon54, but allows you to create advanced boxed made by icons and text, where you can decide the look of the icons (colors, background, border, animation, stroke width, gradient), its alignment respect to the text and the effect when revealed during the page scrolling.

Responsive style tab is available as well.

Mood Google Maps

In order to use Google maps module you have to enter in Customizer → GoogleAPI key an API key provided by Google. To get your Google Maps API key visit this link and follow the info.

Insert Google Maps by entering the latitude and longitude of a place. To get those coordinates please read here. You can also select the zoom, the type (roadmap, hybrid, satellite, terrain and streetview) and some values relative to the different types.

You can upload a custom marker on Mood Google Maps Settings → Design → Display marker, and, in the field below, you can paste the JSON code to customize the colors of a map (you can find many examples on Snazzy)

Responsive style tab is available as well.

Mood Image Box

With this module you can create image with text over them. You can set the text color and add content through a visual editor box, you can set the image alignment, a URL to link the image, the animation on scroll reveal.

You can also decide the size of the image and resize it on fly as described above, read here for more info.

Responsive style tab is available as well.

CSS styler and animator

This is a module that allows nested modules: it means that it can contains other elements and the its settings will applied to the nested elements.

It allows to assign an effect to reveal elements on scroll, to assign a parallax value to any element for stunning effects, to fade elements when they are more close to the top or the bottom of the page, to assign a shadow to the contained elements or to manage various CSS properties like display and z-index.

You can also set a max-width and a min-width and decide the horizontal alignment of the element.

Responsive style tab is available as well.

Contact form styler

This is a module that allows as nested module Contact Form 7 shortcode only since it serves to add extra features to your contact forms: floating fields, border styles, custom font size, border radius, double borders, custom text color and background color, and gutter among fields.

There is also a tab to define the properties of submit button: you can enclose it in the last field of the form, add an icon and define the properties of the icon, decide the button alignment, the colors, borders etc.

Responsive style tab is available as well.

WooCommerce shortcode styler

This is a module that allows as nested modules the ones provided by WooCommerce to display list of products, and it serves to add extra features to your product shortcodes. You can decide the grid (layout) among rows, vertically cascading grid (aka masonry) and carousel, the text position, text color and overlay color, text alignment, animation on scroll, gutter, image ratio as described here.

On the Content tab you can select what elements to display: categories, product titles, prices, ratings, quick view link (if enabled), add-to-cart button and labels ("sale", "out of stock" etc.).

There is also a tab to define the properties of submit button: you can enclose it in the last field of the form, add an icon and define the properties of the icon, decide the button alignment, the colors, borders etc.

Responsive style tab is available as well.

Pricing tables

This is a module that allows only one type of nested module: the Pricing Column, available once you added the Pricing tables one.

Create pricing tables on fly, and set their colors, border radius, equal height property and animation on scroll.

You can also set different styles for the highlighted column (read the section below for more info)

Responsive style tab is available as well.

Pricing Column

You can also decide if you column will be "highlighted", you can set a header image, title, subtitle, currency (and its position), price, call-to-action button, description and also enter some content with a regular visual text editor.

Create gallery on fly by adding images (multi-select is enabled) and display then as fixed grids or vertically cascading ones (masonry).

You can set the background color of the elements that contains the gallery and the color of the caption that will be displayed below the image (look at the image below).

Besides the caption, you can set other values for each image:

Those values will be used if the image is open in a lightbox, except for the field Tags that will be used instead to create the visual filter:

This module also allows you to set the effect on hover (zoom out), to add a border around images and to define a section title, its position respect to the tag filter, the space between the title and the images, the elements per row (also on touch devices for responsiveness), gutter among elements, border radius, action on click (nothing or lightbox or the external link defined in the meta value of the image itself), animation on scroll.

Mood Work List

The custom post type works is due to the plugin Mood addons. Once you added one or more items, you can display them thanks to this modules.

It allows to display your portfolio items (works) by selecting them by category or tag, or to exclude and include them by ID (thank to a built in ajax search function).

With a checkbox you can also avoid to display the same item twice on the same page, if you want to use the shortcode several time across the page content.

On Design tab you can set:

  • grid (rows, vertical cascading grid aka masonry or horizontal carousel)
  • the background color of the element that contains the item list
  • text position (below or reveal on hover state, at the bottom or the middle of the image)
  • to display a border around items
  • the color of the overlaid level (among the global text color and the global accent color, since the text color over the image will always be the global page background color)
  • the animation on scroll
  • the metro layout (more info in the Works section)
  • the amount of elements per row (also settable for tablet landscape view, tablet portrait view and mobile phones portrait view)
  • the items per module
  • whether to display the pagination and select between a classic pagination and a load more button
  • the gutter between element
  • the optional image width
  • the aspect ratio of the image, by setting its ratio width, height and crop origin (click here for more info)

On Elements tab you can decide:

  • a section title and its properties
  • to display the tag filter above the portfolio items and to separate it with a line
  • to add some space between filter and items
  • the color of the filter
  • to display work category links
  • to display the post title
  • the title heading tag
  • to link the title to the post or to nothing
  • to display the likes counter
  • to display the read more button
  • to open featured media in a modal box (ColorBox)
Responsive style tab is available as well.

Mood Post List

This module allows to display your blog posts by selecting them by category or tag, or to exclude and include them by ID (thank to a built in ajax search function).

With a checkbox you can also avoid to display the same item twice on the same page, if you want to use the shortcode several time across the page content, besides a field to ignore sticky post and the fields to decide the post order.

On Design tab you can set:

  • grid (rows, vertical cascading grid aka masonry or horizontal carousel)
  • the background color of the element that contains the item list
  • the text color of the items
  • the item background color
  • text position (below the image, over the image or floating - but width options are available in this case)
  • the background color and the text color of quote post format post
  • to display a border around items
  • the animation on scroll
  • the metro layout (more info in the Works section)
  • the amount of elements per row (also settable for tablet landscape view, tablet portrait view and mobile phones portrait view)
  • the amount of items per module
  • whether to display the pagination and select between a classic pagination and a load more button
  • the gutter between element
  • the optional image width
  • the aspect ratio of the image, by setting its ratio width, height and crop origini (click here for more info)

On Elements tab you can decide:

  • a section title and its properties
  • to display the tag filter above the items and to separate it with a line
  • to add space between section title and items
  • the text color of the filter buttons
  • to display the featured image (or the media relative to the post format)
  • to display the category links
  • to display the post title
  • the title heading tag and its font size
  • to display the likes counter
  • to display author name
  • to display the date and how to display it (from now or as absolute date)
  • to display the estimated reading time
  • to display the comment amount
  • to display the content, the excerpt or nothing
  • to display the read more button
Responsive style tab is available as well.

Mood team members

The custom post type team member is due to the plugin Mood addons. Once you added one or more team members, you can display them thanks to this modules.

You can include or exclude members by ID. If you leave empty the field Include only all the members are displayed, so you can exclude them by using the field Exclude members.

You can set the order of the items and, in the Design tab you can set:

  • the effect on scroll
  • the amount of elements per row (also settable for tablet landscape view, tablet portrait view and mobile phones portrait view)
  • the amount of items per module
  • the gutter between element
  • the optional image width
  • the aspect ratio of the image, by setting its ratio width, height and crop origin(click here for more info)
  • the border radius

On the Look tab you can set:

  • the title heading tag
  • to link the member title to the member single page
  • the text position (fixed over the image, over the image on hover state, below the image)

Responsive style tab is available as well.

Mood testimonials

The custom post type testimonial is due to the plugin Mood addons. Once you added one or more testimonial, you can display them thanks to this modules.

You can include or exclude testimonials by ID. If you leave empty the field Include only all the testimonials are displayed, so you can exclude them by using the field Exclude testimonials.

You can set the order of the items and, in the Design tab you can set:

  • grid layout (rows, vertical cascading grid aka masonry or horizontal carousel)
  • the effect on scroll
  • the alignment
  • the text color
  • the maximum width
  • the amount of elements per row (also settable for tablet landscape view, tablet portrait view and mobile phones portrait view)
  • the amount of items per module
  • the gutter between element
Responsive style tab is available as well.

Mood typography dividers

Put animated horizontal rules across your page with this module.

You can decide the thickness, the alignment, the max width and, of course, the animation during the scroll.

You also select among three types:

  • straight
  • wavy
  • zig-zag

Besides a solid color you can also select a secondo color to create gradients.

Responsive style tab is available as well.

Mood countdown

Thanks to a useful date-picker, you can enter the date you wish to use as a starting point for your countdown.

You can also decide the text alignment, the text color and the font size of the counter.

Responsive style tab is available as well.

Mood counters

Three types of counters are available:

  • progress bar
  • progress chart (circular)
  • numeric counter

Progress bars and progress chart allows you to decide their thickness, the text color, the track background color and the color of the progress bar. It is available a label to enter some descriptive text, a maximum amount (used to calculate the position of the bar), a value (that determine the position of the bar) and the unit. You can decide custom border radius, the max width allowed (in pixels) and the alignment if the bar is smaller than its container.

Numeric counters allows you to use icons as well. For the icons you can decide the color, the animation, the stroke width, the size. For the counters you can set the text color, some descriptive text, a value and the unit to display. You can also the maximum width allowed (in pixels), the text alignment and the alignment of the counter.

Responsive style tab is available as well.

Mood media player

With this module you can display videos and audio files, both hosted on your server (mp4, ogg, webm, mp3) and from external sources (Vimeo, YouTube, SoundCloud, Spotify).

For self hosted media are also available the option playlist, that uses the Wordpress native playlist function.

In the tab Lightbox you can also decide to add an image that, once clicked, will display the media player in a light box.

Visual Composer default elements

Many of the default elements of Visual Composer, like rows, inner rows, columns, have a tab called Mood extra or fields added to their default tabs with additional features that come from the theme.

Rows

For the element row Mood provides some extra features in the tab Design options:

  • background repeat options
  • background position input field
  • background custom size input field (if you need to add special rules)

For the element row Mood provides some extra features in the tab Mood extra:

  • scroll down indicator: add an animated arrow on the bottom of the row to warn that the page can be scrolled (useful for full-height rows). You can also set its color
  • navigation labels: set a unique title to activate the vertical navigation. Do the same with other rows on the same page and you'll get this result:
  • vertical title: you can display a small vertical horiented section title, aligned to the right or the left of the row, inside it or ouside
  • overlay color: you can set a semi transparent color that covers, for instance, the row background image
  • 2nd overlay color: if you set a value for this value and the value below is set, a gradient will be apply over the default row background. In this case you'll be also able to set a gradient direction
  • inner shadow: put a shadow effect to the top or the bottom of the section (look at the image below)
  • z-index: for more info about z-index read here
  • max height: intended in pixels, this field allows you to that the section is taller than a certain height
  • min height: intended in pixels, this field allows you to that the section is taller than a certain height
  • relative height: set a height relative to the window (intended as percentage)
  • background map latitude: to use this feature both latitude and longitude must be filled and you must have entered your Google API key (read here)
  • background map longitude: read above
  • zoom of the Google map, if in use
  • Google map custom style, if the map is in use
  • background parallax: if you added an image to the default Visual Composer field Row settings → Parallax (to see it you have to select Simple or With fade options), with this field you can set the parallax coefficient to decide the speed and the direction (only vertical) of the effect.
  • parallax position: intended in percentage, this field move the parallax image you set in the field below Row settings → Parallax (to see it you have to select Simple or With fade options) and makes it occupy only part of the row (look at the image on the right)
  • overflow: the CSS overflow property specifies what happens if content overflows an element's box. With overflow:hidden the elements of a row stay inside the row and won't overflow the near elements. With overflow:visible the elements in a row, if bigger than the row or moved away from its edges by using negative margins for instance, will render outside the row's box (look at the image on the left).

For the element row Mood provides some extra features in the tab Column style. On this tab you can define some style that will be applied to all the columns contained in the row itself that will be forced to adopt them: margins, borders, padding, background, text color, width, alignment, custom CSS code.

Responsive style tab is available as well and, besides regular things like margins, padding etc., allows you to decide at what window size hide parallax background, or change its position, or hide the background video. You can also set responsive styles for all the columns contained in the row itself.

Inner rows

For the element inner row Mood provides some extra features in the tab Mood extra:

  • inner shadow: put a shadow effect to the top or the bottom of the section (look at the image)
  • max height: intended in pixels, this field allows you to that the section is taller than a certain height
  • overflow: the CSS overflow property specifies what happens if content overflows an element's box.With overflow:hidden the elements of a row stay inside the row and won't overflow the near elements.With overflow:visible the elements in a row, if bigger than the row or moved away from its edges by using negative margins for instance, will render outside the row's box (look at the image on the left)

For the element inner row Mood provides some extra features in the tab Column style. On this tab you can define some style that will be applied to all the columns contained in the row itself that will be forced to adopt them: margins, borders, padding, background, text color, width, alignment, custom CSS code.

Responsive style tab is available as well and, besides regular things like margins, padding etc., allows you to decide at what window size hide parallax background, or change its position, or hide the background video. You can also set responsive styles for all the columns contained in the row itself.

Columns and inner columns

For the elements column and inner column Mood provides some extra features in the tab Mood extra:

  • sticky column: a sticky element is an element that stays fixed when the rest of the page scrolls. Sticky elements also can change this behavior and stay fixed if they have space, scroll together the other when they reach the edges of their container, as the image shows (look at this image)
  • max width: if you want that your column is smaller than the default widht
  • floating: if the column is smaller than its container you can decide to align them horizontally
  • repeating effect on scroll: if you set an animation in the General tab, here you can decide to display the animation all the time the element is scrolled into view
  • animation delay: if you want the element appears after a while
  • overflow: the CSS overflow property specifies what happens if content overflows an element's box.With overflow:hidden the elements of a row stay inside the row and won't overflow the near elements.With overflow:visible the elements in a row, if bigger than the row or moved away from its edges by using negative margins for instance, will render outside the row's box (look at the image on the left)

For the elements column and inner column Mood provides some extra features in the tab Responsive style where you can set, besides margins, paddings, background etc., a max-width, and a different floating.

Text blocks

For the elements text blocks Mood provides, in the tab General the ability to set a general text alignment: it sets the alignment for all the text contained in the block so you haven't to add the text alignment to all the tags.

For the elements text blocks Mood provides some extra features in the tab Mood extra:

  • box shadow
  • maximum width (intended in pixels)

Responsive style tab is available as well and, besides regular things like margins, padding, custom CSS etc., it allows you to decide at what window size to change the general text alignment.

Revolution Slider

If Revolution Slider plugin is activated you will see the module to insert a slideshow into your page and Mood adds a tab Mood Extra to it, where you can set an extra parallax effect to the slideshow.

Tabs, Tours and accordions

To the default tab feature, Mood added some extra parameters in the tab Mood extra:

  • 100% width: the width of the tab labes will be expanded to the entire column width
  • text color
  • background color (not available for accordions)

Also in the tab sections Mood adds a Mood extra tab where you can:

  • add an animation on scroll to the tab
  • use a custom icon picked from Icon54 that will override (if selected) the default Visual Composer icon

N.B.: the tab sections properties are available for accordion module and tour one as well

Meta boxes

Page options

Meta boxes are used across the back-end to expand the possibilities of pages, posts, categories, custom items etc.

Below the text editor, on pages, posts and single works, the Page option metaboxes allow you to set a large range of values. The box is divided in tabs.

Header

Set here the transparency of the header if different than the global one. You can also decide to display the alternative logo, for color consistency.

You can set a different navigation menu than the default one.

Lastly you can hide either the navigation menu only or the entire header to display, for instance, a coming soon page.

Background

Set the background color and the background image of the page.

Pay attention: those features are visible with boxed layout only.

Title section

Here you can decide:

  • to display or hide the entire title section, or to display the title section without text (to show instead an image or a video for instance) or to hide breadcrumb
  • to set a subtitle
  • to display a title section background (image, self-hosted video, external video, Google map)
  • a color overlay
  • a second color to create gradients
  • the title text color (that will be inherithed by the transparent header as well)
  • title section height (intended as percentage of the window height)
  • the font size (intended as EMs)
  • the text align and the vertical align
  • to display a scroll down indicator

Content

By default all pages, posts, etc. have some space above and below the content, between the title area and the beginning of the text and beween the end of the text and the footer.

To avoid this just tick the checkbox on this tab.

You can also change the page background color on this very tab.

On this tab you can hide both the footer and the footer info bar.

Visual Composer options

By default Visual Composer adds some margin to their rows. If you prefer, this metabox allows you to remove the margins for design reasons.

Post footer options

For single posts and single works on this section, below the text editor, you can hide sharing icons, like button, related items, the tag list and (posts only) the author info box.

Thumbnail view

For single posts and single works on this section you can define the look the post will have when metro layout is activated. You can activate it with the shortcodes available with Visual Composer. When you create a shortcode with Visual Composer to display metro layout grids, it is very important to set the grid layout as masonry and to fill both the ratio width and the ratio height fields with a value different than "0".

By default, Mood displays at the top of single posts and single works, the featured image, if available. But on this section you can decide to hide it or to display, instead, the media item relative to the post format when available (audio, video or gallery). This option won't be applied when the item is listed with other items.

Categories and taxonomies

For post categories, product categories, product tags and work categories are available many custom field to overrid the default options: template, sidebar, items per row, grid, title section options etc. Just edit one of these taxonomies or create a new one to see the options available.

Mood Menu

Even if you can manage your menus on Live Customizer as well, please pay attention: mega menu features are disabled on Live Customizer, so if you manage your menus in that area you will lose all the settings related with the mega menu. I recommend, instead, to always manage menus on Appearance → Menus.

Here is a short video that illustrates the basic menu functions.

Important: click the "CC" icon and activate english subtitles for more info.

If the basic working od the menu is illustrated in the video above, let me say you may use some shortcodes in the menu. Use these shortcodes with custom elements and put them in the URL field:

Translations

It is possible to translate every single string that the theme outputs on the frontend to any language you like. Mood is compatible with the best and most widely used multi-language plugin: WPML. But you can also use other famous plugins like Polylang and Loco Translate.