How to Add Images, Videos, and Galleries in Sitejet Builder

Introduction

Visual content is key to building an attractive and engaging website. With Sitejet Builder, you can easily add and customize images, videos, and galleries to enhance your pages without needing any technical skills.

This article will guide you step-by-step through adding visual elements to your website and customizing them for performance and design.

Adding Images in Sitejet Builder

1. Open Sitejet Builder

   • Log into your cPanel

   • Open Sitejet Builder and select the website you want to edit

2. Drag and Drop an Image Block

   • Navigate to the Widgets panel (typically on the left)

   • Find the Image widget

   • Drag it into your page layout where you want the image to appear

3. Upload or Select Image

   • Click on the image placeholder

   • Upload a new image from your computer or select from your media library

   • Click Insert

4. Customize the Image

   • Add alt text for SEO and accessibility

   • Resize the image using corner handles

   • Use the settings panel to:

     • Add borders, shadows, or hover effects

     • Align image within the column

     • Link the image to a page, file, or external URL

Adding Image Galleries

1. Drag in the Gallery Block

   • Go to Widgets > Gallery or Image Grid

   • Drop the gallery block into your page

2. Upload Multiple Images

   • Click Add Images

   • Select and upload multiple images at once

   • Rearrange or delete individual images as needed

3. Customize the Gallery Layout

   • Choose from layout options: Grid, Masonry, Carousel, or Slideshow

   • Adjust number of columns, spacing, and image cropping

   • Enable lightbox view (enlarges images when clicked)

4. Performance Tip

   • Use compressed images (JPG/WEBP) to keep pages fast

   • Avoid uploading high-resolution images directly from your camera

Adding Videos

Option 1: Embed from YouTube or Vimeo

1. Drag a Video Block into your page

2. Click Edit and paste your YouTube or Vimeo video URL

3. Customize:

   • Autoplay, loop, or mute options

   • Video size and alignment

Option 2: Upload Video Files (Not Recommended for Large Files)

1. Use the File Upload tool to upload MP4/WEBM videos

2. Use a Custom HTML Block to embed:

   html

   CopyEdit

   <video controls width="100%"> <source src="your-video.mp4" type="video/mp4"> Your browser does not support the video tag. </video>

Tip: Use embedded services (YouTube/Vimeo) to reduce server load and bandwidth.

Styling & Responsiveness

• All image and video blocks in Sitejet are mobile-responsive

• Use mobile preview to test layout and adjust sizes per device

• Customize padding, margins, and spacing to maintain design consistency

SEO & Accessibility Tips

• Always add alt text to images for SEO and screen readers

• Use descriptive file names (e.g., team-photo.jpg instead of IMG001.jpg)

• Avoid using text in images — use real text for search visibility

Conclusion

With Sitejet Builder, adding and managing images, videos, and galleries is intuitive and flexible. These visual tools help improve engagement, communicate your brand, and make your website more dynamic — all without needing any code.