Media (e.g., images, videos, PDFs, documents, etc.) play a vital role in making your website content engaging and informative. This guide will show you how to:
- Upload and manage media in the Media Library
- Insert media into pages and posts
- Embed videos from platforms like YouTube and Vimeo
- Follow best practices for accessibility and optimization
Understanding the Media Library
The Media Library is where all your uploaded files are stored. This includes:
- Images (JPG, PNG, GIF)
- Documents (PDF, DOCX)
- Audio and video files (MP3, MP4)
- Other media used across your site
To Access the Media Library:
- From the Dashboard, go to Media > Library.
- Use the grid or list view to browse files.
- Use the search bar or filters to find specific items.
Uploading Media
You can upload media in two ways:
- Upload Directly to the Media Library
- From the Dashboard, go to Media > Add Media File, or when viewing the Media Library page, click the Add Media File button at the top of the screen..
- Drag and drop your file, or click the Select Files button to upload from your computer.
- Upload While Editing Content
- While editing a page or post, add or edit a module/block that supports media (e.g., Image, Video, etc.).
- Upload a new file or select one from the Media Library.
Tip
Always add descriptive alt text when uploading images to support accessibility. To add alt text, click on the image you just uploaded and fill in the Alternative Text field.
Inserting Media into Content
The type of media you want to insert will determine which module/block to add.
In the Divi Builder:
- Images: Use the Image Module and click the Add Image option to upload or select from the Media Library.
- Videos: Use the Video Module and click the Add Video option and select an uploaded video or paste a YouTube or Vimeo link.
- Files (PDFs, etc.): Use a Text Module, highlight text, and insert a link to the file.
Embedding Youtube and Vimeo Videos
To embed a Youtube, Vimeo, or other remote video, click Insert from URL in the left-hand sidebar and paste in the URL of the video you want to embed.
In the Block Editor:
- Images: Use the Image block to insert and align images.
- Videos: Use the YouTube Embed, Vimeo Embed, or Video block to select a video file or paste the video URL.
- Files (PDFs, etc.): Use a Paragraph block, highlight text, and insert a link to the file.
Managing Media Files
Editing Media Details:
- Click on any item in the Media Library.
- You can update:
- Title
- Alt Text (required for accessibility)
- Caption (optional)
- Description (optional)
Deleting Media:
- In the Media Library, click on an item and click the red Delete Permanently link.
Be Cautious
Deleting a file will remove it from all pages or posts where it's used. Only delete media if you're sure it's no longer in use.
Best Practices for Media
Accessibility
- Alt Text: Always add alt text when uploading an image. This should describe the image’s purpose or content.
- Descriptive Links: Use meaningful text for file links (e.g., “Download the Orientation Schedule (PDF)”).
- Avoid Text in Images: Screen readers can’t read text embedded in images.
- PDF Accessibility: Make sure all uploaded PDFs are accessible. Learn more about how to create accessible documents.
Optimization
Optimized media improves page load speed and user experience, especially on mobile devices.
- Resize images before uploading. There is a max upload file size of 100MB (if possible, aim for under 1MB). A good trick is to keep images under 2500px in width and height.
- When working with images that are displayed in a list and need to be the same proportions (e.g., profile directory listings), make sure each image is resized to the same proportions prior to uploading.
- Avoid uploading large video files. If possible, use YouTube or Vimeo instead.
- Name files clearly (e.g., orientation-schedule-2025.pdf instead of document1.pdf).