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.
How To Add The Image Boxes Block #
- 1.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.
- 2.By default, you’ll get two image boxes-
.png?alt=media&token=c8fdfa1d-097a-48df-ae81-b7455c15c77d)
How To Configure The Image Boxes Block #
To configure the content of your Image Boxes block, switch to the ‘Content’ tab.
General #
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.
Content #
You can show/hide the title and description in the block.
%20(1).png?alt=media&token=c55b6878-3bff-4da3-b29c-328ffef44519)
Alignment #
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.
%20(1).png?alt=media&token=d3c8232a-3c52-4c8a-a918-d900784f8d13)
Background Image #
Select the background image of the (#) image block.
%20(1).png?alt=media&token=e4de2ac8-35c6-48bc-a5a1-73c6a2a3f5ca)
Image #
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.
%20(1).png?alt=media&token=39577cdc-fd04-478f-ae78-9c9c598bab04)
How To Style The Image Boxes Block #
Switch to the ‘Style’ tab to style all the elements of the Image Boxes block.
Overlay Color #
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.
%20(1).png?alt=media&token=e6a8302b-3464-4725-9009-fd853c779132)
Hover Overlay Color #
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.
%20(1).png?alt=media&token=6ad4394d-682e-481a-b38b-12beba224448)
Text Colors #
You can customize the color of the Image Boxes block elements like Title and Description.
%20(1).png?alt=media&token=a653ade8-a832-4abe-af6e-b6f34bb535e3)
Typography #
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.
%20(1).png?alt=media&token=809855fa-bfab-4f83-b380-a44e43d77768)
Padding #
The Padding tab offer options to customize the spacing for Top, Bottom, Left, and Right.
%20(1).png?alt=media&token=44c96382-f94c-4d16-bc08-2b3ea95b96c3)
Hover Effect #
Select the hover effect of the image boxes as Default, Zoom Out, Zoom In.
%20(1).png?alt=media&token=7d7e2333-d025-4e84-81c0-cc6459084210)
Spacing #
Spacing tab offer options to customize the spacing for Title and Description.
%20(1).png?alt=media&token=cc41cdc1-46a4-4282-bbdf-becd4bed9954)
Border #
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.
%20(1).png?alt=media&token=efd1621e-cee5-4e4b-acb0-5173d3ed7804)
Arrow #
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.
