Prerequisites / Requirements
Before you start, make sure you have:
Access to your website in Sitebuilder.
A section you want to customize.
Step-by-Step Instructions
1. Open Section Settings
Hover over the section you want to edit.
Click Customize Section.
2. Change the Background
You can change the section background by selecting:
A solid color.
A gradient.
The background updates immediately, and the text color adjusts automatically to maintain readability.
3. Add a Shape Divider
Add a decorative shape to the top or bottom of the section.
You can customize the shape and its color to create smooth visual transitions between sections.
4. Add an Animation
You can add an animation that plays when visitors scroll to the section.
Available options include:
Fade – the content fades into view.
Slide – the content slides into view from the left, right, top, or bottom.
💡 Tip: Use animations sparingly to keep your website easy to navigate and avoid distracting visitors.
5. Adjust Padding and Spacing
Adjust the spacing at the top and bottom of the section to create more or less space around the content.
Use spacing adjustments to improve the layout and make the section look balanced on both desktop and mobile devices.
6. Customize the Section Width
Choose how wide the section should be:
Full width – the section extends across the screen. This works well for backgrounds that span the entire page.
Content width – keeps the content within the main content area and helps align text and images with other sections.
7. Use Additional Design Options
Depending on your section setup, you can also:
Adjust overlay opacity when using a background image.
Add custom CSS for more advanced styling.
💡 Note: Custom CSS is optional and intended for users who need additional design control.
Visuals & Examples
Use screenshots or short GIFs to demonstrate:
Opening Customize Section.
Changing the background.
Adding a shape divider.
Applying animations.
Adjusting padding and spacing.
For screenshots, use generic examples and add arrows or callouts where helpful.
Troubleshooting / FAQs
Can I make a section full width?
Yes. Use the Full width option in the section width settings.
Can I add an animation to a section?
Yes. You can choose between Fade and Slide animations.
Can I customize the background?
Yes. You can use a solid color or gradient. You can also adjust the overlay opacity when using a background image.
Can I add custom styling?
Yes. Custom CSS can be used for advanced styling.
Summary / Next Steps
You can customize sections by changing their background, shape dividers, animations, spacing, width, and other design settings.
💡 Tip: Keep your section styles consistent and preview your changes on both desktop and mobile to make sure your website looks good on all devices.