Видео

Is this a WooCommerce products page or a custom post type you've made?

Good question, and thank you very much for watching and commenting! I'm not sure one is better than another. I sometimes overlook the opacity slider and confuse myself, forgetting about the slider so it has worked better for my brain to put it to 100% and then force myself to slide the alpha channel on the colors themselves. In the case of wanting a gradient overlay, then the rgba approach is needed for more tailored control.

@@KingGrizzly great channel btw, thank you for all your tips, clearly an expert in this field. Yes I agree, I believe using the alpha channels yields more flexibility than opacity across the whole background. Thanks for taking the time to reply.

@@MrFrobbo I've got two videos coming up and will be very curious what you think. One is about a font clamp sizing plugin we built and will give away for free and the other is about using helper classes alongside the Elementor grid containers. If you happen to see them, please share your thoughts as you seem to know what you are doing!

@@KingGrizzly looking forward to it, I'll keep my eyes peeled. Font clamping 😳🤔 I have no idea, but it's all good learning though. I'm just mastering global/H12,3,4 etc fonts (the first of your vids I watched) which I nailed across displays today, with a bit of help from analysing the big player web sites and a chrome plugin called Whatfont, which is truly handy! I'm looking for a decent header and footer plugin to compliment Elementor lite, I'm working my way through them but most are quite flaky or limited sadly

Thanks, I'm glad W3 Total Cache works well for your use case. There is often more than one way to solve a "problem". We've had good results with this Optimole method. Shortpixel Adaptive Images does something similar: delivering perfectly sized images on the fly in the best format a user's browser can handle. This is done without creating bloat on the website in the form of duplicate images per upload and removes the problem of picking a dropdown size and it still not matching the image size on page due to browser size. As for the third party image hosting, Optimole has an option to keep a version of the image locally, on their CDN, or both, and is supposed to add some sort of an image header to lazy loaded images so the SEO credit goes back to the source site's image in the uploads folder. So yeah, Optimole fan here. 😄

@@KingGrizzly sponsored by Optimole 🤣

Hadn't seen this. Still seems to work for me but maybe it isn't receiving updates.

@@KingGrizzly Have loved Namechanger for long time! On my old (Sierra) Late 2011 MBP, I am renaming large collections of files from years past - the names of which were formerly foreshortened due to limited screen real estate in earlier years. Example: I was forced to use dots instead of dashes in file names in years past…easily fixable by Namechanger.

Good question. I've not noticed this issue, but CSS is probably your best bet.

If only it were true! Thanks for watching and happy web designing.

Ha! Glad I'm not the only one who does that. Glad this helped.

Thank you for the subscription, we've got some good content planned!

Happy this helped! Best wishes with your website work.

✌

Glad this was helpful! Thanks for the message.

Glad this helped. Thank you for the comment. Have a nice week.

Hi Thomas. Sometimes the code syntax highlighting isn't actually a problem, just a recommendation. Does the code fail to work for you? If it works, you probably don't need to worry about it. If it fails to work, something is wrong.

@@KingGrizzly something is wrong then. But what could that possibly be? Any guidance would be very much appreciated!

@@thomasschuurmans4838 Hard to say without taking a look.Did you hand type the snippet? I know we had kind of an annoying "opt in" to get the snippet, but the latest should work. Otherwise, if you want me to take a look, feel free to email brian@(ourbrandname).com and I can take a look!

@KingGrizzly my colleague got it to work. This works. He noticed that the snippet does not take into account recent elementor updates. Also we had not activated the flexbox container for elementor. Snippet that works: selector .elementor-accordion-item .read-less { display: none; } selector .elementor-active .elementor-accordion-title .read-more { display: none; } selector .elementor-active .elementor-accordion-title .read-less { display: inline; }

@@thomasschuurmans4838 Thanks for sharing. This is interesting because I've got an up to date site with the accordion running and the classes are like the ones in my snippet. I don't see the .elementor-accordion-title class in the HTML markup anywhere. So I'm wondering if your colleague added that class or if some variation in our Elementor settings or plugins is creating a difference? Nonetheless, glad this is working and thanks for interacting! If more people report issues, I'll add your snippet into the .txt file as one possible solution option. Happy web designing!

Can you see this snippet? kinggrizzly.com/wp-content/uploads/snippets/clickable-parent.txt If you can, you'll need to add the script to your site and then just need the 'clickable' class on the parent container. Only put one URL inside. So, if you have a container with a heading, paragraph, image, and button... just link one of them. The 'clickable' class on the container will see it and link through.

I'm not certain, but do think Elementor Pro is required to see those ACF dynamic fields. According to ChatGPT: "Yes, in Elementor, using dynamic tags for ACF (Advanced Custom Fields) image fields is only supported by Elementor Pro. The free version of Elementor does not support ACF integration for dynamic content, including image fields. Elementor Pro allows you to pull in data from ACF, including images, and display it dynamically in widgets like the Image widget or other relevant areas."

​@@KingGrizzly No I do have Elementor Pro, I was wondering about ACF Pro because I don't see them..

@@2kpixy Ah, I see. If you were able to successfully create the image in ACF, then I don't think that should prohibit you from finding it with the dynamic tag. You might try changing the settings on the image field itself in ACF. I know you can change a setting so it outputs an Image Array, Image URL, or Image ID. Try "Image URL".

Are you running any performance optimizations plugins or tools such as WP Rocket, Flying Scripts, Siteground Optimizer, etc.? If so, they could be causing your animation to fail. Quick test would be to turn off the plugin to see if the problem goes away. If it does go away, then the plugin settings would need to be adjusted to allow Elementor animations. Let us know what you find out.

@@KingGrizzly Nope, no optimization plugins installed

This is nice to see! I'm pleased this helped you and appreciate your kind words. Happy web designing!

Power move!

It has worked for many others. If you offer some details about what isn't working, we may be able to help.

Have you made the changes mentioned in the update in the description below the video? And if you hit F12, do you see any JavaScript errors in the console?

Try going to Elementor > Settings > Features in the main Wordpress admin and enabling "Nested Elements". Also, go to Elementor > Element Manager and make sure the Carousel is enabled.

@@KingGrizzly Thanks, it was that Nested setting 👌👌

I still cant make it full width

@@gomixndembix The parent container needs to have the padding setting to '0' for left and right and it's width needs to be "full width", not "boxed". Does that help?

Very happy to hear this! Glad it helped!

Hi - thanks for watching! Do you mean you have five separate carousels, all on the same page, and each carousel has its own set of buttons that should only control that one carousel?

@@KingGrizzly thanks so much for the quick response! I actually figured it out: i needed to use the .slideTo method and refer which button ID would respond to the slide number. Thanks again!

Ah, OK, I think I see what you mean now. Glad you figured it out!

@@KingGrizzly thanks again! Bonus question, if I may: is there a way to add an active state styling for a button depending on which slide the slider is? For example: we have 5 slides and 5 buttons, each button scrolls to a particular slide. Is there a way to make, say, button 3 red when the slider is showing the corresponding/linked slide? How would js and css adjustments would looks like? Many thanks!

It would probably be awkward to do this over the comments, but you likely need to use a JS event listener on the slides changing, then style the corresponding button accordingly. Although this sounds very much like what the navigation dots on the carousel already do! You might be better off just styling those!

Thanks Steve! Good idea, I finally found a reason to use the grid widget this week and had to use CSS to make it span correctly.

Hi Steve! We have another video that shows a good use case for grid with Elementor's loop grid widget and some additional CSS. You might find it useful! ruclips.net/video/wDlVUzx30hk/видео.html