{"id":3247,"date":"2025-08-07T18:59:46","date_gmt":"2025-08-07T18:59:46","guid":{"rendered":"https:\/\/flexipostgrid.creativewebui.com\/?post_type=docs&p=3247"},"modified":"2025-08-09T06:26:10","modified_gmt":"2025-08-09T06:26:10","password":"","slug":"filter-and-pagination-style","status":"publish","type":"docs","link":"https:\/\/creativewebui.com\/flexi-post-grid\/documentation\/filter-and-pagination-style\/","title":{"rendered":"Filter and Pagination Style"},"content":{"rendered":"\n

Follow Below setting for Category Filter and Pagination Style<\/p>\n\n\n\n

Category Filter Style<\/h2>\n\n\n\n

The Category Filter Styles<\/em> section allows you to customize the look and feel of category filter buttons in your grid layout. You can control alignment, typography, spacing, colors for different states (normal, hover, active), borders, backgrounds, and more. These settings help you create visually consistent and user-friendly category filters.<\/p>\n\n\n\n

\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
Control<\/strong><\/th>Description<\/strong><\/th><\/tr><\/thead>
Alignment<\/strong><\/td>Align category filter items to the left, center, or right.<\/td><\/tr>
Typography<\/strong><\/td>Customize font family, size, weight, and letter spacing for category text.<\/td><\/tr>
Padding<\/strong><\/td>Add inner spacing inside the category filter item container.<\/td><\/tr>
Margin<\/strong><\/td>Add outer spacing around the category filter items.<\/td><\/tr>
Text Color (Normal)<\/strong><\/td>Set the text color for category filters in their default state.<\/td><\/tr>
Background Color (Normal)<\/strong><\/td>Set the background color for category filters in their default state.<\/td><\/tr>
Text Color (Hover)<\/strong><\/td>Choose the text color when the category filter is hovered.<\/td><\/tr>
Background Color (Hover)<\/strong><\/td>Choose the background color when the category filter is hovered.<\/td><\/tr>
Text Color (Active)<\/strong><\/td>Set the text color for the active category filter.<\/td><\/tr>
Background Color (Active)<\/strong><\/td>Set the background color for the active category filter.<\/td><\/tr>
Border Type<\/strong><\/td>Select the type of border (solid, dashed, dotted, none).<\/td><\/tr>
Border Color (Hover)<\/strong><\/td>Set the border color when hovering over a category filter.<\/td><\/tr>
Border Color (Active)<\/strong><\/td>Set the border color for the active category filter.<\/td><\/tr>
Background Type<\/strong><\/td>Choose between solid, gradient, or image background for category filters.<\/td><\/tr>
Border Radius<\/strong><\/td>Add rounded corners to category filter items.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Pagination Style<\/h2>\n\n\n\n

The Pagination Styles<\/em> section provides controls for styling pagination elements in your grid layout. You can set alignment, typography, spacing, size, and colors for normal, hover, and active states, along with borders and backgrounds, ensuring a cohesive design across navigation controls.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
Control<\/strong><\/th>Description<\/strong><\/th><\/tr><\/thead>
Alignment<\/strong><\/td>Align pagination numbers to the left, center, or right.<\/td><\/tr>
Typography<\/strong><\/td>Adjust font family, size, weight, and letter spacing for pagination text.<\/td><\/tr>
Padding<\/strong><\/td>Add inner spacing inside pagination number containers.<\/td><\/tr>
Margin<\/strong><\/td>Add outer spacing around pagination numbers.<\/td><\/tr>
Number Width<\/strong><\/td>Set a fixed width for pagination numbers for uniform sizing.<\/td><\/tr>
Text Color (Normal)<\/strong><\/td>Set the text color for pagination numbers in their default state.<\/td><\/tr>
Background Color (Normal)<\/strong><\/td>Set the background color for pagination numbers in their default state.<\/td><\/tr>
Text Color (Hover)<\/strong><\/td>Choose the text color when hovering over pagination numbers.<\/td><\/tr>
Background Color (Hover)<\/strong><\/td>Choose the background color when hovering over pagination numbers.<\/td><\/tr>
Text Color (Active)<\/strong><\/td>Set the text color for the active pagination number.<\/td><\/tr>
Background Color (Active)<\/strong><\/td>Set the background color for the active pagination number.<\/td><\/tr>
Border Type<\/strong><\/td>Select the type of border (solid, dashed, dotted, none).<\/td><\/tr>
Border Color (Hover)<\/strong><\/td>Set the border color when hovering over pagination numbers.<\/td><\/tr>
Border Color (Active)<\/strong><\/td>Set the border color for the active pagination number.<\/td><\/tr>
Border Radius<\/strong><\/td>Add rounded corners to pagination number containers.<\/td><\/tr><\/tbody><\/table><\/figure>\n","protected":false},"excerpt":{"rendered":"

Follow Below setting for Category Filter and Pagination Style Category Filter Style The Category Filter Styles section allows you to customize the look and feel of category filter buttons in your grid layout. You can control alignment, typography, spacing, colors for different states (normal, hover, active), borders, backgrounds, and more. These settings help you create visually consistent and user-friendly category filters. Control Description Alignment Align category filter items to the left, center, or right. Typography Customize font family, size, weight, and letter spacing for category text. Padding Add inner spacing inside the category filter item container. Margin Add outer spacing around the category filter items. Text Color (Normal) Set the text color for category filters in their default state. Background Color (Normal) Set the background color for category filters in their default state. Text Color (Hover) Choose the text color when the category filter is hovered. Background Color (Hover) Choose the background color when the category filter is hovered. Text Color (Active) Set the text color for the active category filter. Background Color (Active) Set the background color for the active category filter. Border Type Select the type of border (solid, dashed, dotted, none). Border Color (Hover) Set the border color when hovering over a category filter. Border Color (Active) Set the border color for the active category filter. Background Type Choose between solid, gradient, or image background for category filters. Border Radius Add rounded corners to category filter items. Pagination Style The Pagination Styles section provides controls for styling pagination elements in your grid layout. You can set alignment, typography, spacing, size, and colors for normal, hover, and active states, along with borders and backgrounds, ensuring a cohesive design across navigation controls. Control Description Alignment Align pagination numbers to the left, center, or right. Typography Adjust font family, size, weight, and letter spacing for pagination text. Padding Add inner spacing inside pagination number containers. Margin Add outer spacing around pagination numbers. Number Width Set a fixed width for pagination numbers for uniform sizing. Text Color (Normal) Set the text color for pagination numbers in their default state. Background Color (Normal) Set the background color for pagination numbers in their default state. Text Color (Hover) Choose the text color when hovering over pagination numbers. Background Color (Hover) Choose the background color when hovering over pagination numbers. Text Color (Active) Set the text color for the active pagination number. Background Color (Active) Set the background color for the active pagination number. Border Type Select the type of border (solid, dashed, dotted, none). Border Color (Hover) Set the border color when hovering over pagination numbers. Border Color (Active) Set the border color for the active pagination number. Border Radius Add rounded corners to pagination number containers.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"doc_category":[32],"doc_tag":[],"class_list":["post-3247","docs","type-docs","status-publish","hentry","doc_category-common-grid-style"],"year_month":"2026-04","word_count":436,"total_views":0,"reactions":{"happy":0,"normal":0,"sad":0},"author_info":{"name":"Elementordipak","author_nicename":"elementordipak","author_url":"https:\/\/creativewebui.com\/flexi-post-grid\/author\/elementordipak\/"},"doc_category_info":[{"term_name":"Common Grid Style","term_url":"https:\/\/creativewebui.com\/flexi-post-grid\/docs-category\/common-grid-style\/"}],"doc_tag_info":[],"yoast_head":"\nFilter and Pagination Style - Flexi Post Grid<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/flexipostgrid.creativewebui.com\/documentation\/filter-and-pagination-style\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Filter and Pagination Style - Flexi Post Grid\" \/>\n<meta property=\"og:description\" content=\"Follow Below setting for Category Filter and Pagination Style Category Filter Style The Category Filter Styles section allows you to customize the look and feel of category filter buttons in your grid layout. You can control alignment, typography, spacing, colors for different states (normal, hover, active), borders, backgrounds, and more. These settings help you create visually consistent and user-friendly category filters. Control Description Alignment Align category filter items to the left, center, or right. Typography Customize font family, size, weight, and letter spacing for category text. Padding Add inner spacing inside the category filter item container. Margin Add outer spacing around the category filter items. Text Color (Normal) Set the text color for category filters in their default state. Background Color (Normal) Set the background color for category filters in their default state. Text Color (Hover) Choose the text color when the category filter is hovered. Background Color (Hover) Choose the background color when the category filter is hovered. Text Color (Active) Set the text color for the active category filter. Background Color (Active) Set the background color for the active category filter. Border Type Select the type of border (solid, dashed, dotted, none). Border Color (Hover) Set the border color when hovering over a category filter. Border Color (Active) Set the border color for the active category filter. Background Type Choose between solid, gradient, or image background for category filters. Border Radius Add rounded corners to category filter items. Pagination Style The Pagination Styles section provides controls for styling pagination elements in your grid layout. You can set alignment, typography, spacing, size, and colors for normal, hover, and active states, along with borders and backgrounds, ensuring a cohesive design across navigation controls. Control Description Alignment Align pagination numbers to the left, center, or right. Typography Adjust font family, size, weight, and letter spacing for pagination text. Padding Add inner spacing inside pagination number containers. Margin Add outer spacing around pagination numbers. Number Width Set a fixed width for pagination numbers for uniform sizing. Text Color (Normal) Set the text color for pagination numbers in their default state. Background Color (Normal) Set the background color for pagination numbers in their default state. Text Color (Hover) Choose the text color when hovering over pagination numbers. Background Color (Hover) Choose the background color when hovering over pagination numbers. Text Color (Active) Set the text color for the active pagination number. Background Color (Active) Set the background color for the active pagination number. Border Type Select the type of border (solid, dashed, dotted, none). Border Color (Hover) Set the border color when hovering over pagination numbers. Border Color (Active) Set the border color for the active pagination number. Border Radius Add rounded corners to pagination number containers.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/flexipostgrid.creativewebui.com\/documentation\/filter-and-pagination-style\/\" \/>\n<meta property=\"og:site_name\" content=\"Flexi Post Grid\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-09T06:26:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/flexipostgrid.creativewebui.com\/wp-content\/uploads\/2025\/08\/Category-Filter-Style.jpg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/flexipostgrid.creativewebui.com\/documentation\/filter-and-pagination-style\/\",\"url\":\"https:\/\/flexipostgrid.creativewebui.com\/documentation\/filter-and-pagination-style\/\",\"name\":\"Filter and Pagination Style - Flexi Post Grid\",\"isPartOf\":{\"@id\":\"https:\/\/flexipostgrid.creativewebui.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/flexipostgrid.creativewebui.com\/documentation\/filter-and-pagination-style\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/flexipostgrid.creativewebui.com\/documentation\/filter-and-pagination-style\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/flexipostgrid.creativewebui.com\/wp-content\/uploads\/2025\/08\/Category-Filter-Style.jpg\",\"datePublished\":\"2025-08-07T18:59:46+00:00\",\"dateModified\":\"2025-08-09T06:26:10+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/flexipostgrid.creativewebui.com\/documentation\/filter-and-pagination-style\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/flexipostgrid.creativewebui.com\/documentation\/filter-and-pagination-style\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/flexipostgrid.creativewebui.com\/documentation\/filter-and-pagination-style\/#primaryimage\",\"url\":\"https:\/\/flexipostgrid.creativewebui.com\/wp-content\/uploads\/2025\/08\/Category-Filter-Style.jpg\",\"contentUrl\":\"https:\/\/flexipostgrid.creativewebui.com\/wp-content\/uploads\/2025\/08\/Category-Filter-Style.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/flexipostgrid.creativewebui.com\/documentation\/filter-and-pagination-style\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/creativewebui.com\/flexi-post-grid\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Documentation\",\"item\":\"https:\/\/flexipostgrid.creativewebui.com\/documentation\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Filter and Pagination Style\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/flexipostgrid.creativewebui.com\/#website\",\"url\":\"https:\/\/flexipostgrid.creativewebui.com\/\",\"name\":\"Flexi Post Grid\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/flexipostgrid.creativewebui.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Filter and Pagination Style - Flexi Post Grid","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/flexipostgrid.creativewebui.com\/documentation\/filter-and-pagination-style\/","og_locale":"en_US","og_type":"article","og_title":"Filter and Pagination Style - Flexi Post Grid","og_description":"Follow Below setting for Category Filter and Pagination Style Category Filter Style The Category Filter Styles section allows you to customize the look and feel of category filter buttons in your grid layout. You can control alignment, typography, spacing, colors for different states (normal, hover, active), borders, backgrounds, and more. These settings help you create visually consistent and user-friendly category filters. Control Description Alignment Align category filter items to the left, center, or right. Typography Customize font family, size, weight, and letter spacing for category text. Padding Add inner spacing inside the category filter item container. Margin Add outer spacing around the category filter items. Text Color (Normal) Set the text color for category filters in their default state. Background Color (Normal) Set the background color for category filters in their default state. Text Color (Hover) Choose the text color when the category filter is hovered. Background Color (Hover) Choose the background color when the category filter is hovered. Text Color (Active) Set the text color for the active category filter. Background Color (Active) Set the background color for the active category filter. Border Type Select the type of border (solid, dashed, dotted, none). Border Color (Hover) Set the border color when hovering over a category filter. Border Color (Active) Set the border color for the active category filter. Background Type Choose between solid, gradient, or image background for category filters. Border Radius Add rounded corners to category filter items. Pagination Style The Pagination Styles section provides controls for styling pagination elements in your grid layout. You can set alignment, typography, spacing, size, and colors for normal, hover, and active states, along with borders and backgrounds, ensuring a cohesive design across navigation controls. Control Description Alignment Align pagination numbers to the left, center, or right. Typography Adjust font family, size, weight, and letter spacing for pagination text. Padding Add inner spacing inside pagination number containers. Margin Add outer spacing around pagination numbers. Number Width Set a fixed width for pagination numbers for uniform sizing. Text Color (Normal) Set the text color for pagination numbers in their default state. Background Color (Normal) Set the background color for pagination numbers in their default state. Text Color (Hover) Choose the text color when hovering over pagination numbers. Background Color (Hover) Choose the background color when hovering over pagination numbers. Text Color (Active) Set the text color for the active pagination number. Background Color (Active) Set the background color for the active pagination number. Border Type Select the type of border (solid, dashed, dotted, none). Border Color (Hover) Set the border color when hovering over pagination numbers. Border Color (Active) Set the border color for the active pagination number. Border Radius Add rounded corners to pagination number containers.","og_url":"https:\/\/flexipostgrid.creativewebui.com\/documentation\/filter-and-pagination-style\/","og_site_name":"Flexi Post Grid","article_modified_time":"2025-08-09T06:26:10+00:00","og_image":[{"url":"https:\/\/flexipostgrid.creativewebui.com\/wp-content\/uploads\/2025\/08\/Category-Filter-Style.jpg","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/flexipostgrid.creativewebui.com\/documentation\/filter-and-pagination-style\/","url":"https:\/\/flexipostgrid.creativewebui.com\/documentation\/filter-and-pagination-style\/","name":"Filter and Pagination Style - Flexi Post Grid","isPartOf":{"@id":"https:\/\/flexipostgrid.creativewebui.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/flexipostgrid.creativewebui.com\/documentation\/filter-and-pagination-style\/#primaryimage"},"image":{"@id":"https:\/\/flexipostgrid.creativewebui.com\/documentation\/filter-and-pagination-style\/#primaryimage"},"thumbnailUrl":"https:\/\/flexipostgrid.creativewebui.com\/wp-content\/uploads\/2025\/08\/Category-Filter-Style.jpg","datePublished":"2025-08-07T18:59:46+00:00","dateModified":"2025-08-09T06:26:10+00:00","breadcrumb":{"@id":"https:\/\/flexipostgrid.creativewebui.com\/documentation\/filter-and-pagination-style\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/flexipostgrid.creativewebui.com\/documentation\/filter-and-pagination-style\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/flexipostgrid.creativewebui.com\/documentation\/filter-and-pagination-style\/#primaryimage","url":"https:\/\/flexipostgrid.creativewebui.com\/wp-content\/uploads\/2025\/08\/Category-Filter-Style.jpg","contentUrl":"https:\/\/flexipostgrid.creativewebui.com\/wp-content\/uploads\/2025\/08\/Category-Filter-Style.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/flexipostgrid.creativewebui.com\/documentation\/filter-and-pagination-style\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/creativewebui.com\/flexi-post-grid\/"},{"@type":"ListItem","position":2,"name":"Documentation","item":"https:\/\/flexipostgrid.creativewebui.com\/documentation\/"},{"@type":"ListItem","position":3,"name":"Filter and Pagination Style"}]},{"@type":"WebSite","@id":"https:\/\/flexipostgrid.creativewebui.com\/#website","url":"https:\/\/flexipostgrid.creativewebui.com\/","name":"Flexi Post Grid","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/flexipostgrid.creativewebui.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-json\/wp\/v2\/docs\/3247","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-json\/wp\/v2\/comments?post=3247"}],"version-history":[{"count":3,"href":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-json\/wp\/v2\/docs\/3247\/revisions"}],"predecessor-version":[{"id":3286,"href":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-json\/wp\/v2\/docs\/3247\/revisions\/3286"}],"wp:attachment":[{"href":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-json\/wp\/v2\/media?parent=3247"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-json\/wp\/v2\/doc_category?post=3247"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-json\/wp\/v2\/doc_tag?post=3247"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}