How to Create an Affiliate Product Box With Kadence Blocks [FREE]

StartBlogging101 - WordPress Without Page Builders

Подписаться 3,1 тыс.

Просмотров 8 тыс.

50% 1

In this WordPress tutorial, I'll teach you how to create a beautiful affiliate product box with the free version of Kadence Blocks which will increase your conversion rates and generate more affiliate commissions.
You can use this affiliate product box to embed a product image from Amazon Affiliates (Amazon Associates) or you can use your own product image.
Also, if you don't want to build the affiliate product box yourself, you can import this exact design with 1-click using the free version of Start Blogging Blocks.
Get your free license key here 👉 startbloggingblocks.com/
Follow along with the blog post 👉 startblogging101.com/affiliat...
Table of Contents
0:00 Intro
0:32 Blog Post Tutorial
0:50 Product Box Preview
1:33 Import Product Box For Free
3:44 Top-Level Container
7:02 Inner Structure
8:19 Our Pick Callout
12:15 Product Image
14:39 Product Title
15:16 Product Description
15:46 Product Button
18:42 Desktop & Mobile Preview
20:13 Outro
**************************
LINKS:
👉 Start Blogging Blocks: startbloggingblocks.com/
🖥 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’d love it if you joined 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!
#kadence #kadenceblocks #amazonaffiliate

Опубликовано:

10 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 47

@peak196 2 года назад

Very nice, thanks. I like the negative margin trick to move that Our Pick label up. A very interesting next step would be to turn this into a template somehow. If using this on hundreds of pages I want to be able to change the design in once central place and have it applied site wide.

@StartBlogging101 2 года назад

Hey, thanks! The negative margin is pretty nifty, huh? :) Yeah, I do agree with you. Obviously using Start Blogging Blocks helps where you can import a "wireframe" template of this exact block with one click on every page. You could also potentially use reusable blocks to save the "template" as a reusable block, but that might get a little complex. I don't believe that there is an ETA yet, but the Kadence team has mentioned creating a design system for Kadence Blocks where you would have global styles that you could use across your site which I believe is what you're referring to. That would be really nice!

@dinorossi6611 Год назад

Awesome tut

@ryankernus 10 месяцев назад

Tremendously helpful! Thank you!

@StartBlogging101 10 месяцев назад

Awesome to hear!! Thanks for watching :)

@user-uu9co8pn2q Год назад

Great video and thanks so much for all the detailed tips.

@StartBlogging101 Год назад

You are so welcome! Happy to help :)

@crediteddy 2 года назад

Thanks for an awesome free tutorial, on Kadence Jake! I feel like I should have to pay to watch this 😅

@StartBlogging101 2 года назад

Haha gotta keep giving out that free value!

@edywerder 2 года назад

Thanks you are a great explainer.

@StartBlogging101 2 года назад

Thanks much, Edy! Glad to hear it was easy to understand.

@SuzJCD Год назад

This was so helpful, thank you! The only problem I had was that the "Our Pick" box was on a white background that covered the top border of the box and I just couldn't find a way round it. In the end I just moved the Our Pick box down so it was below the border, so the full border showed. It doesn't look as pretty as yours but it was the best this newbie could figure out!

@StartBlogging101 Год назад

Glad the video helped! Sounds like you found a good workaround :)

@twist-make-twist Год назад

Thank You ❤

@StartBlogging101 Год назад

You're welcome 😊

@Akuneme 11 месяцев назад

Great video and a nice teaching style. Thanks for the effort you put in. I want to ask if this can be saved as a template and reused instead of creating from scratch when ever I need it.

@StartBlogging101 11 месяцев назад

The easiest way right now is just to get a free license from Start Blogging Blocks which has this template already built and you can easily import it with one click on any page or post that you'd like: startbloggingblocks.com/free With WordPress 6.3, it looks like there are some changes to patterns coming that may help make it easier to save off this template for reuse, but we'll have to see once it's released in about a week!

@XiaoMoSecretGarden 11 месяцев назад

You are a really life saver, love your channel and love your teaching style. I purchased the full bundle but could not find the product box, can you advise where I can find those.

@StartBlogging101 11 месяцев назад

Hey there! The Kadence Full Bundle is separate from Start Blogging Blocks. This affiliate product box is a free template we offer with SB Blocks. All you have to do is get your free license here: startbloggingblocks.com/free/ Then connect to our cloud with your free license and you'll have it!

@jenoa4476 Год назад

Thanks for this great tutorial. Is there anyway to get rounded corners for the "our pick" callout?

@StartBlogging101 11 месяцев назад

Yep! Click on the "Our Pick" callout and in the block settings of the Advanced Text block, go to the "Style" tab, open the "Border Settings" and add a border radius which will round the corners :)

@neutron1617 7 месяцев назад

Nice video! I wanted to know if i am using only one image that is featured image. Can i just use button in content and not use any product image or something does it have any issue with amazon affiliate policies or its fine.

@MatthewMarley 9 месяцев назад

Is there a way you can save these so you can reuse them and change the content based on the post?

@ericnisall 2 года назад

(I asked on the website but it looks like there is a long delay there) Thanks for the great content Jake! I'm curious as to how you get the TOC block to ignore the H3 tags you create in these blocks since you have the 2-4 being used in the TOC tutorial?

@StartBlogging101 2 года назад

Hey Eric! Glad you're enjoying the content :) You can't individually turn off certain headings in the TOC block since they're all dynamically read in. But if you don't want the product title to show up in your TOC, you can simply click on the Advanced Text block used for the title and change it from an H3 to a paragraph. Then, you can make the font size bigger and bold it so it still looks like a heading, but it's just a paragraph under the hood. Does that make sense?

@ericnisall 2 года назад

@@StartBlogging101 that makes total sense and something I tried. What I ended up doing was to leave it as the H3 to try and take advantage of the heading SEO on the pages, and turned off the H3 on the TOC

@notanotherbackpacker 6 месяцев назад

Thank you for the detailed video! I followed your instructions (although the settings look slightly different on my Kadence version) but I can't seem to get the "Our pick" section to move. I moved it to the top of the box but it's stuck in the center and doesn't shift to the left even when I change the setting to horizontal. Do you have any idea what I could have done wrong?

@StartBlogging101 6 месяцев назад

Hey there! Glad you liked the video. The reason the settings look slightly different is because Kadence Blocks v3 came out since I made this video which changed the look/location of some of the settings, but they should still all be there! Hmm, unfortunately I don't know what might be going on without seeing the editor itself. Do you have the section block chosen when trying to move it rather than the "Advanced Text" block?

@notanotherbackpacker 6 месяцев назад

@@StartBlogging101 Thank you so much for the response! Yes, I have the section block chosen when trying to move it. Once I click on "horizontal", the "our pick" box moves to the left-hand corner in the editor but in the preview, it still shows it to be in the center.

@umarkhalid2285 Год назад

Awesome. Just after this video, I create a bunch of Affiliate Product Tables. I like to know how you assign Labels to Row Layout & Section?

@StartBlogging101 11 месяцев назад

If you want labels to show next to your blocks in the "List View," you can go to the Row Layout/Section blocks and under the "Advanced" tab, add an HTML anchor which will add a label in the List View. That being said, with Kadence Blocks 3.1 coming, the Kadence Team has said there will be an even better way to rename blocks.

@umarkhalid2285 11 месяцев назад

@@StartBlogging101 Thanks :-)

@StartBlogging101 11 месяцев назад

@@umarkhalid2285 No problem :)

@Tyler-Kort 7 месяцев назад

For some reason the link button is missing from my advanced text paragraph. Do you know how I can get this back?

@StartBlogging101 7 месяцев назад

Hey Tyler! I saw your post in the Kadence FB group. Looks like the Kadence team got it sorted out - good catch!

@megan2825 Год назад

I signed up for the free templates (awesome! Thanks!) and added the product one you describe in this video. It worked fine...until I refreshed while editing. Then I got "Your site doesn’t include support for the "kadence/rowlayout" block. You can leave this block intact, convert its content to a Custom HTML block, or remove it entirely." Do you have any idea how I fix this? I DO have kadence blocks so I'm not sure what is happening. It looked so awesome before the error!

@megan2825 Год назад

nevermind! I hassled over it for a bit, refreshed again, and it worked. Must have been a glitch with wordpress

@StartBlogging101 11 месяцев назад

Hey Megan! Glad to hear you got it sorted out :) Thanks for watching!

@babyyoda2219 11 месяцев назад

What about using the Amazon sitestripe links for images? They are HTML, not direct image links

@StartBlogging101 11 месяцев назад

That's covered in the video :) Check out the "Product Image" section around the 12:33 mark to learn how to add a custom HTML code for your Amazon image.

@barsk76 10 месяцев назад

Do you have Prod and Cons blocks for affiliate marketing? Thanks in advance

@StartBlogging101 10 месяцев назад

Hey! Yep, we have several free and pro designs for Pros and Cons boxes :) startbloggingblocks.com/pros-and-cons-block/

@barsk76 10 месяцев назад

Thank you. They look awesome 🤙🤙@@StartBlogging101

@StartBlogging101 10 месяцев назад

@@barsk76 Awesome to hear! Glad you like them :)

@neutron1617 7 месяцев назад

Can we put prices direct from amazon so it automatically updates

@StartBlogging101 7 месяцев назад

No, that would require using the Amazon API to pull the updated prices directly from them. I like using a button that says "Check Price on Amazon" - it works great!

@neutron1617 7 месяцев назад

Like if i want to write about deals and percentage off on a certain product so could be the strategy. Can i write mention exact sale price and how much discounts are being offered?