The Grid is a popular and powerful plugin in creating a gallery which it can be said that with this plugin you have unlimited options to create any gallery. We have included this powerful plugin in the theme so you can create the best galleries on your site with the open date. In this article, we explain everything from importing to developing a Grid.
The Grid is included in Deep. To start, install The Grid plugin via this link below. After activating the plugin, go to WordPress Admin > The Grid > Import/Export.
Go to the DummyContent folder which you have downloaded. There is a file with the format “.json” called TheGrid. Drag this file to the spot as marked in this image.
If you click on the Green Arrow, it will show the content which you have dragged and if you click on read Grid demo content it will show The Grid Plugin default content. We have shown this in the following image. (it is shown via green color)
Click on the appeared contents and press Import Selected item(s).
After the completion of import, go to The Grid submenu and you can see the imported items. It is possible to copy the grid. Also, you can see the shortcode.
After complete import, go to The Grid submenu and you can see imported items. It is possible to copy the grid. Also, you can see the shortcode.
To be able to use the grids which you have created or imported, first, create Section/Row for page frame based on this article below then use The Grid shortcode and use it in your page by selecting your preferred grid.
To be able to customize The Grids, you can use the main documentation of The Grid Plugin.
The Grid general adjustments in Deep Theme
This part is aimed at giving an introduction to The Grids of Deep Theme. So we refer to the preferred TheGrid for more information. Go to your preferred Grid setting.
There are several tabs here where you can do adjustments within the tabs. The first tab is the General Tab, it shows the name, shortcode, class and grid ID. If you use TheGrids that are in the theme, please note that in the first tab, General Tab, do not change the class within the Custom CSS Class. (If you have made changes, don’t worry, the class of the grid has the same name of skin of the grid which we will get to know the skins further)
In source tab you can select your preferred Grid source type, for example to read from WordPress, Instagram or Youtube or… In this part, you can set the sorting and number of items to be show. Also, it gives you the option to select your Post type as multiple or single. You can also adjust the status of your post appearing. In Media tab, you can have media adjustments and in Grid tab, you can select the gallery that you are working on to be Grid or Masonery. Or you can create filter option as multi select from the categories you have. The categories are available, you can drag and drop.
In Pagination Tab, there are pagination adjustments. But in Layout tab you can put the filters you have created, even load more buttons, search or sort box. If you go down, you can adjust the layout grid by two types of Vertical and Horizontal. RTL is also set here and we have margins and full width in this tab.
The next tab which is developed by Deep theme and has been customized, is Skin tab which as you can see in the image below, you can select your preferred skin. The important and significant point is that the name of your skin should be the same with the class which is set in general tab. Click on Deep category to see the skins of Deep Theme completely. If you select grid in grid tab, 12 skins will be shown and if in the same tab you select Masonery, 2 skins will appear. in second section you can set Content Bacground Color and Overly Background Color for the above skin. If some background colors for some skin contents are read from the color that you have set in Theme Options and it match with it, the next section is the color for the filter which is shown in the image below.
In the animation tab, you can set the first appearing of the grids. The Load/Ajax tab also adjusts the loading of your gallery before appearing. In the last tab which is CSS/JS Code, you can put the customization codes.