How to set up the media with features section

The media with features section highlights key features alongside an image to create a visually engaging information section.

Section settings

Heading: Set a title for this section. This is optional.

Subheading: Set a subtitle for this section. This is optional.

Description: Add a description for the media with features section.

Layout

Section width: Adjust whether this section should span the full width of the page (100%) or be contained within a limited layout. Applies on desktop. On mobile, the section spans the entire width of the screen.

Section inner max width (px): Set the maximum width of the content inside this section in pixels.

Section left/right gutter: Adjust the left and right spacing of the section relative to the viewport edge on narrow screens.

Vertical inner spacing: Adjust the spacing between the content and the top/bottom edges of this section in pixels.

Vertical outer spacing: Adjust the space between this section and the sections above and below it in pixels.

Media

Image: Select or upload an image for the media with features section. You can also browse free images via the “Explore free images” link.

Media position: Select the horizontal placement of the media. Options: Left, Right.

Media width: Select the width of the media relative to the total section width. Options: One half, One third, One fourth.

Image border radius: Adjust the roundness of the image corners.

Features

Number of columns on desktop: Select the number of columns to display for the features section on desktop screens.

Alignment: Choose the alignment for the feature content. Options: Left, Center, Right.

Section styles

Section background color: Choose the background color for the section.

Heading color: Choose the color for the section heading and the feature headings.

Text color: Choose the color for the section subheading, section description, and feature descriptions.

Feature

Icon image: Select or upload an image to use as the feature icon. You can also browse free images via the “Explore free images” link.

Image size: Adjust the display size of the icon image.

Heading: Set the title for the feature.

Description: Add a description for the feature.