- 59
- 36 609
BoldBlocks - Power Up WordPress Gutenberg
เข้าร่วมเมื่อ 18 เม.ย. 2022
Let’s make Gutenberg the first choice for developers to build WordPress sites.
Repeater blocks are the best way to display repeating content in WordPress Gutenberg using CBB
In this video, we use the Content Blocks Builder plugin to build a repeater block to display a grid of repeating content similar the feature grid on the gumroad.com site.
#wordpress #gutenberg #wordpresstutorial #blockeditor #wordpressplugin #contentblocksbuilder #boldblocks #wordpresswebsite #cbb #block #blocks #blog #grid #gridlayout #gumroad #repeater
---------------------
Get this plugin free here wp.org/plugins/content-blocks-builder
How to install CBB th-cam.com/video/wMTN0WpapPw/w-d-xo.html
Website contentblocksbuilder.com
---------------------
© Copyright by BoldBlocks
0:00 Introduction
1:39 Start to create the block
2:19 Enable the repeater setting
2:45 Create the default variation
5:00 Turn on the synced block overrides setting
6:12 Add a custom CSS variable for item backgrounds
8:26 Make buttons align at the bottom
8:52 Add hover styles
#wordpress #gutenberg #wordpresstutorial #blockeditor #wordpressplugin #contentblocksbuilder #boldblocks #wordpresswebsite #cbb #block #blocks #blog #grid #gridlayout #gumroad #repeater
---------------------
Get this plugin free here wp.org/plugins/content-blocks-builder
How to install CBB th-cam.com/video/wMTN0WpapPw/w-d-xo.html
Website contentblocksbuilder.com
---------------------
© Copyright by BoldBlocks
0:00 Introduction
1:39 Start to create the block
2:19 Enable the repeater setting
2:45 Create the default variation
5:00 Turn on the synced block overrides setting
6:12 Add a custom CSS variable for item backgrounds
8:26 Make buttons align at the bottom
8:52 Add hover styles
มุมมอง: 29
วีดีโอ
Build a Query Loop variation to display a magazine grid layout blog in WordPress Gutenberg with CBB
มุมมอง 4421 วันที่ผ่านมา
In this video, we use the Content Blocks Builder plugin to build a variation in magazine-style layout for the Query Loop block directly in the Block Editor. #wordpress #gutenberg #wordpresstutorial #blockeditor #wordpressplugin #contentblocksbuilder #boldblocks #wordpresswebsite #cbb #block #blocks #blog #grid #gridlayout #variations #magazine Get this plugin free here wp.org/plugins/content-bl...
Replicate a website with Sticky Header, Overlay Video, Parallax, Animations in WordPress Gutenberg
มุมมอง 157หลายเดือนก่อน
In this video, I challenged myself to replicate a real-world website bobdylanart.com using the CBB Pro plugin and the Twenty Twenty-Five theme within an hour. It's a long video, so you can use the chapters to jump to the part you are interested in. This video is inspired by the WordPress Speed Build series from www.youtube.com/@UC8uTMlOeXtwxstq8UPjHgTw and www.youtube.com/@UCpJf6LGZ0a4n9Lj4aVt9...
How to create a masonry image gallery with lightbox in WordPress Gutenberg with the CBB plugin
มุมมอง 59หลายเดือนก่อน
The video guide for creating a masonry image gallery with lightbox for WordPress websites using the Content Blocks Builder plugin from wordpress.org #wordpress #gutenberg #wordpresstutorial #blockeditor #wordpressplugin #contentblocksbuilder #boldblocks #wordpresswebsite #blocks #block #gallery #imagegallery #lightbox #lightboxes #masonry #image #images Learn more about CBB custom blocks conten...
How to create a sticky header in WordPress Gutenberg using the CBB plugin with three different ways
มุมมอง 1575 หลายเดือนก่อน
The video guide for creating a sticky header for WordPress websites using the Content Blocks Builder plugin from wordpress.org #wordpress #gutenberg #wordpresstutorial #blockeditor #wordpressplugin #contentblocksbuilder #boldblocks #wordpresswebsite #blocks #block #mega #menu #sticky #header How to create a header with mega menu with CBB: th-cam.com/video/kHmaZ2-8v1Q/w-d-xo.html Learn more abou...
Create blocks, repeater blocks with the synced block overrides feature using CBB plugin - WordPress
มุมมอง 3156 หลายเดือนก่อน
The video guide for creating a card block, a grid repeater block, and a carousel repeater block of card blocks using the Content Blocks Builder WordPress plugin. #wordpress #gutenberg #wordpresstutorial #blockeditor #wordpressplugin #contentblocksbuilder #boldblocks #wordpresswebsite #blocks #block #carddesigns #carddesign #repeater #repeaters Learn more about CBB custom blocks contentblocksbui...
The best way to display ACF Custom Fields in WordPress Gutenberg - Meta Field Block Pro
มุมมอง 1.6K8 หลายเดือนก่อน
The video guide to use the MFB Pro plugin to display custom fields created by the Advanced Custom Fields plugin. #acf #mfb #customfields #block #blockeditor #boldblocks #gutenberg #wordpress #wordpressplugin #wordpresstutorial Website metafieldblock.com Get this plugin free here wp.org/plugins/display-a-meta-field-as-block Try MFB Pro for free try.metafieldblock.com ACF advancedcustomfields.com...
How to add a Mega Menu to your WordPress website in Gutenberg using the CBB plugin
มุมมอง 2968 หลายเดือนก่อน
The video guide for creating a Mega Menu for WordPress websites using the Content Blocks Builder plugin from wordpress.org #wordpress #gutenberg #wordpresstutorial #blockeditor #wordpressplugin #contentblocksbuilder #boldblocks #wordpresswebsite #blocks #block #mega #menu Learn more about CBB custom blocks contentblocksbuilder.com/documentation/custom-blocks/ Get this plugin free here wp.org/pl...
How to create a block to display a card style posts section with hover effect in Gutenberg with CBB
มุมมอง 564ปีที่แล้ว
The video guide for creating a custom block for displaying a featured posts section in the Gutenberg Block Editor using the Content Blocks Builder plugin from wordpress.org #wordpress #gutenberg #wordpresstutorial #blockeditor #wordpressplugin #contentblocksbuilder #boldblocks #wordpresswebsite #blocks #block Learn more about CBB custom blocks contentblocksbuilder.com/documentation/custom-block...
How to create a custom Gutenberg block for displaying a banner slider using the WordPress CBB plugin
มุมมอง 1Kปีที่แล้ว
The video guide for creating a custom block for displaying a Banner Slider in the Gutenberg Block Editor using the Content Blocks Builder plugin from wordpress.org #wordpress #gutenberg #wordpresstutorial #blockeditor #wordpressplugin #contentblocksbuilder #boldblocks #wordpresswebsite #carousels #banner #slider #blocks #block Learn more about CBB custom blocks contentblocksbuilder.com/document...
Create magazine blog layouts using just one Query Loop block with the CBB WordPress plugin Gutenberg
มุมมอง 239ปีที่แล้ว
The video guide for using the Query Loop variations in Gutenberg with the Content Blocks Builder plugin. #wordpress #gutenberg #wordpresstutorial #blockeditor #wordpressplugin #contentblocksbuilder #boldblocks #wordpresswebsite #cbb #block #blocks #blog #grid #gridlayout #carousels #slideshow #variations Get this plugin free here wp.org/plugins/content-blocks-builder How to install CBB th-cam.c...
How to create a toggle search box in Gutenberg using the new popover toggle feature with CBB plugin
มุมมอง 287ปีที่แล้ว
The video guide for creating a toggle search box in the Gutenberg Block Editor using the Content Blocks Builder plugin. #wordpress #gutenberg #wordpresstutorial #blockeditor #wordpressplugin #contentblocksbuilder #boldblocks #wordpresswebsite #cbb #modal #popup #toggle #searchbar #searchbox #popover How to create modal, off-canvas layouts in Gutenberg step-by-step th-cam.com/video/y31TAKHZOD0/w...
How to create a button with the glow hover effect in Gutenberg using CBB plugin - WordPress
มุมมอง 650ปีที่แล้ว
The video guide for creating button variation with the glow hover effect in Gutenberg using CBB #wordpress #gutenberg #wordpresstutorial #wordpresswebsite #blockeditor #wordpressplugin #contentblocksbuilder #cbb #boldblocks #block #blocks #cbbvariationlibrary #button #animation #blockvariation Get this plugin free here wp.org/plugins/content-blocks-builder How to install CBB th-cam.com/video/wM...
How to add a related posts section and title bar with CBB plugin in Gutenberg - WordPress
มุมมอง 271ปีที่แล้ว
The video guide for adding a related posts section and a title bar to the single post template in the Gutenberg Block Editor with the Content Blocks Builder plugin. Part 1: How to set up the main blog page th-cam.com/video/aHy3spQVBGc/w-d-xo.html #wordpress #gutenberg #wordpresstutorial #blockeditor #wordpressplugin #contentblocksbuilder #boldblocks #wordpresswebsite #cbb #block #blocks #blog #...
How to build a custom blog page using the Content Blocks Builder plugin in Gutenberg - WordPress
มุมมอง 1.1Kปีที่แล้ว
The video guide for setting up a responsive blog page in the Gutenberg Block Editor with the Content Blocks Builder plugin. #wordpress #gutenberg #wordpresstutorial #blockeditor #wordpressplugin #contentblocksbuilder #boldblocks #wordpresswebsite #cbb #block #blocks #blog #grid #gridlayout #carousels #slideshow Get this plugin free here wp.org/plugins/content-blocks-builder How to install CBB t...
How to use the new custom grid layout for the Query Loop block in CBB plugin - WordPress Gutenberg
มุมมอง 575ปีที่แล้ว
How to use the new custom grid layout for the Query Loop block in CBB plugin - WordPress Gutenberg
How to create a Back To Top button in Gutenberg Editor using Content Blocks Builder WordPress plugin
มุมมอง 301ปีที่แล้ว
How to create a Back To Top button in Gutenberg Editor using Content Blocks Builder WordPress plugin
How to create a custom block for image zooming effect in WordPress Gutenberg using CBB Pro
มุมมอง 132ปีที่แล้ว
How to create a custom block for image zooming effect in WordPress Gutenberg using CBB Pro
How to create an image zooming effect in WordPress Gutenberg like Medium using the CBB Block Library
มุมมอง 224ปีที่แล้ว
How to create an image zooming effect in WordPress Gutenberg like Medium using the CBB Block Library
How to use the Query Loop variations for blog layouts in Gutenberg using the CBB Variation Library
มุมมอง 217ปีที่แล้ว
How to use the Query Loop variations for blog layouts in Gutenberg using the CBB Variation Library
How to create blog layouts with overlay style using the Query Loop block and Content Blocks Builder
มุมมอง 411ปีที่แล้ว
How to create blog layouts with overlay style using the Query Loop block and Content Blocks Builder
How to create buttons with an animated arrow icon in Gutenberg using the CBB Variation Library
มุมมอง 207ปีที่แล้ว
How to create buttons with an animated arrow icon in Gutenberg using the CBB Variation Library
How to create headings with typing effects in Gutenberg using Content Blocks Builder - WordPress
มุมมอง 124ปีที่แล้ว
How to create headings with typing effects in Gutenberg using Content Blocks Builder - WordPress
How to create icon buttons in Gutenberg using SVG Block and Block Enhancements plugin - WordPress
มุมมอง 884ปีที่แล้ว
How to create icon buttons in Gutenberg using SVG Block and Block Enhancements plugin - WordPress
How to create a pattern with particles effect background using the CBB Block Library in Gutenberg
มุมมอง 166ปีที่แล้ว
How to create a pattern with particles effect background using the CBB Block Library in Gutenberg
How to customize a button in Gutenberg using Block Enhancements plugin - WordPress
มุมมอง 1.5Kปีที่แล้ว
How to customize a button in Gutenberg using Block Enhancements plugin - WordPress
How to build and use image variations in Gutenberg using the variation library from the CBB plugin
มุมมอง 126ปีที่แล้ว
How to build and use image variations in Gutenberg using the variation library from the CBB plugin
How to create a basic header layout using the CBB Block Library in Gutenberg - WordPress
มุมมอง 2552 ปีที่แล้ว
How to create a basic header layout using the CBB Block Library in Gutenberg - WordPress
How to create an image compare block in Gutenberg using CBB Pro plugin | WordPress
มุมมอง 1572 ปีที่แล้ว
How to create an image compare block in Gutenberg using CBB Pro plugin | WordPress
How to create an animated heading custom block in Gutenberg using CBB Pro WordPress
มุมมอง 942 ปีที่แล้ว
How to create an animated heading custom block in Gutenberg using CBB Pro WordPress
thank you very much
This is the feature I really want to disable, but I can't see any filter to do that. Is there a filter maybe or you plan it (I mean like ACF filter to hide menu, but in this case - hide the pattern library in editor)?
Thank you for your feedback. I will add a setting/filter to disable it in the next version.
@@boldblocks I believe the same with block toolbar CBB button (useless informations for users - good for admins/ developers). In general I love if my clients and even me on my website can disable stuff I don't need. It's worth to say I really love Your plugin - amazing work, but for me it's too much options. Many of them comes in WP v6.7 (from developer side) and it's like ACF - I used it until I understood the core of WP and it's own features / components etc. I don't want e.g. other blocks than grid I use for more complex stuff I can't use core/group and it's variations. No matter of anything - I love that You spend your time to give the people for free so much and give the premium for so low. Best, Paul
Since WordPress version 6.3, the layout settings have been moved to the Post Template block. It is usually a direct child of the Query Loop block.
Since WordPress version 6.3, the layout settings have been moved to the Post Template block. It is usually a direct child of the Query Loop block.
Since WordPress version 6.3, the layout settings have been moved to the Post Template block. It is usually a direct child of the Query Loop block.
Since WordPress version 6.3, the layout settings have been moved to the Post Template block. It is usually a direct child of the Query Loop block.
It's already in WP Site Editor as a sync pattern - right?
Yes, this feature works similarly to the synced override patterns, but it is built for custom blocks contentblocksbuilder.com/documentation/custom-blocks/
I do not see the "carousel view" option on my end. Can you help me out?
Hi, this video was recorded with an old version of WordPress and CBB. In the recent version, the carousel option has been moved to the Post Template block (the child block of the Query Loop block) and is no longer in the Query Loop block.
@@boldblocks Thank you so much! I would have never found it without your help. I appreciate it immensely.
Thank you for asking. I've been on this for an hour, going in circles, unlike my carousel, until finding this question..great timing!
Thank you vary much... good lesson... 🎉🎉🎉
This overriding block feature really save a lot of time when we are editing an already created sites with lots of pages having same synced section
Tell me, please. When setting up the specified block, there are 2 labels in the upper corners of the images: "Night" and "Day". is it possible to remove them, or replace them with your own? In the attribute settings, I see that these labels can be replaced, but when they are replaced, the labels remain on the image. Thank you.
You should remove the labels at where the block is used, not in the original block. Unless you set the block is readonly, those changes from the original block will not affect other instances of it
You can take a look at this video for guidance www.awesomescreenshot.com/video/27188315?key=819806337e38375325a24fcdc8a04a6d
@@boldblocks Thanks a lot! It worked. I fixed my mistake.
It is amazing!
does it now work for mobile??
Yes, it does. You can test the demo here try.contentblocksbuilder.com/demo/
Transform scale doesn't seem to work
Thank you for your feedback. Could you please provide more details about your issue? Additionally, if you are using other plugins to transform the block, there may be conflicts with this transform feature.
@@boldblocks Thanks for your reply -- I did eventually get it to work, unfortuntately I don't remember what I did. :( I believe it was a settings issue. I was able to get the SVG icon working perfectly thanks to your great tutorial :)
@@erichepperlewp I'm glad to hear that.
Thank you so much Sir
This is really very cool. I need a similar implementation but I have a ready made theme integrated in to my wordpress woocommerce store. I already hae sidebars from theme whcih I use to host (contain) the filters for products. All I need is, to haev the filters toggle, However, I am not sure how would I add a custom toggle button to toggle the sidebar as my shop pae and sidebar sections are predesigned by the theme
You can use any element as a toggle button. You just need to enter the selector that points to that element in the trigger modal input. If you don't know how to add a button or a link to the sidebar, you should ask the theme author for help. It is a very simple task. Here is a simpler tutorial on modal/off-canvas layout that you should check out th-cam.com/video/y31TAKHZOD0/w-d-xo.html
you went through the steps TOO FAST! After pausing 5 times I went to someone else's video
Thank you for your feedback. We have been making videos more slowly recently. If you are interested, please check them out.
@boldblocks how to make the grids of 2nd row auto align to the centre?
You can use the row variation(wordpress.org/documentation/article/row-block/) of the core group block to make that kind of grids. You can set a fixed width on item blocks and set the justify alignment items center on the row block.
Excellent, I was just looking for it. Thank you for it.
Thanks a lot for this new feature, this will be helpful for now even create custom mega menu too ❤
Wow, wow, wow.
Great thank you so much❤
This video tutorial is out of date. Please check out th-cam.com/video/aHy3spQVBGc/w-d-xo.html for a more update to date guide.
I don't have the carousel option in my Query Loop. How can I get it? I'm using the latest version of Wordpress and Elementor Pro (if that changes anything)
This video guide is not for Elementor plugin. It's called CBB, and since version WP 6.3, the grid and carousel layouts have been moved to Post Template block. You can see those layouts there.
I downloaded the pluging, thank you. Do you have an updated tutorial? The buttons are the the same with my current version. When I transform my query loop into a carousel and I activate the navigation and scroll bar, they don't appear and I don't know what to do anymore. Thanks
@@nadialefebvre85 There are no updated tutorials for now however We're going to record new tutorials for the latest version soon. Could you please send me your site URL? What is your theme?
@@nadialefebvre85 This tutorial th-cam.com/video/YQHrf4xFctg/w-d-xo.html is more up-to-date than this one. You can follow it to create a carousel layout. This one th-cam.com/video/UpN9bdvs7Rs/w-d-xo.html guides you to create a carousel or grid layout within a few clicks from the variation library. Here is the full playlist of video tutorials for customizing the Query Loop block th-cam.com/play/PLPuEwc7dZklchm8nVUOKqSOc6OgmRQyha.html
We have just recorded a new version of this video. You can watch it here th-cam.com/video/aHy3spQVBGc/w-d-xo.html if you are interested. We hope you find it helpful and enjoyable.
your sound cuts ff after 5 seconds?
Thank you very much for reporting it. I did not notice that. I'll fix it soon
I like it. BTW all your plugins are great, i love when a developer uses build in wordpress gutenberg and do not bloat admin with tons of sh.t. I will definitely go to pro version as soon as i will be producing some comerce web. BTW one question regarding this carousel function - if i understand it right, there is no way to pause the carousel - typovaly when mouseover or selected by keyboard. This would make it hard to use sometimes, as it would move under the user fingers
Thank you for your kind words. Right now, you can pause the slider by interacting with it, such as swiping or clicking on navigation or pagination. I will add a setting to allow pausing the slider on mouseover in the next version. Thank you for your suggestion.
Thank you, I used your trick to build a search icon for my header
You're welcome. I'm glad you found it useful.
Hi phi phan The carousal option in query loop is amazing. I was waiting for this option by kadence team. I'm also a WordPress developer, I've designed hundreds of websites in the past 2 years using different page builders. I'm must say only a developer can realize the plugin gap in this crowded market with hundreds of plugins and themes. I also think to start develop plugins and start a blog but I'm busy in my 9 to 5 job🙃.
I'm glad you liked it :)
Nice! But which are the trigger values that switch between desktop, tablet and mobile design? And where can they be adjusted?
The breakpoint for tablets is 768px, and for desktops is 1024px. They are fixed in the current version. They can be adjusted in the next minor version.
@@boldblocks Thanks for the information!
@@boldblocks how to make the grids of 2nd row auto align to the centre?
Since version 2.4.0, you can set custom breakpoint values for desktop, tablet, and mobile in the setting page.
This looks amazingly simple, which i s always the beast approach :) We use Swiper JS extensively on our sites and certain I saw you mention this on another video however, is Bold Blocks new? How long has it been around? What development is planned? Alway looking for new, simple ways of achieving results, just a little concerned there is nothing 'out there' that I can find to know who is behind this great plugin. Thank you.
Hi Pete, Thank you for your comment and interest in the plugin. I'm Phi Phan, the author of the CBB plugin and some other plugins on WordPress org here profiles.wordpress.org/mr2p/#content-plugins. I'm not famous in the WordPress community, but I've been working with WordPress for more than 10 years and developed hundreds of websites using WordPress. BoldBlocks is a new brand. I launched it in 2022 when I decided to start my own WordPress plugin business. I have been too busy with developing multiple products so I haven't spent enough time on branding :). I plan to finish the branding tasks in the upcoming weeks and I will also start blogging. I am constantly working on improving CBB and my other plugins and adding new features based on user feedback. I'm an experienced developer but I'm new to the selling plugin business. I'm still learning day by day. I will start blogging and write the roadmap for it in the upcoming weeks. Thanks, Phi.
@@boldblocks Thank you Phi, hope you didn't mind me asking as its always worth knowing who's stuff we are using :) Very interested to see how you use Swiper JS, this we use extensively for static rows of images....we've never mastered using it with the Gutenberg Query Loop so we could have a scrollable row of dynamic, custom post types. By the look of things your plugin does this? Can I ask, do you have settings so, for example we could have 4 items showing on a carousel, this go's down to 3 for tablet and 1 for phone. Worth an ask and will have a play with this early next week. Thanks again for the reply :)
@@petegrant3251 You're welcome. That setting is only available in the Pro version, however, in the free version you also can get that layout by setting the width of carousel items per breakpoints and then setting the items per slide value as auto
@@boldblocks With the Free Version is the Carousel Block included out of interest? Nothing is showing up at all when clicking the Query Loop as you demonstrate in your video. Think I'm missing something here :)
@@boldblocks So the Carousel Block is only available with the Pro version? Hmm any details ref this please?
This is great. Thank you!
You're welcome
just downloaded your plugin from wordpress, on activate it returns php error.
Can you send me the error message? Or please report the issue via wp.org/plugins/content-blocks-builder. Thank you!
To learn how to create a header layout like this, please follow this tutorial th-cam.com/video/E4usfCydR7U/w-d-xo.html
This basic header layout has been created as a custom block in the CBB Block Library. You can get it with a few clicks following this tutorial th-cam.com/video/hQBItwIu_90/w-d-xo.html
CBB 🔥That's really awesome
Thank you!
What about image rights for these patterns?
All images are from unsplash. You're free to use.
This is great. Thank you! Is the slider made with jQuery or vanilla JS?
Thanks. I use this slider script swiperjs.com/. It's a vanilla script.
Thanks for that explanation, very useful!
You're welcome!
Hi, where to buy CBB Pro?
Hi Jose, We're not finishing the content for the promotion site yet, so right now you can buy the Pro version by installing the free version and opt-in to the marketing and then there is an upgrade menu item to buy it. Or you can buy it by this direct URL bit.ly/3fMvQ4k. The refund policy is 100% no questions asked for up to 14 days.
We've just launched the promotion site at contentblocksbuilder.com. Thanks.
@@boldblocks Fantastic
This guide is for creating a banner slider using the built-in Carousel block. To learn how to create your own custom banner slider block, check out this guide th-cam.com/video/EEk-kSa59VE/w-d-xo.html. This pattern is available in the pattern library here bit.ly/3FCKjKD How to use the pattern library th-cam.com/video/UTrZSBvkzj0/w-d-xo.html Get this plugin free here wp.org/plugins/content-blocks-builder How to install CBB th-cam.com/video/wMTN0WpapPw/w-d-xo.html
This is very hard to follow, can you please provide a step by step guide to how to build the off canvas?
Sure, I'll add a new step by step video for it soon
We've just released a new step-by-step video tutorial to create a modal or an off-canvas layout here th-cam.com/video/y31TAKHZOD0/w-d-xo.html
It would be great if the slider images maintained the same aspect ratio over different devices
You can set the width, height, and spacing for different devices, so you can set it to whatever aspect ratio you want. In this demo, we only use a fixed height for the slide item, but it is much more powerful than that.
Great stuff. I'm glad I found this with a google search. Exactly what I needed. I thought it was a bit of a faff at first. By after trying alternative plugins, this was actually quite simple to achieve.
I'm glad you found it helpful.