Kadence Blocks - NEW Advanced Image Block Tutorial (+ Features)
ฝัง
- เผยแพร่เมื่อ 30 ก.ค. 2024
- In this tutorial, I'll teach you exactly how to use the new Advanced Image block in Kadence Blocks to make your WordPress site even more beautiful and creative than ever.
Best of all, the Advanced Image block is available in the free Kadence Blocks plugin.
TABLE OF CONTENTS
0:00 Intro
0:28 Core Gutenberg Image Block
1:18 Transform to Advanced Image Block
1:56 Image Settings
2:58 Spacing Settings
3:45 Border Settings
4:21 Link Settings
4:43 Shadow Settings
6:30 Mask Settings
7:34 Caption Settings
8:33 Image Filter
9:24 Outro
First, I'll go over the core Gutenberg image block and how it differs from the Kadence Blocks Advanced Image block.
Then, I'll go into each of the settings within the Advanced Image block and show you how powerful it is. The various settings I'll go over are image, spacing, borders, links, shadows, masks, captions, and image filters.
**************************
LINKS:
🖥 Recommended Hosting: startblogging101.com/hosting/
☁️ Cloudways - Fastest hosting and easiest to pass Core Web Vitals - Use Vultr HF server: startblogging101.com/cloudways
📈 FREE 7 Days to WordPress Speed Mastery Email Course: startblogging101.com/wordpres...
💰 Kadence Discount Code: 10% OFF any bundle using code SB10OFF
✅ Kadence Full Bundle: Includes Kadence Theme Pro + Kadence Blocks Pro + Kadence Cloud + Membership-Only Starter Templates and much more: startblogging101.com/kadence-... (10% OFF Use Code SB10OFF)
✅ Kadence Theme Pro: startblogging101.com/kadence-pro (10% OFF Use Code SB10OFF)
✅ Free Kadence Theme download: startblogging101.com/kadence
I invite you to join my completely free Start Blogging 101 Community Facebook Group which is a group of rockstar individuals who are passionate about building fast, profitable WordPress sites with Gutenberg. Come join and say hi!
👋 Start Blogging 101 Facebook Community: / startblogging101
👉 Start Blogging 101 Facebook Page: / startblogging101
**************************
My channel is supported by my viewers. If you purchase through a link in my description, I may earn a commission which allows me to continue providing tutorials and content for all of you. I appreciate all your support!
#kadencetheme #kadenceblocks #kadenceblockstutorial
![เบิ้ล ปทุมราช - อ้ายกินดอง น้องลาบงัว ft. สแน็ก อัจฉรีย์ [OFFICIAL MV]](http://i.ytimg.com/vi/-OK--KaSPcI/mqdefault.jpg)
Thanks for covering all the new features of this new block.
Happy to help!
Thank you, Jake! I have to say, the announcement of this block slipped past me. I’ve been waiting for this too!
You're welcome, David! This is a huge step in the right direction for images in WordPress.
Thank you Jake, have a great and safe weekend.
Appreciate it as always, Byron!
Wonderful tutorial!
Thank you! Cheers!
Thank you for your video. It would be so awesome if you can talk about the WP 5.9 that is landing in 10 days - it is literally a revolutin - with all the great features: Imagine the community needs some amazing, clear and concise educational videos.
keep up the great work
Glad you liked the video, Martin! I never did make a video for WP 5.9, but there are some good ones out there. I'm excited to see WordPress move in a positive direction with every major release. Can't wait to see what the future holds.
Adding this Advanced Image Block to the free version of Kadence Blocks was a brilliant move. People are going to install Kadence Blocks just for this block and be exposed to the rest of the blocks. I predict they sell more Pro licenses just because of this block.
Apologize for the late response, Tim! But yes, I agree. That's been Kadence's model ever since they released their theme. TONS of free features and functionality and then offering Pro licenses with additional functionality for the cherry on top.
Thanks Jake be safe and move forward for the WP community
Thanks, Manu! Constantly striving to push the WP community forward :)
Hi, thanks for the video; explained a lot. But still not sure how to add an 'attachment page' for linking images?
Very nice tutorial, but I miss the Lightbox switch that is part of the core Gutenberg image block? Do you know why it's left out?
Yes, but how do you re-size the blob shape? My image with the blob shape is too big, I have 4 various blob shapes but I want them to all be the same size and several size down.
I've seen some people have their images set to being full-width, but only on mobile, but I can't figure out how to do that
Thanks for this. I was hoping you would know how to make images overlap each other. Do you have a tutorial for that?
Hi Kelly! I don't have a tutorial for that, but it should be pretty simple. If you add two Advanced Images next to each other, you can just use negative margin to "pull" one of the images over and have it overlap the other image. That should work at least. Let me know!
Nice video...question....images on wordpress always get a lot of discussion....what about uploading only the images you are going to use in a particular place? srcset is one of the solutions but implementing that with your own info.....not so easy...any recommendations?
Nice tutorial, thanks! Here’s a general question that applies to other blocks as well as the image block: what’s the best way to apply your settings to other blocks, on the same page or globally,, in such a way that settings can be changed across multiple instances? If you employ a pattern or a reusable block (and convert it into a regular block to change the source image), you loose the capability to make global changes. Thanks again for your work, I’m subscribed!
Hey Greg! Thanks for the comment and the question. Hopefully I'm understanding your question correctly - Kadence Blocks has a "default block settings" section for blocks where you can go and globally change the settings for different blocks so that all of your default settings are inherited each time that you add that block across pages. That being said, only a subset of their blocks have the default settings available to them. I don't know if the Advanced Image block is added in the default settings list yet, but I'm sure it will be there at some point. I hope that helps. If I misunderstood, please let me know!
@@StartBlogging101 Thanks, I didn’t know that!
Thanks for the video, Jake. Very helpful!
Do you know how to make custom mask shapes, and how to add them to Kadence? I wonder how this works, which is shown at 7:09.
I haven't personally used it yet, but there are a number of tutorials out there on how to create a mask image in a tool such as Adobe Illustrator. You could also search for mask images that others have made (various shapes) and grab one of those and upload it to your site and choose it to have your image take that shape. Hopefully that helps a bit!
I've designed a Header I like on one of my websites. I would like to be able to use the same Header on other websites. I cannot find a way to export the Header with all its settings (Desktop and mobile)... Can you suggest a solution ?
Thanks Jake for the heads up! Need some help though. My website seems to nolonger fit on screens it brings about a horizontal scroll on different desktop and on mobile. How can I make the elements fit automatically again
Hi Kityo! Did this happen after adding an Advanced Image block or some other time? I would get in contact with Kadence support and see if they can figure out which element may be overflowing and causing a horizontal scroll. It's hard to tell without having anything to look at.
Sorry off topic, but I'm at my wits end. I would like to put text over a header photo. I do not want to use the Cover Block as it does not maintain the same aspect ratio over different devices. An Advanced photo in a section will maintain the same aspect ratio over devices. In the past I have used Negative margin (on text in a row below the photo) to move the text over the photo but this is a very clunky way to do it. Do you have any insights into a better way ?
Thanks for this tutorial, pls how can I get this is a plugin? If it is what's the name so that I can download it
The plugin is called "Kadence Blocks" and can be found in the WordPress repo otherwise there is a pro version as well which gives you even more blocks and extra functionality. startblogging101.com/kadence-blocks
The only pity is that the new block does not work correctly. Border rounding works only in the editor, it is not on the preview. Shadows don't work with shapes. This block is still raw, I hope all this will be corrected soon.
And, of course, a huge thanks to the team for another free block.
There were a few glitches when it was first released that I noticed but the Kadence team has always been quick to correct them, so things should be good now.