Overview

  • Highly Customizable
  • All Sections that you need
  • Custom Colors
  • Custom Sidebars
  • Fully Responsive
  • Transitions Ready
  • Shortcodes Included
  • Contact Form Included
  • 5 Portfolio Pages
  • 6 Blog Pages
  • Parallax Ready
  • All Media Item supported
  • All Media Post supported
  • Easily Composable
  • Powerful Options
  • Child Theme Included

Install

Installing your new theme is very simple.

Follow these steps

  1. Clean your wordpress install from all contents you don't need (optional).
  2. Download the ZIP package from Themeforest and Unzip it.
  3. Within the unzipped folder you will see a file named maya_v1.5.zip
  4. Log into your Wordpress Dashboard and click ->Appearance -> Themes.
  5. Next click on Add New then click on Upload Theme.
  6. Click Browse then locate the file named maya_v1.5.zip and click Install Now.
  7. After the theme has installed click on Activate Theme and you are all set! Maya is now installed!
  8. Note - After activating the theme do not forget to install the following plugins: Revolution Slider, Meks Flexible Shortcodes and Contact Form 7.
  9. Install the WP Importer Plugin from Tools > Import and import there our xml file (choose from the 8 xml demos we proposed in the folder demo_data).
    Note The import data will make your site similar to the demos but without the images, it will use a placeholder image instead.
  10. Select the Home Page (or other homes you like) as static frontpage in the wordpress's Setting -> Reading options.
  11. Assign the main and mobile menus to their locations in Appearange -> Menus.
  12. Import our demo Options in Maya Options -> Utility -> Import using the code we attached in the options.txt file. (You can find it in our package into the folder demo_data).
  13. Import the dimostrative slider in Revolution Slider Plugin using the file you can find it in our package into the folder demo_data/revslider/.
  14. Create your own widgets.
  15. Note - If you installed the theme in already existing WP site please regenerate your thumbnail using a specific plugin (we advice ->Regenerate Thumbnails).

CHILD THEME

Maya Theme already included a child theme - Use it to customization the theme without to edit the parent theme.

To use the child theme you have to install it. Go to -> Appearance - > Themes and install theme child. Then active it.

Use style.css of the child to overwrite some styles.

Use functions.php to put filters and functions wp

In the root of the child theme you can add others files template of the parent theme so you can edit them without edit the original theme.

Theme Options

Click ->MAYA on the left wp panel.

Here you can set many options between: logo, color, header, footer, seo, advanced and import/export settings.

GENERAL SETTING

Logo

Set your logo and your favicon.

Choose a logo for transparent header, dark header and sticky header.

Transparent Header and Dark Header they will be handle in each pages and posts.

STYLING

Colors - Set two custom colors (primary and secondary) in two variants flat and transparent.

Fonts - Set your font from all google fonts.

HEADER

Top Bar - You can set an email address and a follow url.

The links are visible by 2 icons.

NEW Default type - Set the default menu color for all site.
Then, you can edit the color of singular page or post by inside option page.

FOOTER

Set the copyright text.

Enable/disable back to top button.

Set a lot of social links.

SEO

Home - Set title, description and meta keywords (comma separated).

Pages - You can compose the title page with 3 statements: Page Title, Blog Name, Page Excerpt.

Enable/disable description from page excerpt.

Set meta keywords (comma separated).

ADVANCED

NEW Page Loader - You can active the page loader on all pages, only Home or none.

NEW Exit Page Curtain - You can active the animations on all pages, only Home or none.

NEW Appearing Animations - You can active the page loader on all pages, only Home or none.

Codes - Set code (HTML/JS) on header or footer.

Custom CSS - Set your custom style

UTILITY

Use this tool to import/export your theme options.

After have done all customizations, please click save changes.

Sections

Click ->Sections on the left wp panel then click ->add new - here you can create a custom html, blog list, callout, counters, testimonials, contact forms, widgets and many other

Set a title for each section created to easy edit subsequent.

BLOG 1

Creates a posts carousel.

Options Section

Set a title as section header.

Set a background image for the carousel, it will be shown as the post's preview image.

Set the number of posts to show.

Note - The section will add 3 items per row.

Note - You need to add one or more posts to view this section in action.

BLOG 2

Creates a checkerboard of posts alternating images and text.

Options Header

NEW Set a title as header and his color.

NEW Set a subtitle and his color.

Options Section

Set a background header color.

Set the number of posts to shown.

Note - You need to add one or more posts to view this section in action.

BLOG 3

Creates a list of feeds.

Options Header

Set a title as Header and his color.

Set a subtitle and his color.

Set a background header color.

Options Section

Set a background image - it will be shown as the post's preview image.

Set the number of posts to shown.

Note - The section will add 3 items per row.

Note - You need to add one or more posts to view this section in action

CALLOUT

Creates a section with title and custom html.

CLIENTS

Creates a carousel of logo brands.

Options Header

Set a title as Header and his color.

Set a subtitle and his color.

Set a background header color.

Options Section

Set image as logo and add an external link.

Note - The section will add up to 6 images per row.

CONTACT FORM

Creates a form contact and adds a custom text on the right.

Options Header

Set a title as Header and his color.

Set a subtitle and his color.

Set a background header color.

Options Section

Set a title as Header and add a section excerpt under the title.

Select a CF7 Form already created.

Add a custom html text in side content with other address details.

COUNTERS

Creates progress items with custom labels.

Options Header

Set a title as Header and his color.

Set a subtitle and his color.

Set a background header color.

Options Section

Set a background image for the section and then choose the overlay color between white or primary theme color.

For each counter set an icon between all Father Icons.

Set start and end value for the progression.

Set a custom label.

Note - This section will add 6 logo brands per row.

CUSTOM HTML

NEW Creates a custom section with a title and html custom code.

Options Header

Set a title as Header and his color.

Set a subtitle and his color.

Set a background header color.

Options Section

Set a background image, leave it blank to disable this option

Enable/Disable the background parallax

Set a background color instead of background image

Background Wrapper - Set the width of the background section

Set a color as overlay background

Set the content wrapper - the width of the text html inside section

Set a top and bottom padding between the html text. Values allow from 0 to 500px

Include a text html custom - Note - You can use also the shortcodes of the theme inside.

You can put into html field also the revolution slider - shortcode

FEATURES

Creates a list of features with icon, title and excerpt.

Options Header

Set a title as Header and his color.

Set a subtitle and his color.

Set a background header color.

Options Section

Set a title as Header and add a section excerpt under the title.

For each feature add an Icon between all Father list.

Set a title for this feature.

Set a brief text as description (html / shortcodes allowed).

Add an external link or leave empty to disable.

Note - This section will add 3 features items per row.

MAP

Creates a google map section with multiple markers.

Options Header

Set a title as Header and his color.

Set a subtitle and his color.

Set a background header color.

Options Section

Add an address map in the seach field.

Set the zoom level.

Add a color scheme to the map.

Markers - adds multiple markers to the map.

For each marker add an address and content (html / shortcodes allowed).

OVERVIEW

Creates a list of info with icon, title and excerpt.

Options Header

Set a title as Header and his color.

Set a subtitle and his color.

Set a background header color.

Options Section

Set a title as Header and add a section excerpt under the title.

Set a background image for the section and then choose the overlay color between white or primary theme color.

For each info add an Icon between all Father list.

Set a title for this item.

Set a brief text as description (html / shortcodes allowed).

Note - This section will add 3 features items per row.

PORTOFLIO

Creates a project grid section.

Options Header

Set a title as Header and his color.

Set a subtitle and his color.

Set a background header color.

Options Section

Choose one or more categories to show on the gird.

Set the number of items to shown in the grid.

Choose the type of grid between Full Width and Boxed.

Choose the items spacing between 0, 25px or 50px.

Note - This section will add 3 items per row.

Note - You need to add one or more projecst to view this section in action.

SERVICES 1

Creates a carousel of box services.

Options Header

Set a title as Header and his color.

Set a subtitle and his color.

Set a background header color.

Options Section

Set a title as Header and add a section excerpt under the title.

Set a background image for the section.

For each service box add an Icon between all Father list.

Set a title for this item.

Set a brief text as description (html / shortcodes allowed).

Note - This section will add 3 items per row.

SERVICES 2

Creates a list of service box.

Options Header

Set a title as Header and his color.

Set a subtitle and his color.

Set a background header color.

Options Section

For each service box add an Icon between all Father list.

Set a title for this item.

Set a brief text as description (html / shortcodes allowed).

Note - This section will add 3 items per row

TEAM

Creates a list of people box.

Options Header

Set a title as Header and his color.

Set a subtitle and his color.

Set a background header color.

Options Section

Set a title as Header and add a section excerpt under the title.

For each item set an image as face of the person.

Set a name, an address mail and his role (optional).

Set a title for this item.

Set a brief text as description (html / shortcodes allowed).

Set up to 3 progression bar as skills of each person.

For each skill set a label and value.

Note - This section will add 3 items per row.

TETIMONIALS

Creates a slide of testimonials.

Options Header

Set a title as Header and his color.

Set a subtitle and his color.

Set a background header color.

Options Section

Set a background image for the section.

For each item add a name to the person.

Set a brief text as quote (html / shortcodes allowed).

WIDGETS

Creates an area widgets with 3 sidebar columns.

Options Header

Set a title as Header and his color.

Set a subtitle and his color.

Set a background header color.

For each sidebar select the relative widget area.

Note - You need to have already created one or more sidebar to view this section in action.

After have created each section, please click update to save the section.

Pages

Click ->Pages on the left wp panel and click add new.

Use Template Page in Page Attributes to create endless type of page

DEFAULT PAGE

Page standard for text and ready for sections.

The menu of the page for this template it will have a dark style.

Page Options

Add a sidebar on the left, on the right or none to set full width page.

Add one or more sections already created clicking on the field or writing the title.

The sections will be added sequentially under the page content.

You can move the order of the sections by Drag'n'Drop.

Add a Feature Image on the page, it will be attached as header page.

PAGE CONTACT

Page with a large map and contact form.

Page Options

Sidebar selection are deactivated for this template - you can use only full width mode.

Choose the dark menu style (recommended).

Add one or more sections already created clicking on the field or writing the title.

The sections will be added under the form contact.

Contact Options Add an address map in the seach field.

Set the zoom level.

Add a color scheme to the map.

Markers

Add multiple markers to show inside map.

For each marker add an address and content (html / shortcodes allowed).

Form Fields

Select a CF7 Form already created.

Add a custom html text in side content with other address details.

Do not set any feature image for this template page, it will not be shown.

PAGE SECTIONS / HOMEPAGE

Use this template to create a page or homepage in OnePage mode with sections inside and icons navigator.

Intro Options

Slider Intro - Set multiple image full screen as slides

Enable/Disable onepage navigation.

NEW Enable/Disable dotted patter on background image.

Enable/Disable bottom arrows on the slider.

For each slide choose an image.

Set a title and subtitle as caption slide.

Video Intro - Set a video background full screen as intro.

Enable/Disable onepage navigation.

NEW Enable/Disable dotted patter on background video.

Enable/Disable bottom arrows on the slider.

Paste an ID Youtube.

Start video on mute.

Enable/Disable controls.

Enable/Disable Autoplay.

Set start video in seconds.

Parallax Image Intro - Set an image full screen as intro.

Enable/Disable onepage navigation.

NEW Enable/Disable dotted patter on background image.

Enable/Disable bottom arrows on the slider.

Set an image and add title and subtitle as caption of this.

No Intro - Use this feature if you do not want use any intro type.

Custom Html - You can use this template page to set a revolution slider shortcode as intro or other code

The code it well be placed in full width mode.

Section Options

The sections choosen they will be attached under the intro.

Add one or more sections already created clicking on the field or writing the title.

Add an icon for each section (optional) - the icon choosen it will be the button navigation to get to this section in home page.

Add a label for this icon - the label it will be shown as a title attribute of the icon navigation

The icon navigation it will be placed on the bottom of intro section, and on the sticky menu after scrolling page.

You can move the order of the sections by Drag'n'Drop.

Note - Do not set any feature image for this template page, it will not be shown.

Note - You can use this template to create also standard page with feature intro and sections.

TEMPLATES BLOG

BLOG 1 - Creates a page for a checkerboard of posts in boxed mode.

BLOG 2 - Creates a page for a checkerboard of posts in full width mode.

BLOG 3 - Creates a page for a grid of posts - The grid shows 3 items per row.

BLOG 4 - Creates a page for a grid of posts - The grid shows 2 items per row.

BLOG 5 - Creates a page for a list of posts - The grid shows posts sequentially.

Blog Options

Sidebar selection are deactivated for this template - you can use only full width mode.

Choose the menu style between light and dark.

Add one or more sections already created clicking on the field or writing the title.

The sections will be added sequentially under the loop of the posts.

Note - You need to add one or more posts to view this section in action.

Note Click ->Setting on the left WP Panel and then click ->Reading to set the number of posts to show per page.

If you want show a pagination in a blog page, you have to set a number of posts lower than total posts in the site.

TEMPLATES PORTFOLIO

PORTFOLIO 1 - Creates a page for a grid of posts in full width mode - The grid shows 3 items per row.

PORTFOLIO 2 - Creates a page for a grid of posts in boxed mode - The grid shows 3 items per row.

PORTFOLIO 3 - Creates a page for a grid of posts in boxed mode spaced - The grid shows 3 items per row.

PORTFOLIO 4 - Creates a page for a grid of posts in full width mode - The grid shows 2 items per row.

Note - You need to add one or more projects to view this section in action.

Page Options

Sidebar selection are deactivated for this template - you can use only full width mode.

Choose the menu style between light and dark.

Add one or more sections already created clicking on the field or writing the title.

NEW Portfolio Options

Select one or more category portfolio to show in the grid

Set the max number of items to show in the grid

The sections will be added sequentially under the loop of posts.

After have created each page, please click update to save the page.

Posts

Click ->Posts on the left wp panel and click add new.

Use differents format to create different type of post

Formats

STANDARD

You can use only the Page Options as described below.

Note - Format Options are deactivated for this format

VIDEO.

You can use the Page Options as described below.

Format Options

You can use only Video Code field for this format post.

Paste the embed code from Youtube or Vimeo.

Note - Galley and Audio options are deactivated for this format.

AUDIO

You can use the Page Options as described below.

Format Options

You can use only SoundCloud field for this format post.

Paste the embed iframe from SoundCloud.

Note - Video and Gallery options are deactivated for this format.

GALLERY

You can use the Page Options as described below.

Format Options

You can use only Gallery Options for this format post.

Set which type of gallery to show on the top of the post between Grid Layout or Slider Layout.

Grid Layout will add 3 items per row, Slider Layout instead it will add one image for slide.

For each item choose an image.

Set a title and subtitle as caption image - Note - this option is active only for slider layout.

Note - Video and Audio options are deactivated for this format.

Page Options - For all formats.

Add a sidebar on the left, on the right or none to set full width page.

Choose the menu style between light and dark.

Add one or more sections already created clicking on the field or writing the title.

The sections will be added sequentially under the page content.

You can move the order of the sections by Drag'n'Drop.

Add a Feature Image on the page, it will be attached as header page.

After have created each post, please click update to save the post.

Portfolio

Click ->Portfolio on the left wp panel and click add new.

Use differents format to create different type of portfolio

Formats

STANDARD

You can use only the Page Options as described below.

Note - Format Options are deactivated for this format.

VIDEO

You can use the Page Options as described below.

Format Options

You can use only Video Code field for this format project.

Paste the embed code from Youtube or Vimeo.

Note - Galley and Audio options are deactivated for this format.

AUDIO

You can use the Page Options as described below.

Format Options

You can use only SoundCloud field for this format project.

Paste the embed iframe from SoundCloud.

Note - Video and Gallery options are deactivated for this format.

GALLERY

You can use the Page Options as described below.

Format Options

You can use only Gallery Options for this format project.

Set wich type of gallery to show on header of the post between Grid Layout or Slider Layout.

Grid Layout will add 3 items per row, Slider Layout will add one image for slide.

For each item choose an image.

Set a title and subtitle as caption image - Note - this feature is active only for slider layout.

Note - Video and Audio options are deactivated for this format.

Page Options - For all formats.

Add a sidebar on the left, on the right or none to set full width page.

Choose the menu style between light and dark.

Add one or more sections already created clicking on the field or writing the title.

The sections will be added sequentially under the page content.

You can move the order of the sections by Drag'n'Drop.

Add a Feature Image on the page, it will be attached as header page

After have created each post, please click update to save the project.

Sidebars

Click ->Sidebars on the left wp panel and click add new.

Create differents sidebars per pages.

Set a title - eg. Portfolio Sidebar, Blog Sidebar.

Set a brief text as description to show in the widgets page.

Click ->Publish to save this sidebar.

Click ->Appearance -> Widgets to view the sidebars already created.

Widgets

Click ->Appearance -> Widgets.

Click ->Note to show the widgets, you have to create a section widget before and then you have to add it on a page or post.

Maya Theme includes some uncommons widgets.

UN CONTACTS - Creates a widgets for contact informations with html text and some address fields.

UN FLICKR GALLERY - Creates a widgets which shows a grid pictures from flickr.

Paste an ID Flickr account and set the number of photos to show.

UN FACEBOOK BOX - Creates a widgets which shows the likebox facebook.

Paste the page url and the height of the box.

Set some parameters and add a custom css to the iframe.

UN MEGA PROJECTS - Creates a widgets which shows a list of projects.

Set the items to show, choose the category and set a custom order.

The widget will add also a thumb as preview on the left of the title.

UN MEGA POSTS - Creates a widgets which shows a list of posts.

Set the posts to show, filter the category and set a custom order.

The widget will add also a thumb as preview on the left of the title.

After have created each widgets, please click ->save to make active the widget.

Advanced

SHORTCODES

The theme included a shortcodes plugin -> MekS Shorcodes.

You need to activate it after installed the theme.

With MKS you can handle a lot of items:

columns, separators, highlights, custom dropcaps, custom buttons, pull quotes, social icons, tabs, toggles, accordions, icons, and progress bars.

To use the shortcodes it's very easy, choose your item, customize it and then click ->insert

CUSTOM CSS

GRID SYSTEM

The theme included a responsive grid based on flow columns.

The classes are located in ../assets/css/plugins.css

You can use these classes to insert lined up content in your page.

.col-1-6 - Attach a width of 1/6 of the content

.col-1-5 - Attach a width of 1/5 of the content

.col-1-4 - Attach a width of 1/4 of the content

.col-1-3 - Attach a width of 1/3 of the content

.col-1-2 - Attach a width of 1/2 of the content

In adding to fit better your page are present also other grid classes:

.col-2-3, .col-2-4, .col-3-4, .col-2-5, .col-3-5, .col-4-5, .col-2-6, .col-3-6, .col-4-6, .col-5-6

SPACINGS

You can use useful classes related to padding and margin to edit your content.

These classes are located in ../assets/css/plugins.css

.marg-25 - attach 25px of margin to tag

.marg-50 - attach 50px of margin to tag

.marg-75 - attach 75px of margin to tag

.marg-100 - attach 100px of margin to tag

.padd-25 - attach 25px of padding to tag

.padd-50 - attach 50px of padding to tag

.padd-75 - attach 75px of padding to tag

.padd-100 - attach 100px of padding to tag

Other possible combinations - You can mix direction or axis y/x

.padd-top-25 - attach 25px of padding-top to tag

.padd-bott-50 - attach 50px of padding-bottom to tag

.margin-left-75 - attach 75px of margin-left to tag

.margin-right-100 - attach 100px of margin-right to tag

.padd-x-25 - attach 25px of padding left and right to tag

.padd-y-50 - attach 50px of padding top and bottom to tag

.marg-x-75 - attach 75px of margin left and right to tag

.marg-y-100 - attach 100px of margin top and bottom to tag

TRANSITIONS

You can use useful classes to attach some css3 animations to your box content.

The classes are located in ../assets/css/plugins.css

.transit - add a transition about 0.3s erase-in-out

.transit-fade - add a fade transition

.transit-left - add a transition from left

.transit-right - add a transition from right

.transit-top - add a transition from top

.transit-bottom - add a transition from bottom

.transit-bouncein - add a bounce in transition

.transit-flip - add a 3d transition

.transit-rotate - add a rotate transition

.transit-pulse - add a pulse transition

.transit-bounce - add a bounce transition

.transit-words - add a transition to the letters of a text

In adding to customize your transitions, you can set some parameters inserting these data attribute in your html tag (not valid for transit-words).

data-delay="millisec" - define the duration of the transition.

data-appear="true/false" - set the start of transition when scroll page.

FRAMEWORK

Note - The Theme includes many options and parameters about some sections already set in js code and easy to edit by user directly from the html code.

LIGHTBOX

To set a lightbox image, you must attach the class .lightbox to the 'anchor' which contains the href="url" related to the image source.

To set a lightbox group, you must also attach the rel="group" attribute to the 'anchor'.

ICONS

The theme uses Feather Set Icons. You can see all icons here.

LIST OF LIBRARIES

easing

gmap

jpreloader

jquery-ui

jquery.appear

jquery.countTo

jquery.fancybox

jquery.fittext

jquery.lettering

jquery.mb.YTPlayer

jquery.mousewheel

jquery.textillate

jquery.ui.map.full

modernizr

owl-carousel

All the other settings of the theme are inclused in ../assets/js/main.js


Have Fun!

WPML Compatibility

WPML public test site for Maya PUBLIC TEST

WPML add-ons – PURCHASE


Installing & activating both WPML & the theme:

WPML getting started guide – GETTING STARTED


How to set and translate main features of the theme:

Using translation management – CONTENT TRANSLATION

Translation Management & Features – TRANSLATING MENAGEMENET & FEATURES

Translating URL slugs – TRANSLATING SLUGS

An example of how the client can translate strings coming from the theme:

How to scan strings coming from the theme – THEME LOCALIZATION

How to translate strings using String Translation – STRING TRANSLATION

If adjustment is needed for WPML language switcher please also add this – LANGUAGE SWITCHER