{"id":3266,"date":"2025-08-07T19:10:59","date_gmt":"2025-08-07T19:10:59","guid":{"rendered":"https:\/\/flexipostgrid.creativewebui.com\/?post_type=docs&#038;p=3266"},"modified":"2025-08-09T06:18:19","modified_gmt":"2025-08-09T06:18:19","password":"","slug":"custom-fields-style","status":"publish","type":"docs","link":"https:\/\/creativewebui.com\/flexi-post-grid\/documentation\/custom-fields-style\/","title":{"rendered":"Custom Fields Style"},"content":{"rendered":"\n<p>This section allows you to customize the appearance and layout of custom fields displayed in your grid items. You can adjust the alignment, spacing, typography, background, and border settings to create a design that matches your overall layout.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"300\" height=\"582\" src=\"https:\/\/flexipostgrid.creativewebui.com\/wp-content\/uploads\/2025\/08\/Custom-Field-Style.jpg\" alt=\"\" class=\"wp-image-3267\" srcset=\"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2025\/08\/Custom-Field-Style.jpg 300w, https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2025\/08\/Custom-Field-Style-155x300.jpg 155w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"289\" height=\"576\" src=\"https:\/\/flexipostgrid.creativewebui.com\/wp-content\/uploads\/2025\/08\/Custom-Field-Style-2.jpg\" alt=\"\" class=\"wp-image-3268\" srcset=\"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2025\/08\/Custom-Field-Style-2.jpg 289w, https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2025\/08\/Custom-Field-Style-2-151x300.jpg 151w\" sizes=\"(max-width: 289px) 100vw, 289px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th><strong>Control<\/strong><\/th><th><strong>Description<\/strong><\/th><\/tr><\/thead><tbody><tr><td><strong>Layout Style<\/strong><\/td><td>Choose the display style for custom fields, such as horizontal list view.<\/td><\/tr><tr><td><strong>Custom Fields Alignment<\/strong><\/td><td>Align custom fields to the left, center, or right.<\/td><\/tr><tr><td><strong>Section Margin<\/strong><\/td><td>Add outer spacing around the entire custom fields section in all directions.<\/td><\/tr><tr><td><strong>Listing Margin<\/strong><\/td><td>Add spacing around individual field listings in all directions.<\/td><\/tr><tr><td><strong>Padding<\/strong><\/td><td>Set inner spacing between the content and the listing container.<\/td><\/tr><tr><td><strong>Typography<\/strong><\/td><td>Adjust font family, size, weight, letter spacing, and other typographic settings.<\/td><\/tr><tr><td><strong>Text Color<\/strong><\/td><td>Set the default color for the custom fields text.<\/td><\/tr><tr><td><strong>Listing Background<\/strong><\/td><td>Choose a background color for the listing container.<\/td><\/tr><tr><td><strong>Border Type<\/strong><\/td><td>Select the border style for the listing container, such as solid, dashed, or none.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Listing Icon Style<\/h2>\n\n\n\n<p>This section allows you to style the icons used in the custom fields listings. You can adjust size, color, spacing, and background to match your design preferences.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th><strong>Control<\/strong><\/th><th><strong>Description<\/strong><\/th><\/tr><\/thead><tbody><tr><td><strong>Icon Background<\/strong><\/td><td>Set a background color for the icon container.<\/td><\/tr><tr><td><strong>Border Type<\/strong><\/td><td>Choose the type of border around the icon, such as solid, dashed, or none.<\/td><\/tr><tr><td><strong>Icon Border Radius<\/strong><\/td><td>Add rounded corners to the icon background container.<\/td><\/tr><tr><td><strong>Icon Spacing<\/strong><\/td><td>Adjust the space between the icon and the adjacent text or elements.<\/td><\/tr><tr><td><strong>Icon Color<\/strong><\/td><td>Choose the default color of the icon.<\/td><\/tr><tr><td><strong>Icon Width<\/strong><\/td><td>Set a fixed width for the icon container.<\/td><\/tr><tr><td><strong>Icon Height<\/strong><\/td><td>Set a fixed height for the icon container.<\/td><\/tr><tr><td><strong>Icon Line Height<\/strong><\/td><td>Adjust the vertical alignment of the icon content by setting its line height.<\/td><\/tr><tr><td><strong>Icon Size<\/strong><\/td><td>Define the actual size of the icon graphic itself.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This section allows you to customize the appearance and layout of custom fields displayed in your grid items. You can adjust the alignment, spacing, typography, background, and border settings to create a design that matches your overall layout. Control Description Layout Style Choose the display style for custom fields, such as horizontal list view. Custom Fields Alignment Align custom fields to the left, center, or right. Section Margin Add outer spacing around the entire custom fields section in all directions. Listing Margin Add spacing around individual field listings in all directions. Padding Set inner spacing between the content and the listing container. Typography Adjust font family, size, weight, letter spacing, and other typographic settings. Text Color Set the default color for the custom fields text. Listing Background Choose a background color for the listing container. Border Type Select the border style for the listing container, such as solid, dashed, or none. Listing Icon Style This section allows you to style the icons used in the custom fields listings. You can adjust size, color, spacing, and background to match your design preferences. Control Description Icon Background Set a background color for the icon container. Border Type Choose the type of border around the icon, such as solid, dashed, or none. Icon Border Radius Add rounded corners to the icon background container. Icon Spacing Adjust the space between the icon and the adjacent text or elements. Icon Color Choose the default color of the icon. Icon Width Set a fixed width for the icon container. Icon Height Set a fixed height for the icon container. Icon Line Height Adjust the vertical alignment of the icon content by setting its line height. Icon Size Define the actual size of the icon graphic itself.<\/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-3266","docs","type-docs","status-publish","hentry","doc_category-common-grid-style"],"year_month":"2026-04","word_count":268,"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":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Custom Fields 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\/custom-fields-style\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Custom Fields Style - Flexi Post Grid\" \/>\n<meta property=\"og:description\" content=\"This section allows you to customize the appearance and layout of custom fields displayed in your grid items. You can adjust the alignment, spacing, typography, background, and border settings to create a design that matches your overall layout. Control Description Layout Style Choose the display style for custom fields, such as horizontal list view. Custom Fields Alignment Align custom fields to the left, center, or right. Section Margin Add outer spacing around the entire custom fields section in all directions. Listing Margin Add spacing around individual field listings in all directions. Padding Set inner spacing between the content and the listing container. Typography Adjust font family, size, weight, letter spacing, and other typographic settings. Text Color Set the default color for the custom fields text. Listing Background Choose a background color for the listing container. Border Type Select the border style for the listing container, such as solid, dashed, or none. Listing Icon Style This section allows you to style the icons used in the custom fields listings. You can adjust size, color, spacing, and background to match your design preferences. Control Description Icon Background Set a background color for the icon container. Border Type Choose the type of border around the icon, such as solid, dashed, or none. Icon Border Radius Add rounded corners to the icon background container. Icon Spacing Adjust the space between the icon and the adjacent text or elements. Icon Color Choose the default color of the icon. Icon Width Set a fixed width for the icon container. Icon Height Set a fixed height for the icon container. Icon Line Height Adjust the vertical alignment of the icon content by setting its line height. Icon Size Define the actual size of the icon graphic itself.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/flexipostgrid.creativewebui.com\/documentation\/custom-fields-style\/\" \/>\n<meta property=\"og:site_name\" content=\"Flexi Post Grid\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-09T06:18:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/flexipostgrid.creativewebui.com\/wp-content\/uploads\/2025\/08\/Custom-Field-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=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/flexipostgrid.creativewebui.com\/documentation\/custom-fields-style\/\",\"url\":\"https:\/\/flexipostgrid.creativewebui.com\/documentation\/custom-fields-style\/\",\"name\":\"Custom Fields Style - Flexi Post Grid\",\"isPartOf\":{\"@id\":\"https:\/\/flexipostgrid.creativewebui.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/flexipostgrid.creativewebui.com\/documentation\/custom-fields-style\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/flexipostgrid.creativewebui.com\/documentation\/custom-fields-style\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/flexipostgrid.creativewebui.com\/wp-content\/uploads\/2025\/08\/Custom-Field-Style.jpg\",\"datePublished\":\"2025-08-07T19:10:59+00:00\",\"dateModified\":\"2025-08-09T06:18:19+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/flexipostgrid.creativewebui.com\/documentation\/custom-fields-style\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/flexipostgrid.creativewebui.com\/documentation\/custom-fields-style\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/flexipostgrid.creativewebui.com\/documentation\/custom-fields-style\/#primaryimage\",\"url\":\"https:\/\/flexipostgrid.creativewebui.com\/wp-content\/uploads\/2025\/08\/Custom-Field-Style.jpg\",\"contentUrl\":\"https:\/\/flexipostgrid.creativewebui.com\/wp-content\/uploads\/2025\/08\/Custom-Field-Style.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/flexipostgrid.creativewebui.com\/documentation\/custom-fields-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\":\"Custom Fields 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":"Custom Fields 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\/custom-fields-style\/","og_locale":"en_US","og_type":"article","og_title":"Custom Fields Style - Flexi Post Grid","og_description":"This section allows you to customize the appearance and layout of custom fields displayed in your grid items. You can adjust the alignment, spacing, typography, background, and border settings to create a design that matches your overall layout. Control Description Layout Style Choose the display style for custom fields, such as horizontal list view. Custom Fields Alignment Align custom fields to the left, center, or right. Section Margin Add outer spacing around the entire custom fields section in all directions. Listing Margin Add spacing around individual field listings in all directions. Padding Set inner spacing between the content and the listing container. Typography Adjust font family, size, weight, letter spacing, and other typographic settings. Text Color Set the default color for the custom fields text. Listing Background Choose a background color for the listing container. Border Type Select the border style for the listing container, such as solid, dashed, or none. Listing Icon Style This section allows you to style the icons used in the custom fields listings. You can adjust size, color, spacing, and background to match your design preferences. Control Description Icon Background Set a background color for the icon container. Border Type Choose the type of border around the icon, such as solid, dashed, or none. Icon Border Radius Add rounded corners to the icon background container. Icon Spacing Adjust the space between the icon and the adjacent text or elements. Icon Color Choose the default color of the icon. Icon Width Set a fixed width for the icon container. Icon Height Set a fixed height for the icon container. Icon Line Height Adjust the vertical alignment of the icon content by setting its line height. Icon Size Define the actual size of the icon graphic itself.","og_url":"https:\/\/flexipostgrid.creativewebui.com\/documentation\/custom-fields-style\/","og_site_name":"Flexi Post Grid","article_modified_time":"2025-08-09T06:18:19+00:00","og_image":[{"url":"https:\/\/flexipostgrid.creativewebui.com\/wp-content\/uploads\/2025\/08\/Custom-Field-Style.jpg","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/flexipostgrid.creativewebui.com\/documentation\/custom-fields-style\/","url":"https:\/\/flexipostgrid.creativewebui.com\/documentation\/custom-fields-style\/","name":"Custom Fields Style - Flexi Post Grid","isPartOf":{"@id":"https:\/\/flexipostgrid.creativewebui.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/flexipostgrid.creativewebui.com\/documentation\/custom-fields-style\/#primaryimage"},"image":{"@id":"https:\/\/flexipostgrid.creativewebui.com\/documentation\/custom-fields-style\/#primaryimage"},"thumbnailUrl":"https:\/\/flexipostgrid.creativewebui.com\/wp-content\/uploads\/2025\/08\/Custom-Field-Style.jpg","datePublished":"2025-08-07T19:10:59+00:00","dateModified":"2025-08-09T06:18:19+00:00","breadcrumb":{"@id":"https:\/\/flexipostgrid.creativewebui.com\/documentation\/custom-fields-style\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/flexipostgrid.creativewebui.com\/documentation\/custom-fields-style\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/flexipostgrid.creativewebui.com\/documentation\/custom-fields-style\/#primaryimage","url":"https:\/\/flexipostgrid.creativewebui.com\/wp-content\/uploads\/2025\/08\/Custom-Field-Style.jpg","contentUrl":"https:\/\/flexipostgrid.creativewebui.com\/wp-content\/uploads\/2025\/08\/Custom-Field-Style.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/flexipostgrid.creativewebui.com\/documentation\/custom-fields-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":"Custom Fields 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\/3266","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=3266"}],"version-history":[{"count":3,"href":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-json\/wp\/v2\/docs\/3266\/revisions"}],"predecessor-version":[{"id":3283,"href":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-json\/wp\/v2\/docs\/3266\/revisions\/3283"}],"wp:attachment":[{"href":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-json\/wp\/v2\/media?parent=3266"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-json\/wp\/v2\/doc_category?post=3266"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-json\/wp\/v2\/doc_tag?post=3266"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}