Mae WordPress Template Documentation & User Guide

  1. Contents
  2. Introduction
  3. Terminology
  4. Installation
  5. Import demo
  6. Site identity
  7. Colors
  8. Typography
  9. Menu bars
  10. Header CTA
  11. Footer
  12. Additional CSS
  13. Gutenberg blocks
  14. Banners
  15. Subscribe form
  16. Instagram feed
  17. Calendar invites
  18. Page
  19. Post
  20. Video popup
  21. Buttons
  22. Icons
  23. Lazyload
  24. Async videos
  25. Changelog
  26. Credit

Introduction

Thanks for purchasing Mae WordPress template by Pixudio. This documentation will give you an overview of the template's main features and how they can be customised to suit your requirements. This guide assumes basic knowledge of WordPress.

We have endeavoured to make this documentation as comprehensive as possible but understand that at times, you many need to contact us for additional support. You can reach out for this support by opening a ticket at our dedicated forum on Ticksy. You will need your purchase code in order to signup, you can find this here.

Using an WordPress template

Mae is an WordPress template - this means that all domain and hosting should be organised by you.

F.A.Q

Terminology

For you to get the most out of reading this document, we'll introduce some of the terminology used throughout so you'll be able to follow exactly what is meant.

Conventions used in this documentation

Installation

You'll need unzip the downloaded package from ThemeForest. Then only upload and install the theme-installable.zip file.

Note: One of the most common reasons people have issues is because they try uploading the full zip that includes demo content, theme, documentation… etc which displays the “The package could not be installed. The theme is missing the style.css stylesheet.” error.
Ensure that you only upload the theme files.

Install theme with WordPress

Install the theme by following these 3 steps:

  1. Log into your WordPress website and go to Appearance > Themes and click Add New.
  2. Click Upload Theme and choose the theme-installable.zip file and click Install Now.
  3. Click on activate when the theme is installed successfully.

Note: If you get an upload file maximum size limit error. You'll need install the theme via FTP, or contact your hosting provider to increase the limit.

Install theme with FTP client
  1. Connect to your server through FTP, by using an FTP client like FileZilla.
  2. Find the WordPress installation folder.
  3. Browse to the /wp-content/themes/ folder.
  4. Upload the theme files there.
    Note: Theme should already be extracted from the zip file before uploading.
  5. Go to Appearance > Themes and activate the Mae theme.
Install plugins

After activating the theme a notification will pops up at the top of the admin pages that says the theme requires following plugins:

Required plugins:

Recommended plugins:

By clicking on 'Begin installing plugins', you'll be redirected to a page where you can bulk install all the plugins at once. This message will also popup anytime an update for a plugin is needed.

Import demo

Installing demos with one click is fairly simple. However, from time to time the process can fail; Due to many variables that come into play. For that reason Mae offers native Wordpress import demo data process which gives you control over your content.

This guide assumes you already installed recommended plugins:

  1. WordPress Importer
  2. Widget Importer
  3. Customizer Importer
Import content
  1. Login into your admin dashboard panel go to Tools > Import.
  2. Find WordPress at the very bottom of the list and click on Run Importer.
  3. Choose content.xml file from /demo/ folder in the themeforest package.
  4. Hit Upload file and import button.
  5. Check "Download and import file attachments" from Import Attachments.

    NOTE: You may want to reassign the author of the imported item to an existing user of this site by assign posts to an existing user from drop down menu.

  6. Submit & have fun!
Import widgets
  1. Go to Tools > Widget Importer & Exporter.
  2. Choose widgets.wie file from /demo/ folder in the themeforest package.
  3. Hit Import Widgets button.
Import customizer
  1. Go to Appearance > Customize > Export/Import.
  2. Choose customizer.dat file from /demo/ folder in the themeforest package.
  3. Hit Import button.
Final touch

After you import the data, lunch site customizer.

  1. Go to Appearance > Customize > Menus > View All Locations. Set Top Menu and Social Links Menu menus.
  2. Go to Appearance > Customize > Widgets. On each navigation menu widget select relevant menu to the title.
  3. Go to Appearance > Customize > Homepage Settings. From the drop down menus select your home and blog pages.

Site identity

Settings of this group are responsible for managing site identity features. This is the initial place where you upload your logo. Simply go to to Appearance > Customize > Site Identity.

Logo

Use select logo button to add your site's logo image. Suggested image dimensions is 232 by 114 pixels.

Site Title

Site title identities your site name and appears on search engines results, this field will be prefixed onto site title tag and site's logo alt attribute.

Tagline

Tagline describes your site activity and appears on search engines results, this field will be suffixed onto site title on the home page.

Site Icon (favicon)

Site Icons are what you see in browser tabs and bookmark bars. Site Icons should be square and at least 512 by 512 pixels.

Colors

Mae colors palettes are designed and developed to serve your ideas and purposes, they bring eye catching and nice contrast to your website. You can select one from many existing ready to use color palettes or you can create your very own custom color palette. To do so, Simply go to Appearance > Customize > Colors.

Class Modifiers
Markup usage
<!-- Template’s primary color -->
<p class="color--primary">...</p>

<!-- Template’s primary background color -->
<div class="background-color--primary">...</div>

Typography

Font sizes and styles were developed to balance content density and reading comfort under typical usage conditions. To select your desire font family and it’s weight from all Google fonts, simply go to Appearance > Customize > Typography.

Body fonts

This font is used as your site's main font in all pages and posts. It is better to select a san-serif font which are matched better with overall look of theme's design.

Headline fonts

This font is used as your site's headlines in all pages and posts. For making a better contrast you might select heavier font weights like Bold or Black.

Class Modifiers
Markup usage
<!-- Template’s subheading -->
<span class="sub-head">...</span>

<!-- Template’s third body font -->
<p class="text-body-3">...</p>

Header call to action

Header call to action (CTA) designed to prompt an immediate response or encourage an immediate sale. A CTA most often refers to the use of words or phrases that encourage consumers to take prompt action.

To add your call to action go to Appearance > Customize > Menus > Call to Action.

Additional CSS

Add your own CSS code to style.css file inside the child theme. This will make it much easier to update the template later - you'll only need to preserve your custom style file.

You also can add your custom CSS code to "Additional CSS" setting at site customizer, to do so, simply go to Appearance > Customize > Additional CSS.

Gutenberg blocks

Mae offers +40 modern blocks among all of Gutenberg blocks that let you write rich posts and create beautiful and eye catching layouts.

Have a quick glance at how blocks work.

Here is some of Mae's blocks you could enjoy of using them.

  1. Accordion
  2. Alert
  3. Banner - Countdown
  4. Banner - Countdown
  5. Banner - Gooey
  6. Banner - Pattern
  7. Banner - Slider
  8. Button
  9. Carousel
  10. Columns
  11. CTA
  12. Features
  13. Gallery
  14. Heading
  15. Instagram
  16. Links
  17. Mailchimp
  18. Map
  19. Parade
  20. Portfolio
  21. Portfolio - Showcase
  22. Posts list
  23. Pricing
  24. Progress - Horizontal
  25. Progress - Vertical
  26. Schedule
  27. Services - Icon
  28. Services - Image
  29. Services - List
  30. Services - Text
  31. Spacer
  32. Speakers - Grid
  33. Speakers - Masonry
  34. Speakers
  35. Sponsors
  36. Tabs
  37. Team
  38. Testimonials
  39. Video
  40. Wildcard
  41. Workshops

Banners

Banners are often the first visual element a visitor encounters on the site. it presents an overview of the site's most important content. Mae offers 4 different banner type with unlimited styles.

Take a look at how a banner works.

Note: We do not recommend that you include more than one banner per page.

Subscribe form

Mae offers the use of Mailchimp as a marketing email service. While Mailchimp API require an account in order to create an email listing please make sure you have already created a Mailchimp account.

Create a new list

Follow Mailchimp's instructions here on how to create a new list. When you have your list ready, proceed to the next section to learn how to set up your subscribe form.

General forms

After you have created a list, Make sure you are in the list page that you just created, by clicking on lists from main navigation then choosing your list.

Embedded forms

Now you are ready to fetch your form information and insert them into your website’s subscribe form.

<!-- Form action URL -->
<form action="//pixudio.us15.list-manage.com/subscribe/post?u=4f175e7a78cd5c1fce7ef555a&id=8f06b51a52" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
  <div class="sr-only" aria-hidden="true">
    <!-- Hashed key -->
    <input type="text" name="b_4f175e7a78cd5c1fce7ef555a_8f06b51a52" tabindex="-1" value="">
  </div>
  ...
</form>
Inserting your form keys
Inserting GDPR codes
<form action="//pixudio.us15.list-manage.com/subscribe/post?u=4f175e7a78cd5c1fce7ef555a&id=8f06b51a52" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
  ...
  <!-- Copy codes inside div#mergeRow-gdpr  -->
  <div id="mergeRow-gdpr" class="mergeRow gdpr-mergeRow content__gdprBlock mc-field-group">
    <!-- Starts here -->
    ...
    ...
    ...
    <!-- Ends here -->
  </div>
  ...
</form>

Instagram feed

Mae offers you a very simple way to add Instagram photos to your website. While Instagram API require an access token and valid user ID you'll need to get them from Instagram’s API .

Inserting your accessToken and userId

Calendar invites

Here is how to insert a Google Calendar invites right into a page in a few easy steps. That way, registrants can add the event directly to their calendars.

Create a new event

Open Google Calendar You'll need to be logged into your Google account. Click the "Create" button. A new event window should open.

Set details for your event

Save your event then from More actions menu click on Publish event.

Insert invites into your site

Copy HTML code or link address and place it in your site as needed.

Page

Creating a page
  1. To get started adding a new page to your site, in the Dashboard Navigation simply go to Pages > Add new.

    NOTE: The WordPress page editor looks nearly identical to the post editor, except for a few different boxes located on the right side of the screen.

  2. Add the title of the page, like "About".

    NOTE: If you have pretty permalinks set up, the title of your page will also be the page URL slug.

  3. Next, add some blocks.

  4. When you're ready to publish, you can either publish immediately, save this or a draft, or schedule the page to be published later.

  5. The Page Attributes section applies a parent page and template to your new page. For the Parent section, you can arrange your pages into hierarchies. For example, you could create this new page with additional pages under it. There are no limits to how many levels you can nest pages.

  6. The Order box allows you to order your page numerically. Pages are usually ordered alphabetically, but you can choose your own order by entering a number in this field.

Extended settings — Page settigns
Creating a Static Front Page
  1. Create a front page

    • Create a new page and title your it "Home".
    • Add blocks & content you would like to see within the content area of the static front page.
    • Publish the page.
  2. Create a blog page

    • Create a new page and title your it "Blog", "News", "Articles", or an appropriate name.
    • Do not add content. Leave it blank. Any content here will be ignored.
    • Publish the page.
  3. Go to Appearance > Customize > Homepage Settings

    • In the drop down menu for Homepage select "Home".
    • In the drop down menu for Posts page select "Blog" or the name you created, or leave it blank if you will not feature posts on the site.
    • Publish your homepage settings.

Post

Creating a post
  1. To get started adding a new post to your site, in the Dashboard Navigation simply go to Posts > Add new.

    NOTE: The WordPress post editor looks nearly identical to the page editor, except for a few different boxes located on the right side of the screen.

  2. Add the title of the post, like "My first post".

    NOTE: If you have pretty permalinks set up, the title of your post will also be the post URL slug.

  3. Next, add some contents.

  4. As needed, select post format from drop down.

    Find post format drop down under Status & Visibility > Post Format

    NOTE: Gallery post format, will grab images from Gallery block attached into the content area and displays them in archive pages, such as blog instead if feature image in form of a carousel automatically.

  5. As needed, select a category and add some tags.

  6. Set a feature image.

    Suggested feature image dimensions for standard post format is 660 by 440 pixels and for all other standard formats (video, audio, quote, …) is 660 by 1040 pixels.

  7. When you're ready to publish, you can either publish immediately, save this or a draft, or schedule the post to be published later.

Video popup

Video popup is a essential way to offering embedded youtube and vimeo videos to users, You can simply include it to any link, and lets users to decide what video they are attempt to watch.

Markup

A video popup can be attached to any <a> tag, simply by adding .video-popup class and link to a Youtube or Vimeo video.

<a class="video-popup" href="https://www.youtube.com/watch?v=kHJQ9gG26HQ">Watch video</a>

Buttons

Buttons are used in various places throughout the template to implore the user to continue exploring other parts of the site, or to call them to perform an action such as sign up, book now, become a member etc.

Markup

Buttons are housed in a basic <a> element.

<a class="btn btn--primary btn--large" href="#">Sign up</a>
Class Modifiers

Icons

Icons serve different purposes depending on where they are used - often they are used as decoration, to illustrate a particular service for example. In other cases icons are used to help users navigate a site (a downward arrow denoting a dropdown menu for example).

Markup

Font icons is designed to be used with inline elements (we like the <i> tag for brevity, but using a <span> is more semantically correct).

<!--user icon in two different styles-->
<i class="fas fa-user"></i>
<i class="far fa-user"></i>
<!--brand icon-->
<i class="fab fa-github-square"></i>

Lazyload

Lazyloads images or iframes loads only when the users need them to display. In this way, user won’t have to wait for all the elements in the page to be loaded and therefore, can start using the web page sooner. The user will be seeing only the images above the fold. The rest will come as soon as user scrolls.

Markup

A lazyload element uses the class lazyload in conjunction with a data-src and/or data-srcset attribute. Optionally you can also add a src attribute with a low quality image.

<img
class="lazyload lazyload--el"
src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
data-src="image.jpg"
data-srcset="image.jpg 1800w, image-1600x900.jpg 1600w, image-1280x720.jpg 1280w, image-768x432.jpg 768w"
width="1920"
height="1080"
alt="">
ls.unveilhooks

ls.unveilhooks plugin extends lazyLoad to background images, video’s posters and scripts.

Background-Image:
For background images, use data-bg attribute:
<figure class="lazyload lazyload--el" data-bg="image.jpg"><figure>

Video’s poster:
For video tag use data-poster and preload="none":
<video class="lazyload lazyload--el" data-poster="image.jpg" preload="none">
  <!-- sources -->
</video>

Scripts:
For scripts use data-script:
<div class="lazyload" data-script="module-name.js"></div>

Script modules using require:
For modules using require use data-require:
<div class="lazyload" data-require="module-name"></div>

Async videos

Same as Lazyload images, videos sources can be load asynchronous to prevent block rendering and increase site performance if you are going to autoplay or preload them.

Markup

An async video uses the data-sources attribute. Optionally you can also add multiple sources divided by |.

<video data-sources="video.mp4|video.ogg" loop autoplay></video>

Changelog

Version 3.0.7
Version 3.0.6
Version 3.0.5
Version 3.0.4
Version 3.0.3
Version 3.0.2
Version 3.0.1
Version 2.0.5
Version 2.0.4
Version 2.0.3
Version 2.0.2
Version 2.0.1
Version 2.0.0
Version 1.0.3
Version 1.0.2
Version 1.0.1
Version 1.0.0

Credit