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 — 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:• Fill the area (Crop to fit)• Fit inside (No crop)• Stretch to fill (May distort)• Original Size (No fit)• 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 Editor
Edit any page using Elementor and add your Flexi Post Grid widget.
Go to the Style Tab
Select 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
- Select image resolution or choose “Custom Size” and set pixel dimensions.
- Set image width (like
100%or75%). - Customize wrapper height using units like
px,%,em, orvhfor full control. - Choose how image fits using Image Fit Style (like crop, fit, or stretch).
- Use Image Spacing, Padding, and Margins for layout fine-tuning.
- Add rounded corners or borders for enhanced design.
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).