MinimaliX


First of all, thank you for your purchasing this awesome theme!

This document has been made to clarify any doubts you may have and to make you learn how to build the best site ever using your amazing theme.

If you have a doubt or any question that is not covered by this documentation, feel free to contact me through the account you used to purchase this awesome theme.

Installation can be made by two ways:

Wordpress installation

  1. Go to Appearance > Themes;
  2. Click Install Themes and then press the upload button;
  3. Find the "minimalix.zip" file on your computer and click Install Now button.

FTP installation

  1. Connect to your hosting via an FTP software;
  2. Unzip the "minimalix.zip" file on your computer;
  3. Upload the extracted "minimalix" theme folder into wp-content / themes in your wordpress installation root.

After the installation go to Appearance > Themes page and activate the MinimaliX theme.

Note: MinimaliX also supports child theme. To install it, you need to follow the FTP procedure and copy the folder "minimalix-child" contained in the "other-files.zip" file you have downloaded and upload it into the wp-content / themes contained in your wordpress installation root.

As for your first use, you can proceed from ground zero. However, we thought you could find useful to get a basical structure. That's why we made demo content available for you.

Importing demo content

You can make your site structure the same as the demo just by achieving the following steps:

  1. Open the file "other-files.zip" you have downloaded and find the folder "demo";
  2. Here there are different *.xml files, each one corresponding to one of the different demos (for example, "creative_demo.xml");
  3. Keep those files in mind and navigate to your WP Admin > Tools > Import;
  4. Select WordPress as for importing data and if it prompts for an installation, install it;
  5. Once its installed, select the demo file of your taste and click the "Upload file and import" button;
  6. Done.
Note: The demo *.xml files include pages and posts, but does not include images to keep the file light in weight and avoid upload issues.

Once you are done, you may need some extra configuration with pages and menus.

Note: Some pages may require the selection of "Amazing Page Builder" page template in order to show properly.

Setting Home and Blog pages

As default view, MinimaliX will show you the blog posts stream. However, WordPress allows you to show a different page for landing users.

To achieve so, check the following steps:

  1. Navigate to WP Admin > Pages and create two new "Home" and "Blog" pages. If you imported demo data, those steps are not necessary and you can go with the imported ones.
  2. In the home page you can put a plain text or use the Amazing Page Builder (you will find how in the dedicated section);
  3. As for the blog page, we made things easy for you. Just create an empty page and give it a title;
  4. Once you are done with both pages, navigate to WP Admin > Settings > Reading and set "Home" and "Blog" pages respectively as default pages for "Front page" and "Blog posts", then click "Save Changes" button.
  5. Done.

Installing the required plugins

MinimaliX requires the following plugins to be installed in order to unleash its full potential:

Once you install the theme, a notify will be shown on top of any admin page. You have to check out the following procedure:

  1. Once prompted, click "Install";
  2. A new page with a list of plugins to be installed will show up.
  3. Install each of them by clicking "Install" just below the plugin name.
  4. If you dismiss the notify or you get out of that screen, don't worry. You can still access it by navigating WP Admin > Appearance > Install Plugins.
  5. Done.
Warning: WooCommerce plugin may need extra attention, but you can checkout more by looking at its dedicated section of this documentation.

MinimaliX comes with Amazing Page Builder, a totally new page builder built with love and ready to offer you a lot of settings and customizations.

Overview

Before we can proceed, there are some points that deserve some focus:

Documentation

Here we go with help and documentation, but keep in mind that APB has so much functions and settings that's almost impossbile to describe them all, so will be selective with arguments we will treat.

On the other hand, its settings are very intuitive, so you will find it easy to use and, in any case, you can always contact us to get support for any problem you may have.

Create a page

  1. Creating a page with APB is easy as 1-2-3! Just check the following steps:
  2. Navigate to WP Admin > Pages and click the "Add new" button;
  3. If this is your first page, you probably need to turn on APB. To do so, just click on the button located between the page title and the text editor;
  4. Once you have clicked, the APB parallel universe will open its gates to you! Just start adding and editing as many modules you want.
  5. You can always go back to the standard WordPress editor by clicking on the "Return to editor" button;
Important: if you start using APB on a page, it will put its code in the standard WordPress editor. So, it's really important for you to do not edit o alter that code in any way, or you may compromise your page integrity.

Modules overview

MinimaliX comes with the following bundled modules:

Adding a module

Once you join in the APB interface, you can add one of these modules by clicking the "+" tab button located in the top of the APB user interface.

Modules general actions

Once you have added a module, you can:

Modules description

This section of the documentations will describe some settings of the APB modules. Let's go!

Slider

This module will allow you to show on the page one of the sliders created with "Amazing Slider", another magic MinimaliX component.

Featured posts

This module will allow you to show all the posts contained in a category of your choice

Quote

With this module you can share a citation with the visitors and, at the same while, its author too.

Gallery

This module uses the default WordPress gallery system, and allow you to create galleries in real time.

Map

This complex module can do magic for you. You can show some contact information and a map location.

Text Strip

This module will show a custom text strip in the page.

Button Strip

Also knows as Call to Action, this modules shows a custom text and a button to redirect visitors somewhere you want.

Search

This module puts a search bar in the page.

Window

This complex module will allow you to put a text caption and an image, setting your custom background and layout.

Showcase

This module allow you to display some linking images in the page.

Icon Boxes

This module shows centered icons and captions, in any columns and rows you want.

Icon Lists

This module shows inline icons and captions, in any columns and rows you desire.

Parallax Boxes

This module shows some colored boxes with a light parallax background.

Promo

This module allows you to add an image and a list you can customize.

Pricing Tables

As the name says, this module will show up as many plans tables you want, with their respective names and prices and as many features you desire.

Skillbars

This modules shows monocromatic or colored bars with custom percentage and labels.

Achievements

This module shows visitors a set of counters with achieved results.

Portfolio

This module allows you to show some posts targetted as portfolio ones and to filter them using custom filters.

Clients

This module allows to show some clients linking logos you have worked with.

Staff

This module allows you to show a description and a showcase of the users who are part of the staff.

Contacts

This awesome module allows you to insert a contact form created with "Contact Form 7". You just need to give it the id.

Custom

This is the most complex and advanced module yet. It allows you to create custom columns layouts, add your own HTML raw code and even shortcodes!

 

FontAwesome

Some modules ask for CSS icon classes. The full list of icons classes available for use can be checked at this page.

To use those icons, just write the name of the icon class without the "fa-" prefix. For example, if the icon is "fa-star", just write "star". It's simple, isn't it?

Conclusive notes

Modules are rich of options. Once you familiarize with settings, you will be able to combine them and create awesome pages. Moreover, further more options and modules may come as new theme updates become available.

Amazing Menu is another brilliant component of the MinimaliX template. It comes to you to allow you create awesome 4-columns megamenus!

Overview

Amazing Menu allows you to build rich, wide megamenu. Inside a megamenu, you can put one of those contents:

Moreover, Amazing Menu allow you to set a custom background image for each menu you create!

Menu columns management

As for APB, you can add menu columns with the "+" tab button and "drag and drop" them into the list to order them as you desire.

Note: Amazing Menu, like APB, is based on the Amazing Framework (all amazing, yay!). That's why, together with Amazing Slider, they share the same common interface.

Activating menu

Once you have create a megamenu, you have to anchor it to one of the menu list items in the header. To do so:

  1. Navigate to WP Admin > MinimaliX;
  2. Click on the "Menu" tab;
  3. Here you will find a dedicated "Amazing Menu" section.
  4. Choose one of the 9 megamenu available boxes, and from the dropdown menu select the megamenu you created.
  5. If checked, uncheck the "Disable this menu" toggle (this is checked by default to prevent useless menu renderings);
  6. Now copy the hook of the box you have chosen (for example "megamenu-1").
  7. Click "" or "Save Changes".
  8. Now, navigate to WP Admin > Appearance > Menus;
  9. Click on "Screen Options" on the top right corner;
  10. If not checked, check "CSS Classes" below the "Show advanced menu properties" section;
  11. Click on "Screen Options" again to close it and add/modify one of the existing menu list items;
  12. Now paste the hook you copied from the Amazing Panel into the "CSS Classes" textbox of the selected menu item;
  13. Click on "Save menu". Done.

MinimaliX delivers with a powerful and brilliant admin panel: Amazing Panel. It has been designed and developed with usability in mind. A top heading tabbed banner will drive you around the different pages.

Amazing Panel can be reached by navigating to WP Admin > MinimaliX.

Walkthrough

Amazing Panel has so many settings that's almost impossible to describe them all in this documentation. However, in this section will be treating some of them and remanding some of them to dedicated sections.

The following arguments will be treated here:

Let's start!

Changing theme color

MinimaliX provides you 12 default colors. However tastes are tastes and you may want to set your own. To do so:

  1. Navigate to the "Theme" tab;
  2. Pick one of the 12 colors by clicking on the respective radio button;
  3. If you want to go with custom color, shoice the "Custom" one and click on the # picker to set your own;
  4. Click "" or "Save Changes".

Setting boxed layout

If the full-width layout is not for you, you can switch it to boxed by doing so:

  1. Navigate to the "Theme" tab;
  2. On top left there is a toggle saying "Use boxed layout".
  3. Check it.
  4. Click "" or "Save Changes".

Changing body font

MinimaliX already uses a sleek font, but you may want to change it with a different one. To do so:

  1. Navigate to the "Theme" tab;
  2. Just below the custom color box, there is a font selector.
  3. Click on it and choice one of the fonts from the dropdown menu.
  4. Once you click it, it will preview in the box below.
  5. Do as many tries you want, until you are done.
  6. Click "" or "Save Changes".

Setting a custom background pattern (applies to boxed layout only)

MinimaliX delivers with different background patterns. The most interesting is surely the "Auto" background, because it creates a color background starting from your theme color choice. However, to change the background pattern:

  1. Navigate to the "Theme" tab;
  2. Just below the custom font box, there is a pattern selector.
  3. Pick one by clicking on the respective radio button.
  4. Click "" or "Save Changes".

Setting a custom favicon

Most of the modern websites have an distintive icon, called favicon, that's the icon appearing on the browser tab and on the browser bookmarks. To change it, check the following steps:

  1. Navigate to the "Favicon" tab;
  2. Use the image uploader to pick one from the gallery or upload a new one.
  3. The uploaded icon must be square and the highest resolution it has, the better it appears on retina devices.
  4. Once you are done, click "Choose Image" and the prompt will close.
  5. Click "" or "Save Changes".

Changing menu colors

MinimaliX has two color options: white or black. To change its color, check the following steps:

  1. Navigate to the "Menu" tab;
  2. Choose the color you want.
  3. Click "" or "Save Changes".

Enable/Disable Sticky navigation

Sticky navigation header is enabled by default. If you don't like it, you can disable it by doing so:

  1. Navigate to the "Menu" tab;
  2. Check the toggle for "Disable sticky navigation" label;
  3. Click "" or "Save Changes".

The sticky navigation logo can be of two types: image or text. By default, MinimaliX produces an elegant automatic text, but you can switch at image logo type at any time. To do so:

  1. Navigate to the "Menu" tab;
  2. On "sticky logo type" select "Logo";
  3. Click "" or "Save Changes".
Note: In order to set an image as "Logo", you have to upload an header logo on the "Header" tab panel. For checking how to do so, visit the dedicated "Header" section of this documentation.

Change blog layout

MinimaliX delivers with 4 different blog layouts:

Once set, the selected blog layout will affect the following template pages:

To switch between the different blog types:

  1. Navigate to the "Layouts" tab;
  2. Under the "Blog layouts" subsection, select de the desired layout;
  3. Click "" or "Save Changes".

Change post layout

MinimaliX delivers with 3 different post layouts:

Once selected, it will affect the single post entry page. To change it, check the following steps:

  1. Navigate to the "Layouts" tab;
  2. Under the "Post layouts" subsection, select de the desired layout;
  3. Click "" or "Save Changes".

Other settings

Here are the other settings for "Pages and posts" tab:

Here are the settings for "Various" tab:

Here are the settings for "Footer" tab:

One of the most amazing MinimaliX fetures is the possibility to totally customize the Login screen.

You can reach the the login settings by navigating through WP Admin > MinimaliX > Various (tab).

The login settings are located just below the Header info banner ones.

Here are the settings you can change up:

Minimalix standard pages come with two layouts:

To change the page layout, when creating a new page or modifying an existing one, you need to change it by modifying the template on the right.

Here is a very huge chapter, because we will treat about one of the most important WordPress features: the Shortcodes.

First of all, there are two types of shortcodes:

Encapsing shortcodes

The encapsing shortocdes are something like this:

[shortcode] I am a cool text [/shortcode]

They may accept some parameters and their major capability is they can encapse text.

Standalone shortcodes

The standalone shortcodes are something like this:

[shortcode parameter="bla" another_parameter="bla bla" ]

They accept serveral parameters, but they won't encapse text.

Shortcodes Overview

The shortcodes are integrated with the WordPress Rich Editor. You can find them by clicking on the "Toolbar Toggle", the last button in the first row of tools in the editor.

MinimaliX comes out together with the following shortcodes:

Column 1/2

This shortcode creates a mid column in the page. It is usually combined together with another Column 1/2 shortcode or two Column 1/4 shortcodes.

[column2]This is a cool text between tags[/column2]

It does not accept any parameter, but it can encapse text, images or other shortcodes.

Column 1/3

This shortcode creates a 1/3 column in the page. It is usually combined together with other two Column 1/3 shortcodes.

[column3]This is a cool text between tags[/column3]

It does not accept any parameter, but it can encapse text, images or other shortcodes.

Column 1/4

This shortcode creates a 1/4 column in the page. It is usually combined together with other three Column 1/4 shortcodes or with another 1/4 Column and a Column 1/2 shortcodes.

[column4]This is a cool text between tags[/column4]

It does not accept any parameter, but it can encapse text, images or other shortcodes.

Highlight

This shortcode creates an highlight effect on the encapsed text.

[highlight color=""]This is a cool text between tags[/highlight]

It accepts the following parameters:

Quote

This shortcode creates a quote section with parallax bg and theme color.

[quote text="Lorem Ipsum Dolor Sit Amet." author="Shakespeare"]

It accepts the following parameters:

Blockquote

This shortcode creates a blockquote.

[blockquote]This is a cool text between tags[/blockquote]

It does not accept any parameter, but it can encapse text.

Tooltip

This shortcode a light color tooltip containing the encapsed text.

[tooltip color=""]This is a cool text between tags[/tooltip]

It accepts the following parameters:

Colorbox

This shortcode a colored box containing the encapsed text.

[colorbox color=""]This is a cool text between tags[/colorbox]

It accepts the following parameters:

Button

This shortcode creates a button.

[button text="Button text" color="#" link="http://" newtab="false"]

It accepts the following parameters:

Filling button

This shortcode creates a filling button.

[fillingbutton text="Button text" color="#" link="http://" newtab="false"]

It accepts the following parameters:

Map

This shortcode creates a map.

[map latitude="37.507385" longitude="15.08675" height="300"]

It accepts the following parameters:

Skillbar

This shortcode creates a skillbar.

[skillbar text="This text will go between shortcode tags" value="Insert a value between 0 and 100." color=""]

It accepts the following parameters:

Tabs

This shortcode creates a set of tabs, for a maximum of 5.

[tabs tab1index="" tab1content="" tab2index="" tab2content="" (...) ]

It accepts the following parameters:

Accordion

This shortcode creates an accordion, for a maximum of 5 sections.

[accordion accordion1index="" accordion1content="" accordion2index="" accordion2content="" (...) ]

It accepts the following parameters:

MinimaliX supports WooCommerce, the best e-commerce plugin available out there for WordPress. Altough it's really intuitive and WooCommerce provides its own documentation, there are some things that you may find handy to get in knowledge with here.

We thought that once you are there, you may want to get the best support and we are ready to get you started and ready to sell you products!

Walkthrough

So, if you want to start configuring your site at the best, here there are some important steps you may take into consideration:

  1. WooCommerce installation;
  2. WooCommerce pages integration;
  3. WooCommerce thumbnails size (important);
  4. Menu configuration;
  5. Adding the live cart icon to the header.

Let's start!

WooCommerce installation

First of all, since WooCommerce is integrated in MinimaliX, it's one of the required plugins, so it needs to be installed.

Note: You can find how to install required plugins (WooCommerce too) in the "First use" section of this documentation.

WooCommerce pages integration

Once installed, WooCommerce will prompt for pages installation. A notify will appear at the top of any admin page. So, take you changes and make it setup the default WooCommerce pages for you.

Once you have let him configuring pages for you, 4 new important pages will appear in your admin pages section:

WooCommerce thumbnails size

One important step WooCommerce documentation doesn't make clear enough is about thumbnail size. With the introduction of HDPI devices (retina), images need to be more sharpen and detailed in order to make users benefit of such high resolution screens.

So, before you start inserting any products, it's really adviced to increase the thumbnails resolution, in order to make the image you will upload sharpener and well-looking. To achieve so:

  1. Navigate to WP Admin > Appearance > Menus;
  2. From the left sided options, add the pages and add the new WooCommerce pages, except the Cart one (MinimaliX has a more sophisticated one).
  3. Once you are done, click the "Save Menu" button.
  4. Done.

Menu configuration

Once default pages are set up, you can proceed by adding them to the header menu. To do so:

  1. Navigate to WP Admin > WooCommerce > Settings;
  2. Click on the "Products" tab and find the "Product image sizes" subsection;
  3. Now, for:
    • Catalog Images, set "300 x 300" (px) resolution, with "hard crop" option checked;
    • Single Product Image, set "600 x 600" (px) resolution, with "hard crop" option checked;
    • Product thumbnails, set "200 x 200" (px) resolution, with "hard crop" option checked;
  4. Once you are done, click the "Save Changes" button at the end of the page.
  5. Done.
Warning: If you have skipped this step and you have already inserted your own products, you can avoid re-uploading your own product images by using the "Regenerate Thumbnails" plugin. As first step, follow up the above procedure. Once done, simply download, install and activate the stated plugin. Then, go to uploaded "Media" section, check as many media images you need to regenerate, then select "Regenerate thumbnail" from the dropdown bulk actions and click "Apply". If you are using Wordpress 4.0+, you need to switch to "list" media gallery view in order to proceed. Done.

Adding the live cart icon to the header

As stated in the previous step, there is no need for you to add the Cart page to menu, since MinimaliX sports a better live cart icon you can add to the header menu.

Warning: This procedure will work only if you have correctly set up WooCommerce and its pages. Otherwise, live cart icon may not work properly.

To activate it, check the following steps:

  1. Navigate to WP Admin > MinimaliX;
  2. Click on the "Header" tab;
  3. Check the Header Two the as active one (if you are asking why, check the "Header" section of this documentation, at the Header Two subsection);
  4. Under the Header Two settings, look for the "Show WooCommerce cart in header" toggle and check it.
  5. Click "" or "Save Changes".

A live shopping bag icon will appear in the header, and as far as customers add products to the cart, they will appear in real time as a number inside the cart. If you click it, it will redirect you to the Cart page, that's why it was not needed to add the WooCommerce default cart page to the header menu, since this icon does the work much better.

Some special "thanks" go to the authors of the following libraries:

And to You, for purchasing this awesome template. Thank you very much!

Greetings, ThemeFlush.

1) When I try to install the theme, I got the message: The package could not be installed. The theme is missing the style.css stylesheet.

It's almost likely that you are trying to upload the wrong file or you are uploading it the wrong manner. This is a very common issue, happening to people that is familiarizing with WordPress.

It's suggested to you take in consideration the following actions

Feel free to contact us at any time, by using the support form from the item page.

2) A new version of MinimaliX has been released. How can I install it?

  1. Check out the following procedure:
  2. Download the latest update from the item page;
  3. Navigate through WP Admin > Appearance > Themes and delete the MinimaliX theme (yes, delete!); don't worry about your data, since it's stored at safe in a database;
  4. Once you are done, install the updated theme following the procedure described in the "Installation" section of this documentation.
  5. Done.