Section styles give you full control over the appearance of each section on your site. Whether you're designing a clean landing page or a bold promotional block, you can fine-tune every detail — from colors and layout to animations and borders — all within the section editor.
To change a section's style:
Open your site in the Editor.
Hover over the section you want to edit.
Click the edit icon in the top right corner of the section.
In the panel that opens on the right, click the Style tab (paint bucket icon) at the top.
Use the available options to adjust the layout and visual styling. All changes apply instantly.
Handy tip:
Click the snap icon to move the section editor between the left and right sides of your screen.
Colors
Colors
Select from page theme colors – Apply one of your site’s predefined color combinations.
Use solid or gradient backgrounds – Choose between flat color or a gradient fill.
Override with custom colors – Manually define background and accent colors for the section.
Background Image or Video
Background Image or Video
Click Add Media to open the media selector.
Choose from Durable’s media library or upload an image (JPG, JPEG, PNG up to 32MB). Video uploads are not supported.
Click Let AI choose for you to generate an image automatically.
After selecting media, additional controls appear:
Regenerate – Replace the AI-generated image.
Change – Select new media manually.
Refine appearance with:
Position – Adjust horizontal and vertical image placement.
Overlay – Control how visible the image or video is.
Blur – Add a soft blur effect.
Text Options
Text Options
Heading size – Choose from Small, Medium, Large, or Extra Large.
Subtext size – Choose from Small, Medium, or Large.
Text alignment – Align content left, center, or right using the alignment icons.
Layout and Advanced Styling
Layout and Advanced Styling
Rounded corners – Choose Small, Medium, Large, None, or match your site’s page theme.
Animations – Control how elements appear when the section loads:
Options include: None, Fade In, Zoom In, Zoom Out, Slide Up, Slide Left, Slide Right, or match the page theme.
Spacing – Control space around the section:
Top spacing – None, Small, Medium, or Large
Bottom spacing – None, Small, Medium, or Large
Min. height – Sets the section’s minimum height:
Content – Matches the height to the content inside.
Screen – Fills the visitor’s screen with the section.
If Screen is selected, choose vertical alignment: Top, Middle, or Bottom.
Dividers and Borders
Dividers and Borders
Divider – Adds a visual divider between this section and the next. When enabled, click the example to choose a style.
Border – Add a border that matches the divider’s direction:
Select color, thickness, and type (Solid or Dashed).
When you're done customizing your section, click Done in the top right corner of the panel to save your changes.
If you’d like help designing standout sections or need input on best practices, our team is always happy to assist. Just reach out!