You need to change a price on the services page. You open it in WordPress, and instead of your text you see a big button that says “Edit with Elementor”. You click it, a dark panel slides in on the left, and the page appears on the right with outlines everywhere you move the mouse. Nothing is labelled the way you expected, and you are worried that one wrong drag will rearrange the whole page.
Elementor is easier than it first looks once you know its three or four ideas. To edit an Elementor page as an owner you need a short list of skills: opening the editor, finding the bit you want, changing text and images, checking the mobile view, and saving or undoing safely. Everything here sticks to the free version’s basics, which work the same whether or not your site also has Elementor Pro.
Opening the page in Elementor
There are three common ways in. All of them need you to be logged in.
- In Pages, hover over the page title and click Edit with Elementor.
- While viewing the page on your site, use Edit with Elementor in the admin toolbar at the top.
- Open the page in the normal WordPress editor and click the Edit with Elementor button there.
If the editor never finishes loading, or shows a message that the preview could not be loaded, that is a fault rather than a skill problem. Our step-by-step guide to the Elementor preview error walks through the usual causes.
What you are looking at
The screen has two halves. On the right is your page, shown almost exactly as visitors see it. On the left is the panel, which changes depending on what you click.
Pages in Elementor are built from boxes inside boxes:
- Containers are the layout boxes in newer sites. They hold content side by side or stacked, and can sit inside each other.
- Sections and columns do the same job on older sites. You may see either, or a mix, depending on when the site was built.
- Widgets are the actual content: a heading, a text editor, an image, a button, an icon list, a form.
Hover over anything and Elementor outlines it. Click it and the left panel shows that item’s settings, which for most widgets are split into three tabs: Content for what it says or shows, Style for how it looks, and Advanced for spacing, visibility and similar options. For everyday edits you will spend most of your time in the Content tab.
How to edit an Elementor page: the everyday changes
Changing text
- Click the text on the page. For headings and text blocks, you can usually type straight onto the page.
- For longer text, use the text box in the panel’s Content tab, which has its own small toolbar for bold, links and lists.
- Keep the formatting the widget already has. If you paste from Word or an email, paste as plain text so you do not bring in odd fonts.
Swapping an image
- Click the image. In the Content tab, click the image preview to open the Media Library.
- Choose an existing image or upload a new one, and fill in the alt text in the library while you are there.
- Check the image size option in the same panel, so you are not loading a full-size photo into a small space.
Changing a button
- Click the button. In the Content tab, edit the text and the link.
- For a phone number, the link should start with tel: followed by the number in international format.
- Click the cog beside the link field for options such as opening in a new tab.
Adding something new
Open the widget list from the panel (a plus or grid icon, depending on your version), then drag the one you need onto the page. A blue line shows where it will land. When you are learning, it is safer to duplicate an existing widget (right-click it and choose Duplicate) and edit the copy, because it keeps the styling that already matches the page.
Finding things that will not click
Sometimes a click selects the wrong box, or something sits behind something else. The Navigator helps here. Right-click on the page and choose Navigator, and a list of every container and widget opens, nested like folders. Click a name in the list to select it on the page. You can also rename items in the Navigator, which makes long pages much easier to work on next time.
A header or footer that ignores your clicks belongs somewhere other than this page. It is either made by your theme, or, on Elementor Pro sites, built as a separate template under Templates → Theme Builder. Our map of where headers, footers and menus live explains how to tell which.
Checking the mobile and tablet views
Elementor lets you set some options differently for desktop, tablet and mobile. Switch between them with the device icons in the editor’s top bar (or the bottom bar in older versions). The page preview narrows to show that screen size.
The detail that trips people up: settings that show a small device icon beside them can be different on each device. Settings without that icon apply everywhere. So if you shrink a heading while in mobile view and the icon is there, only mobile changes. If it is not there, you have changed it for every screen.
To hide something on phones only, select it, look in the Advanced tab for the responsive or visibility options, and switch on the hide option for mobile. Use this sparingly. Hiding a lot of content on phones usually means the page needs simplifying instead.
Global settings: change once, not on every page
If you want every button on the site to use your brand colour, do not change each button by hand. Elementor has site-wide settings called Site Settings, reached from the editor’s main menu; where that menu sits has moved between versions, so look at the top left first. There you will find global colours, global fonts, default styles for buttons and headings, and the site’s layout width.
Widgets that use a global colour or font update everywhere when you change the global value. Widgets someone styled by hand will not, which is why some sites look inconsistent after a brand change. If your theme also sets colours and fonts, our guide to changing colours across a WordPress site explains how the two layers interact.
Saving, previewing and undoing
- Publish or Update saves the page live. The arrow beside it usually offers Save Draft, which saves without changing what visitors see on a page that is not yet published.
- The preview eye icon opens the page in a new tab as it will look once saved.
- Ctrl+Z (Cmd+Z on a Mac) undoes the last change while you are still in the editor.
- The History panel lists your actions in this session, and its Revisions tab lists saved versions of the page. Click a revision to preview it, then apply it to roll the page back.
Revisions depend on WordPress revisions being turned on for your site, which they are by default. If the Revisions tab is empty on a page that has been saved many times, your host or a developer may have limited them.
Habits that keep Elementor pages tidy
- Edit one page at a time, and check it on your phone after saving.
- Duplicate instead of rebuilding, so styling stays consistent.
- Avoid nudging spacing with many small margins. If a gap looks wrong everywhere, it is a global or theme setting.
- Do not install an add-on pack for one widget you could do with a built-in one.
- When an edit does not appear for visitors, clear your caching plugin before assuming Elementor failed.
Elementor is one of several ways a WordPress page can be built. If you are unsure whether a page uses it at all, our guide to editing a page in WordPress covers the others, and our overview of how themes and page builders share the work explains where Elementor sits. The broader WordPress guide for business owners links every other everyday task.
Frequently asked questions
Why does my Elementor page look different on my phone than in the mobile preview?
The mobile preview is a narrow version of the page in your browser, so it is close but not exact. Real phones differ in screen size, fonts and browser behaviour, and caching can show visitors an older version. Always check the saved page on a real phone, and clear any caching plugin after making changes.
Can I edit an Elementor page in the normal WordPress editor instead?
Not in a useful way. The design lives in Elementor’s own data, and the normal editor only holds a plain copy of the text. Changes made there may be overwritten or ignored the next time someone saves in Elementor. Keep editing Elementor pages in Elementor, or rebuild the page in blocks if you want to leave the builder.
Do I need Elementor Pro to edit my pages?
Not for basic text, image and button changes made with free widgets. If your page uses Pro widgets such as forms, or your header and footer were built with the Pro theme builder, those parts need Elementor Pro active to edit. If the Pro licence has expired, you lose updates and support at the least, and Elementor’s terms on what else stops have changed over time, so check them.
How do I copy a section from one Elementor page to another?
Right-click the container or section and choose Copy, then open the other page, right-click where you want it and choose Paste. For a section you reuse often, right-click it and save it as a template, so you can insert it on any page from your saved templates later.
When Elementor refuses to save, shows blank areas or breaks after an update, that is repair work, and our Elementor repair service page explains what that work covers.
Next in this series: How to Import a WordPress Theme Demo Safely
