Finding where the image is within a widget can sometimes be a little tricky. But the main places you will find it are in an image widget’s content tab, the style tab for columns and sections, the main settings area for the full page, and/or the advanced tab under the background.

Always add alt-text to any image you upload to the WordPress Library to comply with US accessibility laws.

Optimize Your Images

How to Optimize Your Images

Widget Tutorials

Image Widget – Content > image

Image Box Widget  – Content > image

Basic Gallery – Content > image

Sections – advanced tab > background

Columns  – advanced tab > background

Spacer Widget – advanced tab > background

Page Settings – gear icon

Background Site Settings – site settings > settings > backgrounds

Transcript

Lena    00:00

Hey there, I’m going to walk you through how to change the images on your website. There are a couple of different places always to check if you’re checking out your website and you can’t quite figure out where that image is, so I’m going to go through those as well as some details on how to style them. All right, so let’s have a little look. See here. So first, I want to go over the page settings. So if you click the toolbar that toggles down here, you will open up the page settings and then add from there.

Lena    00:30

The featured image. So let’s say we want. I don’t know that to be our featured image awesome. Make sure you’re uploading a photo, so you add the alt text and explain why the idea is essential. So say we have a coaching website. Be like you could add something like a fantastic coach. Is looking for. Xyz service. Or a tremendous coach in a white jacket. But the most important thing is that you have something that at least describes the image that is for compliance issues. So in the US, there is an accessibility law that dictates what or how things can be displayed on your website.

Lena    01:23

So if you don’t have the alt text, you’re actually violating that law, and you can be sued over it—so fun. Okay, you are so moving on. So let’s put this as the featured image. So let’s stick this guy in there again, and this is now the background of the site. So that will come out when you share the page on your social media and all of that stuff. The next place we visit is the style, so you can change the background or add an image for the entire site set. Let’s see what that looks like.

Lena    01:55

Now we can adjust the styling on this. We can make the image centered; we can cover it. Most of the time, we use cover, and then that will stretch over the entire website. As you can see, anything without white has that image. Also, you can change the colors. But you’ll notice that different things have a white background, so it’s not visible. So we can make all of the background black if we want to. So there are lots of different things you can do gradients.

Lena    02:31

Now, similar. There are similar settings for each widget, so we’ll go through what those look like on each. So let’s reset these so they’re not so funky, right? So we’re going to go through the basics, and I have a couple of images down here to run through. So this guy. This isn’t just a regular image. It’s whatever you want to do there. You’ll notice when I clicked, it opened up. That’s important because sometimes you don’t want that to happen; sometimes you do, so it automatically sets it to open in the media file. So you want to say either none or maybe a custom URL if you would like to do that, and you can add in that customer’s custom URL now.

Lena    03:13

If your site has a custom rule, try to use dynamic tags. Internal URL and then find your content so content and then find your page, so you want to connect it to your about page. And then that’s all set. Then if you change the URL on that page at any point, it just auto updates the link because you’ve physically linked it with the page instead of just the URL and the web address.

Lena    03:40

A couple of other things are so easy we click here and switch it out. Remember to add your alt text. Let’s connect out of that. And so we now have this girl here. Then we can style this in a couple of different ways. You can play with how wide it is. You can change the opacity, and you can change the hover effects. You can do a CSS where like it goes essentially black and white when you hover. You can do different transitions and hover animations. Extra animations as it does affect the speed of a site. I usually advise against adding.

Lena    04:21

Plus, it’s not accessible for many people, so there’s some Gray area as to whether it is complete the Accessibility Act. For other stuff, we can add a border. We can add a box shadow. See how it adds the shadow. And then we can change margins. So let’s go in here and make it 50. And so it’s half the size with that background. So that is image one. The next one we’re going to go through is the spacer. So spacers, I tend to use spacers a lot on sites because you can easily make it taller or shorter depending on your content.

Lena    05:01

So it gives you a little more freedom there. But to change the image, if you come across this, you want to go to the edit once again and go to the advanced. And we’ll go to the background now if there is any element or widget on the page. You can set a stage for any device, which can be in addition to anything already there. So all of them, if you go to advanced, will have a background section, so we switch it out.

Lena    05:29

Make sure to add all your text. Or maybe we do a gradient, whatever you want to do here for your background. And, of course, you can add your border so we can do the same thing as the kind we do in the image; it’s just bound in a different place. Those are the main things you should know about there. Okay, we have lots of various other versions of image elements. So we have; let’s do a quick search.

Lena    05:58

We have. We have the image box. It’s pretty much the same process as the image widget. We dynamically have an image box, a Carousel, Basic Gallery, and featured images, so let’s not worry about that. We have the media carousel. All of these are edited the same way as the image. So if you look in here, you’ll click it open, and you’ll click that image again, so all the styling can usually be found in the style tab except some of the backgrounds, which then go in here. I hope that is helpful and that you can find everything you need.