Comment on page
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.
- 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)
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.
%20(1).png?alt=media&token=c55b6878-3bff-4da3-b29c-328ffef44519)
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)
Select the background image of the (#) image block.
%20(1).png?alt=media&token=e4de2ac8-35c6-48bc-a5a1-73c6a2a3f5ca)
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)
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.
%20(1).png?alt=media&token=e6a8302b-3464-4725-9009-fd853c779132)
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)
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)
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)
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)
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 tab offer options to customize the spacing for Title and Description.
%20(1).png?alt=media&token=cc41cdc1-46a4-4282-bbdf-becd4bed9954)
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 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.
%20(1).png?alt=media&token=7131fe00-7714-46db-a6da-0c7874fe3ee3)
Last modified 2yr ago