Section styles
Last updated
Last updated
Sections include general style options. In the editor side panel, click the section to find settings for Section colors, image overlays, padding, and animations.
You can change a section's color scheme or use custom colors for your section. Click a section to open the settings and find the Section colors area.
Sections use the colors from your theme settings as the default color scheme. You can select an alternate color scheme or use custom section colors.
Alternate color schemes generate alternate colors based on the default theme colors. There are four variant color schemes: Inverse, Soft, Accent, or Sale.
Click section to find Color scheme settings
Default
Use colors selected in Theme settings > Color.
Inverse
Swap the Background and Text colors.
Soft
Use a blend of the Text and Background colors.
Accent
Use the Accent color for the background and a contrasting color for the foreground.
Sale
Use the Background color for the foreground and Sale color for the background.
Custom
Apply Color scheme 1 or Color scheme 2 from your theme settings.
Instead of using a color scheme, you can use custom colors for the individual section. In the section settings, enable the Override with custom colors option.
Click section to find settings
Override with custom colors
Enable to apply custom colors to the section. These colors will override the color scheme.
Text color
Select a custom color for the heading and text.
Background color
Select a custom color for the section or block background.
For images and videos, you can customize the image overlay colors, style, and opacity. Change the text and tint colors, and choose to use a solid or gradient overlay.
Overlays add style, as well as help balance image and text for readability.
Click the section or block to find the Image overlay settings.
Use the Tint opacity slider to make the color overlay more or less transparent. An 0% overlay is completely transparent (off) and 100% is completely opaque.
Set the opacity to 100% to create solid color blocks or banners in sections like Grid, Image hero, or Slideshow.
Click block or section to find settings
Tint opacity
Use the slider to change the transparency of the overlay. Set the opacity to 0% to turn off the overlay.
Tint style
Choose to use a Solid overlay color or Gradient overlay for the tint.
The gradient style fades from solid to transparent. You can select the direction of the gradient.
Override with custom colors
Check this option to use custom overlay colors for the tint.
These colors will override the overlay colors selected in your theme settings.
Text color
Select a custom color for the headings and text.
Tint color
Select a custom overlay color.
Under Section style in the section settings, use the sliders to add space at the top and bottom of the section. Set to 0px to remove spacing. This option helps control the flow and layout of your pages.
When animations are enabled, text and images are loaded dynamically: section contents slide, fade, zoom, or ease into position at a delay rather than all at once.
Other animations include a "shimmer" over images and subtle visual changes to elements like buttons or hot spots.
You may want to turn off animations if you have concerns about load time, style, or accessibility. You can do so in your Theme settings or in individual Section settings.
To turn off animations for a section, click the section to open the settings. Under Section style, toggle off Enable animations.
To turn off animations for all sections, go to Theme settings > Animation and toggle of Enable section animations.
