New: 1-on-1 coaching now available! We extend the capability of agencies and marketing teams with expert-level Elementor website builds and support.
King Grizzly has a multidisciplinary background ranging across design and marketing spectrums. We like to help clients as well as other designers and marketers grow their brands and businesses through partnering and education. You've got a great product or service, let's figure out how to connect and communicate it to the right audience!
The method is the linchpin, but we've got a deep toolbox to draw from:
// Value Proposition Design // Design Thinking // Branding + Identity // User Interface + User Experience Design // Website Design and Development // Content + SEO // Promotion + Conversion Rate Optimization
Brian! You explained this specific part better than tons of videos I wasted my time on. And you did it in a way (English is not my native language) in which I could follow and understand the point. I wasted time and time and time on this. Only your video could show and explain this part in a way I now understand. This is better than the Elementor official docs. Thank you so much.
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?
Hi! It looks great! I'm trying to make it, but I don't see that widget in my Elementor PRO! I got like image carousel, media, loop... but not that one! Can you help me out?
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.
Hi! Thank you for the tutorial. I am bulding a similar project but I want to link each slide to a unique button (5 slides each has a corresponding nav button). How would I need to modify this code to achieve that? Thanks in advance!!
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!
@@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 for doing all these great videos lately! When are you going to do a video on flexbox versus grid? Now that Grid seems to be widely available, it would be a great time to show us when to use which.
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! ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-wDlVUzx30hk.html
@@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!
jQuery(document).ready(function($) { $(window).on('load', function() { // Initialize Swiper with custom settings var swiperTarget = $('#my-elementor-carousel .swiper'); var swiperInstance = swiperTarget.data('swiper'); if (!swiperInstance) { swiperInstance = new Swiper(swiperTarget[0], { slidesPerView: 3, // Number of slides visible at the same time slidesPerGroup: 1, // Number of slides to scroll at a time loop: true, // Enable looping navigation: { nextEl: '#my-next-element', prevEl: '#my-prev-element', }, // Additional optional settings spaceBetween: 10, // Space between slides in pixels (adjust as needed) // Add any other Swiper configurations you need }); console.log('Swiper instance initialized manually with custom settings:', swiperInstance); } $('#my-prev-element').on('click', function() { if (swiperInstance) { swiperInstance.slidePrev(500, true); } else { console.error('Swiper instance not found on previous button click'); } }); $('#my-next-element').on('click', function() { if (swiperInstance) { swiperInstance.slideNext(500, true); } else { console.error('Swiper instance not found on next button click'); } }); }); }); This code worked for me if anyone is stuck
Hi, thanks for the video, but I'm a beginner...but I can't find at the link you put in the description the css code to copy and paste. Where can I find it? Thanks
Nice Brian. I created an almost identical stylesheet for this a while ago. As part of it I created a custom class .alt-ratio (alternate ratio) that included media queries to change the aspect ratio at certain breakpoints. For example if one had a very tall ar on the desktop ( eg 9/16) which took up a heck of a lot of vertical screen real estate on mobile, it would change accordingly to say square... .alt-ratio img { aspect-ratio: 9/16; object-fit: cover; object-position: center center; } @media (max-width: 1024px) { .alt-ratio img { aspect-ratio: 2/3;} } @media (max-width: 767px) { .alt-ratio img { aspect-ratio: 1/1;} }
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.
Hello there! If you apply !important to each CSS rule, does manually setting a height value that exceeds the aspect ratio threshold still override them?
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.
For the image background solution you could give the container the same aspect-ratio as the image, so it behaves lkind of like an image widget. So add a container, give some width and add a background-image and set background-size to cover. When you choose the background-image in the media library, check the resolution. Eg 1920px * 1080 Select the container, add this CSS selector { aspect-ratio: 1920/1080 } Done. The container will maintain that aspect ratio no matter what your screen size is. If SEO is important you need another appraoch. You can use the image widget and the caption option. When you choose an image in the media library write your text in the caption field. You can write HTML in the caption field, add classes and style it up with some CSS. You can even do that in the custom caption field. To put the caption on top of the image, you will need some CSS and position absolute, but I'm sure you can figure that out yourself.
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. ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-E13YU5jU_-o.html
The only drawback of background images is from an accessibility pov, in so much as one cannot assign either an image or figure tag to them, thus ARIAs and screen readers basically don't know they exist. My workaround is to use relative and absolute positioning on an actual image element, have the image or its container set to relative, then have the other content (heading etc) set to absolute so it snaps over the top of the image, you may need to put the content on a higher z-index so it's over the image, but it works well and the image can then be seen by the browser and screen readers etc.
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! ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-E13YU5jU_-o.html
Is there a way to make this work with a Iconlist widget (set to inline)? I can make it animate by changing the class from .elementor-heading title to .elementor-list-item-items const ticker = document.querySelector('.ticker-wrapper .elementor-icon-list-items'); I also could change the CSS so the listitems don't wrap /* Ensure the container doesn't overflow */ .ticker-wrapper { overflow: hidden; white-space: nowrap; width: 100%; box-sizing: border-box; position: relative; } .ticker-wrapper ul.elementor-icon-list-items.elementor-inline-items { display: flex; flex-wrap: nowrap; } That lookeds like it was working fine, but unfortunate the list items shift to the beginning at the end of each loop. Any ideas?
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!
Thanks for this awesome tutorial. I want to add a custom property. that is grid:{rows:2}. Trying like this: carouselParams.grid.rows = 2. But Not working. can you please help?
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
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!
Great video! I have found that using paste bin or JSfiddle for sharing code snippets publicly is pretty useful. You can just paste a link and then everyone can see it, and it should stick around for a long time.
You call it "ticker," I call it "marquee" - which is the old-fashioned name and function that was actually supported in HTML some years ago and still seems to work properly, but wouldn't be nearly as flexible as your way by being able to format the text via the Elementor widget. I've used these a number of times on client sites. Human beings are naturally attracted to moving text and, if it doesn't look too circus-like, can actually be quite effective. Thanks for the tutorial!
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.
After going through hundreds of videos and articles I find your video. It helped me to solve a problem, I was looking to solve for months. Thank you. God bless.
Hi! I am running into an issue where the carousel navigation is working in the Elementor editor, but not on the live page. Any thoughts how to solve this? I added the code to the Elementor custom code section. </Body> end with 'always load Jquery' applied. No cache plugins are currently installed. Thank you in advance!
@@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!
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.
Thank you so much for this video! I was trying to work out a CSS solution utilising the custom icon fonts in Elementor, but it was always going to be messy. The solution you showed in this video is excellent and I would never have thought to do it that way myself!
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!
Hello there, Brian! How are you doing? THIS is what I was looking for. I've been running my head around some ways of setting it for a better workflow and this is just perfect, so a big THANK YOU. Now I'm setting this combined with clamp calc for responsive scaling without breakpoints. Now it's been almost 2 years would you change anything on this video? And what about the Hello Theme settings under "Appearance" in WP Dashboard, what options do you check or leave unchecked?
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
@@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.
