Adding Content and Video Backgrounds
using The SitePro Website Builder on DirectAdmin
Evans
Last Update 2 months ago
Overview
Creating engaging sections like an About Us page requires proper structure and visual appeal.
In this guide, you’ll learn how to:
Creating engaging sections like an About Us page requires proper structure and visual appeal.
In this guide, you’ll learn how to:
- Organise content using layout elements
- Format and style text
- Add a full-width video background
- Preview your design across devices
1. Structuring Your Content
Use Layout Elements
Start with a layout container to keep your content organised:
Use Layout Elements
Start with a layout container to keep your content organised:
- Drag and drop the Layout element onto your page.
- Click inside the layout to choose the type of content you want to add (e.g., text, images).
Add and Style Text
- Add Headings:
Insert a text element and use the Style option to match your site’s heading format. - Add Body Text:
Drag in another text element for descriptions. Double-click to edit and apply formatting such as alignment. - Improve Spacing:
Use the Margins settings in the right-hand panel to create space around text for better readability.
2. Creating a Video Background
A video background can make sections of your site more engaging and visually appealing.
Add the Background Container
A video background can make sections of your site more engaging and visually appealing.
Add the Background Container
- Drag a Shape element into your layout.
- Set the Width to 100% to span the full page.
- Define the Height (e.g., 500px) to control how much space the video occupies.
- Go to the Background section in the right-hand panel.
- Click the pen (edit) icon.
- Open the Image/Video tab.
- Upload your video and click Select to apply it.
3. Preview and Test Your Design
Before publishing, check how your content appears across devices:
Before publishing, check how your content appears across devices:
- Click Preview at the top of the editor.
- Switch between desktop and mobile views.
- Ensure:
- Text is readable
- Margins are properly spaced
- Video displays correctly on smaller screens
Quick Tips
| Task | How to Perform |
| Add Layout | Drag Layout element onto page |
| Add Text | Drag text element → Double-click to edit |
| Adjust Spacing | Use Margins in right-hand panel |
| Add Video Background | Shape → Background → Image/Video → Upload |
| Preview Design | Click Preview and switch device views |