Mondrian A Serious Grid WordPress Theme

Last updated: Apr 24th, 2017

1.0 General

Importer

We include a couple of import files, so you can set up your site in no time. We provided you with 5 different import files to chose from: Posts, Pages, Portfolio, Media and All.

If you just want our pages, import the pages.xml, and media.xml files. For posts, import the posts.xml and media.xml. If you want all of our demo content (including the WooCommerce demo content), just import all.xml

Note: Prior to import, make sure theme is installed and activated
Note: If you want the WooCommerce files, be sure to install the WooCommerce plugin, prior to importing.
Step 1

Go to Tools -> Import -> 'Install Now'.

Wordpress will start instaling the importer plugin.

screenshot
Step 2

Click on 'Run Importer', and you will be redirected to the importer page.

screenshot
Step 3

Here you will be greeted with the importer screen. First of all, select the 'Choose File', and locate the import files from the theme folder you downloaded ( Mondrian/Demo ).

Next, click on import button, and a new window will appear asking you to select the users to assign the data to. Just select one of your local users, and the import will continue.

Depending on the speed of your hosting server, it may take some time to import all of the data.

screenshot

1.1 Post Formats

To create a post, you need to select your format first.

Galery

Click the “Add Media” button just below the title, and on the left side of the popup box, select "Create Gallery". Next select some existing images, or upload new ones, and click "Create a new gallery". On the next window, select image sizes on the right side ( we recommend at least "Large" ), and click "Insert Gallery".

screenshot
Video

To add a video to your post, simply copy/paste the URL of the video to the post content. The url will automaticly become an iframe, and you can publish/update the post.

screenshot
Audio

Same as in Video post format, you can just insert the url of the audio content you wish to be played. It can be eather local audio file ( for example an mp3 ) uploaded to your site, or an embed from an external service like SoudCloud or MixCloud.

screenshot

1.2 Post Specific Overrides

Mondrian allows you to change global post settings in the Theme Options to your preferences and style the post to your liking.

Main menu:

Here, you can choose between a light, normal and dark logo, font color, add a drop shadow, font hover and the level of opacity (transparency) of the menu.

screenshot
Sticky menu:

To turn a sticky menu on, you need to enable it in the Theme Options. Other than that, it works the same as Main Menu.

screenshot
Header style:

You can select a default header layout, one of 10 more layouts or fix your header on the left.

screenshot
Sticky style:

If you have Sticky menu enabled, you can choose a default layout or 3 other layouts.

screenshot
Secondary Menu:

You can add a secondary menu above or below the main menu.

screenshot
Body Margin:

If you want to make your main menu transparent and place content above it, you can define the upper margin in px. Note: You only type the number, for example 100

screenshot
Footer Settings:

You can select whether you want to show the footer or not, number of footer columns and if you want to use a secondary footer in the Theme Options, You can use select between 1 and 4 footer columns.

  • 1 column (100%)
  • 2 (50% + 50%)
  • 3 (33% + 33% + 33% or 50% + 25% + 25% or 25% + 25% + 50%)
  • 4 (25% + 25% + 25% + 25%)
screenshot
Post Specific
This will appear only when you choose a post, but not on pages, portfolio or other.
Sidebar Layout:

You can put a sidebar on the left or on the right side. You can also select “No sidebar” if you don’t want one.

screenshot
Post layout:

Choose the style of your post here. Mondrian supports three different post layouts.

screenshot

1.3 Portfolio Settings

Here you can do everything like in the post settings (header styles, main menu, sticky menu, body margin, footer, etc.)

In addition, in Portfolio Details, you can select if you want the author’s name to appear in front-end, If you do want that, simply type it and select “Show author in portfolio” - in the Theme Options -> Portfolio Settings -> Author.

You can also choose to show date, category or social icons in the Portfolio Settings in Theme Options.

2.0 Theme Options

Header settings:

First of all, to properly display a menu, you must make some preparations.

Go to Appearance -> Menus -> Display Location and check “Main Navigation Menu” to create a menu.

screenshot

In Header Settings, you can choose the header layout and whether you want to show search, social network icons or WooCommerce cart by selecting “on” or “off”.

Sticky menu: You can turn sticky menu on or off and select menu layout.

Secondary menu: Turn secondary menu on or off

Side menu: Use side menu on or off.

screenshot
Archive Settings:

In Archive Settings, you can choose a boxed or full width in “Archive Width”, Archive layout (five layouts, plus random), Archive Style (three styles),

Also, in Show Overlay, you can select how you want the overlay to be shown (on hover or always).

In Overlay items, you can select what items will appear on grid boxes. This includes Category, Title, Author and Date.

In Border, you can select the size of your border between item boxes. You can select 0px, 5px, 10px, 15px, 20px, 25px or 30px).

screenshot
Post Settings:

In Post Settings, you can show the Author, Date Category, Tags, Comments and Previous/Next post navigation by selecting on or off next to them in this section.

Sidebar: Select whether you want the sidebar to appear on the right, on the left or not at all.

Social sharing: You can turn show sharing icons on or off and select the icons you want to show, like Facebook, Twitter, Google+, Tumblr, LinkedIn, Pinterest, Redit…).

Post templates: Select one of three post template styles.

Featured image: You can crop a featured image from the left, top, right or middle.

Related content: You can show related content by latest article, same category, post tags, same author or random related content in the “Related content criteria”. Related posts will be shown under the post.

screenshot
Portfolio Settings:

Show Author, Date or Category in portfolio on/off.

Social sharing: Allows the user to show social sharing icons they want to use in the post.

Portfolio templates includes two templates the user can choose from.

screenshot
WooCommerce Settings:
Note: this tab only appears if WooCommerce plugin is installed.

You can select “List” or “Grid” Shop layout ( similarly as in Archive Settings ) and add a background image in the Title Area.

The image will be then shown under the title and on single product pages.

screenshot
Social Settings:

Add an address to the social network profile or page you want to show on your website. You can add a Facebook, Twitter, LinkedIn, Google+, YouTube, Tumblr, email, etc.

This icons will later appear in various places, for example widgets and header.

screenshot
Color Options:

Under “General” you can select the background, primary and secondary color of the blog.

To add a background image, go to “Choose background image, click “Add image” and add an image there. You can also select background position (left top, left center, left bottom, right top, right center, right bottom, center top, center center or center bottom), background size (auto, cover or contain) and background attachment (scroll, fixed).

In Main menu, you can select background color, box shadow and transparency.

Dropdown menu: Same as Main menu

Secondary menu: Select background color. Box shadow (yes/no), transparency.

screenshot
Font Settings:

Body: Select Font Family from the dropdown menu.

Headings: Select Font Family from the menu and color, font size, line height, text transform, font weight, font style and letter spacing for H1, H2, H3, H4, H5 and paragraph.

Paragraph allow you to choose color, font, font size, font weight and text transform.

Anchor links: Select the color of your anchor link and the color when the user hovers over them with their mouse.

Grid: Select the Overlay Text color.

Main menu: Select color, hover color, font family, letter spacing, font weight. You can do the same for Dropdown menu, Secondary menu, Sticky or Side menu.

Footer: Select the color of the title, text, link, hover and border in your footer.

Secondary footer: Select the color of the title, text, link, hover and border in your secondary footer.

screenshot
Custom code:

You can add your custom code in the theme. You don’t have to add <style> tags, but only the styles (CSS, JS) themselves. You can also paste your Google Analytics Tracking ID code in the field here. You Need to have Tselektor Extras plugin installed, in orded for this field to show up.

screenshot

3.0 Custom Widgets

Mondrian has three custom WordPress widgets. These are:

  1. Recent posts with images

    Allows you to display recent posts with images in the sidebar

  2. Social Icon Widget

    To show social icon widget, you have to enable them in Theme Options->Social Settings

  3. Author widget

    You can display the selected author in the footer or sidebar. To add a picture, the author must have a Gravatar profile and add a picture there.

To enable any of these widgets, please go to Apperance->Widgets, and insert the widget into the desired widget area.

screenshot

4.0 Visual Composer

Mondrian uses Visual Composer as a main page builder tool. To learn more about the Visual Composer, please read the Visual Composer documentation.

To show Visual Composer, select Backend Editor when you’re creating a page. This will show the Visual Editor where you can create different elements and add them to your page.

screenshot

Clicking on the “Add Element” button will open a window where you can choose between elements. You can show elements under Content, Social, Structure, WordPress Widgets, Mondrian Widgets or WooCommerce.

screenshot

When you select Mondrian Widgets, you’ll have a choice between several more options.

screenshot
Group Field

A lot of our widgets use group field. The basic usage of group field is, as follows:

When you create a widget, you are greeted with shrunken down version of the group field. To expand it, just click on the caret icon on the right side.

To add new group filed, click on the big plus sign on the bottom.

To rearrange the fields, place your mouse cursor on top of the arrows icon on the far left side of the field, click the left mouse button, and without releasing the button, drag and drop the desired field in it's new place.

screenshot
Grid Builder

Allows you to build a custom grid. You can select a grid style, show overlay (on hover or always) and the space between items in px).

screenshot

Below this, you can select the box type: Post, Portfolio, Team, Custom Content or Product.

Post: Box size determines the size of the box. It can be: big, small, tall or wide. Once the box size is selected, the user can also choose what items they want to appear in the box. This includes: Category, Title, Author and Date.

screenshot

Portfolio: Same as post, but the user has to select a portfolio item instead

screenshot

Team: When selected opens some new elements, such as the name and position. You can also add a background image or social networks, as well as add a Link by clicking “Select URL” button and adding the desired URL.

screenshot

Custom content: Same as Team, except you can add any content inside. For instance, you can add a HTML in the “Content” field, as well as add a title, background image or link and select the box size.

screenshot

Product: This will appear only if you have WooCommerce installed and works the same as post. You can select box size, shop items and choose different overlay items you want to appear.

screenshot
Slider

Here, you can select size (small, medium, large or full size), navigation (bullet points or arrows) and navigation color.

In Image settings, you can select title, title color, title size, text, color, center text and link (as button or over the screen).

screenshot
Counter

This includes starting number, target number, the text that appears below the numbers and the color of the numbers.

screenshot
Icon With Text

This includes two tabs: General and Colors. Under General, the user can select the icon and choose title, text, layout and if they want to link the icon somewhere. Color tab allows the user to select the colors of the icon, text and hover.

screenshot
Service Table

Service table widget also includes General and Colors tab. In the General tab, you can select font, icon, type a title or add a service. Color tab changes the color of the text, background and border.

screenshot
Testimonials

Very similar to Slider, but instead of images, shows text. It allows the user to select navigation type, font color and testimonials themselves. For instance, we can change the name of the person that wrote the testimonial, company, testimonial text or position.

screenshot
Team

You can select an image of your team, name, position, text color and hover color. We can also add social networks here and URLs.

screenshot
Client Carousel

You can select navigation (bullet points or arrows), add a logo and select if you want it to link somewhere.

screenshot
Button and button style

You can choose between several predefined button styles or create a custom button. Also, you can select button size, as well as its alignment here.

To define the button text, click on Select URL -> Link Text

If you selected custom button, a new tab, labeled “Button Colors” will appear. Here you can change text color, text cover color, background color, background hover color, border color or border hover color.

screenshot
Call to Action Settings

Here you can add a title to the CTA and add some text in the editor. You can also align the text and add a CTA button. If you select a button, a new tab will open. You can select button style and size, align the button, change text, text hover, background, background hover, border and border hover color.

screenshot
Message box

Includes several styles, such as Info, Primary, Warning or Danger.

screenshot
Social icons

Select this if you want to add social icons on your site. You can change their size, border, alignment and the space between the icons. Once you do this, you can add them using the grounp field.

screenshot

Need additional help or have a question we haven't covered?

Shoot us an email and get answers directly from THEMESLEKTOR staff!

Shoot us an e-mail