Media with text
Create bold layouts with promotional content and layered media
Key features
Overlaying media
Flexible content layout
Supports autoplay video
Mobile-specific media options
Custom layout and styles
Blocks
Overline Heading Text Buttons Spacer
Media
Upload a primary (background) image and secondary image to display on one side of the section.
Primary media
Display an image, solid color, or autoplay video (without sound) as the primary background.
Click section to find settings
Media type
Color Image Video
Image
Click section to find settings
Image
Media ratio
Portrait (2:3) Portrait (4:5) Square (1:1) Landscape (5:4) Landscape (3:2) Custom
Custom mobile image
Color
Click section to find settings
Background color
Color scheme Custom
Color scheme
Match section Default Inverse Soft Accent Accent inverse Overlay Color scheme 1 Color scheme 2
Custom
Background
Video
Click section to find settings
Video
Video focal point
Custom mobile video
Mobile video focal point
Media ratio
Set the shape and orientation of the primary background.
Click section to find settings
Media ratio
Portrait (2:3) Portrait (4:5) Square (1:1) Landscape (5:4) Landscape (3:2) Custom
Overlay colors
Click section to find settings
Overlay opacity
0 - 100%
Color scheme
Default Inverse Soft Accent Accent inverse Overlay Color scheme 1 Color scheme 2
Secondary media
Display an image or autoplay video (without sound) over top the primary background media.
Click section to find settings
Media type
Image Video
Media ratio
Portrait (2:3) Portrait (4:5) Square (1:1) Landscape (5:4) Landscape (3:2) Custom
Image
Custom mobile image
Video
Video focal point
Custom mobile video
Desktop width
Left Right
Tablet width
30 - 70%
Mobile width
Top Bottom
Corner radius
Media layout
Click section to find settings
Placement
Left Right
Width
30 - 70%
Mobile placement
Top Bottom
Content blocks
You can customize the position and alignment of the content in the section settings.
Click (+) Add block to add headings, text, and buttons. Use the drag handles ⋮⋮ to re-order blocks.
Use the Spacer block to achieve different text layouts. Add spacer blocks between content blocks to group them together. Either set a fixed pixel space or select 'Flexible' to fill the available space.
Overline
Click overline block to find settings
Overline
Add text for a small heading.
Overline size
1 - 4
Heading
Click heading block to find settings
Heading
Add text for a heading.
Text style
Use global Custom
Font
Heading Body
Font size
50 - 150px
Tablet font size
Mobile font size
Line height
Letter spacing
Uppercase
Text
Click paragraph block to find settings
Text
Add multiple lines of text with rich formatting.
Text size
1 - 4
Buttons
Add a primary and secondary button under the text content. When both buttons are added, they will appear inline.
Click Button group block to find settings
Link
Enter the URL for the button to link to.
Label
Add text to the button.
Size
XS S M L
Style
Solid Outline Text
Color scheme
Default Primary Secondary Soft Overlay Overlay soft
Content layout
Change the position and alignment of the text and buttons overlaying the sections' content side.
Click section block to find settings
Alignment
Left / Center / Right
Mobile alignment
Left / Center / Right
Max width
Full width Custom
Custom max width
130 - 1440px
Section styles
Customize general style options for the section and content area. Settings for Content area allow you to adjust the width, borders, and dropshadow of the container of the section content.
Click section to find settings
Content area
Width
Full width Full width padded Page width
Full width on mobile
Available for Full width padded option.
Set content to page width
Border
Corner radius
Available for Full width padded and Page width options.
Dropshadow
Section
Top padding
0 - 27
Bottom padding
0 - 27
Dividers
None Top only Bottom only Both
Force dividers full width
Color scheme
Default Inverse Soft Accent Accent inverse Overlay Color scheme 1 Color scheme 2
Anchor ID
Link directly to the section on any page. Learn more
Last updated