Iks Post Grid is a WordPress post grid plugin that provides powerful customizable system, has loads of post selection and css appearance settings.
Also has more than 30 starter templates - so it’s super easy to use for beginners and very customizable for advanced users.
Iks Post Grid is a best choice for blog posts, portfolios, projects, team showcases, image galleries or any other custom grid content.
Thank you for purchasing IksPostGrid plugin. If you have any questions that are beyond the scope of this help file, please feel free to contact us on CodeCanyon plugin page.
At the bottom left you can see the buttons for saving, deleting and duplicating the current grid.
At the bottom right, you can change the number of posts displayed in the preview and change the background of the grid for more convenient viewing.
Here you can select type of grid, enable equal height for posts blocks and choose Google font.
When selecting a font, you can see the changes in the admin preview immediately.
Setting "Types of grid" means:
Classic - classic grid with refreshing page on sorting and filtering.
Isotope - masonry grid with instantaneous sorting and filtering.
Here you can enable or disable adaptive settings. If adaptive settings are enabled - then you can set screen's widths and settings: Number of columns in row, size between rows and columns, and also grid width and max-width.
Computer, Notebook, Tablet and Mobiles settings are similar and look as follows:
Here you can select post types (post, page or any custom) and taxonomies (categories, tags, attachment or any custom)
For posts taxonomies you can set Posts Taxonomies Types Relation (AND - taxonomies types will be intersects, OR - taxonomies types will be united), and Include Children setting.
And also you can set get posts arguments like: Posts per page, Order By, Order, Offset from first post, Include or Exclude posts by IDs, Post Status (publish, draft, etc.), Post Parent (Show only child posts of this), Authors, meta_key, meta_value and etc.
Here you can select what content to show in grid, and then order it with drag'n'drop "Order" setting.
Also you can select settings for: Image, Title, Author, Comments, Date, Taxonomies, Custom fields, Content Preview, Read More, Button, WooCommerce and all icons.
When you click on button "Edit", settings are loaded via AJAX and then you can change them below.
Let's see at the images for an example
Here you can select Image height, Image size (quality), No image action.
Then you can select Links and its behaviour (open in new window or not, custom link, etc.)
Also you can enable Modal image, and users will be able to click on image and see full image in Bootstrap modal preview.
And, of course, you can control Image appearance (set settings for image block, image and image on mouse hover, image icon)
Also you can set post image as post background with gradient-colored overlay (Do not forget to disable post color background, to see image background)
Image is NOT background
Image IS background with Overlay
Then let's see on settings for Posts blocks:
These settings works for all elements in each post, but they are weaker than the settings of specific elements.
Here you can select settings for inside blocks each post, and for whole posts blocks.
Each block inside means:
Whole post block means:
Here you can select settings for post buttons (+settings for button on mouse hover)
And, of course, select Button text and Icon, Links and its behaviour (open in new window or not, custom link, etc.)
Some examples of buttons, you can easily made with Iks Post Grid plugin:
Here you can choose Content of WooCommerce for each post and enter texts like prefixes and postfixes for WooCommerce data.
And then Select CSS-settings for each line appearance, select Colors and Sizes of text
First of all, select taxonomies to sort by, Orderby and Order if you need it.
You can also provide Labels - it is text before sort and filters blocks.
Set texts of "Reset" and "All" links (for taxonomies you can use placeholders, like %tax_name%, %tax_singular_name%, %tax_all_items%)
Then choose Type of Sort (List or Drop-down), choose icon, enable or disable Anchor (Should we scroll screen to the top of the grid after pressing sort link).
For Taxonomies Sort you can display Count of posts for each taxonomy using placeholder %count% (For example [%count%] will be displayed as , and =%count%= will be displayed as =15=)
After all, you can select appearance settings for elements, using these settings
In "Each block CSS" settings you can choose, how to display these blocks:
Here you can enable or disable pagination, then choose type of pagination: "Classic links", "Load more button" or "Infinite scroll":
Here you can also provide CSS settings for pagination Block.
After all you can select appearance settings for these types (+ setting for elements on mouse hover)
For "Load more button" and "Infinite scroll" you can set CSS settings for Button:
For "Classic links":
(Tab with icon "cog")
Here you can add custom classes for HTML elements, provide Custom CSS and add Custom HTML content
(Tab with icon "floppy")
Here you can easily Import Settings of any post grid From File or Text-Area.
Export Setting of current post grid To File or from Text-Area
(Tab with icon "bars")
See all settings in current Iks Post Grid.
(Tab with icon "4 squares")
Here you can choose any template and import it (Note, that only appearance settings will be imported)
Also Import and Export settings, which only used for grid appearance.
Here you can read descriptions of the main words
Wrapper for an HTML element (see example below)
HTML element (see example below)
The CSS margin properties are used to generate space around elements. The margin properties set the size of the white space outside the border. (Read more about it)
The CSS padding properties are used to generate space around content.
The padding clears an area around the content (inside the border) of an element. (Read more about it)
The CSS border properties allow you to specify the style, width, and color of an element's border. (Read more about it)
The border-radius property is used to add rounded corners to an element. (Read more about it)