- 123
- 448 283
King Grizzly
United States
Приєднався 31 жов 2018
Visit kinggrizzly.com/elementor-tutorials to request a "how to" video!
King Grizzly helps ambitious brands build and manage exceptional website experiences. We extend the capability of agencies and marketing teams with expert-level Elementor website builds and support. Give your brand a winning website.
Grow your brand with professional:
Web Development
-Websites
-Branding
-UI/UX
Content and Inbound Marketing
-Strategy
-Creation
-Copy-editing
SEO
-Audits
-Local Search
-Competitive Analysis
Website Support
-Hosting
-Security
-Updates
-Reporting
Curious? Let's connect!
King Grizzly helps ambitious brands build and manage exceptional website experiences. We extend the capability of agencies and marketing teams with expert-level Elementor website builds and support. Give your brand a winning website.
Grow your brand with professional:
Web Development
-Websites
-Branding
-UI/UX
Content and Inbound Marketing
-Strategy
-Creation
-Copy-editing
SEO
-Audits
-Local Search
-Competitive Analysis
Website Support
-Hosting
-Security
-Updates
-Reporting
Curious? Let's connect!
The Elementor Grid Container Now Kicks Butt!
This is, without a doubt, the biggest Elementor news in two years (at least for me): the CSS grid container now supports content spanning across columns and rows! You can also set precise grid start and stop placements, reorder elements, and customize everything per device. And the best part? It’s expected to come out of beta later this January 2025.
I had been working on some Elementor CSS grid videos, complete with a helper class system to make widgets and containers span columns and rows within the grid container. But guess what? All of that is now tossed in the virtual trash can.
Check out just how easy and powerful the new Elementor CSS grid system is. No more shame when your Webflow friends start flexing their grid support-you’ll have plenty to brag about now!
Learn some CSS grid shorthand:
developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement
Get rid of the pesky widget '+':
.hide-plus .elementor-empty-view {
min-width: 0px !important;
display: none !important;
}
Download Elementor Pro here: bit.ly/elementor-kg
We may receive a small affiliate kickback, at no added expense, if you purchase any of these solution using our links. Thanks for your support!
I had been working on some Elementor CSS grid videos, complete with a helper class system to make widgets and containers span columns and rows within the grid container. But guess what? All of that is now tossed in the virtual trash can.
Check out just how easy and powerful the new Elementor CSS grid system is. No more shame when your Webflow friends start flexing their grid support-you’ll have plenty to brag about now!
Learn some CSS grid shorthand:
developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement
Get rid of the pesky widget '+':
.hide-plus .elementor-empty-view {
min-width: 0px !important;
display: none !important;
}
Download Elementor Pro here: bit.ly/elementor-kg
We may receive a small affiliate kickback, at no added expense, if you purchase any of these solution using our links. Thanks for your support!
Переглядів: 54
Відео
How to zoom in Photoshop on a Mac
Переглядів 8612 годин тому
In this Photoshop tutorial we'll cover how to zoom in and out on a Mac using different zoom tools and handy keyboard shortcuts. Understanding the zoom features will help you to improve your workflow and precision when editing images in photoshop. Highlights - The zoom tool - Scrubby zoom feature - Keyboard shortcuts - Hand tool navigation - Navigator tool utilization - Resetting your view Video...
Elementor Hosting Back-End Walkthrough
Переглядів 3814 днів тому
Get a peek at the back-end of Elementor hosting before deciding whether or not to try it out. I'd been avoiding Elementor hosting due to a weak feature set, but the features are much improved so I finally migrated two personal sites in as a test. This allowed me to make this video showing what kind of features exist in the back end as of December 2024.
Elementor 12 Column Grid Teaser
Переглядів 11728 днів тому
Update: this manual helper class approach to improving the Elementor grid container just got binned: ua-cam.com/video/AdX63kDWI3U/v-deo.html Check it out: a 12 column grid system for Elementor using nothing but simple classes on Flexbox containers inside the Elementor grid container. It's like Bootstrap for Elementor. No convoluted CSS span generators required. What do you think?
A Pitch: The Best Way to Set Up Elementor Padding
Переглядів 1052 місяці тому
Brian gives a pitch as to why you should use the King Grizzly method for setting up padding in Elementor. If you are convinced, then watch the full video and get your CSS snippet here: ua-cam.com/video/tw6q4-Hydes/v-deo.html Questions? Comments? Please reach out! Don't have Elementor Pro? It's crazy cheap for the value. Get Elementor Pro (we may get a small kickback for teaching and referring):...
The Best Way to Set Up Elementor Padding
Переглядів 2442 місяці тому
Build like a pro and get a grip on Elementor padding with a method which is sure to save you tons of time and make your builds look better. This approach is especially critical for sites with many pages. What is padding?: ua-cam.com/video/tw6q4-Hydes/v-deo.htmlfeature=shared&t=21 Worst Elementor padding method: ua-cam.com/video/tw6q4-Hydes/v-deo.htmlfeature=shared&t=62 Better Elementor padding ...
How to Make a Full-Width Elementor Carousel with Offset Slides
Переглядів 1,5 тис.4 місяці тому
Learn how to build a fabulous looking, full width content carousel with offset slides using the Elementor Carousel widget. - Supports any content in each slide - Use offset to partially show the next slide - Learn how to control the arrow styling, placement, and pagination - Achieve great tablet and mobile results This tutorial should help you make a professional look sure to wow clients and ev...
Clipping and Masking Elementor Images
Переглядів 1674 місяці тому
Learn two easy ways to turn Elementor images into any shape you want. Method 1: Simple clipping CSS. Generate image clipping CSS easily: bennettfeely.com/clippy/ Method 2: Mask images into custom SVG shapes using the "Advanced: Mask" tab on the image widget. Master image sizing and ratios in Elementor: ua-cam.com/video/vwMeKKqfFMA/v-deo.html Download Elementor Pro here: bit.ly/elementor-kg We m...
How to Hide Automatic Elementor Page Titles
Переглядів 9744 місяці тому
Elementor puts a page title on each page by default, at least with the Hello Theme it does. Learn two ways to turn this automatic title off: - Per page - Globally Download Elementor Pro here: bit.ly/elementor-kg We may receive a small affiliate kickback, at no added expense, if you purchase any of these solutions using our links. Thanks for your support!
How to Batch Rename Files with Namechanger for Free (Mac Only)
Переглядів 3234 місяці тому
Learn how to use a simple software (Namechanger) to batch rename files. I use this all the time for renaming images, but it can rename any list of files. Appears to be a Mac only software. mrrsoftware.com/namechanger/
How to Batch Resize Images in Photoshop
Переглядів 3,9 тис.4 місяці тому
A quick tutorial showing how to resize a batch of images in Photoshop. This can work for any size images, but can be especially handy for resizing website images or photography work.
Perfect Elementor Image Sizing (This Could Transform Your Builds)
Переглядів 4814 місяці тому
Achieve perfect Elementor image heights and ratios for every image, even if clients upload the wrong sizes! This short tutorial has the potential to transform the way you work with images in Elementor. - Match heights without warping images - Set images to common ratios like 16:9, 3:2, and even 1:1.91 Get the CSS and the Elementor Roundup: kinggrizzly.com/elementor-tutorials/perfect-elementor-i...
How to Place Text Over Images in Elementor: Option 2 (More Accessible)
Переглядів 4014 місяці тому
Learn how to position text over an Elementor image widget in a responsive way. This is option #2, in option #1 I showed how to do this with a background image approach. View option 1: ua-cam.com/video/9D09R-MvUqg/v-deo.html Benefits of option 2: • More accessible • Image optimization plugin friendly • SEO friendly Drawbacks of option 2: • Not as intuitive • Requires a little CSS • May run into ...
How to Place Text Over Images in Elementor: Option 1
Переглядів 1864 місяці тому
Learn a versatile approach to placing text over images in Elementor. This is option #1, which involves using background images. In option #2, I'll show you how to use the image widget instead which should have some accessibility and optimization benefits. View option 2: ua-cam.com/video/E13YU5jU_-o/v-deo.html Benefits of option 1: • Mobile responsive • Smart heights • Works for hero panels, loo...
Summer 2024 - Recent King Grizzly Builds
Переглядів 614 місяці тому
Brian demonstrates a few recent Elementor and Wordpress builds. We prioritize clean and clear communication as well as ease of use. Featuring: - Migration work - Podcasts - Blogs - Conference content (speakers, talks) - Products - Geolocated logic - Content sorting, filtering, and searching If you need a hand with Elementor work, please get in touch!
Turn an Elementor Heading Into an Infinite Ticker (Scrolling Marquee)
Переглядів 4674 місяці тому
Turn an Elementor Heading Into an Infinite Ticker (Scrolling Marquee)
How to Shorten Elementor Excerpts with an Ellipsis, Automatically!
Переглядів 3244 місяці тому
How to Shorten Elementor Excerpts with an Ellipsis, Automatically!
10 Steps to Help YOU Make a Better Website
Переглядів 2917 місяців тому
10 Steps to Help YOU Make a Better Website
6 Elements of Effective Landing Pages
Переглядів 2207 місяців тому
6 Elements of Effective Landing Pages
Control Elementor Loop Grid Layouts With Simple CSS
Переглядів 1,4 тис.8 місяців тому
Control Elementor Loop Grid Layouts With Simple CSS
5 Questions You Need to Ask Before Building Your Next Website
Переглядів 1028 місяців тому
5 Questions You Need to Ask Before Building Your Next Website
How to fix custom post type pagination problems in Elementor
Переглядів 2,3 тис.8 місяців тому
How to fix custom post type pagination problems in Elementor
Start to Finish Custom Post Types with ACF and Elementor
Переглядів 3,4 тис.8 місяців тому
Start to Finish Custom Post Types with ACF and Elementor
Sizing and Centering Isolated Elementor Flexbox Containers
Переглядів 4929 місяців тому
Sizing and Centering Isolated Elementor Flexbox Containers
Why Vertical Alignment is Impossible in Elementor Flexbox
Переглядів 6029 місяців тому
Why Vertical Alignment is Impossible in Elementor Flexbox
Elementor Flexbox Wrapping and Alignment Problems (What Other Tutorials Aren't Showing)
Переглядів 7979 місяців тому
Elementor Flexbox Wrapping and Alignment Problems (What Other Tutorials Aren't Showing)
How to Scale Clipped Images on Scroll in Elementor like Ultimate World Cruise by Royal Caribbean
Переглядів 57110 місяців тому
How to Scale Clipped Images on Scroll in Elementor like Ultimate World Cruise by Royal Caribbean
Improving Elementor Animations with CSS
Переглядів 1,7 тис.10 місяців тому
Improving Elementor Animations with CSS
Happy New Year Brian. Agreed. At long last!
A great release to start the year! I've been waiting on this for too long.
@@KingGrizzly Me too, especially as this was available right out of the gates in Bricks. Now, if we could only get that global class based system they've been promising us for years :)
@@ElementoryMyDearWatson That would be handy. For now, those classes live in my snippets plugin.
Elementor has released a beta with column and row span support for grid containers! Perfect alignment, wrapping, and ordering across device sizes should be available to all soon! ua-cam.com/video/AdX63kDWI3U/v-deo.html
Elementor just released a feature with removed the need for this approach. Check it out! ua-cam.com/video/AdX63kDWI3U/v-deo.html
Thank you for this tutorial.
thank you.. you solved my problem .. God bless
Really handy, I didn't know about the "scrubby" zoom right and left drag. I also like to hold "option" and use my mouse scroller for zooming in and out because it zooms on the mouse cursor location.
This is a great video. I was hoping you will do the same thing for the background image for the hero section because it didn't work for me
Thanks. Hey check this out, you could do a hero panel like this (just make the outer container 100% wide) and it may work better for accessibility and SEO: ua-cam.com/video/E13YU5jU_-o/v-deo.html
Thank you for the tutorial.
tq bhaii
This sounds amazing, it would be incredibly helpful! Looking forward to your next video.
Working on it to start the new year!
Change of plans, watch this! ua-cam.com/video/AdX63kDWI3U/v-deo.html
Thanks!
thank you very muck! it works great:)
thx ! need a carroussel buttons witout logos, is it possible ? How to build it ?
Yes, you can trigger the code by clicking any element, it doesn't have to be an icon or button. Use whichever widget works best for you.
you are confused
If it is not working, try to select the container that contains the buttons, change the direction to horizontal and wrap.
Thanks, worked like a charm. Just what I needed.
This seems to only decrease the size of photos. Something I need to do is take a large number of photos that are only 640 pixels wide, and increase them to 300%. I know it's not going to improve the quality, but later I'm going to work on each and being larger will help some. Any ideas?
Are you sure you can't size up? Here are 2 methods in Photoshop. Method 2 is probably a better option for maintaining quality. Method 3 would be AI, If the pixelation is too severe, consider using tools like Adobe’s Super Resolution in Camera Raw or external AI upscaling software like Topaz Gigapixel AI for better results. + Method 1: Using Image Processor Prepare Your Folder: Place all the images you want to resize into a single folder. Open Photoshop: Go to File > Scripts > Image Processor. Image Processor Settings: Step 1: Select the folder containing your images by clicking Select Folder. Step 2: Choose where to save the resized images (e.g., a new folder). Step 3: Enable the desired file type (JPEG, PSD, or TIFF) and set quality settings. Step 4: Check Resize to Fit and input the desired width and height (e.g., 2000px x 2000px). The aspect ratio will be maintained if the dimensions differ from the original. Click Run. + Method 2: Create and Run a Custom Action Record the Action: Open any image in Photoshop. Go to Window > Actions to open the Actions panel. Click the + icon to create a new action and name it (e.g., "Upscale"). While recording, go to Image > Image Size: Set the desired size. Choose Preserve Details 2.0 or Bicubic Smoother as the resampling method for better upscaling. Stop recording the action. Batch Process: Go to File > Automate > Batch. Select your newly created action. Choose the source folder with your images. Set the destination folder and options. Click OK to process the images.
Here's a paid option which might be good for upscaling... www.topazlabs.com/gigapixel
Can this still be done with Adobe Photoshop Elements 2025 Editor
Not sure, since I don't use Elements. ChatGPT thinks there may be an option under 'File > Process Multiple Files'.
Thank you!!!
i hate flexbox ngl
Check this 90 second video out. Let me know if you want me to show how we did it! ua-cam.com/video/297r5ExQe40/v-deo.html&lc=UgwpLQtiX_IPPZaZr6l4AaABAg
It's very common for me to design, say, three Elementor CTAs across in two rows, using flexbox. But that gets messy when it comes to tablet and mobile. Is this meant to replace that type of layout?
With this approach, we've been able to get consistent width, alignment, and wrapping of any content on all device sizes and still get the benefits of Flexbox inside the columns themselves. So, if I'm understanding you, yes!
I think I would like to try it... how do I do it?
I'm making another video showing how to do this by setting up your starter grid container, and giving out the CSS to enable the helper classes! They even support picking which row and column you want columns to start and end on. Stay tuned...
Watch this! ua-cam.com/video/AdX63kDWI3U/v-deo.html
For me it's the taxonomy filter widget that breaks the pagination
Does it work before you add the filter widget?
@@KingGrizzly Yes it does :/
To "Label" which "H" have you assigned?
I don't assign "Label" to any H tags. Instead, when I'm building a page, if a text or heading widget needs the label styling then I go to the style settings for that widget, click the globe icon next to Typography, and choose the label style.
Having to learn Elementor so I can use crocoblocks Jetengine. Weird that they hide the object fit but I do like how they have the automatic placeholder image.
Is there a way to get these posts to have a button to "select" and have it flow into cart for purchase and follow to checkout? Thanks!
For a cart experience, Elementor may work best with an e-commerce plugin such as WooCommerce because it is possible to use Elementor to style the templates. It should be possible to incorporate WooCommerce widgets into your loop item templates. Here's a demonstration: ua-cam.com/video/n2nn_P4IN2o/v-deo.htmlfeature=shared&t=185
hi Chris, is it possible to avoid the gap between columns and rows in the widget?
Yes, if you select the Loop Grid widget and go to the 'Style' tab on the left, the controls to set the gap between columns and rows are in there. You can set them both to '0px' if you want no gap at all.
The way I think of it is you set global colours and fonts and then combine those in the Heading levels. That way if you change a global colour slightly for example and that color was used on H1,H3 and H5 you only have to do it once. SImilarly with the fonts.
Yes! I think you are spot on.
How to change DPI?
Good question. Step 1 has a checkbox which allows you to open the first image to apply settings. You might be able to experiment with dpi there. If you find this forces a DPI you don't like, then it may be best to create a Photoshop action instead and batch images against an action. My use case is typically website images, so high resolution hasn't been critical.
Thanks ❤
does not work
This has worked for many people. Happy to help if you want to give some specifics on what isn't working for you.
the option is not showing up for me
Hmmm. The option won't show until you set a height. Did you set the height?
I've been trying to achieve this on a client's site and had been using negative top margin - with the added complication that due to their wanting the whole site to look *identical* on any size screen (???) I've been building in vw and vh units. But now the client is complaining because when they randomly resize their browser to less than fullscreen, the anchors no longer land properly. The Elementor UI has changed since your video and position is now in the main advanced settings - but when I select Absolute, I get a warning that this isn't advised for responsive designs (and to be honest it looks like it's going to be as fiddly as trying to get the right negative margin for each of my breakpoints - and we know that those won't hold true for the entire range between each breakpoint). Have you unearthed any new insights into how to get this working better? I'm surprised it's not something that Elementor have improved over the years.
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.
what about PNG"s?
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.
Does not seem to work with the Product Loop Carousel
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!
This is great but depending on the CSS it leads to shifting elements on load as the original CSS loads first and then this one applies only after the JS has loaded in. It would be great to be able to use a variable within the media queries to avoid this.
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.
Please help I need customize the behavior of the “Read More” button so that it opens the additional content upwards, placing the button to minimize at the bottom of the expanded area. This way, the button isn’t positioned between the two sets of information, which makes for a cleaner and more user-friendly layout
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.
Thank you!
If you're struggling with batch resizing in Photoshop, I highly recommend Catana Resizer 1.0. It's super simple and totally worth the price...
I noticed when you added a new container it didn't pick up the kg style until you added kg_block - but when I add mine I'm getting the padding on all of the containers - what am I doing wrong?
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!
Good approach! Thanks for sharing.
Unfortunately this does not work for me, it makes the SVG insanely big even if I use your 40px as standard, something is off. Any advise?
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.
nICE
Thanks, I tried these methods but they don't work. In my case when I click the button it reloads the same page and doesn't go to the next one. Any suggestions? I'm going crazy trying to find a solution to this problem.
Did you watch this one? ua-cam.com/video/vgTbJ10CJoo/v-deo.html
this is elementor pro please mention that in the video
Thanks, I'll try to mention in future videos. We use Pro for all builds.
Thank you, this is super! I copied your code and pasted it into: Dashboard > Elementor > Custom Code > (I made a new snippet)... When I save it I get the errors "Unknown property 'aspect-ratio'"... could you perhaps tell me what I've done wrong? I have used "head" and kept the code wrapped in the <style></style> tags.
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
I don't want the name changed. I wanted the Date Modified changed, but after trying it still won't work.
Maybe try ExifTool since this is something like operating system metadata.
Brotherrrrrr!! Thank you! Amazing! This has dumbfounded me for a long time. Great tutorial! Your going in my (save Folder).
Thanks! Be sure to watch this follow up video for more ways to extend this approach. ua-cam.com/video/vwMeKKqfFMA/v-deo.html
I have the same issue but with products archive, there are no conflicting slugs though! Any help please
Is this a WooCommerce products page or a custom post type you've made?
you are a goat thanks a lot for your video!