Adding Content and Video Backgrounds
using The SitePro Website Builder on DirectAdmin
Evans
Last Update منذ يوم واحد
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 |