Want to style your images & texts together, easily do that with this Image box element that has all the styling options that you will need.
In the Basic tab we have the following options:
- Admin Label- Add a custom label to the element to clearly identify it in the page back-end layout.
- Image- Choose your desired image for the box.
- Image Alt Text- Add an alternate text to the image if doesn’t shows up.
- Title- Add the box title here.
- HTML Tag- Choose the required tag to be applied on the title.
- Description- Add a description on the box.
- Link- Add link to the box.
- Apply Link On- Choose where to apply the link on either the title, icon, button, full box or on both title & image.
- Button Text- If you choose to apply the link either on the complete box or button, then enter the button text here.
Next is Image Styling options, that are:
- Image Width- Set the width of the image in pixels or percentage.
- Image Border Radius- Make the edges rounded by adding radius to it.
- Image Border Type- Choose a border type for the image.
- Box Shadow- Add background shadow to the image.
Style the title under Title Styling tab that has the following options:
- Title Spacing- Adjust the space between title & image.
- Title Colors- Add color to the title text.
- Typography- Manage the title’s font style, size, spacing or even line height via the typography field.
Style the description under Description Styling tab that has the following options:
- Description Spacing- Adjust the space between title & description.
- Description Colors- Add color to the description text.
- Typography- Manage the description’s font style, size, spacing or even line height via the typography field.
If you have enabled the link on button then style your button under Button Styling options that are similar to the options that we have for other elements.
Set the icon box’s background under Box Background Options that are similar to every element’s background options.
If you have set the background as Image or Video then add an overlay to it under Box Background Overlay options.
Manage the box’s border options under Box Border Options.
Adjust the spacing of the element under Box Spacing Options where you can manage the margin & padding of the element.
You can also add hover options over the complete box under Box Hover Options, like set a color, image or a gradient on hover, or do nothing by keeping it None. Also style the border on hover with the given options.