Hi! Before we begin, thanks for purchasing this theme! We hope you enjoy working with it.

In the following pages we'll cover the installation, setup and use of this theme, together with a reference to its special features. We tried to cover every important side of it, so we truly suggest you dig into it if you have doubts or difficulties. However, if you find yourself with no answers or have any question beyond the scope of this document, please feel free to post it in our support forum at https://artisanthemes.io/support-forums/ and we'll get to it as soon as possible (allow for a 24hs period).

Happy blogging!

Artisan Themes

Index Of Contents

Getting Started

Before we begin the installation of the theme you have to be running an updated version of WordPress. If this is your first time using WordPress and need help with that you may want to have a look at the Codex page for Installing WordPress: http://codex.wordpress.org/Installing_WordPress. Don't worry, it should be really easy.

Also, you may want to check out our video training library for WordPress basics on the WordPress 101 series if you feel you need a little help getting into it.

Installing Modules Theme

There are two steps required in order to install a WP theme: uploading and activating. For uploading it, you have two options:

Upload through WordPress: From the WP menu go to Appearance » Themes, select the tab "Install themes" and click on "Upload". Then, choose the modules.zip file you downloaded.

Upload through FTP: Unzip the modules.zip file and upload only the theme folder using your preferred FTP client into the wp-content/themes at your domain.

Once you have uploaded the theme to your server click "Activate" it.

Note: When you update your theme from the admin Dashboard, any custom modification you may have done to the theme's files (if you did any) will get replaced for the new updated files. Please keep a copy of those modified files or, much better, make your own customizations in a child theme. This does not apply to the Theme Options and WordPress settings. If you didn't touch the theme's files you don't need to worry about it.

License Activation

In order to get automattic updates right on your WordPress dashboard you will need to activate its license. To do that, please navigate to https://artisanthemes.io/dashboard where you can add your site's domain.

Once your theme is registered in Artisan Themes site, the theme is ready to connect and activate the license. Navigate to Theme Options >> General tab and in the lower part of the page fill in your Artisan Themes credentials and your new License ID for the "THEME UPDATES & LICENSE" area. You can find this License ID in your Artisan Themes Dashboard

Installing Plugins

Besides any other plugin you may want to use or may be using right now in your WordPress install, Modules requires one extra plugin to work as expected which is the Portfolio Type plugin, which enables the portfolio item type and ensures you'll keep your portfolio items even after you switch themes (if you ever come to do that).

Once you activate the theme you'll see a yellowish banner asking you to install that plugin. Please, install it, and -if it does not happen automatically- activate it too.

Note: you absolutely don't need this plugin if you don't plan on using the Portfolio functionality that comes with Modules Theme. If that's your case, you can dismiss that notice and go on with your work without it.

In addition, Modules includes full support for several recommended plugins. It is not required from you to you install them, but if you want to, go ahead. You'll enjoy them big time! By the way, you don't need to do it right now if you are not sure. You can go, later on, to Appearance » Getting Started and install them from there.

Setting up Menus

To activate your menus, go to Appearance » Menus.
Create a menu adding your selected pages to the right column on the screen, and order them as you want. Give the menu a name, save it, and then define a "location" for it clicking on the "Manage Locations" tab. The location you'll need to supply at least right now is "Primary Menu". Also, if you'd prefer it, as of WordPress 4.3 menus can be handled in WordPress Customizer.

Defining a Homepage

Unless you want your homepage to load your latest posts by default, you'll want to define a page to be the homepage, which later you'll modify to suit your needs.

Navigate to Settings » Reading and for "Front page displays" select "A static page". Then, select any page you have created to be your homepage. You can use the regular template or any other template you prefer for it.

Setting up a Blog

You have two options to create a blog on your site. The first one, as explained in the previous point, is to navigate to Settings » Reading and for "Front page displays" select "Your latest posts". This will show your blog posts in the homepage of your site automatically by using what WordPress calls the "archive template". To display your blog on a different page other than the homepage, select "A static page" instead of "Your latest posts". You will then be able to chose a page to be your front page, and then a different page to hold your posts on the "Posts page" option below.

You can also pick your blog and archives style, between a masonry (kind of a grid style), a more classic one, a teasers one and a headlines one (just as with the blog) and adjust many other settings for its layout at Appearance >> Theme Options, on Layout tab.

The amount of posts a specific blog page will show before the navigation is defined on the Settings >> Reading page, with the "Blog pages show at most" option.

Creating a Blog Through Modules

Modules comes packed with modules you can set on any page by using a template called "Modular Page". By using it, you can pick from many different kind of modules, which will bring content in a particular layout and style. Between those modules, you'll find a very complete blog module, which you can combine with the rest of your page content to create a fully functional blog section inside a complex layout.

To do that, navigate to Modules >> Add new, select the Blog type for the module, and then add it into a new or existing page using the Modular Page template (more on that in the Modules Section).

Archives

In WordPress, an Archive is a collection of posts, grouped by a particular common denominator (which can be its author, a category, a tag, a post format, etc.). You don't need to perform any action to make them work. WordPress will automatically show an archive when a category, tag or author link is clicked.

With Modules you have the ability to display a term description right next to the term title in any archive. Search engines like Google love archives and they love archives which they can categorize and describe. So, showing this description can be very valuable regarding SEO efforts.

To display a description for a particular term, all you have to do is fill in that description in the proper field. For that, navigate to Posts >> Categories, or Posts >> Tags and complete the "Description" field. It will not only be useful for your readers and for search engine optimization, it will also make that archive page look super slick.

User Contact Methods

PRO TIP: For author archives, a nice author box is shown before the posts displaying the author's gravatar, bio, contact methods and a cool cover image. To enable public contact methods for your users, navigate to Theme Options >> Social tab and complete the contact methods you'd like to make available in the "User Contact Methods" section. If you then navigate to Users >> Your Profile you'll see those profile fields, added below the native Website field, and a setting for the "Author Page Cover Image". That information gets shown with a nice icon every time the author box appear (both in the archives and below single posts, if you enable that in Theme Options >> Layout tab) so if you use those social networks on a daily basis you may want to fill those fields up to allow for your readers to reach your profiles too.

Importing a Demo

Modules comes with many demo content mini sites ready to be imported into your WordPress install. That means you can create a fully working site in minutes. Remember you will need to replace the imported content after you do that, for your own, and that includes the images too (images on the demos do not get imported to avoid server overweight on your newly created WordPress install.

To install a demo:

    1. Navigate to Theme Options >> General Tab
    2. Locate the OPTIONS & CONTENT area
    3. Click on "Open Demo Content Importer"
    4. Browse through the available demo packs and click on "Install this Pack" when you've found the one you want
    5. Wait for the process to complete

Remember this will override your current theme options with the ones on the selected Demo Pack. This will not override your WordPress content in any way. Your posts and pages will remain just the same with the addition of the newly imported ones.

Theme Options Panel

Overview

Next we'll cover the general set of options Modules offers. These options are theme wide and define most of the theme functioning. Remember to save each tab before you go on to the next one, otherwise your changes won't be saved. Alternatively, you can use the reset button to restore each tab to its defaults.

To begin, navigate to Appearance » Theme Options.

General Options

The Branding section controls the logo/title display for the site's header, the about text, the favicon, and the custom login screen image. Is desirable that you upload logo images both for regular ratio screens and both for retina screens (twice as big as the regular ones, or up to three times their sizes for some new high resolution devices).

The Miscellaneous section controls the display of the 404 Error page, the loading of Retina scripts and the "Back to top" functionality, both of which you can enable or disable. Disabling the scripts if you won't use those functionalities may improve loading times a little. Remember that disabling the Retina script means that newer images that you upload to WordPress won't get cropped accordingly, so you may want to plan that in advance.
Breadcrumbs controls are present in this section too, which let you show or hide them on your site's pages, and allow for a custom prefix too.
Also here, you can disable or enable the Back to Top functionality and the Transients Cache.

The User/Login Menu section enables a login link placement on the header of the site, which you can point to whatever page you want to include your login form in (also very handy to point to WooCommerce's My Account page if you are using the e-commerce plugin.

Once the user has logged in, the same link can be used to display an expandable custom menu. For that, navigate to Appearance >> Menus and create your desired menu. Then, navigate to the Manage Locations tab inside the Menus screen and select that menu for the "User/Login Menu" location.

To display a Logout link inside the User/Login Menu (once the user is logged in), make sure you have created a new menu (at Appearance >> Menus) and defined it for the User/Login Menu option in Appearance >> Menus >> Manage Locations. You can then enable this addition by selecting "Show" for the "Logout Link in User Menu" option.

Options & Content presents three important features.
The Demo Content Import provides you with a button that will import demo-like-content as you saw on Modules's demos online. You don't actually need to do this, but it can help you see things working if you are just starting with WordPress themes. Remember it'll replace your options and add lots of content to your site. In addition, it's a great way of handling projects much faster. You can simply install one of the demos, replace its content, and move on.

Backup Options let you backup and restore your whole set of Theme Options. Use it to save your current preferred set of options just before you start tweaking things to see if there is a scheme you like better. The restore button will restore your options to the last backup you made.
The Export Options function provides you with a piece of text (that weird looking text) that contains your whole Theme Options settings as for the time you loaded that page (if you changed something if won't get reflected there unless you update your settings). You can paste that piece of text in another Modules install to transfer your settings exactly as you have them here. (From a local install to an online one, for example.)

Update Section: In this area you can fill in your Artisan Themes username, password and license which will allow you to get notified about new updates for the theme right at your WordPress Dashboard, and update it right from there with a simple click. Don't forget to enter your details in there and keep your theme always up to date.

Note: When you update your theme from the admin Dashboard, any custom modification you may have done to the theme's files (if you did any) will get replaced for the new updated files. Please keep a copy of those modified files or, much better, make your own customizations in a child theme. This does not apply to Theme Options and WordPress settings. If you didn't touch the theme's files you don't need to worry about it.

Layout Options

Inside the Layout Options you'll find:

  • A layout setting for the site's STRETCHED/BOXED version.
  • The header options, with 16 different header layouts (for both full width headers and side headers), social icons options and the ability to show or hide the search field in it. You can also select here if you want to display a small widgetized area in the header. If you do, please keep in mind that is indeed a small area and it will cause the widgets to collapse vertically if too many things are inside it.
    Also in this section, you'll find a control to enable a sticky menu in the way of a pit bar.
  • The style (masonry/classic/teasers/headlines) and number of columns for the blog view (two/three).
  • Masonry Margins controls to add a little spacing margin between masonry blogs and archives.
  • Post Loading Animation: only active in masonry blogs and archives.
  • A sidebar control for blog and archives that will hide or show the sidebar named "Sidebar" on your blog and archives pages. It is important to remember that this setting won't control sidebars on blogs created by putting together blog modules and wrapper modules with sidebar. If you are creating your blog in that way, make sure your archive's look matches the one you are creating for your blog.
  • Sidebar controls for single posts view.
  • Author Box control to show a little author box at the end of every post (this author box uses the author's gravatar, bio, and contact methods that you can set by navigating to Users >> Your Profile).
  • Footer options: Controls the footer widgetized area, its layout, the social icons, the copyright section, and its colors.
  • The sidebar section let's you create as many different sidebars as you want to be used on different pages. Please remember to avoid using spaces when completing the sidebar's slug, and also, know that the main sidebar for this theme's slug is "main-sidebar" so avoid using that slug in order to eliminate any collision.

Design Options

On the Design Options tab:

  • Background options: You can pick a background color, a background pattern or even upload an image to use it as site background.
  • Custom CSS: Use this box to add any CSS rules you need over the theme. These will not get modified on "Reset", but they will be replaced when importing options or restoring backups.

Typography Options

You can select here fonts for the different sections of the theme. It is advisable to choose no more than one or two different external fonts (such as those from Google Fonts) to improve loading times.

Headings and Body typography.

The Font Selection option lets you choose between three different typography schemes.

Google Fonts / There are two options here worth explaining with a little more detail. The Weight options, and the Subset options.

Font Weight

When we load fonts from Google fonts we only request specific font weights in order to minimize browser and bandwidth resources. The default font weights that get requested are 'normal' and 'bold', which are 400 and 700 respectively. For that, the setting on the field looks like this:

:normal, bold

You can bring only a specific weight if you'd like to, like this:

:300

Or bring many, like this:

:300, normal, bold, 800

Just be sure that those font weights exist on the font set you are requesting by browsing the Google fonts archive and looking into each font.

Font Subset

Also, there are certain languages which will need a whole different set of characters in order to display their words. That's what the Subset option is for. If you are writing in English, Spanish, French, German and so, you won't probably need that. In case you know your language needs for a font subset to be called for, just add that with a semi-colon before the subset name. For example, for Cyrillic subsets add this in the subset field:

:cyrillic

Also, in this settings page:

  • Colors for: links and link hover.
  • Font sizes for: body, site title.
  • Custom font upload: if you need to use a special font not included in Google Fonts you can upload it here. Pick whether you want to use it for your logo, for your headings, or both.

Social Options

Fill in the accounts for each social network icon you want to display on the site's header or footer. Then, select the set of colors for each social section. Hint: choose the branded version if you want each icon to be on the color of its network. You can select here, also, whether to open those links in a new (_blank) tab or in the same one (_self).

User Contact Methods

The contact methods you enable here, by adding them one by one, get enabled to be used by autors on your whole WordPress install. Make sure you use the exact name of the social network if it is one, so that the icon for it gets automatically located.

Advertising Options

Modules has its own simple advertising control panel, and comes also ready to work with any regular Advertising plugin.

In Theme Options >> Advertising you will find a section for every available ad location in the theme layout.

  • On Header
  • On Single Post - Before Title
  • On Single Post - After Title
  • On Single Post - Before Content
  • On Single Post - After Content
  • On Single Post - Inside Content

To use it on its own: Inside each section you can upload and link an image for your banner, enable/disable the ad banner, and also set its target. Select "Self" to open each link on the same browser's tab. Select "Blank" to open the link on a new browser's tab.

To integrate with an advertising plugin: In addition of the custom functionality of the plugin you might be using, most advertising plugins provide you with shortcodes you can copy and paste wherever you choose to display a particular banner or group of banners.

Here is a recommendation for a free advertising plugin, available on the WordPress plugins repository which works pretty solid and has a nice variety of options: Simple Ads Manager

If you have ads defined in your advertising plugin, grab the shortcode for each of the ads you want to use, and paste it on the "Ad Shortcode" field for each of the advertising locations in the theme. Be aware: every shortcode in those fields will override any custom banner you manually uploaded for each section.

Advertising Widgets

In addition, Modules comes packed with two Advertising Widgets that can be used in any widgetized area across the theme (i.e. different sidebars, footer, content created with Page Builder plugin, etc.). Those two plugins appear as "Quadro Ads (1 column)" and "Quadro Ads (2 columns)" with the only difference between them being that any banners you use on the second one, will display in a two columns layout.

  • Title: Set the title for the widget (optional)
  • Ad Spots: Define how many ads you want for this widget
  • Controls for Ad Spot
    • Image Ad Upload
    • Image Ad Link
    • Image Ad Link Target
    • Ad Shortcode (use this option to paste a shortcode from any advertising plugin)
A Useful Tips:

The recommended image size for the header banner is 728px by 90px. For banners on two-columns widgets, images should be square shaped, and all of them in the same size.

Keep in mind that if you are creating layouts with the Page Builder plugin, these widgets can be used combined with the rest of your content to create specific-inside-content ad locations, and they can even be used on a Canvas module to add advertising locations between different modules on a Modular Page.

Portfolio Options

Portoflio Slug / The portfolio slug option lets you define what you want to appear in the URL bar before your item's name. It could be anything, just pick something without spaces (you can use "-" or "_") and without any special symbol. Remember to flush permalinks after you save this option.

View all items / This setting allows for the placement of a "Back to all" link over the portfolio item. To use it just complete it with the URL you want it pointing to.

Portfolio Data Fields / The data fields are custom fields you can use to showcase special information on your portfolio items. It could be the name of the client the project was for, the year, the price of an item or even the ingredients if you are using the portfolio as a restaurant menu. :) You create them here and then complete them in each portfolio item.

WooCommerce Options

Most of the options that define the behavior of the WooCommerce plugin still need to be set at the WooCommerce Settings pages. If you've never used WooCommerce before, start over there, and only then begin modifying what's described here.

There are two other areas that modify the way the plugin interacts with the theme, both in terms of functionality and in terms of design:

Settings on Regular Pages

WooCommerce uses many regular WordPress pages to display its content, such as the Cart page, the Checkout page, etc. In most cases you won't manually create those pages, as these get created automatically for you when you install the plugin and it asks for it. Regardless of that, those pages work as any other page in every "design" aspect. That means that you can (and should) manually define for them design and layout options as header background, template and style just as you do with any other page, to match the design and style of the whole site.

The Page Template, Featured Image, and Page Options metaboxes apply for all of WooCommerce pages just as with any other page. Except for...

Shop Derived Pages and Single Products

Some pages where WooCommerce display content aren't accessible from the Pages menu, as they are outputted by the plugin dynamically. That is the case of the the Catalog pages and every single product page.

For all of those pages, design options need to be set the "Shop" page and they will be common to all of them.

Also, at Theme Options >> WooCommerce you'll find settings for:

  • Cart Icon on Header
  • Sidebar on Shop Page
  • Number of Items per Page in Shop Page
  • Number of Columns per Row in Shop Page
  • Number of Related Products Shown
  • My Account Intro
  • Login/Register Page Intro

Other Options

In addition to the Theme Options, you'll find inside the post editor a small metabox called Post Header Options with fields that let you select the size of that post's header (from regular to big or giant), select the type of header background you'd like to use, and enable a dark overlay tone over your selected image (if that's what you are going with) to make reading text over it much more easier.

Modules Modules

Overview

Modules includes a super duper functionality that lets you build any page with the use of solid blocks of content we call... yeah, "Modules". They can be included and arranged in any order when using a Modular Page template, and with 27 custom modules the amount of different things you can build is huge. You can even create your modules and think later on where you are going to use them, or even use one of them in multiple places across your site.

To add a module to a page:

  • 1. Create your desired modules.
  • 2. Create a page, and choose Modular Page template for its template option.
  • 3. Add the desired modules in the Modules metabox for that page.

Or...

  • 1. Create your desired modules.
  • 2. From that module's edit page click on "Add this module to a page".
  • 3. Add it, arrange it or remove it as desired.

Each module has some general options in the Module Style tab (common to all modules) and some very specific ones. Define in each one if you want to display the title, pick the colors and the background, pick your preferred header layout and select whether you want to use the Fixed Background effect over your background (available for image backgrounds, of course).

To create a new module navigate to Modules » Add new. You select the type of module in the box that says "Module Type".
Now, one more little thing and then let's go over each one of them.

Creating a Homepage

While there are infinite possible uses for these modules, one of the most recurrent ones if the creation of homepages. If you have already selected a specific page as a Static homepage in Settings » Reading, you can define its template to Modular Page and start throwing your modules in. You can create a very simple homepage with a slider and a blog, a showcase for your portfolio, a sales page with lots of copy or even a guided tour through your company.

Authors Module

The Authors module displays a collection of the site's authors, and it gives you the possibility to choose between showing all authors, or just a specific selection of them, in any particular module. Next to each author's thumbnail you can display his/her bio, and the contact methods filled in in Users >> Your Profile.

Note: The image that gets shown for each author is its Gravatar. Visit this link for more information on how to get a Gravatar.

Blog Module

The Blog module is useful to build a page with a blog on it, or but with added content too, such as a slogan, a special image above, a "sticky" featured post or another module too.

You have four Blog styles in this theme to choose from. The Masonry style, which brings a neat grid with all your posts, in a very visual way. The Classic style which brings your posts in full more classically, the Teasers style, which brings the post in a short version in a more magazine-like fashion and the Headlines style, which will bring a neat big image with the post's title. Pick also your desired loading animation for the posts (if any) and how many posts per page.

In addition, if you are using the Masonry style, you can select how many columns it will load into , and set it to use margins between the posts, which will give the module a more "airy" feel.

Posts Selection: Different posts selection methods are available for this module.

  • All Posts: brings all the posts.
  • By Categories: will open a new selection box for specific posts categories to show
  • By Post Format: will open a new selection box for specific post formats to show
  • Custom Selection: will display a whole list of all published posts to choose from manually
  • Posts Offset: will pass over the specified amount of posts in the selection (won't work for Custom Selection).
  • Exclude Posts: will exclude the specified posts from selection (use by entering IDs separated by a comma).

Canvas Module

The Canvas module is simply an empty post-like-editor where you can throw anything you like. Text, images, embeds. Think of it as the ultimate free module you can later on position anywhere you want on your site.

Hint: If you combine a Canvas module with the SiteOrigin's Page Builder plugin (downloadable from the WordPress Plugin Repository) you can go crazy with the possibilities!

The Carousel displays any amount of items in a carousel slider. You can chose to display them with or without margins (to make it full width). Selection methods apply as follows:

  • All Posts: brings all the posts.
  • By Categories: will open a new selection box for specific posts categories to show
  • By Post Format: will open a new selection box for specific post formats to show
  • Custom Selection: will display a whole list of all published posts to choose from manually
  • Posts Offset: will pass over the specified amount of posts in the selection (won't work for Custom Selection).
  • Exclude Posts: will exclude the specified posts from selection (use by entering IDs separated by a comma).

Crelly Slider Module

The Crelly Slider module has an input field for you to paste the shortcode for your Crelly Slider plugin (downloadable from the WordPress Plugin Repository). Just create a slider with the plugin and paste the shortcode in there.

The Featured Post module brings a selected post and displays it in a fancy and stylish way. Whether it is a regular post, a video one, a gallery or of any other format, pick your preferred style and Modules will do it's magic with it.

Selection methods apply as follows:

  • Custom Selection: will display a whole list of all published posts to choose from manually
  • Last Post: brings the last one, from between all the posts.
  • Last Post By Categories: will open a new selection box for specific posts categories to show
  • Last Post By Post Format: will open a new selection box for specific post formats to show
  • Posts Offset: will pass over the specified amount of posts in the selection (won't work for Custom Selection).
  • Exclude Posts: will exclude the specified posts from selection (use by entering IDs separated by a comma).

Post date and categories are available to show, and can be turned of in case of necessity.

Flash News Module

The Flash News module displays a stripe shaped news bar, with your latest news, selected by post formats, posts categories or a custom selection (selection methods apply just as with the Blog or Carousel modules). A module title can be useful here to frame the news (ie: "Just Published:").

Image Module

The Image module grabs your module's Featured Image and showcases it in big size. Use it when you need just to present an image in a bold way, without much thinking.

Insights Module

The Insights module let's you build what we call insights: a clear presentation of content with a title, an image, and -if you want to- a call to action. You can use it to list features, to present ideas, to showcase new products, etc.

Each insight can take the form of four possible layouts, accommodating the content on the left or the right side of the image, or above or below it. This module also has an option for text color and for a cute appearance animation on all insights.

Logos Roll

The Logos Roll Module presents a series of logos (or any small image you can think of) with links (optional), both in multiple still columns layouts or in a carousel fashion.

Magazine

The Magazine module is a magazine styled collection of posts which you can portray in four different layouts and in two or three columns wide.

This module works great when combined with other posts collection modules to create a magazine homepage, or a pseudo magazine category page.

What to show? - Posts Selection works as follows:

  • All Posts: brings all the posts.
  • By Categories: will open a new selection box for specific posts categories to show
  • By Post Format: will open a new selection box for specific post formats to show
  • Custom Selection: will display a whole list of all published posts to choose from manually
  • Posts Offset: will pass over the specified amount of posts in the selection (won't work for Custom Selection).
  • Exclude Posts: will exclude the specified posts from selection (use by entering IDs separated by a comma).

Portfolio

The Portfolio module lets you choose between a Masonry, a grid style and a mosaic one, with margins or fullwidth layout, and in several columns options. You can also define for each portfolio module whether you want the items to open right there via Ajax or in a single post link. Hide or show the title for each item, the navigation filters and build your own list of items for each module (or bring them all or by categories).

Keep in mind that if you select to load the items on their own link (instead of the AJAX way) navigation will no longer be relative to the order the items appeared on the module, but on the natural WordPress order of "posts".

Quote Posts Slider

This module presents a wide long slider pulling posts with Quote post format that rotates automatically. You can also build your query manually selecting specific quote posts, or bring them by a specific category. Text color is optional in case you can portray this posts over a contrasting background image or color.

Services

The Services modules features a list of items which you can display in three different layouts, and in a varying number of columns. Use them to display services, features, points of interests or ideas. You can bring many different sets of services to each Service module you create.

You can define colors and a loading animation for all of them, and -separatedly- add an image (or an icon), a link, text and a title.

Posts Slider

The Posts Slider module features a stylish slider custom made for Modules theme. You can display your posts in a big screen fashion with excerpts and titles on them and let them amaze your visitors. Choose between two caption layouts (Big caption or Striped caption) and combine them with three position styles.

Options are available for transition timer, elements display, and margins settings which will make your slider full width if you'd like to.

Posts Selection: Different posts selection methods are available for this module.

  • All Posts: brings all the posts.
  • By Categories: will open a new selection box for specific posts categories to show
  • By Post Format: will open a new selection box for specific post formats to show
  • Custom Selection: will display a whole list of all published posts to choose from manually
  • Posts Offset: will pass over the specified amount of posts in the selection (won't work for Custom Selection).
  • Exclude Posts: will exclude the specified posts from selection (use by entering IDs separated by a comma).

Slider

Similiar to the Posts Slider module, the Slider module presents a specially created set of slides, each one with its own content, image and call to action button. You can create them and re order as wanted, with options for margin, transition timer and height for the whole module.

Note: Use the height field to set a preferred height for this module. To achieve a full-window-height effect, enter 100vh, or enter any height in pixels for a specific one.

Slogan Module

The Slogan module can be a slogan, or a call to action, or even a quick welcome phrase. Enter your title and text in the editor, add a link if you want, and hit publish. It's a great way to make a nice phrase look amazing.

In addition, choose between a giant slogan style or a regular sized one, use up to two different call to action buttons and select a desired animation (if any) for it.

Note: By selecting a Gallery in the "Use Gallery Slider as Background" you can create an images slider background for the slogan automatically, while its contents remain still over it.

Video Background: To add a video background to the Slogan module, upload your video files to the Media Library (you can do that directly while editing the module) and choose your available formats. Some modern browsers will play different formats, so it's better to upload your video in more than one format to assure better odds of your users having the proper codecs on their browsers.

Tip: Using any module's ID ('#post-26', e.g.) as a link for any of the Call To Action buttons will make the window scroll to that module, providing the module exists on the same page as the slogan module. You can use that little feature to direct your visitors to a list of features, for instance, when they click on your "Find More" button.

Team

The Team module brings your created set of team members in many possible layouts (the members are added in each module). Create there as many members as you want, with a picture, personal data and social links.

Testimonials

Add as many testimonials as you want and display one by one in a slider, or in columns, to let your visitors know you better.

Tiled Display

The Tiled Display module is a magazine styled collection of posts which you can present in five different layouts and with two margins settings.

This module works great when combined with other posts collection modules to create a magazine homepage, or a pseudo magazine category page.

What to show? - Posts Selection works as follows:

  • All Posts: brings all the posts.
  • By Categories: will open a new selection box for specific posts categories to show
  • By Post Format: will open a new selection box for specific post formats to show
  • Custom Selection: will display a whole list of all published posts to choose from manually
  • Posts Offset: will pass over the specified amount of posts in the selection (won't work for Custom Selection).
  • Exclude Posts: will exclude the specified posts from selection (use by entering IDs separated by a comma).

Note: To use layouts 1 or 3 large thumbnail size must be set on WordPress defaults of 1024 by 1024 pixels.

Video Posts Slider

This module presents a wide long slider pulling posts with Video post format that rotates automatically. You can also build your query by manually selecting specific video posts, or bring them by a specific category.

Modules Tabs

The Modules Tabs module joins modules together by putting them on selectable tabs. Select the modules you want to use (each module will occupy one tab) order them as you want and then add the titles for each of the tabs below.

Keep in mind that reordering the tabs (the modules) won't automatically reorder their titles, so you'll have to manually check that out.

Modules Wrapper

The Modules Wrapper is a wrapper module (no pun intended) which serves basically one function: that is, to group modules together whether to be able to re order a large group of elements or to add a sidebar to its side.

This gets really helpful in the case you want to build a magazine style page with several modules containing posts collections, with a sidebar on their side. To do that, just build your modules query by using the provided select box, and choose a sidebar, together with its position (left or right). You can create specific sidebars for this use by navigating to Theme Options >> Layout.

Page Templates

For any page you create in WordPress you can pick a template that matches your needs. You'll find the Template select field inside the Page Attributes metabox, at the right side of the page screen. Modules comes with 4 custom templates you can choose from.

Default Template

The default page template simply brings any content you enter to the page. Simple and nice. You can use the Featured Image WordPress option to show an image behind your page's title.

Similar to the default page template, but with its sidebar located at the left side of the screen.

Fullwidth Page

Similar to the default page template, but with no sidebar, and with fullwidth content.

Modular Page

Although the Modular Page template is one of the simplest ones, it is also one of the most powerful. It displays a list of all your created modules and lets you build your own set of modules for each page you want. Select them, order them and -if you want- set the page header to "Hide", to use it as a homepage. It'll bring them one after the other in neat harmony. ;)

Modules includes a built in cache system based on transients for the Modular Page template. For improved performance, enable that option by navigating to Theme Options >> General, and setting "Transients Cache Enable" to "Enabled".

Please note that this option will work as a cache for all matters when displaying modules. If you are showing different things based on particular logged-in users either on your modules or on a sidebar used with the Modules Wrapper module, keep this option disabled.

Page Settings

Other than setting the desired template for the page you are creating, you have the option to add a featured image to any page by clicking in the "Set featured image" link inside the Featured Image box. An uploaded Featured Image will be cropped and used then as a background image for the page header, where the title resides.

If you need to adjust the page title color to make it more visible, or if you just want to give your page a more personal style, you can pick a color for the title by using the "Title color" field you'll find in the Add new/Edit page screen.

Page Styling

Regardless of the page template you are using, when creating a new page, or when editing one, you will find a set of options right below the content editor for the next settings:

  • Sidebar select - Specific for this page.
  • Breadcrumbs show or hide.
  • Title and header background colors.
  • Header background image option.
  • Page Tagline controls: this will let you show a sub-title below the page title.
  • Page background image control.

Posts Styling

There are two features you can make use of when writing a post regarding its styling.

Featured Images

The first one, WordPress native and perhaps more obvious if you have already worked with WordPress in the past, is the Featured Image box. By uploading an image through the Featured Image box you are giving the post a visual way of representation across the whole theme (whether it is in the blog view, a recent posts widget or any other way of posts displaying). Specifically, the featured image will get two important uses. First, it'll be cropped to sit automatically and nicely below the post header on the single view. Second, it'll be the image shown next to the post in the Masonry Blog layout, and also in the Classic one.

Post Header Options

Choose here the size of the post's header, the background and its text color. Use the Dark Overlay feature if your image is clear and you want the text above it to draw more attention (AKA be readable).

Post Formats

Post formats, introduced in WordPress since version 3.1, is a feature that allows you to specify what the post content is about and Modules is ready to make that content look great. You can choose the format for your post on the right side of the post editing screen.

You can actually use any kind of content for any kind of post, and even compose a Standard post (the most common one) full of videos and galleries, but if you really want to see Modules's magic, pick the right kind of post and let the theme display its content in a gorgeous way to feature what you really want to show on each post.

With future compatibility in mind, Modules does not use any custom fields to grab the data from your posts, just figures out what you intended to add and uses it. Also, it does not matter where you put your special content inside the post, just create and let the theme handle the work for you.

For Video posts and Audio posts you generally embed your content by pasting the URL of the chosen media (YouTube or Vimeo, for example) and hitting enter on your keyboard after that line. In the blog view, video posts with videos from YouTube or Vimeo will use an automatic video screenshot if no Featured image gets added to the post.

For Gallery posts you add your images through the Add media button above the content editor, and once there create a gallery, order your images and insert the gallery into the post.

The Image post uses the image you uploaded as Featured image, so don't forget to add that one if you want your image to be bold and nice.

The Aside post, Status post, Quote post, and Link post handle the content in a very simple way. Enter whatever you have to say and that's it. Don't forget that if you are adding a link post you should actually have the link in your content (you can create it with the link-chain button in the content editor of WordPress).

Widgets

These cute and neat widgets come with this theme as a gift. They are available for you at your Widgets screen, in the Appearance menu. :)

Quadro Image Widget

The Image widget is simply a widget that lets you easily add an image to your widget area. Fill in a URL for your file or click the "Upload Image" button and hit Save. That's it, a nice image in your widget. :)

Quadro Recent Posts Widget

This widget displays a list of recent posts from your posts list, next to its respective thumbnails (using the Featured Image for each post). If the post doesn't have a Featured Image it'll show a default thumbnail icon. You can set how many posts to show in the list.

This widget displays a selected post from your posts list, nicely integrated with its thumbnail (using the Featured Image on size "medium" for each post). If the post doesn't have a Featured Image it'll show a default thumbnail image, but it probably won't look as nice as when it does have an image. This is clearly a more visual widget.

Quadro Video Widget

The Quadro Video widget lets you include a video from any of the common social video sites (Youtube, Vimeo, Blip.tv, etc.) into your widgets area. Just paste in your video URL and it'll accommodate to show up always nicely and at the correct size.

Quadro Ads Widget

Modules comes packed with two Advertising Widgets that can be used in any widgetized area across the theme (i.e. different sidebars, footer, content created with Page Builder plugin, etc.). Those two plugins appear as "Quadro Ads (1 column)" and "Quadro Ads (2 columns)" with the only difference between them being that any banners you use on the second one, will display in a two columns layout.

  • Title: Set the title for the widget (optional)
  • Ad Spots: Define how many ads you want for this widget
  • Controls for Ad Spot
    • Image Ad Upload
    • Image Ad Link
    • Image Ad Link Target
    • Ad Shortcode (use this option to paste a shortcode from any advertising plugin)

Supported Plugins

We've chosen a group of WordPress plugins we think you will find very useful in your everyday WordPress work, and added special support for them, making sure they display and fit nicely within the overall design of the theme. That does not mean other plugins won't look nice when using them on Modules, nor it talks about how those plugins perform. Other plugins will look as great as they are built, always. It just means we've styled these plugin's components according to the rest of the theme so you can install them and activate them and never wonder whether they will look fine or not.

Page Builder by SiteOrigin

Available on the WordPress plugins repository, Page Builder is a free plugin "to create responsive column layouts using the widgets you know and love". With it you'll be able to structure your content in many columns and rows you need and place inside them neat elements such as: galleries, buttons, call to actions, videos, testimonials, price boxes and more. You can also use the native WordPress widgets and the nice Artisan Themes widgets that come with the theme.

We also recommend you to install the SiteOrigin Widgets Bundle to get even more elements to insert inside your content, like: posts carousel, features/services, customizable buttons and call to actions, prices table and sliders. The second great thing about this is that you can also use these widgets in regular widgetized areas all over your site.

Important Note: Each different post type needs to be enabled for the Page Builder plugin in order to be able to use it in them. Make sure you are enabling the post types you want to use the plugin with by navigating to Settings >> SiteOrigin Page Builder and checking the proper checkboxes. We specially recommend checking "Posts", "Pages" and "Modules", though you can enable those you want.

CF Mega Menu

This plugin by Crowd Favorite and available on GitHub lets you create visual enhanced menus with "post styled" content on them, assignable to any menu item.

Once you activate it, navigate to Mega Menus >> Add New, and create there the layout and content for your menu. Then, to add this mega menu to a menu item, go to Appearance >> Menus, open one of your menu items as if you were to edit its details, and select your recently created mega menu from the Mega Menu select box.

EXTRA TIP: You can use the page builder to create mega menus layouts too. In order to do that, you will first need to enable them. Navigate to Settings >> Page Builder, select Mega Menus on the checkboxes, and Save Settings.

EXTRA TIP 2: We have included in the theme 5 prebuilt layouts for Page Builder and Mega Menus plugins. That's right. That means, a couple of clicks and you are good to go. To use them, after you've enabled the Mega Menus on the Page Builder settings, go to create a new Mega Menu, and click on the Page Builder tab above the editor. Then, click on the Prebuilt Layout button and choose one of the Theme Defined pre made layouts to import them onto your editor. Click Publish, and that's it.

WooCommerce

The WooCommerce plugin has come to be one of the most popular choices to build an online shop in WordPress. Regardless of what you try to sell, WooCommerce lets you setup an e-shop in matter of minutes, and start selling right away.

Modules is your ally in this process. Its WooCommerce-ready integration makes it even easier for you to install it and move on with the rest of your site, while the theme takes care of the styling and the layout to make them one with the whole design. Please refer to Modules's WooCommerce options for more information on that.

You can download WooCommerce for free from the WordPress plugins repository or install it right away by navigating to Plugins >> Add New and typing WooCommerce in the Search Box.

Contact Form Plugins

Whether it's a simple contact form or that you're looking to build a more complex form for your website, these tools will be the best choice for you. Modules supports the amazing Contact Form 7 and Gravity Forms plugins. Choose the one you like the most and create custom contact forms for your site. They're both really great and solid and you can use them in pages, posts or insert them inside a widget.

The Contact Form 7 is a free plugin that you can find in the WordPress repository. We recommend you using it to build simpler forms; it's really easy to implement and you can find the documentation guide here.

If you're looking to create an advanced form that can integrate with several popular web applications and online services but that's still easy to configure, then you can go for the Gravity Forms plugin. It has 3 types of licenses with different prices; you can choose the one that better fits your project and start right over.

Crelly Slider

Available on the WordPress plugins repository, Crelly Slider is a free plugin to create amazing layered sliders. With it you'll be able to build your slides using images and text layers with custom animations. Then you can use the slider on a page or a post by pasting its shortcode inside the content wherever you want.

Jetpack

Available on the WordPress plugins repository, Jetpack is the famous plugin made by the Automattic team. In their words: install Jetpack to "supercharge your self-hosted site with a suite of the most powerful WordPress.com features". You'll find the plugin comes with a lot of add-ons you can enable for your website. We put a lot of thinking on trying to find those that can be really useful to you. These are the features that are specially supported by Modules that you can enjoy on your site:

  • Tiled Galleries
  • Share buttons on posts
  • Related posts on posts
  • Jetpack widgets: Blog Subscriptions and Facebook Like Box

Advanced Stuff

Action Hooks

Modules includes some action hooks you can make use of to modify (or interact with) specific parts of the theme. For a detailed explanation of working with hooks in WordPress please refer to the hooks documentation in the Codex.

Simply put, a "hook" is a little spot where you can literally hook specific actions or functions, to be run in certain parts of the site's run time without touching or modifying the template files for the theme. All the code can be added in your functions.php file inside a child theme and be kept ordered and safe from updates.

To add a function to a hook, just add it this way:

add_action( 'the_hook_name', 'your_function_name' ); function your_function_name() { // do stuff here }
Available Theme Hooks
qi_before_post
Before Single Post Content Hook - Runs right at the beginning of the 'entry-content' div in single posts view, before the post's content is shown.
qi_after_post
After Single Post Content Hook - Runs right before closing the 'entry-content' div in single posts view, after the post's content is shown.
qi_before_post_title
Before Single Post Title Hook - Runs right before the title in single posts view.
qi_after_post_title
After Single Post Title Hook - Runs right after the title in single posts view.