วีดีโอ

Hmmm. The option won't show until you set a height. Did you set the height?

You might be able to do this globally with some kind of a JavaScript where you set a desktop, tablet, and mobile pixel offset whenever going to a named anchor. Maybe something like this... document.addEventListener('DOMContentLoaded', function () { const offset = { desktop: 100, // Offset in pixels for desktop tablet: 80, // Offset in pixels for tablet mobile: 60 // Offset in pixels for mobile }; function getOffset() { const width = window.innerWidth; if (width <= 768) return offset.mobile; if (width <= 1024) return offset.tablet; return offset.desktop; } document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { const target = document.querySelector(this.getAttribute('href')); if (target) { e.preventDefault(); const scrollPosition = target.getBoundingClientRect().top + window.scrollY - getOffset(); window.scrollTo({ top: scrollPosition, behavior: 'smooth' // Smooth scroll effect }); } }); }); });

@KingGrizzly thank you so much for the suggestion. I'll look into this further.

@@MichelleMcDines I believe Elementor 3.25 has introduced anchor offset functionality natively now, but if you can't get it to work, or it's not flexible enough, then here's another trick you could try that only needs some CSS... Instead of using anchor widgets, use HTML widgets instead, and create a <div> inside each one. You can have as many as you want on the page, but give them all the same class name... <div id='my_first_anchor' class='my_menu-anchor'></div> <div id='my_second_anchor' class='my_menu-anchor'></div> <div id='my_third_anchor' class='my_menu-anchor'></div> Then you only need some CSS to control the amount you want to offset by, and you can change the offset per device size too. Offsetting by a fixed number of pixels per device should still work if you resize the browser window, and you won't have to worry about absolute positioning giving unpredictable results, but give it a try and let us know how you get on! html { scroll-behavior: smooth; } .my_menu-anchor { display: block; height: 0; } body[data-elementor-device-mode=desktop] .my_menu-anchor { margin-top: -120px; padding-top: 120px; } body[data-elementor-device-mode=tablet] .my_menu-anchor { margin-top: -100px; padding-top: 100px; } body[data-elementor-device-mode=mobile] .my_menu-anchor { margin-top: -80px; padding-top: 80px; }

@@MichelleMcDines Chat GPT can probably help you figure this out if you get stuck, but feel free to let us know if you get stuck.

Good catch, this utility doesn't seem to offer PNGs as an option. Here are a couple of ideas: 1) In Photoshop: Create an Action: - Open one of your images. - Go to Window > Actions and click the "+" icon to create a new action. - Resize the image to your desired size: Image > Image Size, set the longest side to whatever you want (ex: 2000px), and ensure "Constrain Proportions" is checked. - Save the image with desired quality: File > Save As, and choose JPG or PNG with web quality settings. - Close the file. Batch Process: Go to File > Automate > Batch. Select the folder containing your images and apply the action you just created. Set the destination folder for saving resized images. 2) Download and install XnConvert (available for Windows, macOS, and Linux). - Add your photos to the input list. - Under the Actions tab, choose Resize and set the maximum dimensions to 2000px for both width and height. In the Output tab: - Select the output format (JPG or PNG). - Adjust compression settings for web quality. - Choose the destination folder. - Start the batch process.

If you can provide some further information - what exactly is going wrong, whether you see any errors in the console, etc. then we'll be happy to help you troubleshoot.

@@KingGrizzly Hello KingGrizzly, the problem is strange. The code seems to work in the elementor page editor but when it is updated it does not work on a live site. I used your solution for image slider and it works. However the Product Loop doesn't. Hope this info helps

@@mobilaizer It's difficult without seeing what errors you're getting in the console. Try hitting F12 and see if there are any errors shown (switch to the 'Console' tab). If it's working in the editor, it sounds like maybe jQuery isn't loading in time. If you're not already, try moving the code to an Elementor 'Custom Code' snippet, and checking the 'Always load jQuery' box. Failing that, try disabling any caching solutions you might be using (like WP Rocket). If none of that works, then we'd to see the console errors.

@@KingGrizzly Thank you so much for giving me the heads up on what could be wrong. This exceeds my knowledge and I will be looking for someone to take a look at it. I might post the solution here at some point. Thank again :)

@@mobilaizer If you hit F12 and click the 'Console' tab at the top, then refresh the page, let us know if you see any errors and copy/paste them here. That might help us to identify the problem. Failing that, if you're able to give us a temporary login to your WordPress dashboard, I could take a look for you. Otherwise, good luck, and I hope you get it resolved. Let us know how you get on!

Thanks. I'll have to investigate as we hadn't really noticed this. Maybe it is because we optimize the CSS/JS with a plugin and cache it.

This would be a nicer user experience, I agree. The Elementor accordion doesn't seem to have the option to open upwards. I tried to override it with some CSS/JS briefly and had limited success. Are you simply expanding text? If so, it's probably easier to dynamically shorten a large block of text using some javascript and a "Read More" toggle. If you are hoping to incorporate rich content, like an Elementor layout, then it will be necessary to come up with CSS/JS to override the widget, make a custom widget, or use an add on. If I figure out how to do it, I'll make a video! Let me know if you solve it too.

Hmmm, be sure your CSS is nested inside of the .kg_block { } brackets. Did you grab the snippet from the link in the description? We promise not to spam you, just send the occasional email roundup of Elementor news. The CSS rely can't apply if the container doesn't have the class, unless you change it to a class all Elementor containers have. Let me know what you discover.

@@KingGrizzly thanks for getting back to me - all sorted. The issue was that I had the CSS in Custom and Code - I thought I'd removed the Custom to try code, but must have got side tracked lol. Love these tutorials so keep them coming - great job!

@@spires-o7g Thank you for watching! We've got a really good one coming up about how to use the Elementor Grid widget like a 12 column Bootstrap system. Will be curious to see what people think!

Are you using the icon widget? If so, lately I've been setting the width to 100% and turning on "fit to size", then I go to the "Advanced" tab and set the custom width to a pixel value.

Did you watch this one? th-cam.com/video/vgTbJ10CJoo/w-d-xo.html

Thanks, I'll try to mention in future videos. We use Pro for all builds.

The syntax warnings in Elementor can safely be ignored. The snippet should work. Please let me know if it doesn't actually save. The reason the warning happens could be Elementor using an older "linter" to check the CSS or it is in a strict mode and warns about newer properties like "aspect-ratio". Rest assured, this should be well-supported! So, if it saves - you should be all set!

Hi Brian @@KingGrizzly thanks very much for the confirmation! I can't tell you how much I've struggled with aspect ratios. Hours of my life! :) Thanks so much.

@@michellepace Oh, good! I'm trying to find some time to put together a video on easier layout controls with the Elementor grid container and some "helper" classes. You might appreciate that when it comes out too. Have a good week.

Super thank you

Maybe try ExifTool since this is something like operating system metadata.

Thanks! Be sure to watch this follow up video for more ways to extend this approach. th-cam.com/video/vwMeKKqfFMA/w-d-xo.html

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.