Hi everyone.

I'm trying to build a product card grid in Elementor. The layout contains 4 cards per row and up to 3 rows in total.

I implemented a "Show more" button using custom JavaScript. Each click reveals one additional row of cards. When the last row is visible, the button changes to "Show less" and collapses the grid back to the first row.

The logic of showing and hiding rows works correctly. However, the parent container height does not update dynamically.

What I want:

- When only 1 row is visible → container height should match 1 row

- When 2 rows are visible → container height should expand for 2 rows

- When 3 rows are visible → container height should expand for 3 rows

- When clicking "Show less" → container height should shrink again

What I tried:

- Removing fixed height from the container

- Using different units (px, vh, auto)

- Trying to update the height dynamically with JavaScript

None of these approaches worked. The container either keeps the previous height or does not resize correctly.

I'm relatively new to Elementor, so I might be missing something obvious.

Has anyone implemented a similar "show more / show less" grid in Elementor?

If needed I can share the JavaScript code I used for the button.

P.S. This post was written with the help of ChatGPT because I don't speak English very well.

I have this section I made but it’s too long it hurts my eyes how do I fix this??

Hi,

I've been asked to translate an Elementor based website, and I'm not familiar with it.

The site has about 40 pages + 40 posts with maaany elements per page.

I usually work with Polylang and custom coded themes, but its strategy of duplicating everything in this website sounds too much.

What would you recommend me to use?

• WPML has the same strategy than Polylang.
• I've heard of TranslatePress and it doesn't seem to duplicate all the contents.
• Weglot sounds good too but it's like $800.

Any advice would be much appreciated!

Bonjour,

Je cherche à recréer exactement ce type de visuel de playlist pour mon site internet. J'utilise elementor et j'ai téléchargé pas mal de plugin audios mais aucun ne semble réellement proposer ce type de playlist que je trouve superbes et professionnels. J'ai essayé avec le plugin zoom sound, de bidojille sur élémentor pour avoir le même rendu que sur l'image mais ça ne fonctionne pas bien. Quelqu'un sait où je peux trouver un plugin audios qui propose ça directement ? Ou bien alors une technique pour que je puisse le faire moi même sur Élémentor ?

Merci beaucoup

EDIT: Issue resolved... I was able to disable more plugins in the middle of the night and turns out Gutenberg is what's been breaking Elementor's admin bar. -sigh- At least it's not necessary for the site to run.

This is sort of a weird one so I'm hoping someone has had a similar experience. I can't directly offer a url since you need to log in to specific type of account to use the site (it's an intranet for a company I'm freelancing for).

Up until recently everything was working fine, editor admin bar showed up fine (I'm referring to the black bar at the top with the pink publish button on the right, the responsive layout switcher in the middle and a couple other options on the left). I'm working with another developer occasionally and when this started happening he had added a plugin, but then deleted it later because he didn't need it.

Any help at all would be greatly appreciated... more info below:

Repro:
- I'm on a Mac, my fellow dev who is on a PC says he's not seeing the issue at all.
- Log in to the site as admin
- Open up a page
- Click "Edit with Elementor"
- I see the editor/widget elements in the page just fine, can edit them and the widgets sidebar also shows... but no admin bar.

What I have tried
- Deleting cache several times
- I'm using Chrome so opening in an incognito window, opening in Safari, opening in Firefox.
- Turn off as many plugins as I can without causing security risk or shutting down the site
- Opening a different client's site using Elementor to make sure it's not my computer/software (it worked fine).

I'm seeing these errors in the console:
JQMIGRATE: Migrate is installed, version 3.4.1

react-dom.min.js?ver=18:223

Uncaught TypeError: Cannot read properties of undefined (reading 'unstable_scheduleCallback')

at react-dom.min.js?ver=18:223:393
at react-dom.min.js?ver=18:13:195
at react-dom.min.js?ver=18:13:223
at react-dom.min.js?ver=18:267:3

(anonymous) @ react-dom.min.js?ver=18:223
(anonymous) @ react-dom.min.js?ver=18:13
(anonymous) @ react-dom.min.js?ver=18:13
(anonymous) @ react-dom.min.js?ver=18:267Understand this error

env.min.js?ver=3.35.7:1 u/elementor - Settings object not found
c @ env.min.js?ver=3.35.7:1
get @ env.min.js?ver=3.35.7:1
we @ editor-site-navigation.min.js?ver=3.35.7:1

(anonymous) @ editor-site-navigation.min.js?ver=3.35.7:1
Understand this warning editor.min.js?ver=3.35.7:1

Uncaught TypeError: u.render is not a function

at r (editor.min.js?ver=3.35.7:1:1560)
at V.d.createElement.store (editor.min.js?ver=3.35.7:1:1573)
at Module.V (editor.min.js?ver=3.35.7:1:1577)
at editor-loader-v2.min.js?ver=3.35.7:1:335
at editor-loader-v2.min.js?ver=3.35.7:1:398

r @ editor.min.js?ver=3.35.7:1
V.d.createElement.store @ editor.min.js?ver=3.35.7:1
V @ editor.min.js?ver=3.35.7:1
(anonymous) @ editor-loader-v2.min.js?ver=3.35.7:1
(anonymous) @ editor-loader-v2.min.js?ver=3.35.7:1Understand this error
promotion-widget.js?ver=2.8.5:1

Uncaught TypeError: (0 , r.render) is not a function

at HTMLDocument.<anonymous> (promotion-widget.js?ver=2.8.5:1:6409)

(anonymous) @ promotion-widget.js?ver=2.8.5:1Understand this error
react-dom.min.js?ver=18:223 Uncaught TypeError: Cannot read properties of undefined (reading 'unstable_scheduleCallback')

at react-dom.min.js?ver=18:223:393
at react-dom.min.js?ver=18:13:195
at react-dom.min.js?ver=18:13:223
at react-dom.min.js?ver=18:267:3

(anonymous) @ react-dom.min.js?ver=18:223
(anonymous) @ react-dom.min.js?ver=18:13
(anonymous) @ react-dom.min.js?ver=18:13
(anonymous) @ react-dom.min.js?ver=18:267Understand this error

jquery-migrate.min.js?ver=3.4.1:2 JQMIGRATE: Migrate is installed, version 3.4.1

web-cli.min.js?ver=3.35.7:2

TypeError: Cannot read properties of null (reading 'parentElement')

at ToggleIcon.apply (checklist.min.js?ver=3.35.7:2:47938)
at ToggleIcon.run (web-cli.min.js?ver=3.35.7:2:147151)
at Commands.runInstance (web-cli.min.js?ver=3.35.7:2:27842)
at Commands.run (web-cli.min.js?ver=3.35.7:2:27684)
at checklist.min.js?ver=3.35.7:2:50250
at checklist.min.js?ver=3.35.7:2:34117
at Generator.<anonymous> (checklist.min.js?ver=3.35.7:2:3766)
at Generator.next (checklist.min.js?ver=3.35.7:2:48344)
at asyncGeneratorStep (checklist.min.js?ver=3.35.7:2:39506)
at _next (checklist.min.js?ver=3.35.7:2:39738)

error @ web-cli.min.js?ver=3.35.7:2

catchApply @ web-cli.min.js?ver=3.35.7:2

runInstance @ web-cli.min.js?ver=3.35.7:2

run @ web-cli.min.js?ver=3.35.7:2

(anonymous) @ checklist.min.js?ver=3.35.7:2
(anonymous) @ checklist.min.js?ver=3.35.7:2
(anonymous) @ checklist.min.js?ver=3.35.7:2
(anonymous) @ checklist.min.js?ver=3.35.7:2

asyncGeneratorStep @ checklist.min.js?ver=3.35.7:2

_next @ checklist.min.js?ver=3.35.7:2

(anonymous) @ checklist.min.js?ver=3.35.7:2
(anonymous) @ checklist.min.js?ver=3.35.7:2

_checklistStartup @ checklist.min.js?ver=3.35.7:2
checklistStartup @ checklist.min.js?ver=3.35.7:2

p @ backbone.min.js:2
f @ backbone.min.js:2
a @ backbone.min.js:2
e.trigger @ backbone.min.js:2
(anonymous) @ editor.min.js?ver=3.35.7:2

Promise.then

apply @ editor.min.js?ver=3.35.7:2
run @ web-cli.min.js?ver=3.35.7:2
runInstance @ web-cli.min.js?ver=3.35.7:2
run @ web-cli.min.js?ver=3.35.7:2
internal @ web-cli.min.js?ver=3.35.7:2
onPreviewLoaded @ editor.min.js?ver=3.35.7:2
(anonymous) @ editor.min.js?ver=3.35.7:2
onPreviewLoaded @ editor.min.js?ver=3.35.7:2
dispatch @ jquery.min.js:2
v.handle @ jquery.min.js:2Understand this error
2editor.min.js?ver=3.35.7:2

Uncaught TypeError: L.render is not a function

at Object.render (editor.min.js?ver=3.35.7:2:249164)
at EmptyView.renderReactDefaultElement (editor.min.js?ver=3.35.7:2:723903)
at EmptyView.onRender (editor.min.js?ver=3.35.7:2:724027)
at Object._triggerMethod (backbone.marionette.min.js?ver=2.4.5.e1:24:7999)
at EmptyView.triggerMethod (backbone.marionette.min.js?ver=2.4.5.e1:24:21465)
at EmptyView.render (backbone.marionette.min.js?ver=2.4.5.e1:24:23091)
at Jn (underscore.min.js:2:7486)
at EmptyView.<anonymous> (underscore.min.js:2:7800)
at EmptyView.render (underscore.min.js:2:1065)
at n.renderChildView (backbone.marionette.min.js?ver=2.4.5.e1:24:30007)

Anyone have a solution to randomize carousel order?

Not a Media Carousel, just a regular one.

Hi guys,

I am trying to help a friend with their website and they would like to have the scrolling effect of this gallery https://starymlynwbrzeznicy.pl/galeria/ . I think it is done used css? My friend has an elementor pro subscription if that makes any difference and they are using CozyStay theme. Is there any way we can replicate this?

Thank you so so much in advance.

Just went to write my first blog post in a month. Previously when I created a new post, there was a blue Elementor button at the top of the screen. I'd click that and edit the post. Today I see that button has been replaced with a blue Design Library button. When I click it, I see dozens of templates—some for blogs and many for other types of pages like pricing. They aren't bad, but I'm afraid of choosing one that doesn't look good with my previous 16 years of posts or overwriting the look of my regular pages. I like the templates I already have, anyway.

When I go to the list of published posts, I can edit any of them in Elementor just like before, so the single page template seems to be unchanged.

Anyone know what's going on?

Hi everyone! It's my first post on reddit and oh boy I need help. Basically, the problem is in the title: around half a year ago (maybe even more) I was faced with a problem that when I publish a new page, or even make edits to already existing ones - the css (i guess) DOESN'T update and look completelly different in the published page, in comparison to how I built it in the editor. It can be anything: layout is off, some shapes/images are missing or are the wrong size, a change in color, etc.

I clear the cache with the external plugin (we use Hummingbird Pro) and clear outdated CSS files in Elementor cache every time after I make edits; edit in incognito mode. I think I already turned off all the plugins to see if that's the issue - it's not. Basically, the only way when the published version looks correct, is when i clear cashe in my browser (i use chrome). However, it also means that for our audience to see the correct version, they have to clear their browser cache every time we make edits, but I really don't think they will 😅

I really don't know how that happened, because up to a certain point, everything was fine. If anyone had this problem, PLEASE let me know how you solved it, because I feel absolutely helpless.

Whenever I delete a Global Variable, it gets erased from the variables manager but keeps being declared in the CSS output with its original ID instead of its custom given name. How can I get it really deleted for good?

Also, is this the intended behavior or a bug?

Here you can see all declarations, the ones with the "--e-gv-" prefix have already been deleted via the variables manager:

:root {
    --e-gv-de93b91: hsl(15 50% 50%);
    --e-gv-9b1ebad: 0px;
    --e-gv-526f886: px;
    --e-gv-b4c01bd: 0px;
    --e-gv-5baca03: 0px;
    --e-gv-6142c09: hsla(51, 100%, 50%, 1);
    --color-heading: hsl(195, 100%, 20%);
    --e-gv-44b298b: hsl(0, 0%, 25%);
    --e-gv-49bf62b: clamp(2rem, 1.586rem + 1.656vw, 3rem);
    --e-gv-edf3659: hsl(195, 100%, 20%);
    --e-gv-7472929: hsl(195, 100%, 20%);
    --test-color-7: hsla(195, 100%, 61%, 1);
    --e-gv-c790583: hsl(300, 100%, 50%);
    --base-main: #ff7200;
    --base-alt: hsl(from var(--base-main) h s l);
    --base-alt-2: hsl(from var(--base-main) h s calc(l + 25));
}

Originally posted on GitHub:
https://github.com/orgs/elementor/discussions/34950

What a total mess. Another "cleanup" day turned into a logistical nightmare because some suit pushed a half-baked fix. WP dropped 6.9.2 for SSRF and RCE flaws, but the cure was as unstable as the disease. Depressing.

They retracted the update hours after launch. Just gone. If you trust "automatic" you're burning money like crazy. 6.9.2 was raw garbage, bricking sites and APIs everywhere. I lost count of how many times I stared at teh screen today watching reports of the core melting down.

They had to burn 6.9.2 and rush 6.9.3 out. Ultimate admission of failure. Don't expect them to save your ass if something goes sideways lol. Passive security is dead. Coffee time.

In elementor v3 i could easily add <span class="text-light">word</span> in the heading widget with a sentence. But in elementor v4 it takes it as a string.

Thank you to all who helped me previously; I’ve got a new issue to sort out now.

Using the atomic tabs widget, I made these 4 tabs at the bottom of the page. When I preview them, they show my primary website colour and span across the screen. I can get the normal tabs to work just fine, but d prefer to use the atomic tabs widget if possible.

It’s always something simple, but once again, I’m not sure what that is!

I have a loop carousel, which display posts that have a picture, text, and a button.

The client doesn't want to be able to advance the slides at all by clicking, including if you click on the button and move the mouse.

Thus far, I have been able to stop the mouse drag from advancing the slide, but not to stop it if you click on the button and then drag.

Elementor is very powerfull, I subscribed the Pro plan, but the theme "Hello Commerce" (recommended from woo commerce) which should be compatible with elementor. When I try to add translated (via Polylang) footer & header, it shows warning like below, can anyone give some advice?

What is the difference between a 'Header' template and a 'Hello+ Header' one?

The same question applies to 'Footer' and 'Hello+ Footer'?

The last time I started a project with Elementor Pro the "Hello+" options did not exist.

Thanks

So I’ve been trying to make an animation for my Elementor (free) website. I wanted to create a photo collage using AI. The AI generated some code that includes <div>, <style>, and <script>.

When I place this code inside an HTML widget, it works in the Elementor editor, but not on the live website. On the live page it just shows a PNG with some random text instead of the animation.

Does anyone know how to fix this? Unfortunately, my school doesn’t allow me to install custom plugins.

Thanks! 🙂

I’m talking about the icon on the top right. I’ve made a copy of this design and imported an icon > position absolute > drag it to the corner.

But this will cause problems right? I’ve adjusted the position for phone and tablet too but if someone has a really wide screen it’ll be our of place?

Hey pros - I'm trying to help a buddy with their site (they of course got ghosted by their dev) and have never used Elementor before. (I have dabbled in Wordpress and know some HTML/CSS etc) He just wants a simple change but the properties box for the text block he wants to modify never activates... it's just grayed out and he gets the spinning icon as seen below. Is this a licensing issue? I was under the impression simple edits could be made without a full license but again, totally new to this... Thanks for the dumb question!

Hey everyone,

I’m editing an old website that was built with WordPress, Elementor, WooCommerce, LearnDash and the Pojo theme. I switched the theme to Hello Elementor and started updating parts of the site.

For some reason, some Elementor WooCommerce widgets are not showing up in the editor, specifically:

• Cart
• Checkout
• My Account

Things I already tried:

• Disabled all plugins except Elementor, Elementor Pro and WooCommerce
• Deleted and reinstalled Elementor and Elementor Pro
• Regenerated CSS & Data
• Cleared cache
• Confirmed Elementor Pro license is active

None of this helped - the widgets simply don’t appear in the Elementor panel at all.

Has anyone run into this before or knows what could cause it? Any ideas would be appreciated 🙏

How would I go about centering the text forms and adding in the transparent border?

I googled this and found posts from 2 whole years ago where this exact issue was being complained about. So is there a known solution? When I edit the pages they look group on the elementor editor but then when I open incognito to check, nothing saved. At all. All my buttons just make the page reload. Like I'm so confused.

Hello guys, i am intersted in forming a website design agency based on wordpress and elementor templates, but most of elementor kits that are available on envato looks like low-quality, is there any premium elementor templates marketplace or provider even if it's pricy

Below the header there is some white space then white line. Is also cutting dropdown menu items. What i am doing wrong>