The Grid
Documentation



Plugin Requirements

To run the grid you must have at minium: PHP version 5.3.0

In the grid panel, we also added in the system requirement box some recommendations about your php limits.
These are just some recommendations and are not necessary to run The Grid properly.

Installation

At first, you need to download The Grid plugin from Codecanyon using your account.
At the root folder of this zip file, you will find an other zip file named the-grid.zip. This zip file will be used to upload the plugin.

To add a WordPress Plugin using the built-in plugin installer:

  1. Go to Plugins > Add New.
  2. Upload the-grid.zip plugin zip file
  3. Click on install Now
  4. If successful, click Activate Plugin to activate it, or Return to Plugin Installer for further actions.

For information on how to install a WordPress Plugin manually, see this manual installation guide below.

  

Register Plugin

In order to unlock the Skin Builder feature and to enable automatic update functionality, you must register The Grid.
The registration system uses a secure method from Envato in order to retrieve your purchase code from your user profil.
In the registration of the field you must enter a Personal Token generated by Envato (not a purchase code).
To generate a Personal Token from Envato, you need to follow these steps:

  1. Go to the Envato Token Generator to create a Personal Token
  2. Enter a Token Name, select I have read checkbox and click on create token
  3. Copy the Personal Token, select confirm checkbox and click on Woohoo Got It
  4. Enter the previously generated Personal Token in The Grid registration field

N.B: You must valide the personal token on Envato before to try to register The Grid otherwise it will not work

N.B: Because the registration system makes some requests on Envato server, if there is an issue from Envato then you will not be able to register The Grid. In this case you need to wait several minutes or hours before to try again.


Update Plugin

The Grid comes with an automatic update functionality.
To update The Grid and check for new available version you must enter your Personal Token which can be generated with the Envato API.
To get your Personal Token, you must generate one here.

If you encountered some issues to generate the Personal Token or to register The Grid, you can still update manually with the following steps:

  1. Deactivate the current plugin version installed on your server,
  2. Remove this old plugin version,
  3. Upload the new plugin version (please look at the installation section)

N.B: When a plugin or a theme is removed/updated from Wordpress, all files are physically deleted from your server.
So, if you have made change to the plugin/theme files, all these change will be lost
However, all data/options/posts are stored on your server database (MySQL). So, you will not loose any data when updating or removing a theme or a plugin.

Quick Start - Build a grid

In this section we will explain how to build your first grid with The Grid Wordpress plugin.

At first, go in The Grid admin panel through the left dashboard menu area.
You will find 3 sub-menus available:

  1. The Grid, where you can create and manage your grids
  2. Import/Export, where you can export and import your grids
  3. Global Settings, to set up all global options like color scheme, lightbox, image sizes...

To get started, click on the sub-menu The Grid > The Grid. If there isn't any grid then you will have 2 options: create a new grid or import the demo data.
Import the demo data will create the 20 grid examples which you can find on The Grid live demo





Create a new grid

At first, click on create a new grid.
You will be redirected on the grid generator page.
Here are the main steps you should follow to create a new grid:

  1. Enter your grid name
  2. Select a post type
  3. Choose the post formats allowed in your grid
  4. Set the style of grid and the number of columns
  5. Choose a skin
  6. Save a grid
  7. Insert a grid

N.B. : All these steps are optional and a grid will be automatically generated with the default post type of Wordpress without any settings.
So, if you want, you can directly preview the grid and save it.

1. Enter your grid name

At first, under the General tab, you will find a field where you can enter your grid name
This field must be not empty and it should not contain a grid name which already existing.
While entering your grid name inside this field, you will see that it will also generated the shortcode on the field below.
You can copy/paste this shortcode everywhere you want in order to display the current grid (in an page/post text editor for example).

2. Select a post type

Under the tab Source, you can set the number of items to display inside the grid.
For example, if you set number to 6, then it will display 6 elements inside the grid (at first load).

you can select the post type(s) you want to display inside the grid.
Several post types can be selected as a source content.

N.B. : You will find more details under Source/Content Tab documentation

3. Choose the post formats allowed in your grid

Under the tab Media, you can select the post formats you want to allow inside the grid.
For example, if you select video and audio formats, then the grid will retrieve any video/audio media content available in your post type source.
If video or audio are found, then it will be display inside the grid.

N.B. : You will find more details under Media Tab documentation

4. Set the style of grid and the number of columns

Under the tab Grid you can choose the style of grid:

  • Masonry (preserve natural aspect ratio of images and content)
  • Grid (each item are proportionnal to each other's)
  • Justified (each items have the same height in a row)

You can also set the number of columns in the grid for different device sizes (browser widths):

N.B. : You will find more details under Main Grid settings Tab documentation

5. Choose a skin

Under the tab Skins you can choose the skin of the items display inside the grid.
Just click on the skin you want for this grid to select it.
Depending of the grid style which was set under Grid tab section, available skins will be different for Masonry and Grid style.

N.B. : You will find more details under Skin settings Tab documentation

6. Save a grid

Now, you have configured the main settings of the grid, you can save it:

7. Insert a grid

To insert a grid in a page or a post, you just need to copy paste the shortcode where you want to make it appear.


Source/content settings

In the source tab you can deeply customize the type of content that you want to display inside a grid.
We have added all options which Wordpress offers to query the content from post types. There isn't any limitation and the possibilities are infinite.
You will be able to filter you content by any category(ies), status, author(s), meta key(s), etc...

N.B : By default the grid will display all the posts ordered by date in descending order (...,4,3,2,1,0).

Item Number correspond to the number of elements initially loaded in the grid:

  • -1 : load all posts from the selected post type
  •  0 : Correspond to the default number of "post per page" set in the native Wordpress settings (Wordpress Settings > Reading)

Post type correspond to the main content you want to load in the grid like your post(blog), portfolio, product,...
You can add multiple post types per grid (unlimited number).

Post status correspond to the current post status you want to make appear in the grid.
By default publish statut is enable. But if you want, for example, to only display your futur blog posts (which you are currently writing) you can select "pending" or "draft" status.

Category Filter - In this section you can select several categories in order to filter the grid by the selected categories.
When one or more categories are selected then the grid with only display these categories from the current post type(s).
If no category is selected, then the grid will display all available categories from the current post type(s).


Exclude items - If you need to exclude some posts you have the possibility to add the ID of these posts in the field Exclude items.
In this text field you should enter the ID(s) of the post(s) to exclude from the source. Each ID must be separated by a comma.
You can also use the preview mode to exclude items and auto fill this field by click on the eye icon.


Ordering - Now that you setup the content of the grid, you can arrange it by different types of parameters.

You can order by date, title, post ID, number of comments, authors, meta key(s),...
All the possibilities offered by Wordpress are available.

Ordering Example : Display the most like post using the built in post like system from the Grid Plugin.
By ordering with a numeric meta value, you will be able to display the most like post by descending order for example. The meta key name is "_post_like_count".
The image below illustrate this example. It can be expanded to any meta key.

Meta Key Filter - If you want to deeply customize the content/source filter, you can use the drag and drop Meta Key filter interface.
With meta key, you will be able to filter your content by certain value such as, number of like, product price, product in sale,...
Meta data are generally used by 3rd party plugins in order to add some additionnal content to a post type (woocommerce price for example).
So, if you want to use a meta key to filter the content, you must ask to the plugin/theme author what is the meta key name which store the value you are searching for.

Meta Key Filter Example 1 : Display only posts which have more than 5 likes (using our built-in post like system).
The image below illustrate this example. It can be expanded to any meta key.

Meta Key Filter Example 2 : Display only products on sale.

Meta Key Filter Example 3 : Display only products on sale with a price superior to 40$ and with available stock. And orderby sale price in ascending order (from lowest to highest sale price).


Media content settings

The Grid Plugin support native Wordpress post format.
Here are the following supported post formats:

  • Standard
  • Gallery
  • Video
  • Audio
  • Quote (only in masonry mode)
  • Link (only in masonry mode)

N.B. : Available Post Format will depend of the theme you are using. Some themes do not allow all post format.

These format are supported in all skins (except for Quote & Link format which are only supported in masonry layout).
If you have correctly set the post format in your post and also added directly in the content a gallery, a video or a song then The Grid plugin will be able to retrieve these contents.

Alternatively, you can use our own post format settings to add extra content for image, gallery, video, audio, quote and link.
You will find in each post type a setting box where you can add your content according to the selected format.
The alternative content setup in this option box will be retrieve at first and if no content was found then it will search the first media content in the post content.

These settings are also available when you preview the grid in the admin panel. You can easly access to all posts settings in preview mode.

Youtube/Vimeo Video - To add a Youtube/Vimeo embed video you must enter the video ID into the corresponding field.
You will find YouTube or Vimeo's video ID, by visiting the video on Youtube.com or Vimeo.com. The ID is located in the adress bar like this:




You can also set the aspect ratio of the video in order to perfectly fit to the video you want to embed.

Audio Format - To add an embed Soundcloud song you must also enter the ID of the Soundcloud song.
To get the SoundCloud ID you must click at first on share button. Then you must click on embed and copy the number you will find just after "//api.soundcloud.com/tracks/" in the url.

   

You just need to paste this ID in the SoundCloud field.

In the grid settings under media tab, you have the possibility to allow or not post format like video, audio, quote, link...

In this settings tab, you also have the possibility to show all post format video in a lightbox instead of displaying the video inside grid element.
Just by activating this option all videos will be automatically played in a lightbox.

N.B. : All skins are compatible with video/audio media and can be play directly in a grid item (by default; in a lightbox optionnal).

Image Format - Depending of your grid settings (number of columns), it might be interesting to load images which have the right sizes in order to improve the loading speed.
You have 2 possibilities to optimize image sizes:

  1. Smart Resize, it resize images on the fly in order to fit perfectly to each element in the grid.
  2. Images Sizes, predefined image sizes which you can set in Settings > Media or in The Grid > Global Options panel.

Image sizes are generated when you upload new images in Wordpress. So, if you want to use one of the image size set in Global options with images uploaded before installing The Grid then you must regenerate them. You can use a plugin like Regenerate Thumbnail to regenerate all image sizes.

N.B. : Smart resize option currently doesn't work with CDN.

Social Media Content

Since v1.3.1, The Grid allows to display external content:

  1. Instagram
  2. Youtube
  3. Vimeo
  4. Facebook
  5. Twitter
  6. Flickr
  7. RSS Feed

In order to display social media content in the grid, you need at first to enter your personnal API key for each API in the Global settings under API tab.

For each API, you must generate your personnal key and enter it in this global setting panel.
Under each field, you will find a link in order to generate this key. Please follow the instruction provided by the social company in order to generate your API key.

In order to preserve performances, The Grid will cache the result from any social media content during one hour.
This will allow to improve drastically the loading speed of your website by preventing to fetch data from an external server each time.

After setting up your API keys, you will be able to use social media content.

1. Instagram

You can display in the grid posts from your Instagram account.

Facebook requires users to create a Facebook app with Instagram Basic Display API to get a long-live Instagram Access Token.
Follow our instructions on this section to get your own Instagram Access Token and paste it back in your grid settings.

You will need:

  • A Facebook account.
  • An Instagram account with media.
1. Add a facebook App

Go to developers.facebook.com and login with your Facebook account. Then click on My Apps then on Add a new app


On Create an App ID popup, select For everything else option:


Enter your app name, then click on Create App ID button


Complete the Google reCAPTCHA check. Click on Submit button.


Navigate to Settings >> Basic page. Enter the Privacy Policy URL and Terms of Service URL of your website. Select the Category and Business Use for your app.

Click on Save changes button.


Still on Settings >> Basic page, scroll to the bottom of the page and click Add Platform.


Choose Website, add your website’s URL, and save your changes.




2. Configure Instagram Basic Display

Click Products, locate the Instagram Basic Display product, and click Set Up to add it to your app.


On Basic Display page, scroll to the bottom of the page, then click Create New App.


In the form that appears, complete each section using the guidelines below.

Display Name

Enter the name of the Facebook app you just created. Click Create App button.


Valid OAuth Redirect URIs

Enter your website’s URL.

After you enter a URL, save your changes and check the URL again; Instagram may have appended a trailing forward slash depending on your URL structure.

Deauthorize Callback URL

Enter your website’s URL again.

Data Deletion Request Callback URL

Enter your website’s URL once again.


Save your changes before heading to the next step.

3. Add an Instagram Test User

Navigate to Roles > Roles and scroll down to the Instagram Testers section. Click Add Instagram Testers and enter your Instagram account’s username and send the invitation.




Open a new web browser and go to www.instagram.com and sign in to your Instagram account that you just invited.
Navigate to (Profile Icon) > Click on the cogwheel icon next to Edit Profile button > Apps and Websites > Tester Invites and accept the invitation.




Your Instagram account is now eligible to be accessed by your Facebook app while it is in Development Mode.

4. Generate Access Token for Test User

Navigate to App Dashboard >> Products >> Instagram Basic Display >> Basic Display page and scroll down to User Token Generator section. Click on Generate Token button.


Log in with your Instagram account. Allow the app to access your Instagram account data.




Click on I understand checkbox then copy your Instagram Access Token.


Paste your Instagram Access Token in your grid settings

2. Youtube

You can display from Youtube:

  1. Channel
  2. Playlist
  3. Video(s)

One channel and one playlist can be displayed per grid in order to preserve performance.

For Youtube video(s) source you can enter multiple video IDs separated by a comma.

IDs can be found in the Youtube url.


3. Vimeo

You can display from Vimeo:

  1. User
  2. Album
  3. Group
  4. Channel

One user or ID can be set per grid in order to preserve performance.

User an IDs can be found in the Vimeo url.


4. Facebook

You can display from Facebook:

  1. Facebook public page (not user profil)
  2. Public group page
  3. Public album

Public group page and Public album require a valid ID in order to fetch the content from Facebook.
You will find Facebook ID in the url of the group or album page or you can use some web services to get the ID.


5. Twitter

You can display from Twitter:

  1. User Timeline
  2. Tweets by search
  3. User Favorites
  4. User List

6. Flickr

You can display from Flickr:

  1. Public Photos
  2. Photoset
  3. Gallery
  4. Groups Photos

7. RSS Feed

You can display from a RSS Feed any valid rss feed url.
A lot of services have RSS feed like:

  1. 500px: http://500px.com/tim_santasombat/rss
  2. Youtube: https://www.youtube.com/user/goprocamera
  3. Vimeo: http://vimeo.com/toddmartinfilms/videos/rss

Main grid settings

The grid plugin offer 3 main types/layouts to display your content:

  • Masonry (preserve natural aspect ratio of images and content)
  • Grid (each item are proportionnal to each other's)
  • Justified (each items have the same height in a row)

You can adjust the space between each item in the grid thanks to the gutters options.
If you are in Grid style, then you will have the possibility to adjust the item ratio. It corresponds to the ratio between the width and height of the item in the grid (like 4:3, 16:9 format).
Each item in the grid can have different sizes (number of row & column). The size of an item can be set in each edit post page or directly in the preview grid mode.


There is also an option to override all item sizes individually set for any post types.
In that way you can force each element in the grid to have the same size even if a size was set individually for an item.

Column settings - The Columns section will allow you to assign a number of column for different screen widths.
You can also set up the associated browser width for each number of column by activating "advanced column settings".

In preview mode, you have the possibility to switch from the different browser widths and to check what will look like the grid for different widths.

Filter/sorter settings

One of a great feature of The Grid Plugin is the ability to filter/sort the grid.
You have the possibility to use any custom taxonomy like category, tag, format to build one or several filter areas for your grids.
The available taxonomy terms (filters) will depend of the selected post type.

To build you filter areas, you simply need to drag and drop the desired terms in the filter area.
If you want to add several filter area you can create unlimited number of areas thanks to the button "add filter".

You have some options inside each filter area to arrange/order terms, to display the number of filter and choose the text displayed for this filter (all button, dorpdown sentence,...).
The filter areas you created are available under the grid layout tab. You can drag & drop these filter areas everywhere you want in the available layout area.

Because you have the possibility to generate several filter areas, you have an option to create combination filter.
By combination, we mean that you can activate different filters at the same times to filter the grid.
There are two different combinations possible:

  1. AND Logic (e.g. :active filters t-shirts & red color => will display only red t-shirts)
  2. OR Logic (e.g. :active filters t-shirts & pants color => will display all t-shirts and all pants)

N.B. : On the front end, if element inside the grid doesn't have any terms corresponding to the filter areas, then these area will not appear.
The terms inside filter areas are also update in real time when appending new items. So if you append new element in the grid the number of filter will be updated and new filters can also appear if there wasn't present before.

Sorting - In this section you can customize the drop down sorter.
You can select several items you want to sort with and also choose the text to display in the drop down filter.

You also have the possibility to filter the grid onload by a selected value/term and to choose the order (ASC/DESC)

Add custom filter : You can add custom sorters from any custom meta data.
In the Global settings admin panel, you have the possibility to add unlimited number of custom meta data keys un the tad Meta Data. Once you added some custom meta dat key, this meta data will be available in the filter dropdown list.

N.B. : The dropdown soter list will also be available in Layout tab

Pagination settings

The Grid comes with a powerfull pagination system. It will allows you to recreate a complete portfolio page with a real pagination system.
You also have the possibility to add an ajax pagination to load the next page without refreshing the browser.

You can deeply customize the pagination system (not in ajax mode since it's like a load more button) in order to adjust the number of button pages to display, the prev/next buttons, the page lenght, etc...

Layout settings

In this tab section you can compose your grid layout by dragging and dropping available elements.
Available elements will depend of the grid layout and of the filter areas.

The grid layout have 6 differents area where you can place elements.

  

In each of these areas you will find settings to horizontally align elements inside area and to add some margin/padding and a background-color.
Left and Right areas are only available in Horizontal (slider) mode.

Grid Layout - The Grid offer 2 kinds of layout:

  • Vertical
  • Horizontal (slider)

In vertical layout, you have the possibility to force the grid to fill the entire width of the browser.
With horizontal layout, you have an additional option to force the grid to fill the full height of the browser window. In that way, with horizontal mode, you can have a grid slider which fill the entire browser screen responsively.

When you activate the horizontal layout, new options will appear at the bottom of this section to setup the slider.

In horizontal layout (slider) if you are in grid style mode then you will have the possibility to set the number of rows to display inside the slider.
In Masonry style, you can only have a 1 row slider because each element can have a different height (so, a row doesn't have a known height).

The slider comes with 4 item navigations:

  • Free mode (no navigation selected - empty option)
  • Basic
  • Centered
  • Force centered

You have the possibility to start the slider to a certain position with the option "Slider Start at".
You can also auto play the slider and setup the autoplay speed.

Skin settings

N.B: You will find in the main downloadable .zip package on CodeCanyon (under download section), several custom skins which replicate all native skins provide with The Grid

Item Skin

In this tab section you can set appearance of elements inside the grid for each post types.
You will find a dropdownlist to select the post type for which you want to select a skin.

Depending if you are on Masonry or Grid layout, available skins will be different.

Masonry Skins:

Grid Skins:

Just click on the desired skin to select it.

You also have the possibility to add a skin per item in the grid. In each edit page of a post type you will find a box where you can select a skin for the current post.
These settings are also available in the preview mode by clicking on the setting icon. When a skin is selected for a post then it will override the default skin set in the Grid Admin panel.

Skin colors - You will find two color palettes to add custom colors to the skins.

  • Content Background Color
  • Overlay Background Color

Content Background color corresponds to the background color where the excerpt of the post is displayed.
Opposed as the overlay background color which corresponds to the background over an image.
For each of these background colors you can set an associated color scheme. This color scheme can be this in Global Options


Navigation Skin

The Grid comes with 7 navigation styles. Navigation correspond to the buttons, dropdown lists, slider arrows,...


You can customized colors of the navigations elements thanks to the colors palettes. You have the possibility to set this color for inactive and active state.
Navigation background color is only available for background styles.

Animations settings

The grid offer more than 40 animation styles to animate items while filtering, sorting, searching, revealing, etc...
Just select an animation from the dropdown list and adjust the animation speed in ms thanks to the range slider.

Load/Ajax settings

Load More items with ajax (button and scroll methods)

With The Grid, you can add a load more button in order to load more items in the grid with ajax.
You can set the number of items to load by clicking on the load more button and also adjust the delay between each new item appended in the grid.
If you want to use the load more button, you must add it in one of the available area in the Layout tab.
In the load more button you also have the possibility to show the number of items that remain.

When On scroll option is activated, new items will be loaded when the end of the grid container will be reach on scroll.
If you put the load more button, it will be used to indicate that new items are currently loaded. Otherwise, a message will be shown at the bottom of the grid.

Preload items in the grid (images)

The Grid needs to wait that all images are correctly loaded before executing the rest of the script in order to correctly calculated item sizes (in masonry mode).
Because there is a delay between images finished loading, the grid will not looks like good during this delay.
In order to make the loading time more attractive, you can add a preloader animation until the images are loaded.

The Grid comes with more than 13 preloader css3 animations

At first you need to activate the preload option in order to get acces to the list of all preloaders.
Just select a preloader and directly get a live preview of it. You can adjust the size of the preloader animation and its color.

As for ajax loading, you can add a delay between each item when they appear in the grid.
If no delay is setup in Preloader item delay then all items will appear at the same time.

Custom CSS/JS code

If you have some knowledge in css or jquery then you can add some custom scripts in this section.
When adding custom css code, we highly recommend to target the element to customize with the css grid name that you can set in the general tab.
This will prevent to apply the same style to all grid in the same page.

Examples :

Date/Category/terms colors:
✓Copy
/*** Date/Category/terms colors ***/
.mycss-grid-name .tg-item-date,
.mycss-grid-name .tg-cats-holder,
.mycss-grid-name .tg-item-date *,
.mycss-grid-name .tg-cats-holder * {
	color: #e6ae48 !important; /*** change color here  ***/
}
Quote/link title color on mouse hover:
✓Copy
/*** quote/link title color on mouse hover ***/
.mycss-grid-name .quote-format h2:hover a,
.mycss-grid-name .link-format h2:hover a {
	color: #e6ae48 !important;
	opacity: 1;
}
Quote/link background color on mouse hover:
✓Copy
/*** quote/link background color on mouse hover ***/
.mycss-grid-name .tg-item:hover .tg-item-content-holder.link-format,
.mycss-grid-name .tg-item:hover .tg-item-content-holder.quote-format {
	background-color: rgba(22,22,22,0.9) !important; 	
}
Quote/link heart liked color:
✓Copy
/*** quote/link heart liked color ***/
.mycss-grid-name .to-post-like.liked path {
	fill: #ffffff !important;
  	stroke: #ffffff !important;
}
Mediaelement Video/Audio player controls colors:
✓Copy
/*** mediaelement Video/Audio player controls colors ***/
.mejs-controls .mejs-time-rail .mejs-time-current,
.mejs-controls .mejs-volume-slider .mejs-volume-current,
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current,
.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li input:checked + label,
.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li:hover label,
.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li label.active {
	background-color: rgba(47,191,193,1) !important;
	color: #ffffff !important;
}

Term/Category color

The Grid also include some options in every terms (like category, tag, format, ...) to add color.

  

This color can be used in a skin to highlight term/category as you can see in the above screenshot.

Global Settings

In this admin panel you will find general options about The Grid plugin:

  • Color Schemes options
  • Image sizes options
  • Lightbox settings
  • Mediaelement options
  • Smart resize option
  • Caching system
Color schemes :

Previously, in the section Skin Settings we have talk about how to apply a color scheme to a skin. These text colors can be setup in this admin panel.
There are 2 color scheme: dark and light. For each color scheme you can set the color title, the paragraph color and the sub-element color like span tag (category, date,...).

Image sizes :

You have the possibility to add and customize 5 additional image sizes that we added in the Grid Plugin.
These image sizes can be used in the media tab when creating/editing a skin.

N.B. : If you have uploaded images before installing the grid plugin and you want to use this image sizes then you must regenerate your images with a plugin like Regenerate Thumbnails Plugin.

LightBox :

The Grid include it's own ligthbox plugin. This lightbox is compatible with image and hosted/embed(youtube,vimeo) video.
You can customize the lightbox color from the Grid.

If you are currently using another lightbox plugin and that you want to keep using it, The Grid is also compatible with these two lightbox plugins:

  • FancyBox Plugin
  • Prettyphoto plugin
Medialement :

Mediaelement is an html audio/video jquery plugin natively included in Wordpress. It allows to play hosted audio and video media in a customizable interface.
The grid is compatible with Mediaelement. Because mediaelement is a native functionality of Wordpress, most of developers include it in themes.
So by using mediaelement, you maybe already have a stylesheet included in your theme that apply style to the mediaelement player.
This styles can create conflict with the grid plugin. Our plugin will try to remove this style sheet (when you activate Add Mediaelement Grid StyleSheet) but if the styles are included in the main style sheet of a theme then conflicts can appear.
We cannot be reponsible of these type of issues because it's an unevitable conflict. In that case you should contact the theme author to ask how and where he add styles for mediaelement.

Smart resize :

By using smart resize, you will reduce the number of calculation during resizing the browser.
This allows you to improve performance while resizing browser.
This feature can create an horizontal scrollbar during resizing depending of the theme layout. If you encounter any problem, please deactivate this option.

Caching System :

We created a caching system in order to increase performances and reduce the loading time.
When the cache is enable, the grid will become static and if new post is added then it will not appears in the grid.
You need to clear the cache every time you change something to a post (change image, title, content,...) or create/remove a post.
When a grid is save, then the cache for this grid is clear. You can manually clear the cache in the global settings panel.

N.B. : If you are already using a cache plugin, then you don't need to activate this cache option. If you frequently update/add posts then you should not use this option.

Debug Mode :

The Grid use minify file on front end in order to reduce file sizes. So, if there is some issue in the script, it will be hard for us to debug.
That's the reason we created a debug mode in order to easly identify an issue on your website and to fix it.
You should not use this option for performance reason. Only activate this option when you need to debug the plugin.

Import/Export

The Grid comes with built-in export/import functionnalities. In that way, you can easly save your grid and re-import them.

To Export a grid, you just need to select one or several grids in the dropdown list. It will generated a .son file with all grid settings.
One file can handle multiple grids.

To import a grid, you need to upload the .json file created with this importer.
You find in the import section 2 buttons, one to import a .json file and an other to import demo data.
When importing the demo data, 20 grid examples will be generated. These grid examples can be find on The Grid live demo.

Use The Grid as a template

You can now with The Grid replace any template which use a main Wordpress query.
It means that you can easily replace your index blog page, search & archive template or shop archive page from Woocommerce.
The grid will automatically fetched the right content from these templates and displayed items in the grid.

To replace the index/search/archive templates of your Theme, you need to edit the index/search/archive.php file located at the root folder of your theme:

In these files, you will find the main loop:

✓Copy
if ( have_posts() ): 
    while ( have_posts() ): the_post();
        
    // some code from your theme
    // ...
    // ...
        
    endwhile;
endif;

You just need to replace all the previous php code by this line of code:

✓Copy
The_Grid('My Grid Name', true); // where true is for template mode

In the grid settings under skin tab, you need to setup the skin used for each post type.
The number of item on load present in the grid can be set as usual in Wordpress > Settings > Reading panel.
You can't control this number the grid settings because it's part of the main query of the current template you are trying to replace (this is how Wordpress works).
However, you can control the number of items to load more with ajax method if you are using an ajax pagination or a load more button.

You can do the same thing for Woocommerce archive-product.php template. You need at first to replace this archive template by adding it in your theme (or child theme):

theme-folder/woocommerce/archive-product.php

Then you just need to replace in this file the main loop as explained previously. That's all!

N.B.: For any modification, you should use a child theme.
If you don't have a child theme then you should ask to the theme author.

Troubleshooting

If a grid that you added on a page doesn't display, please check these possible source of issues:

  • Check in the Grid panel (overview) if the grid exists. Or if there isn't any typo with the grid name
  • Maybe you have put the grid in a content holder like a tab or an accordion and in that case if the grid was hidden, calculations will be wrong. Just don't put the grid in a content holder that will hide it.
  • Check if you are running the last version of the Grid Plugin and also the last version of Wordpress.
  • Check if there isn't any plugin conflict by deactivating all other plugins.

If you observed some issues with the grid appearance it can be due to a conflict with the theme you are using or with a 3rd party plugin. Some themes add styles and force them for every elements in a page. It can affect the appearance of a grid and generate layout issue. Do not hesitate to open a ticket on our support forum. We will look at your issue.

For any issue do not hesitate to contact us on our SUPPORT FORUM.

Developer Guide

The Grid Plugin is developer friendly. We have included several filters to easly integrate the grid in your theme or to create a 3rd party plugin based on The Grid Plugin.
In this section we will explain to you how to:

Add an item skin

There are 2 ways to add a new item skin. You can use our filter and specify the directory where you added the .php and .css files to build the skin or you can directly add a new directory in your theme (not work with a plugin).

Add directly new skins in a predefined theme directory

If you want to add new skin directly in your theme you just need to create a new folder at the root folder of your theme. This directory must be called "the-grid".
In this folder you must add your skin(s) in a subfolder call "masonry" or "grid". The sub-folder will depend name if you want to add a masonry or a grid skin. Then create a new folder name with the slug name an put your .css and .pph file inside it.

  My-theme
    the-grid
      masonry
        my-skin1
          my-skin1.css
          my-skin1.php
      grid
        my-skin2
          my-skin2.css
          my-skin2.php

Now you have included these files inside your theme, you need to register your skins.
You can register your skin(s) by adding this code in your main function.php file of theme (or child theme):

✓Copy
add_filter('tg_register_item_skin', function($skins) {
	
    // just push your skin slugs (file name) inside the registered skin array
    $skins = array_merge($skins,
        array(
            'my-skin1' => array(
                'filter'   => 'My Filter', // filter name used in slider skin preview
                'name'     => 'My Skin Name', // Skin name used in skin preview label
                'col'      => 1, // col number in preview skin mode
                'row'      => 1  // row number in preview skin mode
            )
        )
    );
    
    // return all skins + the new one we added (my-skin1)
    return $skins;
	
});

N.B. : With this filter you will also be able to unregister native skins from the grid by removing them from the array.


OR add your skin files in a custom directory

You can also use the below filter to declare your skins files. So you can place the skin files everywhere you want.

✓Copy
// add a skin in a plugin/theme
add_filter('tg_add_item_skin', function($skins) {

    $PATH = get_stylesheet_directory();
	
    // register a skin and add it to the main skins array
    $skins['new_skin1'] = array(
        'type'   => 'masonry',
        'filter' => 'your-filter',
        'slug'   => 'new_skin1',
        'name'   => 'new skin 1',
        'php'    => $PATH . '/your_path/new_skin1.php',
        'css'    => $PATH . '/your_path/new_skin1.css',
        'col'    => 1, // col number in preview skin mode
        'row'    => 1  // row number in preview skin mode
    );
    
    // register a skin and add it to the main skins array
    $skins['new_skin2'] = array(
        'type'   => 'grid',
        'filter' => 'your-filter',
        'slug'   => 'new_skin2',
        'name'   => 'new skin 2',
        'php'    => $PATH . '/your_path/new_skin2.php',
        'css'    => $PATH . '/your_path/new_skin2.css',
        'col'    => 1, // col number in preview skin mode
        'row'    => 1  // row number in preview skin mode
    );	
	
    // return the skins array + the new one you added (in this example 2 new skins was added)
    return $skins;
    
});

Create a new skin

In the section above we have explained how to register your skins and now we will explain to you how to create a skin.
A skin consist of 2 files:

  • a CSS file to customize your markup
  • a PHP file to build the item skin (the markup and retrieve content)

We have created an API in order to easily retrieve for each item whatever the source type like the title, the excerpt, the date, the comments numbers, images, ...
This API will be very helpful to take full control of functionalities provided by The Grid Plugin.
Because each skin in The Grid plugin are compatible with video & audio content (with custom play button), we highly recommend to use this API.

To retrieve data from the API, you need at first to initialize the API class from our single class instance like this:

✓Copy
// You must store the grid element instance in a var to retrieve data
$tg_el = The_Grid_Elements();

You will be able to get all necessary content from this instance.
You will find below the complete list of all functions which allow to output content related to item content.
All content output thanks to these functions are already escaped.
Some of these functions accepts an array of arguments in order to setup the output.
Click on info to see what it will return (it doesn't echo):

✓Copy
// center/content wrapper markup
/**[info](http://#center_wrapper_start)**/ $tg_el->get_center_wrapper_start(); // to center any content inside
/**[info](http://#center_wrapper_end)**/ $tg_el->get_center_wrapper_end();
/**[info](http://#content_wrapper_start)**/ $tg_el->get_content_wrapper_start(); // to put main post content like (title, excerpt, author, comments,...) automatically aplly colors
/**[info](http://#content_wrapper_end)**/ $tg_el->get_content_wrapper_end();
/**[info](http://#media_wrapper_start)**/ $tg_el->get_media_wrapper_start(); // to put media_markup inside it (image, audi, video)
/**[info](http://#media_wrapper_end)**/ $tg_el->get_media_wrapper_end();
		
// main content/data
/**[info](http://#overlay)**/ $tg_el->get_overlay(); // overlay background markup (get color automatically)
/**[info](http://#content)**/ $tg_el->get_the_excerpt($args); // excerpt
/**[info](http://#title)**/ $tg_el->get_the_title();
/**[info](http://#date)**/ $tg_el->get_the_date($args);
/**[info](http://#terms)**/ $tg_el->get_the_terms($args); // all kinds of post terms (like category) with link and colors (if 'term_color' = true)
/**[info](http://#comments)**/ $tg_el->get_the_comments_number($args);
/**[info](http://#author)**/ $tg_el->get_the_author($args);
/**[info](http://#read_more)**/ $tg_el->get_read_more_button($args);
/**[info](http://#media_button)**/ $tg_el->get_media_button($args); // play button for video/audio
/**[info](http://#link_button)**/ $tg_el->get_link_button($args);
/**[info](http://#media_type)**/ $tg_el->get_item_format();
/**[info](http://#post_like)**/ $tg_el->get_the_likes_number(); // our built-in post like system
/**[info](http://#social_links)**/ $tg_el->get_social_share_links(); // Facebook, Twitter, Google+, Pinterest sharer button (works automatically)
/**[info](http://#colors)**/ $tg_el->get_colors(); // retrieve all colors in an array

// media markup (image, gallery, video, audio) depends of post format
/**[info](http://#media_markup)**/ $tg_el->get_media(); // the ost usefull part to retrieve all media (image/video/audio) depending on format

// quote/link markup depends of post format
/**[info](http://#link_markup)**/ $tg_el->get_the_link_format();
/**[info](http://#quote_markup)**/ $tg_el->get_the_quote_format();

// retrieve main link (from post or custom link set in meta box)
/** url    **/ $tg_el->get_the_permalink(); // url, custom or post link
/** string **/ $tg_el->get_the_permalink_target(); // _blank or _self

// get a meta data value for the an item
$tg_el->get_item_meta('your_metadata_key');

// get the item ID
$tg_el->get_item_ID();

// get all item data
$tg_el->get_item_data(); // output an array with all item data (title, link, image, video, etc...)

	
// Woocommerce data
/**[info](http://#product_price)**/ $tg_el->get_product_full_price();
/**[info](http://#product_rating)**/ $tg_el->get_product_rating();
/**[info](http://#product_sale)**/ $tg_el->get_product_on_sale();
/**[info](http://#product_cart_button)**/ $tg_el->get_product_cart_button();
/**[YITH plugin](https://fr.wordpress.org/plugins/yith-woocommerce-wishlist)**/ $tg_el->get_product_wishlist();

And here a full example to build a grid skin (Brasilia skin example) thanks to the above function : 

✓Copy
// initialization of the instance
$tg_el = The_Grid_Elements();

$format    = $tg_el->get_item_format();
$permalink = $tg_el->get_the_permalink();
$target    = $tg_el->get_the_permalink_target();

$terms_args = array(
    'color' => 'color',
    'separator' => ', '
);

$output  = $tg_el->get_media_wrapper_start();
    $output .= $tg_el->get_media();
    $output .= $tg_el->get_overlay();
    $output .= '<div class="tg-item-content">';
        $output .= ($permalink && !in_array($format, array('video', 'audio'))) ? '<a class="tg-item-link" href="'.$permalink .'" target="'.$target.'"></a>' : null;
        $output .= $tg_el->get_the_terms($terms_args);
        $output .= $tg_el->get_the_title();
        $output .= '<div class="tg-item-footer">';
            $output .= $tg_el->get_the_author();
            $output .= $tg_el->get_media_button();
        $output .= '</div>';
    $output .= '</div>';
$output .= $tg_el->get_media_wrapper_end();
		
return $output;

Of course, you can do exactly the same things with your own markup and the std wordpress function.
However, you must add an alternative content for all data you retrieve in order to display it in the backend admin (for the skin preview).
We added a global variable which is set to true when the current skin is retrieved for the preview (slider) in the backend.

N.B.: When retrieving data in a skin, you are not in a Wordpress loop (from a query) but in a custom loop from The Grid API.
So you must use the item ID to use native function of Wordpress like get_the_title();

✓Copy
// As example to retrieve the post title
// global var to check if the skin is used for the preview mode
global $tg_skins_preview;

$tg_el = The_Grid_Elements();

$item_ID = $tg_el->get_item_ID();

$title = (!$tg_skins_preview) ? get_the_title($item_ID) : 'The Post Title';
    
$html  = '<h2 class="tg-item-title">';
    $html .= '<a href="'.get_permalink().'">' . $title . '</a>';
$html .= '</h2>';

In that way, 'The Post Title' will be displayed in the grid skins preview in the backend instead of an empty string.
You don't need to use this method for custom metadata. The Grid will automatically display the metakey in skin preview mode.

Now you have built the markup, you just need to apply some styles to the skin.
You must use the skin slug (file name) in order to target your classes to prevent any conflicts with other skins:

✓Copy
.my-skin-slug .tg-item-content,
.my-skin-slug .tg-item-media-holder,
.my-skin-slug .tg-item-overlay {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

N.B. : You will find all skins in the directory the-grid > includes > item-skins. You can start from one of this skin to build yours.

✓Copy
<!-- output: -->
<div class="tg-center-outer">
	<div class="tg-center-inner">
✓Copy
<!-- output: -->
	</div>
</div>
✓Copy
<!-- output: -->
<div class="tg-item-content-holder">
✓Copy
<!-- output: -->
</div>
✓Copy
<!-- output: -->
<div class="tg-item-media-holder">
✓Copy
<!-- output: -->
</div>
✓Copy
<!-- output: -->
<div class="tg-item-overlay"></div>
✓Copy
<!-- 
args = array(
    'length' => 240,  // excerpt length (number of characters)
    'suffix' => '...' // excerpt suffix added at the end of the excerpt
);
output: -->
<p class="tg-item-excerpt">The excert....</p>
✓Copy
<!-- output: -->
<h2 class="tg-item-title">
	<a href="post_permalink">Post Title</a>
</h2>
✓Copy
<!--
args = array(
    'format' => 'Y-m-d H:i:s', // date format, only works with post type (http://php.net/manual/fr/function.date.php)
);
output: -->
<span class="tg-item-date">The Date</span>
✓Copy
<!--
$args = array(
    'link'      => true,    // enable or not link for terms
    'color'     => 'color', // use terms 'color', 'background' or 'none'
    'separator' => ', '     // separator use between each term
);
output: -->
<div class="tg-cats-holder">
	<a class="category" href="term_url" rel="category tag">
    	<span>Term</span>
	</a>
</div>
✓Copy
<!-- 
$args = array(
    'icon' => '<i class="tg-icon-chat"></i>'  // comment icon
);
output: -->
<a class="tg-item-comment" data-comment-id="181" href="coment_url_hash">Nb Comments</a>
✓Copy
<!-- 
$args = array(
    'prefix' => 'by ', // add prefix before the author name
    'avatar' => true,  // add author avatar image before autohr name
);
output: -->
<span class="tg-item-author">
	<span>By </span><a href="author_url">Author</a>
</span>
✓Copy
<!-- 
$args = array(
    'text' => 'Read More' // read mor text
);
output: -->
<div class="tg-item-read-more">
	<a href="post_permalink">Read More</a>
</div>
✓Copy
<!-- output: -->
<h2 class="tg-quote-content tg-item-title">
	<a href="the_post_permalink">the_quote_content</a>
</h2>
<span class="tg-quote-author">quote_author</span>
✓Copy
<!-- 
$args = array(
    'icons' => array(
        'image' => '<i class="tg-icon-add"></i>'  // lightbox image icon
        'audio' => '<i class="tg-icon-play"></i>' // audio play icon
        'video' => '<i class="tg-icon-play"></i>' // video play icon
    )
);
output: -->
<div class="tg-media-button tg-item-button-play">your_icon_markup</div>
✓Copy
<!-- $output depending of the post format: -->


<!-- Image (standard format) -->
<!-- Masonry style -->
<div class="tg-item-image" style="background-image: url('image.png')"></div>
<!-- Grid style --> 
<img class="tg-item-image" alt="" width="" height="" src="image.png">
<!-- Alternative Woocommerce image --> 
<div class="tg-item-image tg-alternative-product-image" style="background-image: url('image.png')"></div>

<!-- Gallery (Gallery format) -->
<!-- Masonry style --> 
<div class="tg-item-gallery-holder">
	<img class="tg-item-image" alt="" width="" height="" src="image.png">
	<div class="tg-item-image" style="background-image: url('image.png')"></div>
	<div class="tg-item-image" style="background-image: url('image.png')"></div>
</div>
<!-- Grid style -->
<div class="tg-item-gallery-holder">
	<div class="tg-item-image" style="background-image: url('image.png')"></div>
	<div class="tg-item-image" style="background-image: url('image.png')"></div>
	<div class="tg-item-image" style="background-image: url('image.png')"></div>
</div>

<!-- Youtube (video format) -->
<div class="tg-item-media-inner" data-ratio="16:9">
	<iframe class="tg-item-youtube tg-item-media" src="youtube" id="youtube-id" allowfullscreen></iframe>
</div>

<!-- Vimeo (video format) -->
<div class="tg-item-media-inner" data-ratio="16:9">
	<iframe class="tg-item-vimeo tg-item-media" src="vimeo" id="vimeo-id" allowfullscreen></iframe>
</div>

<!-- HTML5 video (video format) -->
<div class="tg-item-media-inner" data-ratio="16:9">
	<video class="tg-item-video-player tg-item-media" poster="poster.png" controls>
		<source src="video.mp4" type="video/mp4">  
		<source src="video.ogv" type="video/ogv"> 
		<source src="video.webm" type="video/webm"> 
	</video>
</div>

<!-- HTML5 audio (audio format) -->
<div class="tg-item-media-inner">
	<audio class="tg-item-audio-player tg-item-media" controls>
		<source src="song.mp4" type="audio/mp4">
		<source src="song.ogg" type="audio/ogg">
	</audio>
</div>

<!-- SoundCloud (audio format) -->
<div class="tg-item-media-inner" data-ratio="4:3">
	<iframe id="soundcloud-id" class="tg-item-soundcloud tg-item-media" src="soundcloud"></iframe>
</div>
✓Copy
<!-- output: -->
(string) 'standard' || 'image || gallery || audio || video';
✓Copy
<!-- output: -->
<span class="to-post-like" data-post-id="178" title="Like">
	<svg></svg>
	<span class="to-like-count">0</span>
</span>
✓Copy
<!-- output: -->
array(
    'content' => array(
        'class' => 'dark',
        'title' => '#444444',
        'text'  => '#777777',
        'span'  => '#777777',
        'background' => 'rgba(22,22,22,0.65)'
    ),
    'overlay' => array(
        'class' => 'light',
        'title' => '#ffffff',
        'text'  => '#f6f6f6',
        'span'  => '#f5f5f5' ,
        'background' => 'rgba(0,0,0,0.85)'   
    ),
);
✓Copy
<!-- output: -->
<div class="tg-item-price">
	<span class="amount">99$</span>
</div>
✓Copy
<!-- output: -->
<div class="tg-item-rating">
	<div class="star-rating">
		<span style="width:90%"></span>
	</div>
</div>
✓Copy
<!-- output: -->
<div class="tg-item-on-sale light">
	<span class="onsale">Sale!</span>
</div>
✓Copy
<!-- output: -->
<div class="tg-item-cart-button">
	<a href="" rel="nofollow" class="button add_to_cart_button product_type_simple">Add to cart</a>
</div>
✓Copy
<!-- output: -->
<div class="yith-wcwl-add-to-wishlist add-to-wishlist-300">You should look at YITH doc</div>
Add an item animation

A simple filter to add new kind of animation. Works with any transform properties.

✓Copy
function my_custom_animation($animations) {
	
	$animations['from_right_flip_z'] = array(
		'name'    => __('From Right Flip Z', 'tg-text-domain'), // name used for the dropdown list in the backed
		'visible' => 'perspective(2000px) translateY(0) rotate3d(0,0,1,0deg) scale(1)', // when item is revealed
		'hidden'  => 'perspective(2000px) translateX(100px) rotate3d(0,0,1,45deg) scale(0.2)' // when item is hidden
	);
    
	return $animations;
    
};

add_filter('tg_add_item_animation', 'my_custom_animation');
Add a preloader animation

The following example will show you how to add a new preloader animation (with your own image for example).

✓Copy
add_filter('tg_add_preloader_skin', function($preloaders) {
	
	// your preloader slug
	$preloaders['the-grid-logo'] = function() {
		
		// your preloader name use for the dropdown list in the backend
		$preloader['name'] = 'The Grid Logo';
		
		// your preloader html markup
		$preloader['html'] = '<img src="your-image.png">';
		
		// your preloader css
		$preloader['css'] = '
			/*** use the slug to target the image (html you added) ***/
			.the-grid-logo img {
				max-width: 80px;
				outline: 1px solid transparent; /*** smooth edge for image in case ***/
				-webkit-animation: fadeInOut 0.5s ease-in alternate infinite;
				-moz-animation: fadeInOut 0.5s ease-in alternate infinite;
				animation: fadeInOut 0.5s ease-in alternate infinite;
			}
			@-webkit-keyframes fadeInOut {
				from { opacity: 0.25; }
				to { opacity: 1; }
			}
			@-moz-keyframes fadeInOut {
				from { opacity: 0.25; }
				to { opacity: 1; }
			}
			@keyframes fadeInOut {
				from { opacity: 0.25; }
				to { opacity: 1; }
			}'
		;
		
		// add your own preloader to all others
		return $preloader;
        
	};
	
	// return all preloader + the one above you added
	return $preloaders;
	
});
Change cache/transient expiration

The Grid Plugin comes with it's own cache system. You can modify the transient expiration (by default it's 7 days).

✓Copy
function my_custom_transient_expiration() {
	return 60*60*24*180; // 6 months
}

add_filter( 'tg_transient_expiration', 'my_custom_transient_expiration' );
Change The Grid query (for post type only)

If you want to add additionnal parameters to the custom query created by The Grid, you can add the following filter in your main function.php file of your theme (or child theme):

✓Copy
function my_query_args($query_args, $grid_name) {

    if ($grid_name == 'My grid name') {
        // all query parameters can be modified (https://codex.wordpress.org/Class_Reference/WP_Query)
        $query_args['posts_per_page'] = 2;
    }
    
    return $query_args;
    
}

add_filter('tg_wp_query_args', 'my_query_args', 10, 2);

Skin Builder

Introduction

The skin builder allows to create custom skins with ease thanks to an intuitive drag & drop interface.
To get start with this functionnality, we highly recommend to import skin demos at first (instead of creating a skin from scratch).

Create/Edit a skin

Once you have imported the skin demos or you have started by creating a new skin, you can edit your skin.

At first, you need to give an unique name to your skin. You can also assigned a category name to this skin in order to easily find it in the skin builder overview or in the grid settings admin panel.
Each skin is intended to work with an unique grid style: Masonry or Grid/Justified style. You can set this style in the item layout tab (in the layout settings panel):

Skin Layout

At first, you need to build the main layout of your skin. All the general layout options are available in the Layout Settings panel under item layout tab:

In this tab you can choose which content holders you want to display (depending of the skin style) in the skin: Top/Bottom content, Media content and overlay.
The overlay can be hidden, it can also take the full size of the media or have its size based on the content avaialble over the media.

Each of these container, can be styled in the Layout settings panel (exactly like for an element style).

Add Element

The skin builder comes with several predefined elements.

Once you have added a new element in the skin, you can click on it in order to edit its content, appearance, action, animation.

Save Element

You can save your own elements in order to use them later in any other skin.
To save an element, you need to click on it and after click on the bottom green icon (save as template).
Each custom element have an unique name and can be overridden by entering an existing element name.
Your custom elements will be added in the Add Element panel under customs elements tab.

Edit Element

To edit an element, you need to click on it (If you drag an element and then release, it will not select the element).
Once you have clicked on an element in the skin, a new popup will be opened.

TIP: Sometimes, depending of the skin and elements positions, it can be a little bit difficult to select an element on click.
You can still select any skin element thanks to the dropdown list next to the green button "Add element".
In that way, even if you have elements one above each other, you will be able to select the desired element.

In this element settings panel, you will be able to set:

  • The content of the element
  • The element action on click (open a link or open lightbox/play video)
  • The element styles
  • The element animation (to make appear or disappear) an element with a transform effect and a transition
Element Styles

When an element is selected, you can adjust its appearance by clicking on the styles tab.
2 states are available to add styles: Idle State and Hover State (when the mouse is hover an element)

You will find near all properties available to style any element. If you want to go deeper and add some properties which are not available then you can also add your own css rules in custom tab.

If you want to have alternative styles on mouseover, then you must check apply styles on mouseover (under Hover State tab).

Each style property has an important option which allows to force this property. This option can be used in 2 main cases:

  • To override a color scheme
  • To override a theme style (to prevent appearance issue with your theme)

This important rule, will force a style property and override all other existing styles attached to any element of a theme or plugin
For example, if your theme applies an underline decoration for a link, then it will also apply this underline style for any link in a skin.
However, by selecting important rule, and setting the text decoration to none, you will be able to remove this underline:

Element Animation

Animation allows to show, hide or only animate an element on mouseover from a parent container (not directly on element mouseover - Styles -> Hover State).
The skin builder comes with 20+ preset animations. You can adjust each of these animations presets or create your own custom animation.

To see the result of an animation, you must be in preview mode.
You can directly edit the animation in preview mode by making a mouse over the skin in order to see the result instantly.

Element Alignment

There are 2 ways to align elements (left/center/right) in a skin:

  • By editing element styles
  • By applying an alignment on the parent container (of the element you want to align)
By editing element styles

In the edit panel of an element, under position tab (in the styles tab), you can assign a float value (left/right) if the position is set to inline-block:

By applying an alignment on the parent container

You can also align all element present in a content holder, by modifying the styles of the content holder (Top Content/ Media Content Holders/ Bottom Content):

Important: If the element have an absolute position, then the alignment will be not applied.

Element MetaData

With the skin builder, you have the possibility to add custom content hanks to metadata.
There are 2 ways to add metadata content:

  • In Source > Post Data and MetaData
  • In Source > Text/HTML
Post MetaData

With post metadata, you need to enter the metadata key name in order to display your metadata value:

Text/HTML

If you want to go deeper with metadata and use the value to add style or anything else you can use the Text/HTML source.
To fetch the metadata value, then you need to use this shortcode: #meta:my_meta_data_name#

In the previous example, we use the metadata value to add a width in % to a container.

✓Copy
<div style="width: #meta:my_meta_data_name# %">rating stars</div>