- 172
- 676 396
Design with Cracka
Nigeria
Приєднався 16 жов 2009
I create tutorials on Web design using Bricks Builder, Breakdance Builder and Oxygen Builder for WordPress, and Design in general.
How to Setup - Sidebar Menu for Oxygen New features
How to setup the Multi-Level Sidebar Slide Navigation Template for Oxygen Builder
GET THIS TEMPALTE: designwithcracka.gumroad.com/l/ResponsiveSidebarSlideNavigationTemplateforOxygenBuilder
ALL ACCESS MEMBERSHIP (40% OFF for a limited time) :
designwithcracka.gumroad.com/l/DesignwithCrackaMembership/trust-40-off
Checkout more Templates at
designwithcracka.gumroad.com/
Bricks Builder | Oxygen Builder | Breakdance Builder | WordPress | Tutorial
#bricksbuilder #bricks #breakdancebuilder #oxygen #oxygenbuilder #wordpress
Join this channel to get access to perks:
ua-cam.com/channels/YdiyuV6R2_NhCae84yFhBw.htmljoin
CHECKOUT MY PREMIUM TEMPLATES/COMPONENTS
designwithcracka.gumroad.com/
GET MEMBERSHIP ACCESS TO ALL MY PREMIUM COMPONENTS/TEMPLATES
designwithcracka.gumroad.com/l/DesignwithCrackaMembership
FACEBOOK GROUP: groups/designwithcracka/
FOLLOW ON TWITTER: udoroessien
BOOK A 1-HOUR CONSULATION
calendly.com/designwithcracka/consultation-meeting
GOT A PROJECT? HIRE ME: udoroessien@gmail.com
--------------------------------------------------------------
Get Breakdance - A record breaking visual builder for WordPress
breakdance.com/ref/50/
--------------------------------------------------------------
GET ACCESS TO MY ADVANCED & INDEPTH TUTORIALS
geary.co/inner-circle/ref/1/
--------------------------------------------------------------
GET AUTOMATIC.CSS - A time saving utility class for WordPress websites
automaticcss.com/ref/37/
--------------------------------------------------------------
GET FRAMES - getframes.io/ref/1/
Frames is a real time wireframing tool, design-ready development system, and accessible component library
--------------------------------------------------------------
GET MOTION.PAGE - Interact & animate any WordPress site
motion.page/go/dwc/
--------------------------------------------------------------
GET RECODA WORKSPACE - Advance workspace for Oxygen Builder
recoda.me/workspace-store?via=dwc
______________________________________
SIGN UP WITH INSTAWP PRO
app.instawp.io/register?ref=umDnu9Wfos
--------------------------------------------------------------
GET YABE WEBFONT - Custom fonts management and self-host Google Fonts with seamless WordPress page builders integration
webfont.yabe.land/?ref=11
=============================================
DISCLAIMER: This video or description contains affiliate links, which means that if you click on one of the product links, you'll be supporting the channel, and I’ll receive a small commission.
=============================================
GET THIS TEMPALTE: designwithcracka.gumroad.com/l/ResponsiveSidebarSlideNavigationTemplateforOxygenBuilder
ALL ACCESS MEMBERSHIP (40% OFF for a limited time) :
designwithcracka.gumroad.com/l/DesignwithCrackaMembership/trust-40-off
Checkout more Templates at
designwithcracka.gumroad.com/
Bricks Builder | Oxygen Builder | Breakdance Builder | WordPress | Tutorial
#bricksbuilder #bricks #breakdancebuilder #oxygen #oxygenbuilder #wordpress
Join this channel to get access to perks:
ua-cam.com/channels/YdiyuV6R2_NhCae84yFhBw.htmljoin
CHECKOUT MY PREMIUM TEMPLATES/COMPONENTS
designwithcracka.gumroad.com/
GET MEMBERSHIP ACCESS TO ALL MY PREMIUM COMPONENTS/TEMPLATES
designwithcracka.gumroad.com/l/DesignwithCrackaMembership
FACEBOOK GROUP: groups/designwithcracka/
FOLLOW ON TWITTER: udoroessien
BOOK A 1-HOUR CONSULATION
calendly.com/designwithcracka/consultation-meeting
GOT A PROJECT? HIRE ME: udoroessien@gmail.com
--------------------------------------------------------------
Get Breakdance - A record breaking visual builder for WordPress
breakdance.com/ref/50/
--------------------------------------------------------------
GET ACCESS TO MY ADVANCED & INDEPTH TUTORIALS
geary.co/inner-circle/ref/1/
--------------------------------------------------------------
GET AUTOMATIC.CSS - A time saving utility class for WordPress websites
automaticcss.com/ref/37/
--------------------------------------------------------------
GET FRAMES - getframes.io/ref/1/
Frames is a real time wireframing tool, design-ready development system, and accessible component library
--------------------------------------------------------------
GET MOTION.PAGE - Interact & animate any WordPress site
motion.page/go/dwc/
--------------------------------------------------------------
GET RECODA WORKSPACE - Advance workspace for Oxygen Builder
recoda.me/workspace-store?via=dwc
______________________________________
SIGN UP WITH INSTAWP PRO
app.instawp.io/register?ref=umDnu9Wfos
--------------------------------------------------------------
GET YABE WEBFONT - Custom fonts management and self-host Google Fonts with seamless WordPress page builders integration
webfont.yabe.land/?ref=11
=============================================
DISCLAIMER: This video or description contains affiliate links, which means that if you click on one of the product links, you'll be supporting the channel, and I’ll receive a small commission.
=============================================
Переглядів: 239
Відео
Dynamic INLINE Quickview Grid for Bricks Builder
Переглядів 7503 місяці тому
Get the Dynamic Inline Quickview Grid! An elegant and accessible way to preview your content within a grid in BRICKS BUILDER , with features designed make your content presentation more professional. Quick view for team members, products, listings, post etc., any custom post type. GET THIS COMPONENT: designwithcracka.gumroad.com/l/DynamicInlineQuickviewGridforBRICKSBUILDER GET BRICKS BUILDER AL...
CSS Logical Properties Made Easy: A Beginner's Guide with Fun Examples!
Переглядів 1,3 тис.3 місяці тому
Ready to make your web design smarter and more adaptable? In this beginner-friendly tutorial as we dive into CSS logical properties and learn how to create layouts that look great in any language or direction with simple, fun examples. By the end, you'll have the skills to make your CSS flexible and future-proof. Join this channel to get access to perks: ua-cam.com/channels/YdiyuV6R2_NhCae84yFh...
The Hidden CSS Property You Should Be Using for Better UX!
Переглядів 1,3 тис.4 місяці тому
The Hidden CSS Property You Should Be Using for Better UX! CSS tips | Bricks Builder | Oxygen Builder | Breakdance Builder | WordPress | Tutorial #css #css3 #bricksbuilder #bricks #breakdancebuilder #oxygen #oxygenbuilder #wordpress Join this channel to get access to perks: ua-cam.com/channels/YdiyuV6R2_NhCae84yFhBw.htmljoin CHECKOUT MY PREMIUM TEMPLATES/COMPONENTS designwithcracka.gumroad.com/...
FREE Dynamic Ticker Slider for Oxygen Builder
Переглядів 7926 місяців тому
I'm giving this away for FREE! designwithcracka.gumroad.com/l/DynamicTickerSliderforOXYGENBUILDER/oxy-100-free The Dynamic Ticker Slider is a integrates with Oxygen's repeater feature and supports Advanced Custom Fields (ACF) and Metabox, making it a great solution for displaying dynamic content. This tool can also be utilized for static content, providing flexibility for various use cases. Bri...
Dynamic Post Lightbox (Quick View) for Breakdance Builder WordPress
Переглядів 1,4 тис.6 місяців тому
This Dynamic Lightbox (Quick View component) seamlessly integrates with BREAKDANCE BUILDER , with features designed make your content presentation more professional. GET THIS COMPONENT: designwithcracka.gumroad.com/l/DynamicPostLightboxforBREAKDANCEBUILDER GET ALL ACCESS MEMBERSHIP (40% OFF for limited SLOTS) : designwithcracka.gumroad.com/l/DesignwithCrackaMembership/trust-40-off Bricks Builde...
Breakdance Pro WordPress Review | should you switch from Elementor?
Переглядів 4 тис.6 місяців тому
Breakdance offers a perfect blend of flexibility and power, allowing you to try before you buy. GET BREAKDANCE BUILDER: breakdance.com/ref/50/ Timestamp: 00:00 - Intro 02:00 - Pricing 03:40 - Features overview 06:05 - Elements demo 10:19 - Breakdance Migration Mode 11:09 - Easy Layout tools 17:05 - Header and Menu Builder 21: 57 - Design Library 24:00 - WooCommerce Integration 26:52 - Entrance/...
Presets in Breakdance vs Classes in Bricks/Oxygen WordPress Builders
Переглядів 2,1 тис.6 місяців тому
Breakdance Builder Review: Let's explore how the new Preset feature of Breakdance 2.0. compares to Bricks Builder's classes in the area of ease of use, maintainability/Scalability, and user-friendliness. GET BREAKDANCE BUILDER: breakdance.com/ref/50/ Timestamp: 00:00 - Intro 02:00 - Preset vs Class: Premade components 08:31 - Preset vs Class: Custom components 19:10 - Preset vs Class: Ease of u...
First Look At The New Features Coming to Breakdance 2.0 | WordPress Page Builder
Переглядів 3,7 тис.7 місяців тому
Let's explore the exciting new features of Breakdance 2.0. With an enhanced layout engine and a robust preset feature, version 2.0 propels Breakdance to new heights, continuing its mission to dominate with unparalleled user-friendliness. GET BREAKDANCE BUILDER: breakdance.com/ref/50/ Timestamp: 00:00 - Intro 01:44 - Enhanced Layout engine 05:13 - Component Preset 09:23 - Copy/Paste control sect...
New Features! Sidebar Navigation Builder 2.0 for Bricks Builder
Переглядів 2,2 тис.7 місяців тому
Check out the new features of the High quality Responsive Sidebar Slide Navigation Template for Bricks Builder with Infinite slide levels. This template comes with a fully setup sidebar & header layout. GET THIS COMPONENT: designwithcracka.gumroad.com/l/ResponsiveSidebarSlideNavigationTemplateforBricksBuilder GET ALL ACCESS MEMBERSHIP (40% OFF for limited SLOTS) : designwithcracka.gumroad.com/l...
Fancy sticky header for BREAKDANCE BUILDER WORDPRESS
Переглядів 3127 місяців тому
Revolutionize the way you design and present your website headers. Get Fancy sticky header for BREAKDANCE: designwithcracka.gumroad.com/l/FancyStickyHeaderforBREAKDANCE DEMO: breakdancetuts.designwithcracka.com/fancy-header/ CHECKOUT MY PREMIUM TEMPLATES/COMPONENTS designwithcracka.gumroad.com/ GET MEMBERSHIP ACCESS TO ALL MY PREMIUM COMPONENTS/TEMPLATES designwithcracka.gumroad.com/l/Designwit...
Dynamic Post Lightbox (Quick View) for Oxygen Builder
Переглядів 5347 місяців тому
This Dynamic Lightbox (Quick View component) seamlessly integrates with OXYGEN BUILDER , with features designed make your content presentation more professional. GET THIS COMPONENT: designwithcracka.gumroad.com/l/DynamicPostLightboxforOXYGENBUILDER GET ALL ACCESS MEMBERSHIP (40% OFF for limited SLOTS) : designwithcracka.gumroad.com/l/DesignwithCrackaMembership/trust-40-off Bricks Builder | Oxyg...
Dynamic Post Lightbox (Quick View) for Bricks Builder
Переглядів 1,8 тис.7 місяців тому
This Dynamic Lightbox (Quick View component) seamlessly integrates with BRICKS BUILDER , with features designed make your content presentation more professional. GET THIS COMPONENT: designwithcracka.gumroad.com/l/DynamicPostLightboxforBRICKSBUILDER GET ALL ACCESS MEMBERSHIP (40% OFF for a limited time - 3 SLOTS LEFT!) : designwithcracka.gumroad.com/l/DesignwithCrackaMembership/trust-40-off Bric...
Infinite Scrolling Cards & Fancy Sticky Header - Bricks | Oxygen | WordPress
Переглядів 2,2 тис.9 місяців тому
Checkout Design with Cracka's two new Components available right now - Infinite Scrolling Cards Section & Fancy Sticky Header. Available for Bricks and Oxygen. Bricks Builder | Oxygen Builder | WordPress | Tutorial #oxygen #oxygenbuilder #wordpress #bricksbuilder #bricks Join this channel to get access to perks: ua-cam.com/channels/YdiyuV6R2_NhCae84yFhBw.htmljoin CHECKOUT MY PREMIUM TEMPLATES/C...
Sidebar Navigation Builder for BREAKDANCE BUILDER is ready!
Переглядів 3,1 тис.Рік тому
How to setup the Multi-Level Sidebar Slide Navigation Template for Breakdance Builder GET THIS TEMPALTE: designwithcracka.gumroad.com/l/ResponsiveSidebarmulti-levelSlideNavigationTemplateforBREAKDANCEBUILDER ALL ACCESS MEMBERSHIP (40% OFF for a limited time) : designwithcracka.gumroad.com/l/DesignwithCrackaMembership/trust-40-off Checkout more Templates at designwithcracka.gumroad.com/ BOOK A 1...
Smart Centered logo header for Bricks Builder - NEW PREMIUM COMPONENT
Переглядів 1,6 тис.Рік тому
Smart Centered logo header for Bricks Builder - NEW PREMIUM COMPONENT
Sidebar Slide Navigation Builder for Bricks - COMPONENT
Переглядів 4,2 тис.Рік тому
Sidebar Slide Navigation Builder for Bricks - COMPONENT
Sidebar Slide Navigation Builder for Oxygen - TEMPLATE RELEASE
Переглядів 2 тис.Рік тому
Sidebar Slide Navigation Builder for Oxygen - TEMPLATE RELEASE
Create Modern Parallax Portfolio landing page in WordPress | Breakdance Builder
Переглядів 8 тис.Рік тому
Create Modern Parallax Portfolio landing page in WordPress | Breakdance Builder
Interview with Louis - founder of Breakdance Website Builder
Переглядів 2,8 тис.Рік тому
Interview with Louis - founder of Breakdance Website Builder
Switch Bricks Builder Nestable Tabs to accordion on mobile with Advance CSS Grid layout.
Переглядів 3,1 тис.Рік тому
Switch Bricks Builder Nestable Tabs to accordion on mobile with Advance CSS Grid layout.
Modern layout with inverted border radius and text wrap in Breakdance Website Builder for WordPress
Переглядів 12 тис.Рік тому
Modern layout with inverted border radius and text wrap in Breakdance Website Builder for WordPress
Master Tricky CSS Grid Layout in Bricks Builder | WordPress Tutorial
Переглядів 9 тис.Рік тому
Master Tricky CSS Grid Layout in Bricks Builder | WordPress Tutorial
Breakdance Single site License now available | WordPress Website Builder
Переглядів 860Рік тому
Breakdance Single site License now available | WordPress Website Builder
Breakdance WordPress Website Builder Tutorial - The Basics | Free download
Переглядів 8 тис.Рік тому
Breakdance WordPress Website Builder Tutorial - The Basics | Free download
Intro to Interactions - Bricks interactions and animations tutorial | WordPress Tutorial
Переглядів 13 тис.Рік тому
Intro to Interactions - Bricks interactions and animations tutorial | WordPress Tutorial
5 WordPress Tips to know before building a new WordPress Website
Переглядів 6 тис.Рік тому
5 WordPress Tips to know before building a new WordPress Website
Custom CSS in Bricks Builder for an efficient workflow | How to CSS Tutorial | WordPress Tutorial
Переглядів 4,9 тис.Рік тому
Custom CSS in Bricks Builder for an efficient workflow | How to CSS Tutorial | WordPress Tutorial
First Look at Breakdance 1.4 Beta CSS Grid - Visual Builder for WordPress
Переглядів 3,1 тис.Рік тому
First Look at Breakdance 1.4 Beta CSS Grid - Visual Builder for WordPress
How to use Oxygen Builder's CSS Grid feature 🌟- WordPress Tutorial
Переглядів 3 тис.Рік тому
How to use Oxygen Builder's CSS Grid feature 🌟- WordPress Tutorial
from elementor i switched to bricks. it is great especially for dynamic websites...
thank you, awesome tutorial! I applied everything, just when scaling the browser window, video does not scale properly together. not a big issue, but any way to fix this?
Thank you.
this is the best video on css grids for oxygen builder -- no question at all. been wracking my brain trying to figure out how to do this + you've solved it in 25 minutes!!!
I’m switching from Elementor to Breakdance and no turning back. It offers greater customization, is more straightforward, easier to use, incredibly fast, and not bloated like Elementor. Plus, there’s no need for third-party plugins to support customization.
Hey brother. Please recreate this for a Breakdance workflow. Thanks
Thank you Mr. Cracka 🙏 Parent element had overflow auto
Thx for this video- could you pls make this Video for bricks?
any possible to put the swatch select on quick view?
You can use the default variation select, custom swatch isn't supported.
@@DesignwithCracka thanks for your reply
Hello, does this menu allow for arrow based navigation? I tried the demo site and it is really great, but it appears using arrows for navigation only effects the page scrollrather than the active menu. This is looking like a really good option
Menu navigation typically supports tab key to navigate and enter key select. This menu is navigable with the keyboard via the tab and enter keys.
Is this menu navigable through the use of arrow keys? Including dropdowns?
Great. And how would I make the two column divs equal height? This is important to scale the image on smaller viewport when content column get's taller than the image - it would be great to keep the image same height and horizontally cropped. Because adding height:100% to the divs does not work...
To make it more efficient, just use one slider and replace the pagination with thumbnails. ;-)
This saves a lot of time. i use it on my company site, and it got much better. Thank you for sharing this tutorial.
This is perfect, I was looking for this exact grid layout, but as I’m not using the ‘post’ element I can’t figure out how you would link each card to my single post template? Any pointers would be greatly appreciated. Keep the tutorials coming , I’m learning a lot from them 🤘
great video, but I'm so lost! =(
Awesome video, that pulse icon is very cool feature 😮😀🤟
Such a genius..GOSH!! Thank you!
How can I get the Oxygen elements for woocommerce
Are the templates of the design library you showed... available in the free version of break dance?
Really valuable information: Check the responsivness with the inspect tool - don't rely on the builder to show a true representation of the front-end. I've started doing this and I feel alot more productive. Thanks so much Design With Cracka.
Tried it for 2 headings in 2 slides, and well it didn't work It just resets after some time, doesn't loop perfectly.
great feature and thank you very much, is there such an option from the picture?
So helpfull tutorial, thanks❤
Excellent ! Thanks 👍
Definitely classes for me
can you share us templates for free?? please
Helpful. But not very responsive in my experience by using the advanced slider out of the box. However, you can do the same full screen adjustments on a section with a basic slider. The basic slider will give you a much more responsive experience and much faster to set up. Maybe you can consider doing a more simple and faster tutorial with the basic slider to help people out.
I watched the whole vid somehow expecting a tutorial and it ended up being a sale
Thank you very much !! Brilliant and Generous as Always
Thanks for the Tip and Review!
@Designwithcracka, is it possible to replicate this functionality in Oxygen Builder and what should I take note of?
i did this and for some reason on front end it's empty not showing anything. But when im editing its working well. any tips?
I love this guy and his channel - he's so knowledgeable. Everything he shows us will work exactly 💯 how he says it will.
Thank you very much for another profound and well explained tutorial. I did to things improve the final outcome: Firstly, I combined auto-fit and minmax into the repeat function to get a smoother transition (something I learned from Cracka - thank you). Secondly, I set the span 2 (for the first child) for screen size larger than mobile portrait viewpoint, in order to get a one column (squeezing two columns was too narrow for me).
Thanks for sharing!
Hands-down the best Oxygen Builder tutorials on UA-cam. Always shows us how to make the design responsive, which is SO important.
thanks. first and second reason help me out.
Glad to hear it!
I did it the same way, but my divs are not the height I filled in
very helpful, thank you!
Oh My Dayz !! Ordering the cards was so simple - I can't believe I spent so much time trying to figure this out. Thank you SO MUCH !!!
You are so welcome!
Brilliant !!
You put review in the title, but this is more like a sales pitch. If you’re not going to have an objective viewpoint, then it shouldn’t be called it a review
Tell me one thing I mentioned that’s not objective. Besides, reviews are both objective and subjective, because to a certain degree it’s based on the reviewers perception. You can add your objective take in the comment section if I left something out.
Isn't easier to create the shape in a svg transparent, and the apply the svg as a mask to the main container and then yes put the button with absolute, etc...
Try it and let us know, with responsiveness :)
Hello Cracka, I have a somewhat long sales landing page and want to have an in-page navigation option so users can scroll up and down the page. Does your Sidebar Slide Navigation Builder for Oxygen (template) work well in this scenario? Also, is it compatible with the latest version of Oxygen (v4.9)? Many thanks. ~P.
Hi Peter, yes the sidebar works well with in-page navigation, and it's compatible with the latest version of Oxygen.
thanks!
Yes what you miss is that, classes should be added before you begin styling an element. After styling and you add a class only style changes made after that are carried over to that class and connected component.
www.loom.com/share/6ef054d2e16b401fb82caf9ac1f8fbb5?sid=20e4ae2b-0705-446c-be81-5c9ffb928bc7
thank you! 👍
Very well constructed video