Working with images
Ready to get started?
Hi, in this video, I'm going to show you how to edit your images, the images on your website, both background images and the images that are placed in the content itself.
Let's dive straight in. You can do that via the front-end builder. I'm just going to log into that. It takes a few seconds. Okay, great. Now, let's go down to this image here. So this is a single image. So if we float your cursor over the image, you'll see this green box appear. And if you click the Edit icon, you can see the images here.
So you could remove that, click Add Image, and you could upload an image to your media library from your computer if you have an image already on your computer. Or if you've previously uploaded an image, you can add it from here. So for example, we could just add this one, for example. Click Save Changes.
That image appears there. Or what you can do is you can use the instant images. We've integrated with Unsplash and Pixabay. Together, they have maybe a couple of million different images, and there are millions. The best way to find an image is to search for it using the Search bar here.
For example, you just type in happy people, and you can choose orientation to landscape, portrait or square. I think landscape will probably be good. We could just find an image. If you just keep on clicking, Load More. You'll just keep on loading all the images.
It's quite a nice one there. All you do is once you find the image you like, you just click it and it will download that image into your media library. Then you just click this button down here that says set image, and it will appear there.
Okay. A couple of options on the images. You can animate the image, so you can fade in from the bottom, for example, and that image will fade in from the bottom of the container. Or you could flip in vertically. It will do that.
There are lots of different things. I'm not a massive fan of image animations, but if you wanted to, you could do that. You can put animation delay there. Hover animation. For example, if someone hovers over that image, you could have a little animation. So like that, for example. And there are different ones like a colour overlay, then you could put the overlay colour in there.
If you know the Hex Code, you could do that, or you could just choose a colour. And that will do that. You could align that image left right or center. You could have a link to that image. So when someone clicks the image, it will link... Sorry, that will link to a larger image. We don't want to do that. We can just link the image to a URL.
So for example, the image could go to another part of the website if you put the URL in there. And the target is basically if it's the same window, a new window. So if someone clicks the image and it opens up the URL, will it open up a new tab on your browser, or will it just go to that page on the same window? Y
You can do a border-radius. So border-radius is like the curved edges around the image. So for example, if you do 20, for example, you'll see that the image has a larger radius of a curve there, or you could remove the radius. It's up to you. And you could have a shadow under the image. So for example, there's a small shadow around the image.
If you can see that, you can either delete that so there's no shadow to that, or you could put a very large shadow, for example. I'll put a very large shadow behind that. I quite like having a small shadow. And there's a few extra things here, but they're the main things there.
That's one of the main ways of adding images and manipulating the images. For background images on a row, for example, here, what you do is edit the row, go into the background tab, remove that image and add a new image. You could add an image from your library, for example, this one, for example, that will add that image, which is quite nice.
You can hide that image on mobile if you want. You can change the background-position. For example, we've got this centre-centre, we could do centre-bottom, for example. That won't really work for this image, but let's say you had an image which had quite a lot of spacing at the top of the image. Let's try and find an image where that way this will work. Right, this one. So we're going to do center-center, which is the usual one you might use for an image.
But center-center for this particular image, her head is quite low down. So what you might want to do is change the position of that. So it's maybe center-bottom. It's maybe centre bottom. The woman is more positioned correctly.
If you were to do centre top, it would align it to the top of the page, but as there's a big space above her head, that wouldn't look very good. I'll show you what that looks like. That creates quite a big gap there, so you don't want to do that. I mean, positioning the image on thein the container is quite important to position that image correctly.
Let's position this in a better way. Okay, now a couple of other things you can do is you can do colour overlays. Now, this currently has an overlay of black and it's quite light.
The reason to do that is that if we remove the colour overlay, it brightens up the image a bit, but then the text that goes over the image may maybe more difficult to read because there's less contrast between the text and the image. So sometimes if you've got a very dark image, you don't need to do an overlay.
But if the image is a bit brighter or lighter, you might need to do an overlay. You could do just a black overlay, which basically makes the image slightly darker, or you could do a colour overlay. So if you know the Hex colour, you could do that, or if you just want to choose a colour using this colour picker, you could do that as well. That then adds this color and you can change the overlay strength.
So if we did heavy, for example, that adds quite a dark overlay, which would work sometimes if perhaps the image is a high contrast image, or perhaps you're going to have a lot of text over an image, and you just want a very faint image in the background just to add a little bit of interest to that section.
But I think for this particular part of the website, I don't think you would do that, but you might do it for other parts of the website. A couple of other things you can do is you could do a parallax, and then we could do that. I'm just going to remove this overlay. I'm just going to remove this overlay for a minute.
Okay, so for the overlay, you might put in two different images. For example, I don't know, one of the images would normally be transparent. If we do layer two, we could do this, for example. You could do layer three and so on. If we do that, it creates this. If we update this and have a look, it creates this power-lax effect when you move the mouse. So you have to have different images.
And usually, in order to see the movement, you'd have to have maybe the background image would be like a normal image, and then the one over the top might have a transparent background. Then you might do another one on top of that with another transparent background, and it all moves a bit like in a three-dimensional way. That's quite a nice effect.
And a couple of other things, animations. So if we get rid of the mouse, Parallax, and add in the background image without the Parallax, and then we go to animation, and we can do a background, Parallax on the background and do, say, medium. Save that. We updated that. Close this. What that does is when you move through the website, see how the image or the image sits behind the container.
And so when you move the mouse down the page, it's fixed in position. You can make that quite subtle or quite strong. We've got this on medium. That's another effect that you could do. Another thing you could do is we could remove that, but we could do a background animation.
So for example, we could do something like that. And you could see that just then. So what that means is when the image comes into view on the page, it will have this box animation coming out. Like that. So that's okay as well.
And finally, I mean, you can mess around with all of these settings, but you can also do shape dividers as well. I'll quickly show you how to do a shape divider. Let's get rid of this animation for now. It's all different types of shape divides, but for example, we could do this one and put that at the bottom and do 100 - save that, and close.
And then you can see it's added this shape divider here. So if we update the page, we can see that. Although we've got this element in front here just behind that where the image cuts across that, you can see you've got this shape here, and there's all different shapes as well.
That's a pretty neat effect. Rather than just having the image end in a line, you could have different shapes. There you go. Lots of different ways of adding images and doing lots of different effects on your website.
I hope you enjoyed watching it. Thank you.
Working with images
Ready to get started?
Ready to get started?
Hi, in this video, I'm going to show you how to edit your images, the images on your website, both background images and the images that are placed in the content itself.
Let's dive straight in. You can do that via the front-end builder. I'm just going to log into that. It takes a few seconds. Okay, great. Now, let's go down to this image here. So this is a single image. So if we float your cursor over the image, you'll see this green box appear. And if you click the Edit icon, you can see the images here.
So you could remove that, click Add Image, and you could upload an image to your media library from your computer if you have an image already on your computer. Or if you've previously uploaded an image, you can add it from here. So for example, we could just add this one, for example. Click Save Changes.
That image appears there. Or what you can do is you can use the instant images. We've integrated with Unsplash and Pixabay. Together, they have maybe a couple of million different images, and there are millions. The best way to find an image is to search for it using the Search bar here.
For example, you just type in happy people, and you can choose orientation to landscape, portrait or square. I think landscape will probably be good. We could just find an image. If you just keep on clicking, Load More. You'll just keep on loading all the images.
It's quite a nice one there. All you do is once you find the image you like, you just click it and it will download that image into your media library. Then you just click this button down here that says set image, and it will appear there.
Okay. A couple of options on the images. You can animate the image, so you can fade in from the bottom, for example, and that image will fade in from the bottom of the container. Or you could flip in vertically. It will do that.
There are lots of different things. I'm not a massive fan of image animations, but if you wanted to, you could do that. You can put animation delay there. Hover animation. For example, if someone hovers over that image, you could have a little animation. So like that, for example. And there are different ones like a colour overlay, then you could put the overlay colour in there.
If you know the Hex Code, you could do that, or you could just choose a colour. And that will do that. You could align that image left right or center. You could have a link to that image. So when someone clicks the image, it will link... Sorry, that will link to a larger image. We don't want to do that. We can just link the image to a URL.
So for example, the image could go to another part of the website if you put the URL in there. And the target is basically if it's the same window, a new window. So if someone clicks the image and it opens up the URL, will it open up a new tab on your browser, or will it just go to that page on the same window? Y
You can do a border-radius. So border-radius is like the curved edges around the image. So for example, if you do 20, for example, you'll see that the image has a larger radius of a curve there, or you could remove the radius. It's up to you. And you could have a shadow under the image. So for example, there's a small shadow around the image.
If you can see that, you can either delete that so there's no shadow to that, or you could put a very large shadow, for example. I'll put a very large shadow behind that. I quite like having a small shadow. And there's a few extra things here, but they're the main things there.
That's one of the main ways of adding images and manipulating the images. For background images on a row, for example, here, what you do is edit the row, go into the background tab, remove that image and add a new image. You could add an image from your library, for example, this one, for example, that will add that image, which is quite nice.
You can hide that image on mobile if you want. You can change the background-position. For example, we've got this centre-centre, we could do centre-bottom, for example. That won't really work for this image, but let's say you had an image which had quite a lot of spacing at the top of the image. Let's try and find an image where that way this will work. Right, this one. So we're going to do center-center, which is the usual one you might use for an image.
But center-center for this particular image, her head is quite low down. So what you might want to do is change the position of that. So it's maybe center-bottom. It's maybe centre bottom. The woman is more positioned correctly.
If you were to do centre top, it would align it to the top of the page, but as there's a big space above her head, that wouldn't look very good. I'll show you what that looks like. That creates quite a big gap there, so you don't want to do that. I mean, positioning the image on thein the container is quite important to position that image correctly.
Let's position this in a better way. Okay, now a couple of other things you can do is you can do colour overlays. Now, this currently has an overlay of black and it's quite light.
The reason to do that is that if we remove the colour overlay, it brightens up the image a bit, but then the text that goes over the image may maybe more difficult to read because there's less contrast between the text and the image. So sometimes if you've got a very dark image, you don't need to do an overlay.
But if the image is a bit brighter or lighter, you might need to do an overlay. You could do just a black overlay, which basically makes the image slightly darker, or you could do a colour overlay. So if you know the Hex colour, you could do that, or if you just want to choose a colour using this colour picker, you could do that as well. That then adds this color and you can change the overlay strength.
So if we did heavy, for example, that adds quite a dark overlay, which would work sometimes if perhaps the image is a high contrast image, or perhaps you're going to have a lot of text over an image, and you just want a very faint image in the background just to add a little bit of interest to that section.
But I think for this particular part of the website, I don't think you would do that, but you might do it for other parts of the website. A couple of other things you can do is you could do a parallax, and then we could do that. I'm just going to remove this overlay. I'm just going to remove this overlay for a minute.
Okay, so for the overlay, you might put in two different images. For example, I don't know, one of the images would normally be transparent. If we do layer two, we could do this, for example. You could do layer three and so on. If we do that, it creates this. If we update this and have a look, it creates this power-lax effect when you move the mouse. So you have to have different images.
And usually, in order to see the movement, you'd have to have maybe the background image would be like a normal image, and then the one over the top might have a transparent background. Then you might do another one on top of that with another transparent background, and it all moves a bit like in a three-dimensional way. That's quite a nice effect.
And a couple of other things, animations. So if we get rid of the mouse, Parallax, and add in the background image without the Parallax, and then we go to animation, and we can do a background, Parallax on the background and do, say, medium. Save that. We updated that. Close this. What that does is when you move through the website, see how the image or the image sits behind the container.
And so when you move the mouse down the page, it's fixed in position. You can make that quite subtle or quite strong. We've got this on medium. That's another effect that you could do. Another thing you could do is we could remove that, but we could do a background animation.
So for example, we could do something like that. And you could see that just then. So what that means is when the image comes into view on the page, it will have this box animation coming out. Like that. So that's okay as well.
And finally, I mean, you can mess around with all of these settings, but you can also do shape dividers as well. I'll quickly show you how to do a shape divider. Let's get rid of this animation for now. It's all different types of shape divides, but for example, we could do this one and put that at the bottom and do 100 - save that, and close.
And then you can see it's added this shape divider here. So if we update the page, we can see that. Although we've got this element in front here just behind that where the image cuts across that, you can see you've got this shape here, and there's all different shapes as well.
That's a pretty neat effect. Rather than just having the image end in a line, you could have different shapes. There you go. Lots of different ways of adding images and doing lots of different effects on your website.
I hope you enjoyed watching it. Thank you.
Working with images
Ready to get started?
Ready to get started?
Hi, in this video, I'm going to show you how to edit your images, the images on your website, both background images and the images that are placed in the content itself.
Let's dive straight in. You can do that via the front-end builder. I'm just going to log into that. It takes a few seconds. Okay, great. Now, let's go down to this image here. So this is a single image. So if we float your cursor over the image, you'll see this green box appear. And if you click the Edit icon, you can see the images here.
So you could remove that, click Add Image, and you could upload an image to your media library from your computer if you have an image already on your computer. Or if you've previously uploaded an image, you can add it from here. So for example, we could just add this one, for example. Click Save Changes.
That image appears there. Or what you can do is you can use the instant images. We've integrated with Unsplash and Pixabay. Together, they have maybe a couple of million different images, and there are millions. The best way to find an image is to search for it using the Search bar here.
For example, you just type in happy people, and you can choose orientation to landscape, portrait or square. I think landscape will probably be good. We could just find an image. If you just keep on clicking, Load More. You'll just keep on loading all the images.
It's quite a nice one there. All you do is once you find the image you like, you just click it and it will download that image into your media library. Then you just click this button down here that says set image, and it will appear there.
Okay. A couple of options on the images. You can animate the image, so you can fade in from the bottom, for example, and that image will fade in from the bottom of the container. Or you could flip in vertically. It will do that.
There are lots of different things. I'm not a massive fan of image animations, but if you wanted to, you could do that. You can put animation delay there. Hover animation. For example, if someone hovers over that image, you could have a little animation. So like that, for example. And there are different ones like a colour overlay, then you could put the overlay colour in there.
If you know the Hex Code, you could do that, or you could just choose a colour. And that will do that. You could align that image left right or center. You could have a link to that image. So when someone clicks the image, it will link... Sorry, that will link to a larger image. We don't want to do that. We can just link the image to a URL.
So for example, the image could go to another part of the website if you put the URL in there. And the target is basically if it's the same window, a new window. So if someone clicks the image and it opens up the URL, will it open up a new tab on your browser, or will it just go to that page on the same window? Y
You can do a border-radius. So border-radius is like the curved edges around the image. So for example, if you do 20, for example, you'll see that the image has a larger radius of a curve there, or you could remove the radius. It's up to you. And you could have a shadow under the image. So for example, there's a small shadow around the image.
If you can see that, you can either delete that so there's no shadow to that, or you could put a very large shadow, for example. I'll put a very large shadow behind that. I quite like having a small shadow. And there's a few extra things here, but they're the main things there.
That's one of the main ways of adding images and manipulating the images. For background images on a row, for example, here, what you do is edit the row, go into the background tab, remove that image and add a new image. You could add an image from your library, for example, this one, for example, that will add that image, which is quite nice.
You can hide that image on mobile if you want. You can change the background-position. For example, we've got this centre-centre, we could do centre-bottom, for example. That won't really work for this image, but let's say you had an image which had quite a lot of spacing at the top of the image. Let's try and find an image where that way this will work. Right, this one. So we're going to do center-center, which is the usual one you might use for an image.
But center-center for this particular image, her head is quite low down. So what you might want to do is change the position of that. So it's maybe center-bottom. It's maybe centre bottom. The woman is more positioned correctly.
If you were to do centre top, it would align it to the top of the page, but as there's a big space above her head, that wouldn't look very good. I'll show you what that looks like. That creates quite a big gap there, so you don't want to do that. I mean, positioning the image on thein the container is quite important to position that image correctly.
Let's position this in a better way. Okay, now a couple of other things you can do is you can do colour overlays. Now, this currently has an overlay of black and it's quite light.
The reason to do that is that if we remove the colour overlay, it brightens up the image a bit, but then the text that goes over the image may maybe more difficult to read because there's less contrast between the text and the image. So sometimes if you've got a very dark image, you don't need to do an overlay.
But if the image is a bit brighter or lighter, you might need to do an overlay. You could do just a black overlay, which basically makes the image slightly darker, or you could do a colour overlay. So if you know the Hex colour, you could do that, or if you just want to choose a colour using this colour picker, you could do that as well. That then adds this color and you can change the overlay strength.
So if we did heavy, for example, that adds quite a dark overlay, which would work sometimes if perhaps the image is a high contrast image, or perhaps you're going to have a lot of text over an image, and you just want a very faint image in the background just to add a little bit of interest to that section.
But I think for this particular part of the website, I don't think you would do that, but you might do it for other parts of the website. A couple of other things you can do is you could do a parallax, and then we could do that. I'm just going to remove this overlay. I'm just going to remove this overlay for a minute.
Okay, so for the overlay, you might put in two different images. For example, I don't know, one of the images would normally be transparent. If we do layer two, we could do this, for example. You could do layer three and so on. If we do that, it creates this. If we update this and have a look, it creates this power-lax effect when you move the mouse. So you have to have different images.
And usually, in order to see the movement, you'd have to have maybe the background image would be like a normal image, and then the one over the top might have a transparent background. Then you might do another one on top of that with another transparent background, and it all moves a bit like in a three-dimensional way. That's quite a nice effect.
And a couple of other things, animations. So if we get rid of the mouse, Parallax, and add in the background image without the Parallax, and then we go to animation, and we can do a background, Parallax on the background and do, say, medium. Save that. We updated that. Close this. What that does is when you move through the website, see how the image or the image sits behind the container.
And so when you move the mouse down the page, it's fixed in position. You can make that quite subtle or quite strong. We've got this on medium. That's another effect that you could do. Another thing you could do is we could remove that, but we could do a background animation.
So for example, we could do something like that. And you could see that just then. So what that means is when the image comes into view on the page, it will have this box animation coming out. Like that. So that's okay as well.
And finally, I mean, you can mess around with all of these settings, but you can also do shape dividers as well. I'll quickly show you how to do a shape divider. Let's get rid of this animation for now. It's all different types of shape divides, but for example, we could do this one and put that at the bottom and do 100 - save that, and close.
And then you can see it's added this shape divider here. So if we update the page, we can see that. Although we've got this element in front here just behind that where the image cuts across that, you can see you've got this shape here, and there's all different shapes as well.
That's a pretty neat effect. Rather than just having the image end in a line, you could have different shapes. There you go. Lots of different ways of adding images and doing lots of different effects on your website.
I hope you enjoyed watching it. Thank you.
Working with images
Ready to get started?
Ready to get started?
Hi, in this video, I'm going to show you how to edit your images, the images on your website, both background images and the images that are placed in the content itself.
Let's dive straight in. You can do that via the front-end builder. I'm just going to log into that. It takes a few seconds. Okay, great. Now, let's go down to this image here. So this is a single image. So if we float your cursor over the image, you'll see this green box appear. And if you click the Edit icon, you can see the images here.
So you could remove that, click Add Image, and you could upload an image to your media library from your computer if you have an image already on your computer. Or if you've previously uploaded an image, you can add it from here. So for example, we could just add this one, for example. Click Save Changes.
That image appears there. Or what you can do is you can use the instant images. We've integrated with Unsplash and Pixabay. Together, they have maybe a couple of million different images, and there are millions. The best way to find an image is to search for it using the Search bar here.
For example, you just type in happy people, and you can choose orientation to landscape, portrait or square. I think landscape will probably be good. We could just find an image. If you just keep on clicking, Load More. You'll just keep on loading all the images.
It's quite a nice one there. All you do is once you find the image you like, you just click it and it will download that image into your media library. Then you just click this button down here that says set image, and it will appear there.
Okay. A couple of options on the images. You can animate the image, so you can fade in from the bottom, for example, and that image will fade in from the bottom of the container. Or you could flip in vertically. It will do that.
There are lots of different things. I'm not a massive fan of image animations, but if you wanted to, you could do that. You can put animation delay there. Hover animation. For example, if someone hovers over that image, you could have a little animation. So like that, for example. And there are different ones like a colour overlay, then you could put the overlay colour in there.
If you know the Hex Code, you could do that, or you could just choose a colour. And that will do that. You could align that image left right or center. You could have a link to that image. So when someone clicks the image, it will link... Sorry, that will link to a larger image. We don't want to do that. We can just link the image to a URL.
So for example, the image could go to another part of the website if you put the URL in there. And the target is basically if it's the same window, a new window. So if someone clicks the image and it opens up the URL, will it open up a new tab on your browser, or will it just go to that page on the same window? Y
You can do a border-radius. So border-radius is like the curved edges around the image. So for example, if you do 20, for example, you'll see that the image has a larger radius of a curve there, or you could remove the radius. It's up to you. And you could have a shadow under the image. So for example, there's a small shadow around the image.
If you can see that, you can either delete that so there's no shadow to that, or you could put a very large shadow, for example. I'll put a very large shadow behind that. I quite like having a small shadow. And there's a few extra things here, but they're the main things there.
That's one of the main ways of adding images and manipulating the images. For background images on a row, for example, here, what you do is edit the row, go into the background tab, remove that image and add a new image. You could add an image from your library, for example, this one, for example, that will add that image, which is quite nice.
You can hide that image on mobile if you want. You can change the background-position. For example, we've got this centre-centre, we could do centre-bottom, for example. That won't really work for this image, but let's say you had an image which had quite a lot of spacing at the top of the image. Let's try and find an image where that way this will work. Right, this one. So we're going to do center-center, which is the usual one you might use for an image.
But center-center for this particular image, her head is quite low down. So what you might want to do is change the position of that. So it's maybe center-bottom. It's maybe centre bottom. The woman is more positioned correctly.
If you were to do centre top, it would align it to the top of the page, but as there's a big space above her head, that wouldn't look very good. I'll show you what that looks like. That creates quite a big gap there, so you don't want to do that. I mean, positioning the image on thein the container is quite important to position that image correctly.
Let's position this in a better way. Okay, now a couple of other things you can do is you can do colour overlays. Now, this currently has an overlay of black and it's quite light.
The reason to do that is that if we remove the colour overlay, it brightens up the image a bit, but then the text that goes over the image may maybe more difficult to read because there's less contrast between the text and the image. So sometimes if you've got a very dark image, you don't need to do an overlay.
But if the image is a bit brighter or lighter, you might need to do an overlay. You could do just a black overlay, which basically makes the image slightly darker, or you could do a colour overlay. So if you know the Hex colour, you could do that, or if you just want to choose a colour using this colour picker, you could do that as well. That then adds this color and you can change the overlay strength.
So if we did heavy, for example, that adds quite a dark overlay, which would work sometimes if perhaps the image is a high contrast image, or perhaps you're going to have a lot of text over an image, and you just want a very faint image in the background just to add a little bit of interest to that section.
But I think for this particular part of the website, I don't think you would do that, but you might do it for other parts of the website. A couple of other things you can do is you could do a parallax, and then we could do that. I'm just going to remove this overlay. I'm just going to remove this overlay for a minute.
Okay, so for the overlay, you might put in two different images. For example, I don't know, one of the images would normally be transparent. If we do layer two, we could do this, for example. You could do layer three and so on. If we do that, it creates this. If we update this and have a look, it creates this power-lax effect when you move the mouse. So you have to have different images.
And usually, in order to see the movement, you'd have to have maybe the background image would be like a normal image, and then the one over the top might have a transparent background. Then you might do another one on top of that with another transparent background, and it all moves a bit like in a three-dimensional way. That's quite a nice effect.
And a couple of other things, animations. So if we get rid of the mouse, Parallax, and add in the background image without the Parallax, and then we go to animation, and we can do a background, Parallax on the background and do, say, medium. Save that. We updated that. Close this. What that does is when you move through the website, see how the image or the image sits behind the container.
And so when you move the mouse down the page, it's fixed in position. You can make that quite subtle or quite strong. We've got this on medium. That's another effect that you could do. Another thing you could do is we could remove that, but we could do a background animation.
So for example, we could do something like that. And you could see that just then. So what that means is when the image comes into view on the page, it will have this box animation coming out. Like that. So that's okay as well.
And finally, I mean, you can mess around with all of these settings, but you can also do shape dividers as well. I'll quickly show you how to do a shape divider. Let's get rid of this animation for now. It's all different types of shape divides, but for example, we could do this one and put that at the bottom and do 100 - save that, and close.
And then you can see it's added this shape divider here. So if we update the page, we can see that. Although we've got this element in front here just behind that where the image cuts across that, you can see you've got this shape here, and there's all different shapes as well.
That's a pretty neat effect. Rather than just having the image end in a line, you could have different shapes. There you go. Lots of different ways of adding images and doing lots of different effects on your website.
I hope you enjoyed watching it. Thank you.