{"id":3216,"date":"2025-08-06T16:52:27","date_gmt":"2025-08-06T16:52:27","guid":{"rendered":"https:\/\/flexipostgrid.creativewebui.com\/?post_type=docs&p=3216"},"modified":"2025-08-06T16:52:27","modified_gmt":"2025-08-06T16:52:27","password":"","slug":"how-to-customize-featured-image-design-using-image-settings","status":"publish","type":"docs","link":"https:\/\/creativewebui.com\/flexi-post-grid\/documentation\/how-to-customize-featured-image-design-using-image-settings\/","title":{"rendered":"How to Customize Featured Image Design Using Image Settings"},"content":{"rendered":"\n

The Image Settings<\/strong> section under the Style<\/strong> tab allows you to fully control how featured images appear in your grid layout. With Flexi Post Grid<\/strong>, you can easily adjust image size, spacing, cropping, alignment, height, and more \u2014 without writing any custom code or CSS.<\/p>\n\n\n\n

These settings apply to most grid layouts and are especially useful when you want a clean, professional, and consistent visual appearance for your posts or custom content.<\/p>\n\n\n\n

Image Settings Overview<\/h2>\n\n\n\n
Setting<\/strong><\/th>Description<\/strong><\/th><\/tr><\/thead>
Image Resolution<\/strong><\/td>Choose from default WordPress image sizes like Thumbnail<\/code>, Medium<\/code>, Large<\/code>, Full<\/code>, or select Custom Size<\/code>.<\/td><\/tr>
Custom Width \/ Height (px)<\/strong><\/td>Only appears if Custom Size<\/strong> is selected. Allows you to set exact width and height for the image in pixels.<\/td><\/tr>
Image Width (%)<\/strong><\/td>Set the image width in percentage (e.g., 100%, 75%). Helps resize the image proportionally inside the container.<\/td><\/tr>
Image Margin<\/strong><\/td>Adds space outside<\/strong> the image container. You can control top, right, bottom, and left margins individually.<\/td><\/tr>
Image Padding<\/strong><\/td>Adds space inside<\/strong> the image container. Useful when combining with borders or background styles.<\/td><\/tr>
Image Wrapper Height<\/strong><\/td>Allows you to set a custom height<\/strong> for the image wrapper for all responsive views (desktop, tablet, mobile). Supports units like px<\/code>, %<\/code>, em<\/code>, vh<\/code>.<\/td><\/tr>
Image Fit Style<\/strong><\/td>Defines how the image fits inside its wrapper:\u2022 Fill the area (Crop to fit)<\/strong>\u2022 Fit inside (No crop)<\/strong>\u2022 Stretch to fill (May distort)<\/strong>\u2022 Original Size (No fit)<\/strong>\u2022 Shrink if needed<\/strong><\/td><\/tr>
Vertical Align (Flexi Post Grid)<\/strong><\/td>Align images vertically (Top \/ Middle \/ Bottom). Only visible in grid layouts with fixed height wrappers.<\/td><\/tr>
Image Border Radius<\/strong><\/td>Add rounded corners to the image. You can set top-left, top-right, bottom-right, and bottom-left separately.<\/td><\/tr>
Border Type<\/strong><\/td>Choose border styles for the image: None<\/strong>, Solid<\/strong>, Dashed<\/strong>, Dotted<\/strong>, or Double<\/strong>.<\/td><\/tr>
Image Spacing<\/strong><\/td>Adjust the vertical space between the image and other elements (like title, meta, read more button).<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n

How to Use These Settings<\/h2>\n\n\n\n

Open Elementor Editor<\/strong>
Edit any page using Elementor and add your Flexi Post Grid<\/strong> widget.<\/p>\n\n\n\n

Go to the Style Tab<\/strong>
Select the widget and switch to the Style<\/strong> tab in the left panel.<\/p>\n\n\n\n

Locate “Image Settings”<\/strong>
Scroll down to find the section titled Image Settings<\/strong>.<\/p>\n\n\n\n

Adjust Image Display Settings<\/strong><\/p>\n\n\n\n

    \n
  • Select image resolution or choose “Custom Size” and set pixel dimensions.<\/li>\n\n\n\n
  • Set image width (like 100%<\/code> or 75%<\/code>).<\/li>\n\n\n\n
  • Customize wrapper height using units like px<\/code>, %<\/code>, em<\/code>, or vh<\/code> for full control.<\/li>\n\n\n\n
  • Choose how image fits using Image Fit Style<\/strong> (like crop, fit, or stretch).<\/li>\n\n\n\n
  • Use Image Spacing<\/strong>, Padding<\/strong>, and Margins<\/strong> for layout fine-tuning.<\/li>\n\n\n\n
  • Add rounded corners<\/strong> or borders<\/strong> for enhanced design.<\/li>\n<\/ul>\n\n\n\n

    <\/p>\n\n\n\n

    Notes<\/h2>\n\n\n\n

    Not all options appear in every layout. Some settings are visible only in specific grid types that support them (like equal-height or card-style layouts).<\/p>\n","protected":false},"excerpt":{"rendered":"

    The Image Settings section under the Style tab allows you to fully control how featured images appear in your grid layout. With Flexi Post Grid, you can easily adjust image size, spacing, cropping, alignment, height, and more \u2014 without writing any custom code or CSS. These settings apply to most grid layouts and are especially useful when you want a clean, professional, and consistent visual appearance for your posts or custom content. Image Settings Overview Setting Description Image Resolution Choose from default WordPress image sizes like Thumbnail, Medium, Large, Full, or select Custom Size. Custom Width \/ Height (px) Only appears if Custom Size is selected. Allows you to set exact width and height for the image in pixels. Image Width (%) Set the image width in percentage (e.g., 100%, 75%). Helps resize the image proportionally inside the container. Image Margin Adds space outside the image container. You can control top, right, bottom, and left margins individually. Image Padding Adds space inside the image container. Useful when combining with borders or background styles. Image Wrapper Height Allows you to set a custom height for the image wrapper for all responsive views (desktop, tablet, mobile). Supports units like px, %, em, vh. Image Fit Style Defines how the image fits inside its wrapper:\u2022 Fill the area (Crop to fit)\u2022 Fit inside (No crop)\u2022 Stretch to fill (May distort)\u2022 Original Size (No fit)\u2022 Shrink if needed Vertical Align (Flexi Post Grid) Align images vertically (Top \/ Middle \/ Bottom). Only visible in grid layouts with fixed height wrappers. Image Border Radius Add rounded corners to the image. You can set top-left, top-right, bottom-right, and bottom-left separately. Border Type Choose border styles for the image: None, Solid, Dashed, Dotted, or Double. Image Spacing Adjust the vertical space between the image and other elements (like title, meta, read more button). How to Use These Settings Open Elementor EditorEdit any page using Elementor and add your Flexi Post Grid widget. Go to the Style TabSelect the widget and switch to the Style tab in the left panel. Locate “Image Settings”Scroll down to find the section titled Image Settings. Adjust Image Display Settings Notes Not all options appear in every layout. Some settings are visible only in specific grid types that support them (like equal-height or card-style layouts).<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"doc_category":[29],"doc_tag":[],"class_list":["post-3216","docs","type-docs","status-publish","hentry","doc_category-featured-image"],"year_month":"2026-04","word_count":424,"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":"Featured Image","term_url":"https:\/\/creativewebui.com\/flexi-post-grid\/docs-category\/featured-image\/"}],"doc_tag_info":[],"yoast_head":"\nHow to Customize Featured Image Design Using Image Settings - 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\/how-to-customize-featured-image-design-using-image-settings\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Customize Featured Image Design Using Image Settings - Flexi Post Grid\" \/>\n<meta property=\"og:description\" content=\"The Image Settings section under the Style tab allows you to fully control how featured images appear in your grid layout. With Flexi Post Grid, you can easily adjust image size, spacing, cropping, alignment, height, and more \u2014 without writing any custom code or CSS. These settings apply to most grid layouts and are especially useful when you want a clean, professional, and consistent visual appearance for your posts or custom content. Image Settings Overview Setting Description Image Resolution Choose from default WordPress image sizes like Thumbnail, Medium, Large, Full, or select Custom Size. Custom Width \/ Height (px) Only appears if Custom Size is selected. Allows you to set exact width and height for the image in pixels. Image Width (%) Set the image width in percentage (e.g., 100%, 75%). Helps resize the image proportionally inside the container. Image Margin Adds space outside the image container. You can control top, right, bottom, and left margins individually. Image Padding Adds space inside the image container. Useful when combining with borders or background styles. Image Wrapper Height Allows you to set a custom height for the image wrapper for all responsive views (desktop, tablet, mobile). Supports units like px, %, em, vh. Image Fit Style Defines how the image fits inside its wrapper:\u2022 Fill the area (Crop to fit)\u2022 Fit inside (No crop)\u2022 Stretch to fill (May distort)\u2022 Original Size (No fit)\u2022 Shrink if needed Vertical Align (Flexi Post Grid) Align images vertically (Top \/ Middle \/ Bottom). Only visible in grid layouts with fixed height wrappers. Image Border Radius Add rounded corners to the image. You can set top-left, top-right, bottom-right, and bottom-left separately. Border Type Choose border styles for the image: None, Solid, Dashed, Dotted, or Double. Image Spacing Adjust the vertical space between the image and other elements (like title, meta, read more button). How to Use These Settings Open Elementor EditorEdit any page using Elementor and add your Flexi Post Grid widget. Go to the Style TabSelect the widget and switch to the Style tab in the left panel. Locate “Image Settings”Scroll down to find the section titled Image Settings. Adjust Image Display Settings Notes Not all options appear in every layout. Some settings are visible only in specific grid types that support them (like equal-height or card-style layouts).\" \/>\n<meta property=\"og:url\" content=\"https:\/\/flexipostgrid.creativewebui.com\/documentation\/how-to-customize-featured-image-design-using-image-settings\/\" \/>\n<meta property=\"og:site_name\" content=\"Flexi Post Grid\" \/>\n<meta property=\"og:image\" content=\"https:\/\/flexipostgrid.creativewebui.com\/wp-content\/uploads\/2025\/08\/Screenshot_33.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\/how-to-customize-featured-image-design-using-image-settings\/\",\"url\":\"https:\/\/flexipostgrid.creativewebui.com\/documentation\/how-to-customize-featured-image-design-using-image-settings\/\",\"name\":\"How to Customize Featured Image Design Using Image Settings - Flexi Post Grid\",\"isPartOf\":{\"@id\":\"https:\/\/flexipostgrid.creativewebui.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/flexipostgrid.creativewebui.com\/documentation\/how-to-customize-featured-image-design-using-image-settings\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/flexipostgrid.creativewebui.com\/documentation\/how-to-customize-featured-image-design-using-image-settings\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/flexipostgrid.creativewebui.com\/wp-content\/uploads\/2025\/08\/Screenshot_33.jpg\",\"datePublished\":\"2025-08-06T16:52:27+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/flexipostgrid.creativewebui.com\/documentation\/how-to-customize-featured-image-design-using-image-settings\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/flexipostgrid.creativewebui.com\/documentation\/how-to-customize-featured-image-design-using-image-settings\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/flexipostgrid.creativewebui.com\/documentation\/how-to-customize-featured-image-design-using-image-settings\/#primaryimage\",\"url\":\"https:\/\/flexipostgrid.creativewebui.com\/wp-content\/uploads\/2025\/08\/Screenshot_33.jpg\",\"contentUrl\":\"https:\/\/flexipostgrid.creativewebui.com\/wp-content\/uploads\/2025\/08\/Screenshot_33.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/flexipostgrid.creativewebui.com\/documentation\/how-to-customize-featured-image-design-using-image-settings\/#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\":\"How to Customize Featured Image Design Using Image Settings\"}]},{\"@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":"How to Customize Featured Image Design Using Image Settings - 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\/how-to-customize-featured-image-design-using-image-settings\/","og_locale":"en_US","og_type":"article","og_title":"How to Customize Featured Image Design Using Image Settings - Flexi Post Grid","og_description":"The Image Settings section under the Style tab allows you to fully control how featured images appear in your grid layout. With Flexi Post Grid, you can easily adjust image size, spacing, cropping, alignment, height, and more \u2014 without writing any custom code or CSS. These settings apply to most grid layouts and are especially useful when you want a clean, professional, and consistent visual appearance for your posts or custom content. Image Settings Overview Setting Description Image Resolution Choose from default WordPress image sizes like Thumbnail, Medium, Large, Full, or select Custom Size. Custom Width \/ Height (px) Only appears if Custom Size is selected. Allows you to set exact width and height for the image in pixels. Image Width (%) Set the image width in percentage (e.g., 100%, 75%). Helps resize the image proportionally inside the container. Image Margin Adds space outside the image container. You can control top, right, bottom, and left margins individually. Image Padding Adds space inside the image container. Useful when combining with borders or background styles. Image Wrapper Height Allows you to set a custom height for the image wrapper for all responsive views (desktop, tablet, mobile). Supports units like px, %, em, vh. Image Fit Style Defines how the image fits inside its wrapper:\u2022 Fill the area (Crop to fit)\u2022 Fit inside (No crop)\u2022 Stretch to fill (May distort)\u2022 Original Size (No fit)\u2022 Shrink if needed Vertical Align (Flexi Post Grid) Align images vertically (Top \/ Middle \/ Bottom). Only visible in grid layouts with fixed height wrappers. Image Border Radius Add rounded corners to the image. You can set top-left, top-right, bottom-right, and bottom-left separately. Border Type Choose border styles for the image: None, Solid, Dashed, Dotted, or Double. Image Spacing Adjust the vertical space between the image and other elements (like title, meta, read more button). How to Use These Settings Open Elementor EditorEdit any page using Elementor and add your Flexi Post Grid widget. Go to the Style TabSelect the widget and switch to the Style tab in the left panel. Locate “Image Settings”Scroll down to find the section titled Image Settings. Adjust Image Display Settings Notes Not all options appear in every layout. Some settings are visible only in specific grid types that support them (like equal-height or card-style layouts).","og_url":"https:\/\/flexipostgrid.creativewebui.com\/documentation\/how-to-customize-featured-image-design-using-image-settings\/","og_site_name":"Flexi Post Grid","og_image":[{"url":"https:\/\/flexipostgrid.creativewebui.com\/wp-content\/uploads\/2025\/08\/Screenshot_33.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\/how-to-customize-featured-image-design-using-image-settings\/","url":"https:\/\/flexipostgrid.creativewebui.com\/documentation\/how-to-customize-featured-image-design-using-image-settings\/","name":"How to Customize Featured Image Design Using Image Settings - Flexi Post Grid","isPartOf":{"@id":"https:\/\/flexipostgrid.creativewebui.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/flexipostgrid.creativewebui.com\/documentation\/how-to-customize-featured-image-design-using-image-settings\/#primaryimage"},"image":{"@id":"https:\/\/flexipostgrid.creativewebui.com\/documentation\/how-to-customize-featured-image-design-using-image-settings\/#primaryimage"},"thumbnailUrl":"https:\/\/flexipostgrid.creativewebui.com\/wp-content\/uploads\/2025\/08\/Screenshot_33.jpg","datePublished":"2025-08-06T16:52:27+00:00","breadcrumb":{"@id":"https:\/\/flexipostgrid.creativewebui.com\/documentation\/how-to-customize-featured-image-design-using-image-settings\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/flexipostgrid.creativewebui.com\/documentation\/how-to-customize-featured-image-design-using-image-settings\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/flexipostgrid.creativewebui.com\/documentation\/how-to-customize-featured-image-design-using-image-settings\/#primaryimage","url":"https:\/\/flexipostgrid.creativewebui.com\/wp-content\/uploads\/2025\/08\/Screenshot_33.jpg","contentUrl":"https:\/\/flexipostgrid.creativewebui.com\/wp-content\/uploads\/2025\/08\/Screenshot_33.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/flexipostgrid.creativewebui.com\/documentation\/how-to-customize-featured-image-design-using-image-settings\/#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":"How to Customize Featured Image Design Using Image Settings"}]},{"@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\/3216","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=3216"}],"version-history":[{"count":1,"href":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-json\/wp\/v2\/docs\/3216\/revisions"}],"predecessor-version":[{"id":3220,"href":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-json\/wp\/v2\/docs\/3216\/revisions\/3220"}],"wp:attachment":[{"href":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-json\/wp\/v2\/media?parent=3216"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-json\/wp\/v2\/doc_category?post=3216"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-json\/wp\/v2\/doc_tag?post=3216"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}