Adding Images, Galleries, Icons, and Videos

Learning Objectives

• Add and format images using the WordPress editor or Elementor.
• Create image galleries and adjust layout styles.
• Use icons effectively for clarity and visual hierarchy.
• Embed and optimize videos for performance and UX.
• Improve accessibility, SEO, and loading speed for all media.

Preparing Media Files

Before uploading visual content, optimize it for fast loading and clarity:

• Images: Use JPG for photos, PNG for transparency, SVG for icons (if allowed), WebP for compression.
• Size: Scale images to the display size (e.g., hero images 1600–1920px wide).
• Compression: Use tools like TinyPNG, Squoosh, or ShortPixel.
• Naming: Use descriptive filenames (e.g., kitchen-remodel-before.jpg).
• Alt Text: Add short, meaningful descriptions for accessibility and SEO.

Adding Images

WordPress Block Editor

1. Click the + to add a block.
2. Select Image.
3. Upload from your device or choose from the Media Library.
4. Set alignment, size, and link options (None, Media File, or Custom URL).
5. Add Alt Text in the sidebar.

Elementor

1. Drag the Image widget into your section or container.
2. Upload or choose an image.
3. Set Image Size (Full, Medium, Custom).
4. Add Caption if needed.
5. Adjust alignment, border radius, shadow, or hover animation.

Best Practices

• Use consistent image styles (rounded corners, subtle shadows).
• Keep file sizes under 250 KB for most images.
• Avoid decorative images with no alt text (use empty alt tag "").

Creating Image Galleries

WordPress Block Editor

1. Add a Gallery block.
2. Select multiple images.
3. Choose column layout (2–4 columns recommended).
4. Optional: Enable Crop Images for uniform grid.

Elementor

1. Use the Basic Gallery or Image Carousel widget.
2. Upload multiple images.
3. Adjust Columns, Spacing, Captions, and Lightbox options.

Tips

• Use carousels sparingly—they reduce control for the user.
• Keep galleries clean by limiting to 6–12 images per section.
• Enable lightbox for full-screen view.

Using Icons

Icons help highlight features, steps, or benefits. They provide quick visual cues and improve readability.

Elementor Icons

1. Drag the Icon or Icon Box widget.
2. Choose from the built-in library (Font Awesome & others).
3. Set size, alignment, and colors (use global colors).
4. Optional: Replace icon with an SVG upload.

Best Uses for Icons

• Feature lists
• Benefits and highlights
• Service explanations
• Process steps

Best Practices

• Use a consistent icon style (line, solid, outlined).
• Keep icon colors within your brand palette.
• Ensure icons do not replace essential text (not screen-reader-friendly by themselves).

Adding Videos

Where to Host Videos

• YouTube – Great for reach, fastest loading (recommended).
• Vimeo – Cleaner player, ideal for branded presentations.
• Self-hosted – Avoid unless necessary; slow and bandwidth-heavy.

Adding a Video (WordPress Editor)

1. Add a Video block.
2. Paste a YouTube or Vimeo URL.
3. Adjust playback options and alignment.

Adding a Video (Elementor)

1. Drag the Video widget.
2. Paste a URL or choose embed options.
3. Enable Lazy Load (important for performance).
4. Add a Custom Cover Image for a polished look.
5. Set start time, autoplay, mute, or player controls as needed.

Video Best Practices

• Use a custom thumbnail for brand consistency.
• Keep videos short (< 2 minutes) for hero or landing pages.
• Always use lazy loading to reduce initial load time.
• Avoid autoplay with sound—it frustrates users.

Performance Guidelines

• Enable lazy loading for all images and videos.
• Compress large image backgrounds for hero sections.
• Serve WebP images if supported.
• Remove unused media from your Media Library periodically.

Accessibility & SEO Essentials

• Alt Text: Describe the image’s purpose (“Modern white kitchen renovation”).
• Video Captions: Enable closed captions or include transcripts.
• Icons: Use aria-hidden="true" for decorative icons.
• Links on Images: Make clickable areas clear and large enough.

Activity: Build a Media-Rich Section

1. Add an image using your page builder and apply a subtle shadow or border radius.
2. Create a small 3–image gallery below it.
3. Add an icon+text row (3 icons max).
4. Embed a YouTube or Vimeo video with lazy load and a custom thumbnail.

Assignment: Upload a screenshot of your completed media section on desktop and mobile view.