How to add Images and Videos to a Page

Enhance your website’s visual appeal and engagement by adding images, image galleries, and videos using DecoNetwork’s Website Editor. Media elements help communicate your brand, showcase products, and guide customers toward key actions.

In This Article

• Prerequisites
• Why Add Media to Your Website?
• Add an Image
• Configure Image Settings
• Add an Image Gallery
• Add a Video
• Using Background Images
• Best Practice Tips
• Troubleshooting
• FAQs
• Additional Resources

Prerequisites

Why Add Media to Your Website?

Media elements such as images, galleries, and videos play a key role in creating an engaging and professional storefront.

• Showcase products visually to increase customer interest
• Guide user actions by linking images to key pages
• Build brand identity with consistent visuals
• Improve SEO with optimized images and alt tags
• Enhance storytelling using galleries and video content

Add an Image

Step 1: Open the Website Editor

1. Go to Admin → Websites
2. Select your website and click Edit Website → Website Pages

Step 2: Add the Image Widget

1. Click Widgets
2. Go to the Media section
3. Drag the Image widget onto the page

Step 3: Select or Upload an Image

1. Choose from:
   • Your uploaded images
   • Theme images
   • Stock images
   • Search free image libraries on the web
2. Upload a new image if needed
3. Select the image to apply it

Configure Image Settings

Step 4: Customize the Image

1. Click the image widget to open settings
2. Configure:
   • Replace Image – swap with another image
   • Link – direct users to another page
   • Alt Tag – describe the image for SEO

Step 5: Adjust Size and Layout

1. Select an appropriate size (e.g., small, medium, large)
2. Resize using layout controls
3. Ensure the image resolution matches its display size

Step 6: Apply Design Effects

1. Open the Design tab in the Image Settings
2. Optional enhancements:
   • Add text overlays (title/subtitle)
   • Apply hover effects
   • Use image effects (e.g., grayscale → color on hover)

Step 7: Style the Image

• Add background color
• Apply borders or rounded corners
• Add shadows
• Control alignment and device visibility

Add an Image Gallery

Step 1: Add the Gallery Widget

1. Go to Widgets → Media
2. Drag the Image Gallery widget onto the page

Step 2: Add Images

1. Select multiple images to include in the gallery

Step 3: Choose Display Style

• Grid – structured rows and columns
• Masonry – staggered layout
• Collage – varied sizes
• Carousel – rotating slider

Step 4: Configure Gallery Settings

• Adjust thumbnail size
• Enable or disable cropping
• Set number of visible images
• Customize arrows, speed, and autoplay

Add a Video

Step 1: Add the Video Widget

1. Go to Widgets → Media
2. Drag the Video widget onto the page

Step 2: Add a Video URL

1. Paste a video link from:
   • YouTube
   • Vimeo

Step 3: Configure Video Options

• Aspect ratio
• Autoplay and loop
• Show/hide controls
• Fullscreen option
• Hide branding (more control with Vimeo)

Using Background Images

• You can set images or GIFs as row or column backgrounds
• You can place widgets (like text) over background images

Best Practice Tips

• Use SVG files for logos (sharp and lightweight)
• Use PNG for transparency
• Use JPEG for smaller file sizes
• Keep full-width images between 2000–3000px wide
• Optimize file size to improve page load speed
• Clone widgets or rows to reuse layouts quickly

Troubleshooting

Image looks blurry

• Use a higher resolution image
• Avoid scaling beyond original size

Image loads slowly

• Reduce file size
• Use optimized formats (JPEG or SVG)

Gallery layout looks uneven

• Adjust thumbnail size
• Enable cropping for consistent shapes

Cannot overlay text on video

• This is not supported in the standard editor
• Use an image background instead

FAQs

Can I link images in a gallery?

No. To create clickable images, use individual Image widgets.

What is the best image format to use?

• SVG for logos
• PNG for transparency
• JPEG for performance

Can I use videos as backgrounds?

No, only images or GIFs can be used as backgrounds.

Why should I use alt tags?

Alt tags improve accessibility and help search engines understand your content.

Additional Resources

• Image Widget
• Image Gallery Widget
• Video Widget