Our templates come with FREE images. Which means you can use them too on your website. But if you have your own images that’s fine too, you wouldn’t have the same images as everybody else. In this tutorial, we will go through how to upload your own images and style them. If you have gone through our tutorial on Replacing sample text/copy this will be easy for you.

Open the page you want to edit, then select the image you want to change. Right-click on the image then select edit image. The options on the left panel will appear.

On the left panel, click on Choose image. If you have previously uploaded an image that you want to use go to the Media Library tab or you can Upload an image. When you are done uploading your image click the insert media button.

Images play a vital role in web design, so you will most likely use the Image Widget a lot while designing your website. Let’s go over all of the settings you can control for this widget.

Content

• Image – Upload an image or choose Dynamic to dynamically use Posts featured image, Site Logo, and Author Profile Picture.
• Image Size – Choose the size of the image
• Alignment – Set the image Alignment
• Caption – Optionally, add a caption to the bottom of the image. Choose to either create a new custom caption or use the current Attachment Caption from the image’s location in the WordPress Media Library.
• Link To – Set a link to a custom URL, media file, or no link. Choose “media file” to link directly to the location of the image within your media library. Choose “custom URL” to link to any page on any site. Choose “none” if you don’t want to add a link to the image at all.

Style

• Width – Set the Image Width
• Max Width – Set the Max Width for the Image
• Hover Animation – Click the dropdown to choose a Hover Animation
• CSS Filters – Set CSS Filters: Blur, Brightness, Contrast and Saturation
• Opacity – Set the Opacity
• Transition Duration – Set the Hover Animation duration
• Border Type – Set a Border Type
• Border Radius – Set a Border Radius
• Box Shadow – Set Box Shadow: Horizontal, Vertical, Blur, and Spread
• Caption – Set the Alignment, Text color, Text Shadow, and Typography of the caption.

Just follow the steps above for the rest of the images on the website.

Hint: To show the options on the left panel, right-click on the section, text, and image your want to edit.