0:00
Hello everyone, welcome to K2 blogging and today we will discuss about the latest advanced
0:04
image block that was introduced in Cadence block. So Cadence block is a free Gutenberg page builder that you can use to design your WordPress website
0:14
So by default, if you add the image through WordPress image block, we don't have that
0:21
much customization options. But if you use the advanced image block, you can do image customization very smoothly
0:30
So let me show you how it works. So before that, let me just go to the plugin section
0:38
And here you have to update your Cadence block plugin to 2.2.0
0:43
After that you will get the advanced image block. So let me just go to the pages section and let me just create a new page
0:52
And let me just add a row layout like this, and here I will add the image and I will click
1:00
on media library and let's choose an image like this. Now I would set it to default and let me just change it to align center
1:14
Now you have to change the image to advanced image. Now scroll down and let me just add a background color to this section
1:24
So I will click on row layout and let me just add a background color like this
1:31
So let's click on image and let's click on spacing setting and let me just add a top
1:39
padding of 10 and a bottom padding of 10 and we will add a left and right padding of 10
1:49
And as you can see, the padding is added or you can also select this option and increase
1:55
the padding equally like this. And you can also add a margin from the top like let me just add a margin of 50
2:06
So here you will get more customization option like padding and margin
2:11
Now click on border setting and I can add a border. So before that, let me just remove the padding and let's add a border width
2:21
So from the top, I will add a border of five pixel or I can click on here and I will add
2:28
the border equally. So let me just set it to 11 pixel and here you can change the border color like this
2:40
And you can also change the background color. Now you can also add the border radius like I can add a border radius of 10 and in the
2:49
right, I will add a border radius of 20 like this. And in the same way, you can add border radius to each of the site
3:00
So in the previous image block that we get in WordPress, we don't have the option to
3:05
add border radius. And here you can add a padding margin or you can also add the border radius and you can
3:12
also add a link to this image. So when someone click on the image, it will redirect to that link
3:19
And you can also add a shadow like you can click on box shadow
3:24
So let me just remove this background color from here so that you will see the box shadow
3:30
effect clearly. So I will click on shadow setting and here you can add a X axis shadow and Y axis shadow
3:39
like this. So let's remove the border
3:48
And as you can see, the box shadow is added here. You can also add a drop shadow instead of box shadow
3:56
And here you can control the X axis and Y axis. So it is very easy now to add box shadow to images
4:06
And you can also add mask effect to the image. So click on mask and let me just change it to diamond shape or I can change it to like
4:16
rounded corner or I can set it to hexagon. So you will get a lot of options like the blob 1, blob 2
4:27
So it will help you add images in your hero section or any other section with a different style
4:34
So I will consider the mask setting is a very lifesaver. And you can also add a custom mask and add your own image overlay within a image
4:46
So I will select blob 1 and here you can also add caption setting and you can change the
4:53
font size of caption, line height, letter spacing, etc. and can also get image filter
5:01
So let me just click on grayscale or you can add a saturation or you can add a vintage
5:07
style image filter. So in this way, you can add image filter to your image and can also add animation on scroll
5:16
like fade up fade down. So here with the latest image block, you will get a lot of options
5:24
So in this way, you can use the advanced image block using the cadence block plugin and you
5:29
will get a lot of customization options to your image. And you can easily get this by clicking on the advanced image block
5:38
So let me just click on remove and click on plus icon and click on browse all and here
5:44
you will see this option advanced image. So click on it and select the image from your browser
5:51
So let me just click on media library and let me just add another image like this
5:58
And you can now customize your image. I hope this tutorial help you understand how the advanced image block works in the cadence
6:08
block plugin. And if you have any doubt regarding this, then you can ask me in the comment section
6:13
and don't forget to hit the like button and subscribe to our channel for more upcoming
6:18
videos like this. And I will see you in the next video
