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.
