Featured Box

How to add section Featured Box to website

Showcase key information elegantly, complemented by vibrant illustrations or unique SVG icons, creating a truly captivating highlight.

Demo featured box on website

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

How to add featured to section

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

Add featured box to section

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

Content featured box

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

Config content featured box

Image : Choose an image for the featured box.
Image from URL : Display image by url. There is support for svg format.
Image Max Width (px) : Set max width for image.
Title : Enter a title for the featured box.
Description : Enter a description for the featured box.

Button featured box

If you want to display the button, you need to fill in the text for the button.

Config button

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 Featured Box

Alignment

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

Alignment Settings

Image Position : Set position of image/svg.
Content Alignment : Set alignment for content.

Featured Color

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

Color Settings

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

Featured Size

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

Featured size settings

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

Featured Spacing

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

Featured 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...