Image Box

How to add section Image Box to website

An Image Box is a content block combining images and text, used to convey concise information and grab attention. It’s often used to showcase services, products, or specific messages.

Demo of Image Box on website

In the theme editor (Customize), Add section Image Box.

How to add image box to section

Each block will be 1 image box. You can add image box by adding block.

Add image box to section

After adding the new block, You can configure the image box according to your requirements.

In the theme editor (Customize), click section Image Box, Click the block you want to edit. Here you can make the necessary configurations.

Config block image box

Image : Choose an image for the image box.
Title : Enter a title for the image box.
Description : Enter a description for the image box.
Description : Enter a description for the image box.
Show Icon Button : Enable to display the icon for the button.
Button link : Fill in the link for the button.
Button text : Fill in the text for the button.
Button style : Select button style.
Button color : Select button color.
Button size : Select button size.

Configure section Image Box

Alignment

In the theme editor (Customize), click section Image Box then locate Alignment. Here you can make the necessary configurations.

Alignment Settings

Configure Alignment for the image box.

Image Settings

In the theme editor (Customize), click section Image Box then locate Image Settings. Here you can make the necessary configurations.

Image Settings

Aspect Ratio : Set ratio for image.
Image Size : set the size attribute for the img tag. See more about the sizes attribute .
Max Width (px) : Set max width for image.
Hover style : Choose hover style for the image.
Hover effect : Choose hover effect for the image.
Radius (%) : Choose radius for the image.

Image Box Color

In the theme editor (Customize), click section Image Box then locate Image Box Color. Here you can make the necessary configurations.

Color Settings

Title color : Configure color for title.
Description color : Configure color for description.

Image Box Size

In the theme editor (Customize), click section Image Box then locate Image Box Size. Here you can make the necessary configurations.

Image Box size settings

Title Font Size (px) : Configure font size for title.
Description Font Size (px) : Configure font size for description.

Image Box Spacing

In the theme editor (Customize), click section Image Box then locate Image Box Spacing. Here you can make the necessary configurations.

Image Box spacing settings

Spacing Image (px) : Set image spacing. Set value -1 to apply default settings from theme.
Spacing Title (px) : Set title spacing. Set value -1 to apply default settings from theme.
Spacing Description (px) : Set description spacing. Set value -1 to apply default settings from theme.
Spacing Button (px) : Set button spacing. Set value -1 to apply default settings from theme.

Build layout section

Layout slider

You can display block layout grid or slider.If you want to use layout slider see Section Slider Layout

Switch slider or grid

Layout grid

If you use layout grid.At the settings section, You can configure items to display on 1 row for each screen device.

Configure items to display on a row of layout grid

Other configurations of section

You can see the documentation for other section configurations such as: Heading, container, background, animation, padding...