Mae WordPress Template Documentation & User Guide
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.
Mae is an WordPress template - this means that all domain and hosting should be organised by you.
You'll need to upload “mae” folder in the structure that they appear in the Installation section of this document. That is, Mae theme should reside in the wp-content/themes directory, and all other files should reside inside their associated folder.
“The package could not be
The theme is missing the style.css stylesheet.”
This is usually a result of the theme folder not being uploaded correctly. Ensure the downloaded package from ThemeForest, has unzipped and you upload only the theme-installable.zip.
Ensure that you only make style changes inside child theme style file. This will make it much easier to update the template later - you'll only need to preserve your custom style file.
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.
Blocks are the fundamental element of the Gutenberg editor. They are the primary way in which plugins and themes can register their own functionality and extend the capabilities of the editor.
A tag is required to define each part (or element) that makes up the page as a whole.
<div> is the tag used to define a page division, the fundamental building blocks of HTML. May also be referred to simply as a div element.
<div class="container"> ... </div>
<a> is the tag used to define a link, otherwise known as an anchor. May be referred to simply as an a element.
<a href="http://pixudio.com"> Pixudio </a>
<i> is the tag used to define an icon. May be simply referred to as an i element.
<i class="fa fa-heart"></i>
A reference to any element with the specified class, or a reference to a class that may be used to modify another element.
"Icons use the .fa class" means a i element which has class .fa will renders as an icon.
<i class="fa fa-thumbs-up"></i>
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
that includes demo content, theme, documentation… etc which displays the “The package could not be
The theme is missing the style.css stylesheet.” error.
Ensure that you only upload the theme files.
Install the theme by following these 3 steps:
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.
After activating the theme a notification will pops up at the top of the admin pages that says the theme requires following 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.
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:
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.
After you import the data, lunch site customizer.
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.
Use select logo button to add your site's logo image. Suggested image dimensions is 232 by 114 pixels.
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 describes your site activity and appears on search engines results, this field will be suffixed onto site title on the home page.
Site Icons are what you see in browser tabs and bookmark bars. Site Icons should be square and at least 512 by 512 pixels.
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.
.background-color--primary & .color--primary
.background-color--secondary & .color--secondary
.background-color--tertiary & .color--tertiary
.background-color--body & .color--body
.background-color--body-alt & .color--body-alt
.background-color--body-lighten & .color--body-lighten
<!-- Template’s primary color --> <p class="color--primary">...</p> <!-- Template’s primary background color --> <div class="background-color--primary">...</div>
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.
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.
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.
.sub-head Work hard. Dream big.
.sub-head-2 Work hard. Dream big.
.text-body Work hard. Dream big.
.text-body-2 Work hard. Dream big.
.text-body-3 Work hard. Dream big.
<!-- Template’s subheading --> <span class="sub-head">...</span> <!-- Template’s third body font --> <p class="text-body-3">...</p>
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.
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.
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.
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.
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.
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.
Click on “Signup forms”
Go to “General forms”
You should be able to see the form now
Choose “Field settings”
Click on “First Name” and make it a “Required field”
Click on “Last Name” and remove it from the form
Now you are ready to fetch your form information and insert them into your website’s subscribe form.
Click on “Signup forms” again
Go to “Embedded forms”
Find embed code under “Copy/paste onto your site” but do NOT paste them into your website, as you ONLY need to grab form action and a field named as a hashed key.
<!-- 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>
<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>
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 .
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.
Open Google Calendar You'll need to be logged into your Google account. Click the "Create" button. A new event window should open.
Save your event then from More actions menu click on Publish event.
Copy HTML code or link address and place it in your site as needed.
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.
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.
Next, add some blocks.
When you're ready to publish, you can either publish immediately, save this or a draft, or schedule the page to be published later.
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.
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.
Remove Padding Top disables default page top padding, it's useful when you're creating a page with hidden page title & Banner block as the first layout block. Commonly use cases: Home & landing pages page.
Remove Padding Bottom disables default page bottom padding, it's useful when you're creating a page that contains a block at the very last with background color, or images, like Call to action or Instagram block and you want to remove extra gap between the block and the footer. Commonly use cases: Home & landing pages page.
Hide Page Title hides page title and page subtitle (Whether it's added or not). Commonly use cases: Home & landing pages page.
Subtitle is an extra page description, like a slogan that renders underneath the title.
Hide Page Footer hides page footer, commonly used for landing pages.
Override Top Navigation overrides main navigation on the page. Leave it as default would display global top navigation, commonly used for landing pages.
Override Color Palette overrides site color palette on the page. Leave it as default would render global colors, usually used for landing pages.
Override Page Logo overrides the logo, set new logo if you'd like to have a different logo dedicated to the page, like "Product (Red)" logo. Otherwise Leave it as empty would render site logo, usually used for landing pages.
Create a front page
Create a blog page
Go to Appearance > Customize > Homepage Settings
Publish your homepage settings.
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.
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.
Next, add some contents.
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.
As needed, select a category and add some tags.
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.
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 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.
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>
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).
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>
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.
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 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>
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.
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>