Request video: Inserting SVGs into oxygen/manipulating them efficiently (perhaps how to prepare them for insertion would also be great - like cropping).
Man, you're killing it. I'd love to see how would you build a filterable portfolio in Oxygen. Also, would it be possible to apply responsive images (not backgrounds) from repeaters or easy posts? Thank you for your work. Keep it up!
Fantastic, all your tutorials!!! Please keep "producing" them, I'm learning a lot... Plus enjoying them, you spread good vibes! I'm interested in the srcset images you mentioned (dos and donts), maybe also one tutorial about fonts (recommendations, dos and donts)...
What I like about your tutorials is there is no fluff, it is well planned (no time wasted) and incredibly informative and motivating probably because of your enthusiasm. Thanks
Earlier I posts a response to a Facebook message which I misread. I don't think you meant to say "if its not perfect then we don't want you here." I combined the message you wrote and another and in my mind combined the 2. Your videos where some of the best parts of working with Oxygen and I honestly am a fan of your content. I just wish that for so many people who reached out to me today to explain how they want to use Oxygen, but going to the facebook group to get help is toxic to the point where they wont ask questions anymore and will just not use features like animation because when it doesn't work they are tired to being attacked for being an idiot. For Oxygen to succeed it needs to grow as a community and many new users are being run off.
Awesome walkthrough, Kevin. You always hit the mark. I ran across your video when looking for a Modal for Bricks implementation. I was wondering if you had published any tutorials on using Modals in Bricks. Also, it would be great if you could explain in detail how to implement such functionality for dynamic content. Extremely grateful. What an incredible help. 😊👍
Needed the template conditions, needed a modal form, and yes a slick one - watched two of your vids and I am good to go. Thanks!!! One request, you refer in your video to two earlier vids (owl and padding) would be good for the lazy people amongst us, or just me, if they would be listed in your text below the vid.
Just to anyone just skipping to the tutorial building part - the reason "c-columns-2-3" or "c-strech" is not working for you is because we don't have oxyninja. At least that is what I have found out.
Great tutorial 👍😊 I like hire while teaching one thing toy teach so many other things 👍 Two comments: 1. I understood that in terms of accessibility is bad practice to not have a label in forms (as level and placeholder have a very distinct function) 2. I understood also that pages that have a form shouldn’t be cached. How does this work in that sense! Thanks 🙏
There's a way to place the actual label inside the input in WSForm if you prefer to do it that way. I think the caching thing applies to forms with AFT. But, you can also choose to not cache specific elements, I believe. All I know is the forms work fine ;) If someone else wants to chime in who knows more about this I'm happy to change my approach.
Hallo, men. Can u show about how to connecting login form to database ? I see u is very good bruh for make a tutorial. I hope u can make a vidio for it. Thx bruh
top-notch tutorial...when's the course coming ;) - really like the fact that you are making the oxygen work hard to get truly responsive - the design looks good and I got a few tips on ws form (so please do more on that and oxygen...suggestion). What would be a killer conversion tool - you could somehow parse (via javascript & data attributes magic) the actual button or at least the section - ie this email is coming from 3rd section on the portfolio page...boom digital marketers will love you. I like the slickness of internal labels (but some UX/ accessibility hardcores may say it takes something away from UX and screenreader...maybe there is a compromise solution)
I don't have much intention of doing an Oxygen course. Whatever Oxygen stuff people are charging for I'll give away for free. I'd rather do premium stuff related to helping build a better agency or freelance career. I have a ton of valuable insider stuff that's definitely worth investing in on that side of the coin. The Oxygen stuff I'll gladly do for free :)
And yes, you're right about the other stuff. I'll keep progressing the concept with WSForm. And there's an alternative way to put the labels inside the fields with WSForm that respects screen readers, I just didn't use it in this tutorial.
Thanks Kev for another great video that teached me a lot!! When a page has several buttons/links that trigger the same modal, do you know if WSForm or Fluent Forms could tell us which link/button was clicked (by assigning an ID to each of them)?
Thank you for a great tutorial! How do I keep the modal from closing down after the submission of the form? In my form I have a PDF that shows after submission but it does not show as the modal closes down as the page reloads after submission. Anyone know how to prevent this?
Another awesome tutorial Kevin. Thanks again. Question. Assuming I am a roofing company (I'm not) how could I show a different form for different service category pages? Would I create a different modal for each services page, each having its own class and then adding that class on the corresponding service category page? Or is there a more efficient way to do this? As an example. I would have Roofing Installation form with different services in a drop down like New Commercial roof, new residential roof, residential re roof or commercial re roof on a installation services page. Then on a roof maintenance & repair page, a different form that has those corresponding services like commercial leak repair, commercial flat roof repair, residential leak repair, or residential shingle repair? I hope that makes sense!
@@Gearyco The UX would be poor. My current forms are set up like the way I described, but they are right on the page not in a lightbox. I saw a significant increase in leads when I simplified it for my users. Can I just add the modal to each of the service pages? There are 7.
Thanks for sharing! Just having trouble duplicating it to other buttons. The page opens in the following tab: about:blank#blocked - not sure how to fix this, would appreciate any insights on how to fix this ....
Excellent video! Very interesting the use of classes to open the modal window. Now, is it possible to open the modal window from an external link? For example, if you send an email with the option to request a quote from the email itself? Regards and many thanks!
Thanks for the amazing video! What are your thoughts on compatibility concerns between lightbox forms and forms on pages? It seems a form on a page would more likely display for someone using older browsers than a lightbox - but idk. That's my biggest concern. Also wondering if you pay for the form yourself for a client, or have them purchase it directly - then use their credentials to get in and access the WS Form tools? I'm just starting web development and $ is a concern.
We buy and control all licenses and pass costs on to client in our monthly management fees. If they don't want to pay us to manage the site (rare), they need to buy their own licenses. Haven't run into any issues using lightbox forms. Lightbox is well supported across all devices and browsers.
So great as anything you offered, thank you very much!!! Highly appreciated! Eye-opener! As I learned it is not possible to have a multi-triggered cta modal in oxygen: on click plus on xyz% scroll plus on exit, like a plugin like convertplus offers? Is that right?
@@Gearyco Also I have been getting this error "Uncaught TypeError: Cannot read property 'classList' of undefined on line #2 in stsignaturestaging.hireawriter.com.ng/?ct_template=events-test&ct_builder=true&ct_inner=true&oxygen_=true Anytime I try to edit my woocommerce product page. Can You Please help.
May I ask how you would build that exact grid without utility class? I can only make a 1/3 grid that resembles closely what you have there, but still not the same... :/
Trigger instruction for modal when someone registered on my site please. Instead of your registration was successful page I use a modal to redirect them to a page of my liking.
sorry if i'm wrong... in oxygen setting there is a "enable selector detector" for this case to grab the selector from the wsform: and started to styling it with oxygen... what about that?
Yep, there are many ways to accomplish the same thing. In this case, WSForm provides some simple customization tools. If you want to go further you can explore other methods.
Request video: Inserting SVGs into oxygen/manipulating them efficiently (perhaps how to prepare them for insertion would also be great - like cropping).
Man, you're killing it.
I'd love to see how would you build a filterable portfolio in Oxygen. Also, would it be possible to apply responsive images (not backgrounds) from repeaters or easy posts?
Thank you for your work. Keep it up!
+1
Fantastic, all your tutorials!!! Please keep "producing" them, I'm learning a lot... Plus enjoying them, you spread good vibes! I'm interested in the srcset images you mentioned (dos and donts), maybe also one tutorial about fonts (recommendations, dos and donts)...
What I like about your tutorials is there is no fluff, it is well planned (no time wasted) and incredibly informative and motivating probably because of your enthusiasm. Thanks
Much love!
Earlier I posts a response to a Facebook message which I misread. I don't think you meant to say "if its not perfect then we don't want you here." I combined the message you wrote and another and in my mind combined the 2. Your videos where some of the best parts of working with Oxygen and I honestly am a fan of your content. I just wish that for so many people who reached out to me today to explain how they want to use Oxygen, but going to the facebook group to get help is toxic to the point where they wont ask questions anymore and will just not use features like animation because when it doesn't work they are tired to being attacked for being an idiot. For Oxygen to succeed it needs to grow as a community and many new users are being run off.
I’m not perfect so I definitely don’t expect anyone else to be 🙏
And this is why I left FB many years ago and will never subject myself to that toxic environment again...
Thanks for this great tutorial........Kindly make a one on Utility classes as well....
bro, awesome tuts keep it up. Mobile menus, gsap, animations, all that good stuff would be much appreciated
+1 for gsap for sure ;))
Awesome walkthrough, Kevin. You always hit the mark. I ran across your video when looking for a Modal for Bricks implementation. I was wondering if you had published any tutorials on using Modals in Bricks. Also, it would be great if you could explain in detail how to implement such functionality for dynamic content. Extremely grateful. What an incredible help. 😊👍
Thank you for this awesome tutorial! Found it very helpful :-)
Needed the template conditions, needed a modal form, and yes a slick one - watched two of your vids and I am good to go. Thanks!!!
One request, you refer in your video to two earlier vids (owl and padding) would be good for the lazy people amongst us, or just me, if they would be listed in your text below the vid.
Very cool! I much appreciate your approach both at teaching and technics
Wow, Great tutorial. You solved several issues. 😊 Love the upbeat tone!
Nice! I would say that's "slick" yes.Good use-case for passing the public-post-url!
Totally!
I used to have another fave! You are now my new fave such a fickle business being a youtuber
Thanks, Justin! Lots of great peeps out there - we can all be friends :)
@@Gearyco defo full respect to anyone who is obviously busy but still take time out to create great content.
Just to anyone just skipping to the tutorial building part - the reason "c-columns-2-3" or "c-strech" is not working for you is because we don't have oxyninja. At least that is what I have found out.
Wow this is really good for me as a website conversion student. Thank you Kevin.
Glad it was helpful!
Spot on yet again :)
Excellent videos!!! If you could do a tutorial on how you use oxy ninja in your workflow that would be awesome. Thanks!
Coming soon!
Great tutorial. Thanks Kevin.
Awesome Content!
Great tutorial. Keep them up, please. I'll look forward to more!
Great content! You are an awesome teacher, keep these tutorial coming!
Thank you for all the valuable information and learning. The affilaite link is no active, or is my browser...
Love your vids dude!
Fantastic. These videos are incredibly educational. Many thanks for your effort! I look forward to more of them! :-)
Many thanks!
Great tutorial 👍😊 I like hire while teaching one thing toy teach so many other things 👍
Two comments:
1. I understood that in terms of accessibility is bad practice to not have a label in forms (as level and placeholder have a very distinct function)
2. I understood also that pages that have a form shouldn’t be cached. How does this work in that sense!
Thanks 🙏
There's a way to place the actual label inside the input in WSForm if you prefer to do it that way.
I think the caching thing applies to forms with AFT. But, you can also choose to not cache specific elements, I believe. All I know is the forms work fine ;) If someone else wants to chime in who knows more about this I'm happy to change my approach.
can't wait to follow your tutorial
loves all your video...
Hallo, men. Can u show about how to connecting login form to database ? I see u is very good bruh for make a tutorial. I hope u can make a vidio for it. Thx bruh
super great tutorial, please put a slick custom dropdown mobile menu for next show then
top-notch tutorial...when's the course coming ;) - really like the fact that you are making the oxygen work hard to get truly responsive - the design looks good and I got a few tips on ws form (so please do more on that and oxygen...suggestion). What would be a killer conversion tool - you could somehow parse (via javascript & data attributes magic) the actual button or at least the section - ie this email is coming from 3rd section on the portfolio page...boom digital marketers will love you. I like the slickness of internal labels (but some UX/ accessibility hardcores may say it takes something away from UX and screenreader...maybe there is a compromise solution)
I don't have much intention of doing an Oxygen course. Whatever Oxygen stuff people are charging for I'll give away for free. I'd rather do premium stuff related to helping build a better agency or freelance career. I have a ton of valuable insider stuff that's definitely worth investing in on that side of the coin. The Oxygen stuff I'll gladly do for free :)
And yes, you're right about the other stuff. I'll keep progressing the concept with WSForm. And there's an alternative way to put the labels inside the fields with WSForm that respects screen readers, I just didn't use it in this tutorial.
Thanks Kev for another great video that teached me a lot!!
When a page has several buttons/links that trigger the same modal, do you know if WSForm or Fluent Forms could tell us which link/button was clicked (by assigning an ID to each of them)?
Thanks once again !
Wonderfull!!
Thank you for a great tutorial! How do I keep the modal from closing down after the submission of the form? In my form I have a PDF that shows after submission but it does not show as the modal closes down as the page reloads after submission. Anyone know how to prevent this?
Deliver the PDF on a separate page. Better for goal tracking anyway.
Man i love your videos. You should put all that great stuff like owl spacing into a (Free?) Designset. Or is there a way to export import that stuff?
Not sure what the best way to do it would be. I'll think about it!
Another awesome tutorial Kevin. Thanks again. Question. Assuming I am a roofing company (I'm not) how could I show a different form for different service category pages? Would I create a different modal for each services page, each having its own class and then adding that class on the corresponding service category page? Or is there a more efficient way to do this? As an example. I would have Roofing Installation form with different services in a drop down like New Commercial roof, new residential roof, residential re roof or commercial re roof on a installation services page. Then on a roof maintenance & repair page, a different form that has those corresponding services like commercial leak repair, commercial flat roof repair, residential leak repair, or residential shingle repair? I hope that makes sense!
Fewer forms and modals is always better. Can all be done with one using conditional logic in the form.
@@Gearyco The UX would be poor. My current forms are set up like the way I described, but they are right on the page not in a lightbox. I saw a significant increase in leads when I simplified it for my users. Can I just add the modal to each of the service pages? There are 7.
Thanks for sharing! Just having trouble duplicating it to other buttons. The page opens in the following tab: about:blank#blocked - not sure how to fix this, would appreciate any insights on how to fix this ....
figured it out, thanks...
Excellent video! Very interesting the use of classes to open the modal window.
Now, is it possible to open the modal window from an external link?
For example, if you send an email with the option to request a quote from the email itself? Regards and many thanks!
Don’t think so. Unless you make a dedicated page and trigger the pop up on page load, which is possible.
Thanks for the amazing video! What are your thoughts on compatibility concerns between lightbox forms and forms on pages? It seems a form on a page would more likely display for someone using older browsers than a lightbox - but idk. That's my biggest concern.
Also wondering if you pay for the form yourself for a client, or have them purchase it directly - then use their credentials to get in and access the WS Form tools? I'm just starting web development and $ is a concern.
We buy and control all licenses and pass costs on to client in our monthly management fees. If they don't want to pay us to manage the site (rare), they need to buy their own licenses. Haven't run into any issues using lightbox forms. Lightbox is well supported across all devices and browsers.
So great as anything you offered, thank you very much!!! Highly appreciated! Eye-opener!
As I learned it is not possible to have a multi-triggered cta modal in oxygen: on click plus on xyz% scroll plus on exit, like a plugin like convertplus offers? Is that right?
It's definitely not as fully featured as Convertbox. But Convertbox has drawbacks, too.
Awesome tutorial. Thanks. How do I lock my background from scrolling the pop up is showing.
I think this is getting fixed natively in 3.8.
@@Gearyco Also I have been getting this error
"Uncaught TypeError: Cannot read property 'classList' of undefined on line #2 in stsignaturestaging.hireawriter.com.ng/?ct_template=events-test&ct_builder=true&ct_inner=true&oxygen_=true
Anytime I try to edit my woocommerce product page. Can You Please help.
Super amazing stuff! What are the disadvantages by just using for example Sendinblue HTML code and embedding the form?
You lose a lot of functionality possibilities.
May I ask how you would build that exact grid without utility class? I can only make a 1/3 grid that resembles closely what you have there, but still not the same... :/
I had to use bootstrap utility classes to achieve what you have achieved. But how do I make it natively in Oxygen :/
With oxygen's grid builder you can define a 5 column grid and then make the first div span 2 columns and the second div span 3 columns.
Trigger instruction for modal when someone registered on my site please. Instead of your registration was successful page I use a modal to redirect them to a page of my liking.
sorry if i'm wrong...
in oxygen setting there is a "enable selector detector" for this case to grab the selector from the wsform: and started to styling it with oxygen...
what about that?
Yep, there are many ways to accomplish the same thing. In this case, WSForm provides some simple customization tools. If you want to go further you can explore other methods.
@@Gearyco yes it's ... and I started to consider saving some money for the wsform: :D
Hi, with the new iOS these modals doesn't work very well in Safari. Have you tested it on iPhone?
I use the oxyextras lightbox instead of the oxygen modal now. It’s also accessible.
How do you do this if your contact "button" is in the nav menu element?
Appearance > Menus > Screen Options (Top Right Drop Down) > Check "CSS Classes" > Open Panel for Target Page in the Menu > Add CSS Class
I cannot see c-stretch class. Is that inbuilt or custom ?
Built in
would i install the modal on the page, or the header and footer template (main) ??? Thanks upfront hahaha
For this use case, Main template
Woo-commerce and oxygen
Massive topic. Anything specific?