HTML is the markup language that gives you the ability to structure your WordPress website. It allows you to define your headings and paragraphs, your images, your links to other websites, and all the other elements your visitors may interact with. When you edit the HTML, you gain precise control over every aspect of your page’s structure.
Much of this is done “behind the scenes,” with the WordPress interface making things more user-friendly for the average user. However, editing HTML proves the best way to modify the site layout, even if you don’t see this directly within your WordPress CMS.
But it is actually relatively easy to edit HTML source code in the WordPress CMS if you need to, even if you’re using a page-builder plugin like Elementor. Let’s look at how to edit HTML in Elementor and then follow with the guide on how to modify HTML from scratch.
Is Editing HTML in Elementor a Good Choice?
As mentioned, knowing how to code isn’t necessary to build engaging websites, and Elementor makes it easy for non-coders to design the WordPress website they want.
Elementor gives you drag-and-drop functionality, allowing you to use any of the 90+ widgets to create content, like buttons, star ratings, progress bars, and more. Among these additional widgets, there’s an HTML widget you can use to add an HTML section to your page.
You can place the HTML widget onto any section of your page to inject custom code exactly where you need it.
How to Edit HTML in Elementor
First, make sure that you’ve installed Elementor on your WordPress site before following our instructions below. To add HTML to your website pages or posts, you need to use the Elementor HTML widget.
Start by creating a new page or edit a previous one in the WordPress dashboard.
Then, head to the Edit with Elementor button on the sidebar.
Now search for the HTML widget on the left of the dashboard. In the Editor Panel, drag and drop an Elementor HTML widget onto your page.
Open the page that you want to modify the layout on in a new browser tab. Press Ctrl + U or right-click a blank part of the web page and select View page source from the pop-up menu.
A window of code source will show up. Select the part of your page that you want to change the structure.
Simply copy the HTML line of that part and paste it into the Code box.
Remember to save and update your changes. Once saved successfully, you can preview your code in a new browser tab.
However, sometimes when working with Elementor, the Edit With Elementor button may disappear from the Admin bar – there are a few reasons why this may happen.
Why the “Edit with Elementor” Button Is Not Showing in WordPress
There are several common reasons why you may not be able to see the “Edit with Elementor” button, which will prevent you from editing the HTML:
- Elementor Hasn’t Enabled the Relevant Post Types – To fix this issue, you just need to go to Elementor’s Settings and check the box of the relevant post type. If this isn’t enabled, you won’t be able to edit your posts with the Elementor plugin.
- An Error Happens after Updating WordPress – Once you update WordPress to a new version, a change in the core code can directly affect the items shown in the admin bar. When it comes to this issue, you should contact the WordPress support team to search for solutions.
- An Installed Plugin is Inconsistent – By default, inconsistent plugins will slow down your site and prevent you from working properly with WordPress. If this is the case, you’d better deactivate all of your plugins excluding Elementor. Then, check whether the Edit with Elementor button appears or not. Try to reactivate each plugin one by one until you find the main culprit.
- Elementor is not properly activated – The plugin might be installed but not activated in your WordPress dashboard.
- Theme compatibility issues – Some WordPress themes don’t fully support Elementor or have compatibility issues.
- Corrupted Elementor files – Files may have become corrupted during installation or updates.
- Role permissions – Your user role might not have sufficient permissions to access Elementor.
- JavaScript errors – Browser console errors can prevent Elementor from loading properly.
- Caching issues – Browser cache or WordPress caching plugins might be serving outdated versions of your pages.
- Database issues – WordPress database tables related to Elementor might be corrupted.
Changing Your Layout Using Elementor Is Easy
Elementor offers a lot of design possibilities, and for developers, modifying HTML in Elementor gives you full control over your webpage. The good news is that it’s easy enough to edit HTML in Elementor, allowing you more advanced theme customization and the ability to add HTML effects to your posts in no time.
