วีดีโอ

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.

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 👌👌

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! th-cam.com/video/wDlVUzx30hk/w-d-xo.html

The same question if an image is contained within a text editor widget.

@@frankstone Hi Frank. Click on the widget (eg: the gallery widget or text-editor widget), go to the "Advanced" tab, and enter a class name in the 'Class' field. Such as: image-clip (no period) Then your CSS, instead of 'selector' would use something like: .image-clip img { /* Your clipping CSS styles */ } This should style every image inside the widget with the class .image-clip with your style. However, most likely, you may discover this is too greedy and clips some images you don't desire the effect on. If this happens, you'll need to figure out what class is on the individual image items you do want to target. To do this, inspect the image in your browser using the browser's inspector/developer tools (easy to Google how to do this, maybe just right click - Inspect), and try to figure out what class might be on or around the individual images. For example, inside of the gallery it is likely something along the lines of .e-gallery-image or .elementor-gallery-item__image. In which case your CSS would be something like: .image-clip .e-gallery-image { /* Your clipping CSS styles */ } Ideally, you can just store this CSS in a centralized place like Elementor > Custom Code and then use the class wherever you need it throughout the site. Let me know if this helps!

@@KingGrizzly Hi Brian. IT WORKED! Thank you very much. FYI, I needed to use ".image-clip .e-gallery-image."

@@frankstone Excellent! Good work and happy web designing.

Very glad this was useful. Thanks for watching! Have a good week.

@@KingGrizzly Thanks, Brian. Have a good week to you too 😊

You bet!

Try this: kinggrizzly.com/wp-content/uploads/snippets/elementor-read-more-expander-snippets.txt

@@KingGrizzly Thank you very much. You are really very kind.

@@deniserana6449 Happy to help. Please subscribe for more Elementor how to content! 🙂

This is perfect, and exactly how I roll. We should compare notes! Chris and I have been building up handy snippets like this in WPCode. It's like a mini Bootstrap library for Elementor.

Oh nice! Thanks for this. 🙂

Me too! It makes building that much more enjoyable. Happy web designing!

I just tested it and the height can still overrule even !important. I think setting a width is probably the more likely need than a height when using a ratio anyway. If setting a height is the priority, then a ratio may not be.

@@KingGrizzly Nice to know. Just made a little research on why is that so, and found out the following on the MDN website: "At least one of the box's sizes needs to be automatic in order for aspect-ratio to have any effect. If neither the width nor height is an automatic size, then the provided aspect ratio has no effect on the box's preferred sizes." So, since width is never on "auto" in Elementor, when you set a height value, the set aspect-ratio is rendered invalid.

​@@KingGrizzly And I just watched another video from Kevin Powell on that topic about flex alignment, is shows another good reason for using grid instead of flex when the main purpose is alignment. If you're still looking for more info on this question, the video is named as "Why I use grid over flexbox for this common layout" and is from 2022, it might contribute to the matter

Without seeing your code or understanding exactly what you're trying to achieve, it's difficult to make any recommendations. We can take a look if you have a live page that we can test.

Same here, always new ideas and methods to learn! Thanks for the comment. I'm working on a video about image ratios next 🙂

I made a video showing a solid way to do this with the image widget. Only needed to help out the absolute positioning with some very simple CSS. th-cam.com/video/E13YU5jU_-o/w-d-xo.html

From an image optimization perspective, your approach is nice too as many image optimizing plugins do better with normal images versus background. Do you run into any issues with height and width of either the image or the text content? I was thinking of demo-ing this approach but wasn't satisfied with the image and/or text content seeming aware of the size of the other... if that makes any sense.

@@KingGrizzly No issue with height and width, when placing the image, either the original image's aspect ratio will dictate it's height and now in Elementor (I think we have had this for a wile now) you can assign a specific height to the image, and an 'object-fit' dialogue box appears beneath the height slider so you can assign different fit modes such as default - fill - contain - cover etc just like you can on bg images. The other 'gotcha' with elementor though is there is no option to 'position: relative' only absolute and fixed, I drop in a bit of css code to get round that. Have to admit I am embracing Bricks these days more and more for a variety of reasons. Which is a bummer as I will then have to change the name of my channel ;)

​@@ElementoryMyDearWatson Thank you. So, your text is absolutely positioned over the image? I'm trying to wrap by mind around what happens if that absolutely positioned text grows. I guess the image will just stretch with it because of the object fit? Will have to test. Bricks looks very nice, so does Breakdance and I've been having some fun playing with Framer. Elementor still appears to have large market share. I just wish they'd address Github.

@ElementoryMyDearWatson I made a 2nd video showing a method I think you'd approve of which uses the image widget instead! th-cam.com/video/E13YU5jU_-o/w-d-xo.html

Good question. We are experimenting with other widgets to see if we can get them to animate nicely. The icon list widget would be great, because it would be easy for clients to manage.

@@KingGrizzly Indeed, way easier than the heading widget imo. Use a iconlist without icons and you have the same thing. You can even show dividers and make each item clickable.

@@franktielemans6624 Think I got it close with the help of GPT, there is still a "jump" when the list resets. The ul needed to no-wrap. I'll make a video after lunch if I can get rid of that jump. Grab the snippet: kinggrizzly.com/wp-content/uploads/snippets/scrolling-marquee-icon-list.txt Note: you need to add the 'scrolling-marquee' class to the icon list and then fiddle with the styling and spacing of the list items, icons, and dividers to your preference. There is also an option in the JS to set the number of times the list repeats. See if it works for you and if you can improve it at all!

It's not something I've tried myself, but I assume you've set the additional parameters for things like how the slides fill (by row or by column), number of slide rows for the multirow layout, etc. - swiperjs.com/swiper-api#grid

I will check these out and have slowly been working on a video showing what we've been doing.

And I’m only mentioning for selfish reasons of course..eg like a scrolling display of discounts for a product or service based on custom fields where the title is custom field element and on click takes you to said special archive or single post. Hehe. Sorry

I was thinking the same and have built this before. It's hard to get the loop grid carousel to do a smooth scroll. It wants to slide 'x' amount of grid items at a time. Maybe Chris has a clever way to do this smoothly. I'll ask him!

@@caknuckler This would be handy! We'll figure out a demo.

A couple of lines of JavaScript to hook into the Swiper API's 'free mode' is what you need 😉 ... swiperjs.com/swiper-api#param-freeMode

Thanks! A "scrolling marquee" must trace back to signage in the physical world, and then a "ticker" probably originated with the scrolling news channel tickers we've all grown accustomed to? Being able to style the text with Elementor controls is definitely a plus. I was having some fun with the newer text outline support.

This is great! Please consider subscribing. We've got some good videos coming out soon. 🙂

Thanks for watching! So glad it helped!

Glad this worked for you!

If you hit F12 to open the console, and reload the page, do you see any JavaScript errors? This might give some clues.

@@KingGrizzly It says the following: 'Uncaught ReferenceError: jQuery is not defined at (index):542:2'

@@vanleeuwenoriginals8461 Seems like jQuery is still not loading before your code is run. Without knowing about your hosting environment or any other factors that could be influencing it, it's difficult to say what the problem is. Try checking your host for any server-level optimisations that could be enabled and delaying the loading of jQuery. Failing that, rewriting it as ordinary JavaScript should fix the problem. Try asking ChatGPT to convert your code to plain JavaScript!

@@KingGrizzly It turned out to be the server caching causing the problem. Thank you for your help once again.

Good point, there is often more than one way to solve a challenge. I do wonder how much markup is written with the container versus the divider widget. The widget might be semantically a bit more appropriate and lighter.

Excellent, thanks for watching, and very happy it helped!

I had to update the snippet to account for Elementor changes. The updated snippet should work if you have containers and nested elements enabled. Let me know if this doesn't work and I'll doublecheck the snippet. Thanks!

Hi! CSS clamp is something new I've added to this approach and have built a handy generator to create the clamp CSS and variables (it's on my list to make a video just as soon as client work isn't all consuming). As for the Hello Theme settings... I haven't clicked any of the toggles. Do you disable any of them? I typically go to Elementor > Settings and check the two boxes to disable default colors and default fonts.

It's nice to know about the generator! I'll certainly take a look when your video comes out. Just delivered another project, so I'm now with an open window to organize things a bit; also, I'm looking for new projects and potential collaborations. If you have any ideas or projects in mind so we could work together, just let me know, I'd love to discuss them with you. Feel free to send me a private message! Regarding the Hello Theme Settings, YES! I do disable half of them, the ones I leave untouched are the "Disable Skip Link" (for accessibility reasons) and the last two, being "Unregister Hello style.css" and "Unregister Hello theme.css" (since I also disable Elementor Default colors and fonts, like you do). Better details on why I check the rest: If you handle SEO with a plugin or custom code, you'll want to check the "Disable description meta tag" option, since the plugin will generate another tag; If you use Elementor to build the header and footer from scratch, you can check "Disable cross-site header & footer", since it refers only to the theme's built-in generic templates. Likewise for "Disable page title". The theme by default generates an H1 tag for the page title, so, if you use Elementor to set element with an H1 tag within your pages, then you must check this setting to avoid hurting SEO since there would be more than one H1 tag on each page. Now you have a great day! Take care

@@phkoon These are really great tips! Thank you for sharing them. I'm going to tic the same toggles you did.

​@@KingGrizzly​ You're welcome! Now, I just watched a video that I think settles that matter about trying to get equally sized containers to keep their ratio within rows with different number of containers when resizing the window. The bottom line is to use grid instead of flex containers, or to give all flex containers the CSS property "flex: 1", I haven't tested it yet but both approaches should solve the matter easily. Can't recall if you touched this ideia on our previous discussions and, if you you've already watched it, let me know. The video in question is Kevin Powell's "Stop the Flexbox for 1D, Grid for 2D layout nonsense"

@@KingGrizzly Update: Pixel-perfect scaling with the last approach (after I sent you the demonstration video) , but noth with "flex: 1" of course (I had mixed things up in my brain, then I recalled our discussions and took a look again at the improved test build I presented to you). Gotta say it waaaay easir with grids, of course, as it does not require finding out what are the two related rates for each of the children containers nor setting up a calc funtion for each of their widths. Yet, with grid you have to set a "grid-column" for each child container column-span as desired.