Massive Dynamic

WordPress Website Builder


From all members of PixFlow team, we would like to thank you for purchasing our theme. We are honored to help you build your website. If you have any questions that are beyond the scope of this help file, please feel free to contact us via our support forum at support.pixflow.net.

Massive Dynamic is a WordPress theme, so you need to install WordPress first. If you need information about installing WordPress, please visit this page: http://codex.wordpress.org/Installing_WordPress

 

To use Massive Dynamic, you need PHP 5.3 or higher and WordPress 4.3.1 or higher installed on your server.

When you download the complete theme package from themeforest, you get a .zip file with everything inside it.

 

Contact Form Templates: This folder includes text files which contain contact form templates.

Documentation: This folder contains Massive Dynamic’s documentation. Other plugin documentations are also here.

Licensing: This folder contains text files for licensing.

massivedynamic.zip: This is the WordPress theme file, you should use it for installing the theme.

When you install Massive Dynamic, a message appears in admin dashboard of WordPress and asks you to install required and recommended plugins. Some of these plugins are included in theme .zip file and some of them are on WordPress plugin repository. Here is a brief description of each plugin that appears in the message:

 

  1. Download theme files from themeforest.net and unzip it to get "massivedynamic" folder

  2. Upload “massivedynamic” folder via FTP to [wordpress folder] /wp-content/themes/ on your server

  3. After uploading the theme, you should change permissions for “massivedynamic” folder to read/write or set it's CHMOD to 775

  4. In WordPress dashboard go to “Appearance > Themes ” and activate “Massive Dynamic” by clicking the “Activate” button.

  5. When you have activated the theme, it will automatically install Visual Composer and take you to builder area.

 

If you haven’t changed the default setting of WordPress, you will see the latest blog posts in builder. It’s suggested to create a page and set it as front page for using Massive Builder. From this point, you have two options for creating your website:

To import demo content click on Import Demo button in builder area

import-demo.jpg


Now find your desired demo website, move your mouse over it and click Demo Detail. Next, a popup explains what you will get when you import this demo. Please notice that when you import a demo, it will overwrite your builder settings like header style, site width, footer, sidebar and etc. Finally, choose the “Yes, I’m sure about this” checkbox and click on Import Demo button.

In Massive Dynamic, almost everything happens in Massive Builder (except adding new posts, pages, portfolios and those kind of stuff). So you don't have to move around WordPress and choose different options in different places. To access Massive Builder, you can go to WordPress dashboard and click on Massive Builder button.

 

massive-builder.jpg

 

When Massive builder loads, you will see an environment like this:

 

builder-guide.png

 

Massive builder is consists of 4 major areas:


Almost any change will affect the website preview area. Now lets read about each area in details.

 

General Options


 

General options includes 4 sections.

Site Layout

Site Width: Use this option to change the width of your website. This width will affect all main sections of your website like header, main section and footer.

Top Space: This option will add a space on top of your website. It works best if you give your website a background.

Background

Background options are the same for main section, header, footer and sidebar.

Background: You can choose to enable or disable the background for body of the website.


Color: You can choose between solid or gradient color for background. Gradient gives you 3 options for creating a gradient color.  


Image: If you choose image, you can upload an image for background. Here are available options for background image:

Repeat: “No repeat” will not repeat the background image if it’s smaller than the element which contains the background. “Repeat All” will repeat the image in both horizontally and vertically directions. Repeat horizontally and repeat vertically are obvious.

Size: “Stretch” will fit the background image to background holder while ”Normal” will display the real size of images.

Movement: If you choose “Scroll” the background scrolls along with the element, while choosing the “Fixed” option fixes the background with regard to the viewport.

Position: Indicates the starting position of background image, works best if the image is smaller than background holder element.

Opacity: You can change the opacity of background image.

Color Overlay: Gives you the option to enable or disable the overlay. This overlay appears on top of background image and can be solid or gradient.


Texture: You can choose this option to use texture background for your website. You can also change texture’s opacity and add an overlay on top of it.

Custom CSS

You can add your custom styles here. Please note that after you’ve added the styles, you should save your changes and refresh the page.

Custom JS

You can add your custom script here. Please use your scripts without <script></script>, also after you’ve added the scripts, you should save your changes and refresh the page.

 

Header Options


 

Header options are consist of 6 different sections.

Header Layout

Here you can choose to have top header or side header.

Header  Width: Use this option to change header’s width.

Header Height: Use this option to change header’s height.


Container Width: Container is an invisible box inside header, it gives you the option to have a full-width header with boxed content holder inside it. It’s also a good option for creating a space between header edges and the content holder inside it.

Top Space: You can use this option to make a space between header and top of your website.

Header Styles: You can choose 5 major styles for top header and 2 styles for side header, some of those styles have different types. Try playing around with different styles and choose the right style for your website.

*Please note that some of header styles do not support item resize functionality. Also if you changed header style and it didn’t display header items correctly, you need to go to header > appearance and change items color.

Header Scroll Behavior: In Massive Dynamic, you can choose a functionally for header, this functionality triggers after you scroll down or scroll up. “Don’t Move” will disable this functionality, “Move” will stick the header to it’s current position and resize it, “Appear After” give you the option to display a second header after a specific amount of scrolling. Last choice, provides two options to choose second header’s animation style and to define the distance for displaying the second header.


Navigation Item Style: Here you can choose between text, icon and a combination of both. This option will change the appearance of header navigation.

Appearance

Based on scroll behavior you have chosen, you might have secondary header styles here.

Item’s Color: Use this option to change the color of header items.

Item’s Hover Color: When you move your mouse over items, this color will be shown.

Bg Type: It’s the background color of header, it can be solid or gradient.


Logo Style: You can choose dark logo for header with light background or choose light logo for header with dark background. You can upload these logo in branding option.


Header Border: You can use this option if you have chosen transparent background for header.


Popup Styles: This option only appears if you have chosen header gather style. It gives you the option to choose popup element’s color and background color.   


Drop Down & Megamenu

Here you can change the appearance of header drop downs.

Background Color: Use this option to change the background of drop downs.


Element’s Color: Use this one for changing the color of text and icons in drop down.


Element’s Hover Color: When you move your mouse over an item in drop down, this color will be used.

Business Bar

You can use this section to display your contact information on top of your website.

Info Style: Contact information in business bar can be displayed with icons or dots.

Social Style: Social items have the same option as contact information.


Element’s Color: Use this option to set a color for all elements in business bar.

Background Color: Use this one for changing the background color of business bar.

Address: Use this option to display your address in business bar.

Tel: Use this option for putting your phone number in business bar.

Email: This option is used for adding email address in business bar.

Typography

Header can have a unique typography for all texts inside it.

Font Family: Choose a google font family for texts in header.

Size: Set a font size for header elements.


Weight: Choose the weight for google font you are using in header. Please note that only this variation of font will be loaded on your website.


Letter Spacing: Choose the space between letters here.

Italic: Choose to have italic text or not.  

Responsive

Here you can choose options for website header in responsive view.

Header Skin: Dark header has light elements, while light header has dark elements.

Logo Skin: Choose dark logo for light header skin and light logo for dark header skin. You can upload this logos in Branding options.

Header Item’s Size & Position

You can resize icon, navigation or notification section in header. When you are in builder environment move your mouse over the related handles and resize the sections. You can also change their position by drag & dropping the sections.

header-handles.png


 

Site Content Options


 

Main Layout

Main is the section between website header and footer, while Container is an invisible box inside Main section.

Main Width: You can change main section’s width here, it can not be bigger than website’s width. All full-width rows will use this size.

Container Width: All container sized rows will use this size.


Use Top Padding to add a space between Main section and top header, or use Sides Padding to add a space between Main section and side header.


Background

You can choose a solid or gradient background for main section.


Please note that you won't see the background unless you set the row's background to transparent. To do that, move your mouse over a row, click on Row Settings, set Row Type on Solid Color, then go to BG tab and click on color picker, reduce opacity to zero and press the save button.



Logo & Branding


 

In branding section of Massive Builder, you can upload 3 logos. Dark logo, light logo and a logo which will be displayed in notification center of your website. It’s suggested to upload a logo with proper size (120x40 pixel or something with similar ratio) for better website load time.



Typography


 

Use typography section to define font family, font size and other attributes of website texts. Please note that these settings will affect most shortcodes except text shortcode, because shortcodes use headings, paragraphs and links in their structure.


We have divided the typography into H1 to H6, paragraphs, links and charset of google fonts. Since they all use the same settings, we explain them once.


Font Family: Choose a google font family for headings or paragraphs.


Size: Set a font size for headings or paragraphs.


Weight: Choose the weight for google font you are using in headings or paragraphs. Please note that only this variation of font will be loaded on your website.


Line Height: Set the line height for headings or paragraphs.


Letter Spacing: Choose the space between letters here.


Color: Set a color for headings or paragraphs.


Italic: Choose to have italic text or not.  

Please note that link settings will not affect the links in shortcodes.


Charset: Here you can choose to load the extra charsets for chosen google fonts.



Notification Center


 

Notification center is a unique feature which provides access to latest blog posts, latest portfolio posts, search and shop cart. You can change notification center settings from Notification Center options in Massive Builder.


Latest Blog Posts and Portfolio Posts Number: Using these options, you can set the number of latest posts which will be shown in notification center.


Skin: You can choose a dark or light skin for notification center popup.


Accent Color: In notification center, some elements have a different color, you can change that color using accent color.


You can choose to display latest posts in notification center or not. If you choose to display them, you can set the active tab of notification center on latest portfolios or latest blog posts. Also you can display notification icon in header, when this icons is clicked, it will take you to active tab.


In next set of options, you can choose to have Search and Shop section in notification center. Also you can choose to display search and shop icons in header.


notification-center.png


 

Any change you make in Layout and Website Options of Massive Builder, will affect all pages of your website. So what if you want to have a page with different layout?

 

To solve this issue, we introduced general and unique settings. General settings is used for creating a main layout which is used for several pages. If you want to create a page with different layout and settings, then you should switch to unique settings. For example I have a website with 4 pages, home page, portfolio page, contact page and about page. I create home page with general settings and I want portfolio page and about page to look the same, so I simply create two new pages and add my content using Massive Builder. But I want contact page to have a different layout, so I open contact page in Massive Builder, click on general settings on tools section of Massive builder and choose unique settings. From now on, any  layout change I make on contact page, will not affect other pages.

 

multiple-layouts.png

 

After you’ve finished building page layout, it’s time to add contents to page. To access shortcodes, click on shortcode button on left bottom corner of Massive Builder.

shortcode-button.png

 

When shortcode panel pops up on left side of screen, you can see filter buttons and search field. They can help you find shortcodes quickly. Please note that typography options in Massive Builder will affect all shortcodes except text shortcode. Now let's get familiar with more complicated shortcodes.

 

Row Shortcode

Row shortcode is one of the most useful shortcodes in Massive Dynamic. When you drop it in website preview, you can move your mouse over it to access row and column settings.

row-shortcode.png

 

Move Icon: it appears on top left corner of row shortcode, you can use it to drag & drop the row shortcode.

 

Delete Icon: you can find it next to move icon, use this icon to delete row completely.

 

Clone Icon: this one comes after delete icon, you can use it to make a copy of row.

 

Row Settings: This is where all the good things happen! Click it to open row settings panel.

 

Columns Layout: Use this button to change the number of columns in current row. You can use column presets or create a custom layouts. If you want to create a very custom layout, you should use column summation of 12, just like bootstrap.

grid-system.png

For example if you want to have col7 + col5 you should enter 7/12 + 5/12 in custom row layout field.

 

Column Settings: This is where you can do some customization on current column.

Row Settings Panel - General Tab

Row Background: Here you can choose a type for row background. Your options are solid color, image, color transition, gradient & image and video. Based on your choice, second tab in row settings will change, you can go there and choose different options for current background type.

 

Background Width: Full-width size will use main section’s which. You can access both main and container width in Site Content > Main Layout.

 

Content Width: The options are the same as background width. Using content and background width, you can create a full-width row with boxed content.

 

Fit To Screen: If you choose this option, current row will take the same height as user’s screen height. It’s a great option for first row.

Row Settings Panel - BG Tab

Options of this tab will change based on row’s background type.

 

Solid Color Option:

 

Image Options:

 

Color Transition will start from begining color and ends on destination color, but colors only change if you scroll.

 

Gradient options are same as image options, but instead of solid color, you can choose gradient background color.

 

Video Options:

You can add link to both webm and MP4 file, because none of them are supported in all browsers. Still MP4 has a better support in different browsers.

 

Row Settings Panel - Design Tab

Inner Shadow: adds an inside shadow to bottom of row

 

Sloped Edge: creates a crooked triangle on top or bottom of row. You can set its color according

to next or previous row’s background color, so it seems like that other row overlapped current row.

 

Set Parallax: adds parallax functionality to background image. For parallax speed, 1 is the slowest and 10 is fastest. For faster parallax speed, you need a taller image, otherwise the background image will keep repeating.

Row Settings Panel - +URL Tab

You can use this tab for adding an ID to tab for creating one page menu.

How to add a row in menu:

 

Row Settings Panel - Spacing Tab

Here you can add paddings and margins to row.

Text Shortcode

Text shortcode seems simple, but it has a lot of options.

 

Text Settings Panel - Titles Tab

Title Number: you can have more than one title, if you choose more titles, they will switch like a slider.

 

Text Settings Panel - Title Option Tab

Title Style: you can choose between solid, gradient and image. Please note that gradient and image are not fully supported on some browsers.

 

Title Size: set a font size for titles.

 

Title Line Height: set a line height for titles.

 

Letter Spacing: space between title letters.

 

Hover Letter Spacing: space between title letters when you move your mouse over it.

 

Easing: choose the easing for switching between normal and hover letter spacing.

 

Title Bottom Space: adds a margin to bottom of title.

 

Use Custom Font: you can use custom fonts for title. Please note that using a lot of fonts affect website load time.

 

Some of these options are the same for content text.

 

Text Settings Panel - Animation Tab

You can choose to have animation for all shortcodes. Animation tab have same settings in all shortcodes.

 

Animation Delay: adds a delay to beginning of animation.

 

Animate From: choose the origin of animation.

 

Animation Type: Animations either play when elements enter viewport or they play when website loads.

 

Contact Form Shortcode

To use contact form shortcode, you should first install Contact Form 7. When you install Massive Dynamic a message appears in dashboard and asks you to install plugins, You can install Contact Form 7 from there.

 

To import our contact form styles, go to massive dynamic complete package files(you should download complete package from themeforest) and open Contact Form Templates,

locate 'business contact form.txt' or 'classic contact form.txt', copy the text inside it, then go to WordPress dashboard > Contact > add new, give this form a name and replace the text in textarea with the text from text files, now press save. Now you can come back to contact form shortcode and choose the form you've just created.

 

Subscribe Shortcode

To use subscribe shortcode, you should first install and configure "MailChimp for WordPress Lite" plugin. This plugin takes your mailchimp API key and connect the form to a list, so you can keep track of your subscribers in mailchimp.

 

Product & Product Categories Shortcode

To use these shortcode you should install WooCommerce plugin first. You can read this article for getting started with WooCommerce .


 

Price Table Shortcode

To add cool tables, you need to install Go Pricing plugin first. If you need help for using this plugin, we’ve already added plugin documentations in Massive Dynamic package on themeforest.

 

Creating Portfolio Items

To create new portfolio posts, navigate to WordPress dashboard > Portfolio > add new

  1. give a name to this portfolio item

  2. add this item to a portfolio skill(category) or create a new skill for it

  3. upload a feature image for this item, it’s used as portfolio thumbnail

  4. now, for portfolio detail page you can choose premade layout, or create your own layout using back-end editor or Massive Builder

  5. in the end, click the publish button

 

creating portfolio.png

 

Portfolio Shortcode

Go to Massive Builder and click on shortcode button, then drop a portfolio multi-size shortcode in website preview area. If you have already added some portfolio items, they will be shown in portfolio shortcode. Click on Portfolio Setting Button to open Portfolio setting panel.

 

portfolio panel.png

 

Portfolio Multi-Size Settings - General Tab

Meta Position: This option can change portfolio layout completely, having portfolio meta inside or outside portfolio item will give you 2 different layouts.

 

Category: Choose portfolio categories here. Portfolio shortcode will only display items in those categories, also this option will add the selected categories to portfolio filter.

Enable Filters: Choose to display portfolio filters or not.

 

Filters Align: Set align for portfolio filters, this option will also affect Portfolio shortcode title.

 

Item’s Padding: Use this option to create borders between portfolio items.

 

Open Details: You can link portfolio items to their detail page or open portfolio thumbnails in a popup. Popup will use large size of portfolio thumbnails, so if you want to use popup, try uploading portfolio thumbnails with proper size(1024x656 pixels).

 

Title: Enter a title which will be shown on top of portfolio shortcode.

 

Enable Like: Choose to display like option on each portfolio item.

 

Portfolio Multi-Size Settings - Colors Tab

Title/Filter Color: Choose a color for portfolio filter and title here.

 

Item Text Color: Choose a color for texts of each portfolio item. You should change this color based on portfolio layout.

 

Overlay Color: Set the color of overlay which appears on top of portfolio thumbnail. This overlay only appears in inside portfolio.

 

Portfolio Multi-Size Settings - Item Number Tab

Item Number: Here you can choose the number of portfolio items which will be displayed first, you can add a load more button to display the rest of portfolio items. If you want to display all portfolio items in selected categories, enter -1 .

 

Load More Button: You can enable Load More Button here. Using the rest of options in Item Number tab, you can choose the appearance of  Load More button.

 

Options in animation tab are the same as other shortcodes.

 

Resizing Portfolio Items

When you are in Massive Builder, you can move your mouse over portfolio items and a setting icon will appear, move your mouse over it and click on different thumbnail sizes.

 

portfolio size.png

 

Creating Blog Page

To create a blog page take these steps:

  1. go to WordPress dashboard > pages > add new

  2. give this page a name, for example news or blog

  3. at bottom of the page, you have an option to enter a subtitle for blog page. when you’ve entered the information click the publish button.

  4. now go to Settings > reading > front page displays

  5. choose A Static page and select the page you have created as post page

Adding Blog Posts

  1. enter a name for post

  2. choose a format for post, some formats provide an additional box for adding media. you can read about post formats after “Adding Blog Posts” section

  3. add content to post, you can use Massive Builder for this, but post excerpt will not display text correctly if you start content with a shortcode

  4. add this post to a category

  5. add tags to this post for search purposes

  6. add a featured image to this post, it will be used as post thumbnail

  7. choose options in Post Setting section. Media Height is the height of media in post detail page, the rest are different sections of post detail page

  8. click publish button and your post will be shown in blog page

creating posts.png

 

Post Formats

Standard: This one is a normal WordPress format for blogging.

Quote: You can used this format for making a quote post, Post title will be used for displaying a name for quote and text in editor will be shown as quote.

Video: This post format is for creating a video post, you can enter the youtube or vimeo URL in video URL box below the text editor and enter the description in text editor.

Audio: This post format is for creating a audio post, you can enter the SoundCloud URL in audio URL box below the text editor and enter the description in text editor.

Gallery: This one is like standard post format, but you can display a slider in post detail page. Add slider images in “Featured Gallery” box under featured image box

 

Adding Blog Posts To Others Pages

To add posts in other pages, you can use 2 shortcodes, Blog Calendar and Blog Masonry. Both are pretty straightforward.