Common Elementor mistakes to avoid
The most common editing mistakes people make in Elementor — and exactly how to avoid each one.
- Difficulty
- Beginner
Most problems in Elementor come from a small set of common mistakes. This guide covers the ones we see most often so you can avoid them from the start.
Quick summary
The most common mistakes are: uploading oversized images, changing global styles accidentally, deleting elements instead of hiding them, editing the wrong page, and publishing without previewing on mobile. This article explains how to avoid each one.
Mistake 1: Uploading huge, uncompressed images
This is one of the most common performance mistakes we see. A photo straight from a phone or camera is often several megabytes. Elementor's own advice is to keep images under 1 MB, and we aim much lower: under 200 KB for most images.
How to avoid it:
- Always compress images before uploading. Use a free tool like TinyPNG.
- Use WebP or JPG for photos. Save PNG for images that need a transparent background or pin-sharp edges, such as logos.
- Resize images to the maximum size they will actually appear at — a small thumbnail does not need to be 3000px wide.
Mistake 2: Editing the wrong page or template
On sites with Elementor Pro, there are regular pages and Theme Builder templates (headers, footers, post templates). It is easy to accidentally open the wrong one.
How to avoid it:
- Check the name in the editor's top bar before editing. It shows the page or template you have open.
- Be extra careful with headers, footers and other Theme Builder templates. Changes to them show on every page the template is set to appear on, which is often the whole site.
Mistake 3: Overriding global colors or fonts locally
If your site uses global styles, giving a single element its own color or font means it no longer follows the global setting. Later, when the brand colors are updated globally, that element will not update.
How to avoid it:
- Pick colors with the globe icon (your Global Colors) instead of typing custom hex codes.
- Only override locally when you have a specific reason for one element to look different.
- See Global colors & fonts.
Mistake 4: Deleting instead of hiding
When you delete a section or widget, it is gone (unless you undo or restore an earlier revision). Deleting a container or section also deletes everything inside it. Many people delete something they simply wanted to temporarily hide.
How to avoid it:
- To hide something from visitors without deleting it, open the element's Advanced tab and expand Responsive. Turn on Hide On Mobile to hide it on phones only, or turn on every Hide On option to hide it on all devices. (On newer V4 elements, switch to the device view and set Display to None under Style > Layout.)
- The eye (View) button in the Structure window only hides an element while you edit. Visitors still see it.
- When in doubt, save the section or container as a template before deleting it (right-click it and choose Save as Template).
Mistake 5: Not publishing after making changes
Sometimes people make edits, close the editor, and wonder why the changes are not live. Changes don't reach the live page until you click Publish or Update. Saving a draft doesn't change the live page either.
How to avoid it:
- Always click Update or Publish before closing the editor.
- Do a final check on the live page after publishing to confirm the changes appear.
Mistake 6: Publishing without checking mobile
A layout that looks great on a desktop can look broken on a phone. Many people forget to check.
How to avoid it:
- Before every publish, switch to mobile view in the editor (the Responsive views icons in the top bar) and review the page.
- Check the page on your own phone as well.
- See Making your page look good on mobile.
Mistake 7: Pasting formatted text from Word or Google Docs
Text pasted from Word, Google Docs or another website can bring its own formatting with it, such as fonts and colors. That formatting can override your site's styles and make your text look inconsistent.
How to avoid it:
- Paste without the formatting: use Paste Special on Windows, or Paste and Match Style on a Mac.
- Or paste into the Text tab of the Text Editor widget instead of the Visual tab.
- Or paste into a plain-text editor first, then copy it from there.
- If text already looks wrong, open the Text tab and remove any span styling tags wrapped around it.
Mistake 8: Using too many fonts
Adding multiple font families to a page (or site) can slow it down and makes the design look inconsistent.
How to avoid it:
- Stick to one or two font families across the site. Your global font settings should define these.
- Do not set one-off fonts on individual elements unless there is a strong reason.
Mistake 9: Ignoring the Structure window on complex pages
On pages with many sections and widgets, clicking elements directly on the canvas is error-prone. You may click the wrong thing and change the wrong settings.
How to avoid it:
- Open the Structure window (formerly called the Navigator) for complex editing work. Click the Structure icon in the top bar, or press Ctrl+I (Cmd+I on a Mac).
- Click an item in the Structure window to select exactly the element you want, especially for containers, sections and columns.
Mistake 10: Not using revision history when needed
Some people work in Elementor for a long stretch, realize a change made earlier was wrong, and cannot get back to it with Ctrl+Z. Undo works through the actions in your current editing session. For anything older, you need a saved revision.
How to avoid it:
- Save (click Update) more frequently. Every time you save or publish, Elementor creates a revision you can go back to.
- If Ctrl+Z cannot reach far enough back, open the History panel (clock icon in the top bar), go to the Revisions tab and restore an earlier save.
Common questions
I made a mistake and can't undo it — what do I do?
Open the History panel (clock icon in the Elementor top bar) and go to the Revisions tab. Find a version from before the mistake and apply it. Anything added after that version is removed from the page. See Undoing changes with revision history.
I published changes by accident — can I revert?
Yes. Open the revision history, find an earlier revision, apply it, then publish the restored version.
How can I tell if an element uses a global color or a local override?
The surest way is to set it again. Click the element, go to the Style tab, click the globe icon next to the color field, and pick the global color you want. If you aren't sure how an element was set up, contact us and we'll check.
Related guides
- Undoing changes with revision history
- Global colors & fonts
- Making your page look good on mobile
- Using the Structure window (Navigator)
- Troubleshooting Elementor problems
Need a hand?
Learn more
Last updated
Working with Elementor forms
Learn how to edit, configure, and manage contact forms built with the Elementor Form widget, including fields, notifications, and submission settings.
Elementor & page speed
Understand how Elementor affects your site's loading speed, what causes slowness, and what you can do to keep your site fast.