Image Boxes
Image Boxes block allows you to create a beautiful gallery of images to showcase your portfolio, photos, and more. With this block, you also get customization options for headings and descriptions.
Last updated
Image Boxes block allows you to create a beautiful gallery of images to showcase your portfolio, photos, and more. With this block, you also get customization options for headings and descriptions.
Last updated
Open a page or a post and click on the plus icon to add a new block and look for the Image Boxes or you can search for it if it doesn’t pop up quickly for you.
By default, you'll get two image boxes-
To configure the content of your Image Boxes block, switch to the ‘Content’ tab.
Number of Image Boxes Blocks - Select the number of image boxes to be displayed in the block.
Height - Adjust the height of the image boxes in the block.
Gutter - You can set small, medium, large or extra-large gutter.
You can show/hide the title and description in the block.
Horizontal Alignment - Adjust the horizontal alignment of the text within the images boxes block.
Vertical Alignment - Adjust the vertical alignment of the text within the image boxes block.
Select the background image of the (#) image block.
Image Size - Select the size of the background image as Full Size, Thumbnail, Medium, Large.
Background Position- Select the position of the background image as Left - Top, Center Bottom, Right - Top, Center, Bottom, Center - Top, Center, Bottom.
Background Repeat- Select the background repeat of the background image as Initial, Repeat, No-repeat, Round, Inherit, Space, Repeat Y, Repeat X.
Background Size- Select the background size of the background image as Initial, Cover, Contain, Auto, Inherit.
Switch to the ‘Style’ tab to style all the elements of the Image Boxes block.
You can select an overlay color for the block from here.
Background Color - Select the background color of the image boxes.
Gradient Background - Toggle button to switch between normal background color and gradient background color of the image boxes.
Secondary Background Color - Select the secondary background color for the gradient effect in the image boxes.
Gradient Degree - Adjust the gradient degree of the background colors in the image boxes when the ‘Gradient Background’ effect is enabled.
Background Color Opacity - Adjust the background color opacity in the image boxes.
You can select an overlay color for the block on hovering from here.
Hover Background Color - Select the background color of the image boxes.
Gradient Background - Toggle button to switch between normal background hover color and gradient background hover color of the image boxes.
Secondary Background Color - Select the secondary background hover color for the gradient effect in the image boxes.
Gradient Degree - Adjust the gradient degree of the background hover colors in the image boxes when the ‘Gradient Background’ effect is enabled.
Background Color Opacity - Adjust the background hover color opacity in the image boxes.
You can customize the color of the Image Boxes block elements like Title and Description.
Adjust the typography of the Image Boxes block elements like Title, Description.
You can set the responsive font size of the Title for Mobile and Tablet view.
The Padding tab offer options to customize the spacing for Top, Bottom, Left, and Right.
Select the hover effect of the image boxes as Default, Zoom Out, Zoom In.
Spacing tab offer options to customize the spacing for Title and Description.
Border Style - You can select the style of the border as solid, dotted, rigged, double, dashed, etc. You can also choose to hide it
Border Width - Set the width of the border from here. This option appears if you set the border style.
Border Radius - You can give border-radius to the boxes from here.
Box Shadow - You can give box-shadow to the block with a number of options available for customization such as color, blur, spread, position, etc.
Arrow After Content - Toggle button to hide/display arrow below the description in the image boxes.
Color - Select the color of the arrow displayed below the description in the image boxes.
Arrow Size - Adjust the size of the arrow displayed below the description in the image boxes.
