Post Grid
After Turning on Blocks from Grigora's Kit Dashboard.
We can use Post Grid Block in Site Editor/Blog/Page from Toggle Block Inserter.
Insert Post Grid from listed Blocks.
Once Post Grid is inserted, select the Post Grid.
After selecting Post Grid , Go to block settings, in block settings we see Geenral, Styles and Advanced of settings and we'll be exploring them one by one.
(Note : this settings are common in all post grids)
General
Query
Post Type : In post type we can select which category to be displayed i.e. Post And Page.
Number of Posts : (is only applicable for post grid 4) Number of posts can be displayed using range slider.
- Minimum value is 1px.
- Maximum value is 40px.
- Default value is 6px.
Number of Columns : (is only applicable for post grid 4) Number of Columns can be displayed using range slider.
- Minimum value is 1px.
- Maximum value is 10px.
- Default value is 3px.
Order : In order, sequence of Post Grid can be selected in two types Ascending and Descending.
Order By : In order by, post grid can be sequenced by Id, Title, Slug, Author, Date, Last Modified Date, Parent Id and Menu Order.
Offset : In offset we can skip the posts and preview the posts from desired numbers using number input.
Search : Here we can search for Posts and Pages.
Post grids can be filtered using Author, Exclude Author, Taxonomies, Exlude Taxonomies, Include post, Exclude Post, Date After and Date Before.
Container
Alignment : Here Alignment of the post grid content can be chnaged from Left, Center or Right.
Content Tag : Content can be displayed as Article, Section and Div.
Open Links in new Tab : By Toggling on button links will open in new tab.
By toggling on buttons we can display Categories, Excerpt, Author and Date respectively.
Order Elements
Order of Catergory, Excerpt, Title and Meta can be changed by Dragging them respectively.
Styles
Container
Gap : Gaps Between containers can be specified here using range slider.
- Minimum value is 0px.
- Maximum value is 100px.
- Default value is 5px.
Height of the container : Height of the container can be specified here using range slider.
- Minimum value is 0px.
- Maximum value is 700px.
- Default value is 500px.
Border Radius : Containers border radius can be changed here using range slider. By clicking on Unlink sides we can change radius of any particular side.
- Minimum value is 0px.
- Maximum value is 100px.
- Default value is 0px.
Title and Typography
Title Tag : Titles tag can be changed to h1, h2, h3, h4, h5, h6, p, span and div.
Padding : Padding is applied to content using unit input. By clicking on Unlink sides padding can be applied to particular side.
Title Max Length : Titles max length(no. of words in title) can be specified here using range slider.
Content Max Length : Contents max length(no. of words in excerpt) can be specified here using range slider.
Typography
(Note: Common for title big, title small, content, category and meta)
Size : Size changes button font size by Dragging Slider Back and Forth.
Line Height : Line Height adds the space between lines by Dragging Slider Back and Forth.
Letter Spacing : Letter Spacing adds the space between letters by Dragging Slider Back and Forth.
Word Spacing : Word Spacing adds the space between words by Dragging Slider Back and Forth.
Transform : Transform font to Uppercase (All Letters Capital), Lowercase (All letters small) and Capitalize (First letter of word is capital).
Style : Text can be styled in a variety of ways here.
Decoration : Text decoration applies decoration to text like Overline(Adds line above text), Line Through(Adds line through text), Underline(Adds line Below text), Underline OverLine(Adds line Above and Below text).
Weight : Weight adds text weights ranging from 100 to 900.
Font Family : Google fonts can be applied to buttons text.
Color and Background color of title can be changed here using color palette and color picker for normal and hover(on hover transitionn time can also be changed).
Image
Hover Animations : From listed animations we can selected desired aniamtion. Transition time can also be changed.
CSS Filters : CSS Filters can be applied normal and hover. By clicking on pencil icon CSS filters can edited.
Blur : Blur effect is applied to image.
- Minimum value is 0px.
- Maximum value is 10px.
- Default value is 5px.
Brightness : Brightness effect is applied to image.
- Minimum value is 0px.
- Maximum value is 200px.
- Default value is 100px.
Contrast : Contrast effect is applied to image.
- Minimum value is 0px.
- Maximum value is 200px.
- Default value is 100px.
Saturation : Saturation effect is applied to image.
- Minimum value is 0px.
- Maximum value is 200px.
- Default value is 135px.
Hue : Hue effect is applied to image.
- Minimum value is 0px.
- Maximum value is 360px.
- Default value is 191px.
Box Shadow : Box Shadow casts a shadow across the Image. (Box Shadow can be applied normal and On-hover)
Color : Box shadow color can be changed using the Colorpicker or Color Palette.
Blur : Box shadow can be blurred with Blur effect. Value entered uses pixels as its unit.
Horizontal : Box shadow can be applied Horizontally. Value entered uses pixels as its unit.
Vertical : Box shadow can be applied Vertically. Value entered uses pixels as its unit.
Spread : Box Shadow can be spreaded. Value entered uses pixels as its unit.
Overlay : Overlay is applied here using solid and gradient. Opacity of overlay can be changed using range slider.
- Minimum value is 0px.
- Maximum value is 100px.
- Default value is 40px.
Category
Padding : Padding is applied to content using unit input. By clicking on Unlink sides padding can be applied to particular side.
Border Radius : Categories border radius can be changed here using range slider. By clicking on Unlink sides we can change radius of any particular side.
- Minimum value is 0px.
- Maximum value is 100px.
- Default value is 0px.
Color and Background color of title can be changed here using color palette and color picker for normal and hover(on hover transitionn time can also be changed).
(Note : this settings are common in all post grids)