A brief becomes a real page.Add images and icons that belong on your page
Use your own media or stock images, add accurate descriptions, and review optimization.
Video coming soon
Your next step is ready.
Follow the complete written guide below.
The video will join it here when it’s ready.
Before you start
- A working connection and an editable draft.
- Permission to upload files.
Let’s do this, step by step.
Step 01
Inspect existing media
Search the Media Library and inspect an attachment before uploading a duplicate.
Your site may already have the image you need. Check its dimensions and description, then reuse the actual attachment ID.
Step 02
Choose and connect an image source
Use upload-media for a local file. For stock search, open Connection → 3rd-party services → Stock images. Add an Unsplash, Pexels or Pixabay key through its Get a key link, then Save changes. Search and inspect a result.
Your own uploads need no stock-image account. For stock search, add a key for one supported provider and save it. Check the image’s license and credit before using it.
Step 03
Insert and describe
Use the exact returned image URL or attachment ID. Set meaningful alt text and review the caption and attribution. add-stock-image uses attribution as its default caption unless overridden.
Use the actual result returned by the search. Describe meaningful images clearly and check that the required credit appears in the final page.
Step 04
Add a consistent icon
Choose one icon style, upload its SVG through the sanitized icon tool, and use the returned asset in an Elementor widget.
Use the widget's current schema to place the icon. The icon tool has its own upload route; general SVG uploads are controlled by a separate module.
Step 05
Optimize and verify
Under Modules → Content & design, enable Image Optimization and Save modules. Open Settings, review Keep originals and Largest side, then Save settings. Test one resize before Optimize existing library.
Save the module switch first, then save its settings. Keep originals available and test one image. Check quality and size before processing the library.
You’re done when…
Images display correctly, meaningful alt text and required credits are present, and mobile crops are checked.
Keep the reference handy.
The docs cover tool details and requirements for this lesson.