- 97
- 143 802
Daveden WebDev
United Kingdom
Приєднався 21 бер 2016
Hi, I'm David, a web designer with over 5 years of experience. My focus is on creating accessible websites mainly using Elementor [Pro] or Bricksbuilder. I love exploring creative web design problem-solving, advanced CSS tricks, Web Accessibility, and Dynamic Data.
JetEngine 3.6.1: Add Semantic Lists (UL or OL) to your Listing Grid
In some cases, it's more appropriate to display posts as an unordered or ordered list. While this wasn't previously possible in JetEngine, the release of JetEngine 3.6.1 now makes it possible. This tutorial demonstrates how to implement this feature in Bricks Builder, the Block Editor, and Elementor.
While it may seem counterintuitive at first since blog cards are often styled as a grid or flexbox layout, using list structures actually has several important benefits:
1. Post Listing Grids are fundamentally a collection of related items, which is exactly what HTML lists are designed to represent.
2. Screen readers will announce the list structure and number of items, helping users understand the content organisation
3. Search engines can better understand the relationship between listing items
Subscribe for more Elementor and Bricks tutorials:
🔗 davedens.link/subscribe
► Code snippet / Article ◄
🔗 github.com/Crocoblock/suggestions/issues/7256#issuecomment-2535372125
🔗 gist.github.com/Crocoblock/65387eeb54340f91c8df5be199a9a83d
My modified code
🔗 daveden.co.uk/code-vault#change-jetengine-listing-grid-wrapper-from-div-to-ul-or-ol
► Support my channel ◄
Buy me kofi - davedens.link/kofi
Donate on PayPal - davedens.link/paypal
► Connect with me: ◄
📺 Subscribe: www.youtube.com/@daveden2
👍 Facebook: daveden2
🐦 X (formerly Twitter): x.com/Daveden2
🌐 Website: daveden.co.uk/
► Recommended Tools (Affiliate Links - Support the Channel!) ◄
🔗 Bricksforge - davedens.link/brf
🔗 Bricksbuilder - davedens.link/bricks
🔗 Elementor Pro - davedens.link/elementor
🔗 Dynamic Shortcodes - davedens.link/dsh
🔗 Crocoblock JetEngine - davedens.link/jetengine
🔗 WDesignKit - davedens.link/wdkit
🔗 Epidemic Sounds - davedens.link/sounds
🔗 Hostinger: davedens.link/hosting
► Timestamps ◄
00:00 - Intro
00:26 - The code snippet required
01:15 - Applying the code snippet
02:14 - Bricks listing grid
05:19 - Listing Block
08:01 - Elementor Listing Grid
10:22 - A tweak to include ol and ul
11:38 - Thanks to the Crocoblock team!
#jetengine #listinggrid
While it may seem counterintuitive at first since blog cards are often styled as a grid or flexbox layout, using list structures actually has several important benefits:
1. Post Listing Grids are fundamentally a collection of related items, which is exactly what HTML lists are designed to represent.
2. Screen readers will announce the list structure and number of items, helping users understand the content organisation
3. Search engines can better understand the relationship between listing items
Subscribe for more Elementor and Bricks tutorials:
🔗 davedens.link/subscribe
► Code snippet / Article ◄
🔗 github.com/Crocoblock/suggestions/issues/7256#issuecomment-2535372125
🔗 gist.github.com/Crocoblock/65387eeb54340f91c8df5be199a9a83d
My modified code
🔗 daveden.co.uk/code-vault#change-jetengine-listing-grid-wrapper-from-div-to-ul-or-ol
► Support my channel ◄
Buy me kofi - davedens.link/kofi
Donate on PayPal - davedens.link/paypal
► Connect with me: ◄
📺 Subscribe: www.youtube.com/@daveden2
👍 Facebook: daveden2
🐦 X (formerly Twitter): x.com/Daveden2
🌐 Website: daveden.co.uk/
► Recommended Tools (Affiliate Links - Support the Channel!) ◄
🔗 Bricksforge - davedens.link/brf
🔗 Bricksbuilder - davedens.link/bricks
🔗 Elementor Pro - davedens.link/elementor
🔗 Dynamic Shortcodes - davedens.link/dsh
🔗 Crocoblock JetEngine - davedens.link/jetengine
🔗 WDesignKit - davedens.link/wdkit
🔗 Epidemic Sounds - davedens.link/sounds
🔗 Hostinger: davedens.link/hosting
► Timestamps ◄
00:00 - Intro
00:26 - The code snippet required
01:15 - Applying the code snippet
02:14 - Bricks listing grid
05:19 - Listing Block
08:01 - Elementor Listing Grid
10:22 - A tweak to include ol and ul
11:38 - Thanks to the Crocoblock team!
#jetengine #listinggrid
Переглядів: 328
Відео
Bricksforge Pro Forms: Frontend Update Post Form
Переглядів 335День тому
In this tutorial, you'll learn how to update a post on the frontend using Bricksforge Pro Forms Subscribe for more Elementor and Bricks tutorials: 🔗 davedens.link/subscribe ► Code snippet / Article ◄ daveden.co.uk/tutorials/guide-to-calculations-and-conditional-logic-using-bricksforge-pro-forms ► Further reading ◄ 🔗 Fieldsets with checkboxes - developer.mozilla.org/en-US/docs/Web/HTML/Element/i...
Taxonomy Term Colour in Elementor Loop Grid using JetEngine (No Timber/Twig)
Переглядів 146День тому
This tutorial follows a previous one in which I taught you how to dynamically apply Crocoblock JetEngine colour meta fields to category or custom taxonomy labels used in an Elementor Loop Grid. Adding visual cues like label colours improves user experience (UX) and adds beauty to your posts. ► Previous Tutorial ◄ ua-cam.com/video/6mczcC9ClmM/v-deo.html ► Code Snippet ◄ Apply this code snippet t...
Elementor 3.26 Beta: Dynamic Off-canvas Modal for Loop Grids and More Optimisations!
Переглядів 39521 день тому
Elementor 3.26 introduces several new features and quality enhancements, including the native ability to add a dynamic off-canvas modal in the Elementor Loop Grid! Third-party plugins or custom code are no longer necessary. The update also includes link styling options for the Heading widget and optimised markup, among other improvements. Join the discussion for the Elementor 3.26 beta update g...
Simple Content Toggle Switch in Elementor and Bricks
Переглядів 22321 день тому
In this tutorial, you'll learn how to add a simple content toggle switcher in any page builder of your choice. ► Code Snippet ◄ 🔗 daveden.co.uk/tutorials/simple-content-toggle-switcher-in-wordpress Subscribe for more Elementor and Bricks tutorials: 🔗 davedens.link/subscribe ► Support my channel ◄ Buy me Kofi - davedens.link/kofi Donate on PayPal - davedens.link/paypal ► Connect with me: ◄ 📺 Sub...
Injecting Items into Query Loop using Dynamic Shortcodes | Web Accessibility
Переглядів 408Місяць тому
In the Bricks and Greenshift community, there have been many questions regarding the best way to inject items (static/dynamic) into a query loop whilst considering accessibility. The two key accessibility considerations are: 1. The focus order should be logical and match the reading order on the page 2. The items should be in a list so that screen-reader users can know exactly how many items to...
CommandUI - A Powerful Command Palette for WordPress and Bricks
Переглядів 156Місяць тому
In this tutorial, you'll learn about CommandUI and its features. You'll be equipped with the information you need to decide whether you want to purchase the plugin. ► Purchase CommandUI ◄ commandui.com/ ► Support my channel ◄ Buy me Kofi - davedens.link/kofi Donate on PayPal - davedens.link/paypal ► Connect with me: ◄ 📺 Subscribe: www.youtube.com/@daveden2 👍 Facebook: daveden2 🐦 X ...
Using Jet Engine To Add Term Color In Elementor Loop Grid
Переглядів 268Місяць тому
This tutorial teaches you how to dynamically apply Crocoblock JetEngine colour meta fields to category or custom taxonomy labels used in an Elementor Loop Grid. Adding visual cues like label colours improves user experience (UX) and adds beauty to your posts. ► Support my channel ◄ Buy me kofi - davedens.link/kofi Donate on PayPal - davedens.link/paypal ► Connect with me: ◄ 📺 Subscribe: www.you...
Use YouTube API with Dynamic Shortcodes in WordPress
Переглядів 270Місяць тому
In this video, you'll learn how I used Dynamic Shortcodes to retrieve data from the UA-cam API, such as my latest video and the total number of videos published on my website. Subscribe for more Elementor and Bricks tutorials: 🔗 davedens.link/subscribe ► UA-cam API Data Docs ◄ 🔗 UA-cam Data API Overview - developers.google.com/youtube/v3/getting-started ► Dynamic Shortcodes Articles ◄ 🔗 API Sho...
Building Forms with Calculations and Conditional Logic using Bricksforge Pro Forms
Переглядів 369Місяць тому
Building Forms with Calculations and Conditional Logic using Bricksforge Pro Forms
Order Events by Start Date | Prioritise Sponsored Posts | Elementor Loop Grid
Переглядів 1962 місяці тому
Order Events by Start Date | Prioritise Sponsored Posts | Elementor Loop Grid
Simple Tips to Improve Web Accessibility in Elementor
Переглядів 5072 місяці тому
Simple Tips to Improve Web Accessibility in Elementor
Hide button based on post Publish Status | Dynamic Shortcodes
Переглядів 1492 місяці тому
Hide button based on post Publish Status | Dynamic Shortcodes
Divi 5 Alpha: First Impressions by an Elementor User
Переглядів 7122 місяці тому
Divi 5 Alpha: First Impressions by an Elementor User
MetaBox Views vs Dynamic Shortcodes - My Rebuttal
Переглядів 2733 місяці тому
MetaBox Views vs Dynamic Shortcodes - My Rebuttal
Stylish Horizontal Accordion in Elementor: WDesignKit Widget Creator Tutorial
Переглядів 6603 місяці тому
Stylish Horizontal Accordion in Elementor: WDesignKit Widget Creator Tutorial
JetEngine Gallery + Bricks Nestable Slider Query Loop (No Code!)
Переглядів 5453 місяці тому
JetEngine Gallery Bricks Nestable Slider Query Loop (No Code!)
Accessibility Review - Six Tabs Blocks in WordPress
Переглядів 4143 місяці тому
Accessibility Review - Six Tabs Blocks in WordPress
Dynamically Populate the Select Field in Elementor Pro Form using Dynamic Shortcodes
Переглядів 9733 місяці тому
Dynamically Populate the Select Field in Elementor Pro Form using Dynamic Shortcodes
External API Data in Any Page Builder Made Easy | Dynamic Shortcodes
Переглядів 9144 місяці тому
External API Data in Any Page Builder Made Easy | Dynamic Shortcodes
Populate Elementor Form Field based on Post URL Parameter using Dynamic Shortcodes
Переглядів 4334 місяці тому
Populate Elementor Form Field based on Post URL Parameter using Dynamic Shortcodes
Dynamic Mail List: Bricks Form using Dynamic Shortcodes
Переглядів 3764 місяці тому
Dynamic Mail List: Bricks Form using Dynamic Shortcodes
Show Button based on Product Stock in Elementor Loop Grid using Dynamic Shortcodes
Переглядів 3604 місяці тому
Show Button based on Product Stock in Elementor Loop Grid using Dynamic Shortcodes
Conditional Redirect in Bricksforge Pro Forms using Dynamic Shortcodes
Переглядів 4274 місяці тому
Conditional Redirect in Bricksforge Pro Forms using Dynamic Shortcodes
FINALLY! Dynamic Shortcodes and Bricks Integration
Переглядів 9074 місяці тому
FINALLY! Dynamic Shortcodes and Bricks Integration
Create Custom Query for Elementor Grids Easily With Jetengine Query Builder - No Coding Required!
Переглядів 1,8 тис.4 місяці тому
Create Custom Query for Elementor Grids Easily With Jetengine Query Builder - No Coding Required!
Jet Engine 3.5 Components in Bricks builder
Переглядів 1,7 тис.5 місяців тому
Jet Engine 3.5 Components in Bricks builder
Elementor Product Loop Grid: How to Custom Query with ACF Fields
Переглядів 2,9 тис.5 місяців тому
Elementor Product Loop Grid: How to Custom Query with ACF Fields
Advanced Date Conditions in Elementor using Dynamic Shortcodes
Переглядів 4115 місяців тому
Advanced Date Conditions in Elementor using Dynamic Shortcodes
Hi, I'm your new subscriber. All your videos are really clear and easy to understand. do you know how to connect jetengine metabox to elementor template using dynamic tags and display conditions, in the latest elementor pro
Oh great, thanks! Yes, if you connect the metabox to your post type, you can use JetEngine's dynamic tags and dynamic visibility within any Elementor widget.
@@daveden2 can you make a video? because it seems there is a difference in the display condition in the newest elementor and the old elementor. which in the latest version of Elementor's display condition is placed in each Elementor widget, and not in the page's "publish" menu like the old version. I would be very grateful for that.
@@ashmboh2710 Oh yes, there are two display conditions in Elementor. One is for widgets, found in the widget settings under the Advanced tab. The other is for templates; you find that by clicking the dropdown icon next to the Publish button at the top right corner. I'll see what I can do regarding a video.
@@daveden2 thanks
DOM optimization is really great.
exactly what i need. New sub
Awesome!
How can I change the button to sold out? Thank you very much
You can create 2 buttons and then use Dynamic Visibility for Elementor by Dynamicooo to hide one button when it is out of stock..
@@daveden2 Thank you very much, I will try it
@jacobodi Dynamic visibility for Elementor is a free plugin you can get in the WordPress repo.
@@daveden2 Yes but apparently it is not possible with that
I am trying to add posts using a bircksforge form in frontend, but I can't figure it out. Maybe you can make a video about it?
Okay, I'll work on that for Monday.
@@daveden2 Thanks man
Sorry that I haven't published a video yet. I'm waiting for the changes in v3.0
@@daveden2 Are the changes coming soon?
@dionysoss yes, the beta should be released today. The final version would be out in a week or two
Thank you very much!
You're welcome 🙏
Would you like to see an Elementor vs. Bricks Speed Build?
Finally, some good tutorials about Bricksforge. There are not many UA-cam videos about the Bricksforge, so keep up the good work.
Thank you! I feel most people are waiting for the release of version 3.0.
Thank you so much for this ❤❤❤ I find the this type solution ❤
You're welcome 🙏
Amazing explanation Dave! In the case of Bricks Builder, would you say it makes sense to use the JetEngine or the Bricks Builder version, and when would you use which one?
Thanks! I generally use the native Bricks Query Loop unless I'm querying a CCT or I want to use an SQL/AI query.
Ah! You covered this too! Beautiful! I recorded yesterday and just published. Just now seeing your video! This is a good take! Well-done!
Oh, really? I did the same thing. I guess we were on the same wavelength. I'll check yours out on my way.
Another great video, Dave. I don't know how you can easily remember all of these things. Impressive, and you have a great teaching style. 😎
Thanks! I get assistance from my friends sometimes. I am also amazed by your knowledge of different tips and tricks for both Windows and Mac.
@@daveden2 ♥
❤
Thank you!!!
You're welcome 🙏
Well done tutorial
Thanks!!
When do you predict we will receive Bricksforge v3.0?
thanks
Thank you!!!
You're welcome 🙏
Thanks, what php snippet editor do you use? Do you have a tutorial for making events?
I generally use WPCodeBox for my code snippets. I don't yet have a tutorial about making events, but I am working on a simple version for free events.
This is exactly what I was looking for! Thanks so much. Is there any way to iftt statements in dynamic shortcodes? I am trying to populate an group of address fields based on whether it is client address or client shipping address which is triggered by a radio button to use or not the shipping address?
Yes, you can use if /switch statements using Dynamic Shortcodes. Is the radio button a form field or an ACF field? Here's the documentation - help.dynamic.ooo/en/articles/7172126-dynamic-shortcodes-for-expressing-conditions.
Yes radio button is an acf field. I didn’t realize you can also enter text like commas. I think I can now use one field to show either billing address or shipping address based on one radio button.
@Jimsoda yeah, you can do that.
@@daveden2 Well not so easy. Problem is that client address comes from a different post connect by a relational field. Only post ID being passed through is the one which has the shipping address. Easier said than done.
@Jimsoda you can pass those dynamic shortcodes that retrieve the post ID into another shortcode. For example, {acf: shipping-address @id={acf:relationship-field}}
Ive been looking for this kind of feature for a project Im working on. Great job, but, i wish you wouldve done it entirely with JE/Elementor and not timber/twigs. I got lost in that section so it wont work for me.
Oh, hi. I'll try to do another version using Elementor.
@@daveden2 Thank you. Im trying to figure it out on my own but so far not having a lot of luck. Great job and very helpful.
@jacklifeson do you have any specific requirements or examples you want to see? I'll try to tailor the new tutorial to that.
@@daveden2 To be honest, the only thing that was not clear (to me) was the section with Timber/Twigs. If you could do that section using only Jetengine and Elementor instead of coding. I imagine you would need to create a new listing, add a dynamic tag to the page, style it in elementor, then add it to the page you want it displayed on. ive been trying to figure it out.
@@jacklifeson Okay, I'll work on that tomorrow. Yes, you will need to create a JetEngine Terms Listing Grid using Elementor Views instead of Timber, then add it to the Posts Loop Grid from either Elementor or JetEngine.
i wanna hug you bro. just cool things. very very impressive for me. thanks again and god bless you. try to continue this types of tricks bro.
You're welcome. 🙏 I'll do my best to come up with more tips and tricks.
@@daveden2 thanks.
whats plugin midia library you use? better than beautyfull
I am using HappyFiles Pro for media management. In the past, I used Real Media Library.
Good to see engineer
The big boss!!!
Thanks, Daveden. Well presented and very informative
Thank you brother. You save my time. Many many thanks for shearing your knowledge.
You're very welcome!
This is gold man! These videos. I have it sitting on my inventory caus I think its a bit difficult to use.
Yeah, I'm also figuring out some of the other features. I plan on doing a simpler video for the front-end post submission form using Pro Forms. I'm waiting for v3.0.
Thank you so much. You are a life saver. You got a new subscriber.
Oh, cool! You're welcome. I'm glad it helped
Excellent thumbnail, first of all!
Thank you, thank you!
Helpful video thanks! I'm looking forward to the Elementor Menu widget becoming a stable feature. I'd love to get rid of JetMenu plugin.
Yes, I like the progress that Elementor is making so far.
Thank you. Good to see that Elementor shows somethings in the latest updates. Can we have offconvas/popup, that call the content with Ajax to not having the data initially in the Dom of the main page? Prefer to have this in Bricksbuilder more than Elementor.
Unfortunately, the Elementor native off-canvas does not yet have the option to use Ajax. Everything is loaded in the DOM upon page load. I believe JetPopup uses Ajax.
@@daveden2 The Elementor uses an Ajax call. The Offcanvas widget use loaded on page load for SEO reasons.
@@heinvanvlastuin4954 Oh, thanks for letting me know. 🙏 I definitely like all the new updates.
@@daveden2 Amazing. We are working hard.
Looks like a very nice update! Can we use acf custom post types and custom fields in the off canvas widget dynamically for each loop item?
Yeah. Elementor is getting better and better. Yes, you can use custom fields connected to each loop item. In my example, I created an events CPT using JetEngine, and inside the off-canvas, I had two JetEngine date metafields for the start date and end date.
Would you like a step-by-step tutorial showing how to create a front-end submission form?
@@daveden2 yes
would be amazing!
Pls make more reviews - maybe you make a A11y Online Course because this topic is complicated :)
Yeah, accessibility is a topic I'm passionate about. I'll try to do more videos to keep people aware of the different aspects. I like that idea to create a course. I'll look into that.
@ Great! I am sure many people will buy your courses
Great tutorial! Could you please create an in-depth video from scratch on working with the IMDb API? Specifically, it would be helpful if you could demonstrate how to setting up a form to search for movies using the API, as shown in your bricks demo. A step-by-step guide would be greatly appreciated!
Thanks! That sounds like an interesting idea. I'll think about that.
Thank you
Thank you very much!
You're welcome!
Do you use a dark mode toggle switch on your website?
@@daveden2 yes, I do
Meta Box apparently fixed the issue and now the sliders can be targeted and get blue outlines. Guess they're watching your videos. ;)
Oh nice!! I'm really happy to hear that.
Can you do this to the parent also? If i want to add white space on the left and right side of my parent container?
You can use this simple CSS on the parent container. Change the 20px to the spacing you want: selector{ width: calc(100% - 20px); margin-inline: auto; }
absolute legend. subbed
again very advanced & great tutorial. Thank you and keep going!
Thanks! 💪
This is just so good. Thank you! To watch you testing for accessibility is fantastic. Your presentation and production is top notch.
Thank you! I really appreciate that.
Thank you very much for this excellent video tutorial. So well done! So informative! Looking forward to watching more of your productions.
Thank you! If you have any requests, feel free to let me know.
Well done
Thank you!
Thank you for all your videos. Is the JetEngine Query Builder addon free?
Yes, the addon is free. But you need to have JetEngine installed.
@ Thank you for replying.