- Видео 36
- Просмотров 66 032
Aperture Digital Marketing
США
Добавлен 7 июл 2022
Bricks Forge 3.0 Node Editor Age Gate Demo
In this video, learn the new Bricks Forge 3.0 Node Editor to control a Bricks Builder popup template. The node editor controls page onload events, form submissions, and custom JavaScript. You will also learn about browser storage and how to check for your stored variables!
Full blog post here:
brickscoach.com/how-to-create-an-age-gate-with-the-bricks-forge-node-editor/
Wondering what tools I use at my agency? check them out below!
Bricks Forge: bricksforge.io/?aff=c5a44148
Meta Box: metabox.sjv.io/qn39VL
Automatic CSS: automaticcss.com/ref/41/
Fathom GDPR Analytics: usefathom.com/ref/QPRTID
Vultr Servers: www.vultr.com/?ref=9088377
Fluent Forms: fluentforms.com/?ref=1552
Slim SEO: slim-seo.sjv.io/Q...
Full blog post here:
brickscoach.com/how-to-create-an-age-gate-with-the-bricks-forge-node-editor/
Wondering what tools I use at my agency? check them out below!
Bricks Forge: bricksforge.io/?aff=c5a44148
Meta Box: metabox.sjv.io/qn39VL
Automatic CSS: automaticcss.com/ref/41/
Fathom GDPR Analytics: usefathom.com/ref/QPRTID
Vultr Servers: www.vultr.com/?ref=9088377
Fluent Forms: fluentforms.com/?ref=1552
Slim SEO: slim-seo.sjv.io/Q...
Просмотров: 953
Видео
Bricks Builder Custom CSS & The nth-of-type Selector
Просмотров 8993 месяца назад
In this video, learn how to dynamically style elements In Bricks Builder using the nth-of-type(n) selector. Custom CSS in Bricks Builder can help you create scalable and maintainable websites where you let the database run the show! With this method of styling elements, you won't have to open up the Bricks Builder every time you want to add a new element! This method works great to style query ...
Sort Meta Box Clone Fields
Просмотров 1635 месяцев назад
Watch this video to see how you can sort Meta Box clone fields by dragging and dropping! This makes it really fast and easy to order and sort your data exactly how you want! Sign up to my newsletter at brickscoach.com to stay up-to-date with my latest tutorials. Wondering what tools I use at my agency? check them out below! Bricks Forge: bricksforge.io/?aff=c5a44148 Meta Box: metabox.sjv.io/qn3...
Manage WordPress Options Data With Bricks Forge Pro Forms
Просмотров 1 тыс.5 месяцев назад
In this video you'll learn how to create edit and recall data stored in the wordpress options table using Bricks Forge Pro Forms. With Bricks Forge Pro Forms, we can set the form's submit action to update options. This action allows us to store data in the wordpress options table. Using the Bricks Forge Option element, we can easily recall this data anywhere on our website. This is a great tuto...
Simple WordPress Tour Guide With Bricks Forge
Просмотров 7108 месяцев назад
Take a look at how easy it is to build guided tours with the Bricks Forge Tour Guide element. You can quickly enhance the user experience on your web pages by adding a guided tour with Bricks Forge. Supercharge Your Web Development With Bricks Forges: Bricks Forge: bricksforge.io/?aff=c5a44148 Wondering what tools I use at my agency? check them out below! Bricks Forge: bricksforge.io/?aff=c5a44...
Supercharge The Bricks Builder Basic Text Element
Просмотров 1 тыс.8 месяцев назад
Learn how to extend the Bricks Builder basic text element with html and CSS. We learn how to use span tags to style words added to the Bricks Builder basic text element. Wondering what tools I use at my agency? check them out below! Bricks Forge: bricksforge.io/?aff=c5a44148 Meta Box: metabox.sjv.io/qn39VL Automatic CSS: automaticcss.com/ref/41/ Fathom GDPR Analytics: usefathom.com/ref/QPRTID V...
Bricks Templates Inside WordPress Content
Просмотров 8758 месяцев назад
Learn how to add Bricks Builder templates to your WordPress blog posts using shortcodes! Bricks Builder makes it easy to add sections directly to the WordPress content by copy and pasting the Bricks template shortcode directly into the WordPress editor. Wondering what tools I use at my agency? check them out below! Bricks Forge: bricksforge.io/?aff=c5a44148 Meta Box: metabox.sjv.io/qn39VL Autom...
Automate Sharing Of WordPress Posts On Social Media
Просмотров 2948 месяцев назад
In this video, learn how to automate sharing of WordPress posts on social media.You can combine ChatGPT, Pabbly Connects, and a WordPress to automatically share your latest blog posts on all your social channels. #wordpress #automation #pabblyconnect #chatgpt #businessautomation To see how you can automate your work, schedule a consultation @ busisites.com/lets-talk/ To get started with web aut...
Rotate Bricks Builder Menu Icon #shorts #bricksbuilder
Просмотров 5669 месяцев назад
Learn how to rotate the Bricks Nav Menu Icon in less than 30 seconds! CSS: .brx-submenu-toggle button { transition: transform .6s ease-in-out; } Wondering what tools I use at my agency? check them out below! Bricks Forge: bricksforge.io/?aff=c5a44148 Meta Box: metabox.sjv.io/qn39VL Automatic CSS: automaticcss.com/ref/41/ Fathom GDPR Analytics: usefathom.com/ref/QPRTID Vultr Servers: www.vultr.c...
Bricks Builder Query Loop A Meta Box Group Field
Просмотров 92010 месяцев назад
In this video, I teach you how to create a Meta Box group field and use the Bricks builder query loop to display subfields inside the group field. Bricks Builder has a deep integration with Meta Box and has the capability to query Meta Box Groups. Using the Bricks Builder query loop, you can loop through a group and return fields stored in the group. You can see the written tutorial here: brick...
Bricks Form Dynamic Select Field
Просмотров 1,3 тыс.10 месяцев назад
Learn to to populate a Bricks Builder Form field select or radio fields with dynamic data from Meta Box. A few lines of PHP can help you populate the options on your select and radio fields. With this method, clients don't have to enter the Bricks Builder to make changes to the form field values. If you don't want to use the foreach loop, you can use the implode function to convert the array to...
Display Categories in a Bricks Builder Query Loop
Просмотров 3 тыс.10 месяцев назад
In this video, learn how to display WordPress categories in a Bricks Builder query loop. We also see how to assign an image to a category so you can have nice cards with images for each WP category! Wondering what tools I use at my agency? check them out below! Bricks Forge: bricksforge.io/?aff=c5a44148 Meta Box: metabox.sjv.io/qn39VL Automatic CSS: automaticcss.com/ref/41/ Fathom GDPR Analytic...
Bricks Builder Image Scroll On Hover (2024 Update)
Просмотров 1,6 тыс.Год назад
In this video, you will learn how to build an image that scrolls to the bottom when the user hovers over it. This is a great way to showcase your portfolio of website you built, show off images that are tall, or even show off products on your e-comm shop. Wondering what tools I use at my agency? check them out below! Bricks Forge: bricksforge.io/?aff=c5a44148 Meta Box: metabox.sjv.io/qn39VL Aut...
Connect Google Sheets With Bricks Forge Pro Form Webhook
Просмотров 1,3 тыс.Год назад
In this video, you will learn how to connect Google Sheets with your Bricks Builder Forms. We user Bricks Forge Pro Forms and webhooks to send the form data to Google sheets using a Google Apps script. The JavaScript for simple forms like the one shown in the video (JS for advanced forms is at the bottom): function doPost(e) { //get the active spreadsheet that this app script is attached to. va...
Automatic BEM CSS Naming with Advanced Themer Class Converter
Просмотров 1,5 тыс.Год назад
In this video, we take a close look at the Advanced Themer module called Class converter. This feature will add classes to all of your builder elements you select and move any ID level styles up to the newly created class. Amazing! Wondering what tools I use at my agency? check them out below! Bricks Forge: bricksforge.io/?aff=c5a44148 Meta Box: metabox.sjv.io/qn39VL Automatic CSS: automaticcss...
Use Attribute Selectors To Style Elements In Bricks Builder
Просмотров 1,9 тыс.Год назад
Use Attribute Selectors To Style Elements In Bricks Builder
Show or Hide A Section With Bricks Builder
Просмотров 3,7 тыс.Год назад
Show or Hide A Section With Bricks Builder
Track Form Submissions With Bricks Forge and Fathom Analytics
Просмотров 874Год назад
Track Form Submissions With Bricks Forge and Fathom Analytics
Bricks Builder Popup and Interactions: Contact Form Popup
Просмотров 2,6 тыс.Год назад
Bricks Builder Popup and Interactions: Contact Form Popup
Front End Form With Bricks Builder and Bricks Forge
Просмотров 2,9 тыс.Год назад
Front End Form With Bricks Builder and Bricks Forge
Contact Form Popup With Bricks Builder And Bricks Extras
Просмотров 1,1 тыс.Год назад
Contact Form Popup With Bricks Builder And Bricks Extras
Bricks Forge Pro Forms and Bricks Extras Dynamic Chart Demo
Просмотров 1,1 тыс.Год назад
Bricks Forge Pro Forms and Bricks Extras Dynamic Chart Demo
Create Dynamic Title Tags, Bread Crumbs, and Post Titles With Rank Math
Просмотров 1,3 тыс.Год назад
Create Dynamic Title Tags, Bread Crumbs, and Post Titles With Rank Math
Bricks Builder CSS Animations With Clip Path
Просмотров 2,8 тыс.Год назад
Bricks Builder CSS Animations With Clip Path
Bricks Builder Query Loop With Happy Files
Просмотров 3,5 тыс.Год назад
Bricks Builder Query Loop With Happy Files
Dynamic Data FAQ Schema With Oxygen Builder, MetaBox, and Slim SEO Schema
Просмотров 1,2 тыс.Год назад
Dynamic Data FAQ Schema With Oxygen Builder, MetaBox, and Slim SEO Schema
How To Use Meta Box Cloneable Field Group With Bricks Builder Query Loop
Просмотров 3,1 тыс.2 года назад
How To Use Meta Box Cloneable Field Group With Bricks Builder Query Loop
Accessible Tabs With Bricks Builder
Просмотров 1,5 тыс.2 года назад
Accessible Tabs With Bricks Builder
Please, how to connect Notion?
@@andreasayocruz I don't have Notion, do they have a free tier?
@@aperturedigitalmarketing Yes, it’s free. It still shows me an issue with data, keys, and values. Response: json { "object": "error", "status": 400, "code": "validation_error", "message": "body failed validation: body.parent should be defined, instead was undefined.", "request_id": "0b0af9ee-7e57-4710-a4cb-63f6ff5eb205" } ```"
Works flawlessly through POSTMAN.
@@aperturedigitalmarketing Yes, it is free.
Nice video! Thanks for sharing. My only critique would be that you need some form of error control for the JavaScript that fires after the form submission. You should use the same check used at the beginning after the JavaScript that fires after the form submission and the add a Branch after the JavaScript to be sure everything fired correctly before moving on to the Close Popup.
I think that's a great idea, I'll incorporate the code in the blog post!
What I came up without adding any new nodes was to check if the item was stored in local storage by trying to get it immediatly after setting it. If retrieval fails, then refresh the page. I'm not sure if the close popup node will run if of the previous JS step triggers the failure refresh. In my testing, the previous set of actions that true/false test for age_gate storage item will fail before the JS sets the age_gate item. So, What I added was probably more than what is needed for most use cases.
@@aperturedigitalmarketing All you needed to do was add the isAgeGateVerified function after the setAgeGate function. Then in the new Branch node, you check if it is false. If it is then move to Close Popup. If the setAgeGate fails and the isAgeGateVerified is not false then set it to "show" a hidden error message in your Popup. You could put this failed setAgeGate in a console, but that would not be good for the UX.
Thanks for sharing this 🎉
Is there much overhead vs coding in the Code Block?
I doubt the code BF produces is going to have any impact. But, I have not looked at the waterfall to see. I bet it's going to be less than say a 75kb above the fold hero image.
Why not just a simple button + onclick event? What dictates "which" on pageload is gonna fire first? There MUST be a place to control this, not shown in your video or theirs. As a side note, you dont necessarily have to use those const in the js.. there are also bricksforge global variables now.
@@BGdev305 I chose a form instead of a button so I could log form submissions action if I wanted. But a button would work too! If you watch the node explainer video, it says you can't route multiple events that you have to separate them. So that's what I did. It works too 👍
Love this! awesome for showing
Love your style of doing videos! Hope to see more Bricksforge 3.0 tutorials :) well done
Great Video! But why are you using a Pro Form only for the submit button? Why did you not using a simple button and a click event instead the submit button and the on submit event?
I think the Pro Form log form submission action would be useful to gather additional data. But, yep, you could use a simple button.
Thanks for this, will watch later but looked at the website link and laid out really nice, didn't know you had a Bricksforge link or I would have used it, is your course up and running now? No money after the holidays but sometime this year......
Recording is in progress! I hope to be finished up end of Q1 2025. I pivoted to a full blown community rather than a course. So, building out all of that as we speak!
Get the JS code here: dominate.aperturedigitalmarketing.com/node-demo
hello, how can I learn your course form your webpage? Do you have the course I can pay?
Hi! 👋 The Bricks Coach Community will be launching early next year. You will can get access to courses, themes, the plugin, sections, code, and mini-course to extend Bricks. If you join the newsletter, you can get notifications on the launch.
@@aperturedigitalmarketing OKAY,THANKS.
Hello ! Are you working as a freelancer ? How can I contact you ?
@@DuongNguyen-pd9cj brickscoach.com/what-is-the-bricks-child-theme-used-for/ There is a link in this page to schedule a consultation. I work based on an hourly rate. The more hours you book, the better the deal!
good pedagogy; but can you define the intention, the goal of doing this?
@@BienveillanceMartialeAikiCom most of my clients are not familiar with the WordPress Dashboard area. But they can understand how to login and click the Dashboard link. Here, you can store information your clients can use. How to Videos, support contact forms, and whatever else you can think of 😀
Excellent workaround.. creative and gave me some idea's, thank you
Thanks for the video, too advanced and yet you broke it down so I can go through it slowly to try and figure it out...
Once again an awesome video from you! Thank you so much buddy! Your work is dearly appreciated! 🙏
@@theskatingchoreographer thank you very much! Comments like these help keep me motivated 💪💪
Thanks a lot! Very well explaine.
thank you! 👍
This tutorial is awesome!
Holy f, thanks!! I was changing my elements one by one when I needed to change a color lol, now they are all attached to the same class I defined. Thanks a lot.
thats awesome! if you have class like .icon where all styles are dark, you can create a modifier class like .icon--light for icons you want to have a lighter color variation. or a different approach would be something like .container--dark .icon{ color: white; } .container--light .icon{ color: black; } the best part about classes is you can always go change the style in one single place instead of all over your site. cheers mate.
@@aperturedigitalmarketing yes, thanks!! your video opened my mind and did something similar as you said for buttons :D .button-light and button-dark much easier to work after defining it !
I love your tutorials!
Thanks so much! I appreciate the kind words.
This is a great tutorial. Thank you. For something like querying testimonials, I use UL + LI rather than DIVs. Is there any advantage semantically using UL+ LI and not DIVs or is it just preference?
@@kevinrittershaus9380 you are correct and you should use ul + li tags. I should have done that looking back. The code will work the exact same way as long as your dom structure is set up with the li tag on the container in this use case.
Really useful!! Thank you 🙂
So glad!
Is the PHP Echo call method still viable in the most recent version of Bricks? (Version: 1.10.3 as of writing) I know there have been a lot of changes to how code is executed, especially how PHP is executed, as part of their security measures. I am following the same method and using: {echo:get_option('sort_order')} with "sort_order" my option name That is not working as a Value, nor as a Placeholder. However, I am able to display the value accurately in the Option field, so I know the value is stored and the name is accurate. Looking for some help and advice - great tutorial though!
@@th3doorMatt you have to sign all you PHP functions using the Bricks code review tool Then, add the provided snippet from the code review/ signing process over in the child theme. This tutorial broke for me until I added the snippet to the child theme. It's a pain, but a good security practice since this PHP from the builder is stored in the database rather than the file system. If it doesn't work, we can hop on a screen share and see what's going on and get it sorted.
@@aperturedigitalmarketing thanks! got the echo function added to the child theme functions.php file and now it's pulling through. I suspected that was the issue but thanks for pointing me in the right direction. I am 100% in agreeance with their decision to take those precautions, even though it requires a little more tweaking. I also wish that Snippets plugins were a little smarter in how they applied stuff like that; oh well. thanks again!
@@th3doorMatt woo hoo! Cheers mate.
Legend!
dang can you show how you got that structure? mine is looking a little different edit-- been building for a bit, came back and it made more sense, appreciate this once again
@@sajidnoob brickscoach.com/bricks-products/popup-form/ You can get the template here for ACSS, Core and vanilla CSS. I'll make sure everything gets setup properly for your use case too.
How to make a single template for category or product category? I mean display some info for just one category (fetched from url)?
What is this "Folders" plugin thanks for the answer...
Would repeatable fields also possible to integrate with google sheet?
@@leoenoch4989 Yes. Once you get all your data in the webhook, you would need to loop over that data in the Google sheet app script. Or you could store the repeater data as an array in sheets like [data, data, data] in one single cell. But that's not super great. You would have to write some code, but totally doable.
Great tutorial, resourceful! If you pay for a plugin to assign images to categories, I think it's better to pay for acf pro to add a custom field (image) to categories. Thanks. Great work.
Great Tip! Is it possible to send data from Checkbox Wraper and Radio Wrapper? I can't set it
What about displaying Subcategories, too? :)
how to get the product category's image url ?
To target the header's child now its .scrolling %root%
thank you sir
Thank you! This works great
Great to hear! I love when stuff just works haha.
This tutorial on setting up a sticky header with Brix Builder is really informative! The way it explains handling two rows and custom CSS for different breakpoints is clear and helpful. It's nice to see the step-by-step breakdown of how the JavaScript classes interact with the header, and the troubleshooting tips are definitely a bonus for anyone trying this out for the first time. Great work on simplifying what could be a complex topic!
Thanks very much for the kind words! I still use this method today on all sites that require a two row header... It definitely withstood the test of time for me.
So how do you do that for WooCommerce product categories?
Hmmmm 🤔 I haven't looked into that one. Sorry mate.
Many thanks! Is rhere any way of using the data from Google Sheets in wordpress? Ie having Bricksforge forms Get the data from the sheet? Many thanks!
Unfortunately I don't believe Bricks Forge can fetch data. But you can send data to your WordPress site using automations. Brendan O'connell has a vid on his channel showing how to do this.
Great work! This really helped, thank you!
Also make video on this video component which is changing on click?
@@Hassanakora This is a premium component on brickscoach.com.
@@aperturedigitalmarketing how many tutorials are available in premium plan?
@@HassanakoraThere are no plans at the moment. You only buy single products. So if you only want one item, you can purchase just this single item.
I watch almost every video. And this feature I’m using since almost 3 years xD thought you know about it 😜 but it’s a great great feature 👍
@@dynamic-homepages hahaha I know right!? I don't know how I missed this 🤣
@@aperturedigitalmarketing to buisy working full full time and doing great tutorials and aspects, that we did not think about 😀
This is super awsome. Is there a way to store something like an array of data so that i can retrieve more data from one identifier eg. If i had a hotel website i would like to get all data for room 1a and then data for room. 1b This way i would end up with a lot of variables for each room
@@MB-sl8pw at the end of the vid I go over this There's so much PHP involved that it's going to be a premium tutorial. But yes it's possible to store an array of data and use the data in a query loop or call it with dynamic data tags. Start at the last chapter to see what I'm working on. It's pretty darn cool 😎 If you need something custom built, I can help with that too.
@@aperturedigitalmarketing That sounds good, the premium tutorial. This just comes as a gift cause i really dont like acf as i cannot style eg an admin page properly as far as i know. Here its so much easier to style it its excatly what i been looking for..looking forward to the tutorial 👍
@@aperturedigitalmarketing I would pay for a premium guide with anything that might include a function, variables, etc.
Wow! You saved me so so much time. I was using ACF for a Book website -- Library with digital books. ACF is a pain in the ass and so so so slow. This Bricks Forge is incredible and very fast. I am using it for Post-Types -- Create New Book and Add Book to Topics and Categories. This is so so cool. Game changer!
Please make more great videos like this on Slim SEO and schema this time with bricks
Thanks! I would like to ask you, is possible to do this for repeater fields? Thanks!
@@martinbuno3990 probably so. But you'd have to write more in-depth PHP probably to get all the different fields and integrate with Google apps script.
@@aperturedigitalmarketing thanks! unfortunately, this is not my forte, I'm afraid I'll have to find another option.
@@martinbuno3990I'll put it on my list of video ideas. Repeater fields make everything dynamic so you would have to do some sort of loop to check the fields and data. Best of luck!
Awesome. I was just looking exactly for how to connect bricks form with a Google sheet. Lifesaver!
Great video thanks!
thx very helpful
Great tutorial!
These BricksForge videos are great, keep them coming!