WPDesigns Site Logo

Add, Edit and Delete Text in Elementor

Add, edit and delete text in elementor
Share This Post

In this WPDesigns article, we will discuss how to add, edit and delete text in Elementor. The Elementor text editor widget is simple to change and update text, and after a couple of tries, you’ll be able to achieve exactly what you need to do every time.  Be careful as the text widget can have issues when text is copied from other word processors as the widget can display other formatting and code. I generally recommend adding your text into the widget through the box in the left-hand menu bar.

Table of Contents

How to Add Text in Elementor

The first step, as with many WordPress steps, is to start on the dashboard and navigate to the page you want to edit.

To add, edit and delete text in Elementor, you need to access the page’s back end.  This can be done in several ways and is covered in our article “How to add, edit and delete pages in WordPress.”

Already Edited With Elementor
Open up the page you would like to add your text to
Elementor Widget Selector
Open the Elementor widgets tab

Once the web page loads and you have access to the editor, click the icon that looks like 9 small boxes located on the right of the Elementor title on the left-hand side of the page.

This is where you’ll find the heading widget. To position the heading, simply drag and drop the widget into the correct spot on the website.

Find text widget
Find the text widget
Drag it into the location you need

How to Edit Text in Elementor

Editing text on your website is key to keeping your website up to date; a website with outdated content can lead to the wrong information being given to visitors, giving them a bad impression of you and your business.

Making sure that you know how to edit and what you can do will, go a long way to ensuring your WordPress website is up to date with the latest content.

As with the section on adding the widget, you’ll need to make sure you have opened the Elementor editor’s page.  From here, you’ll need to click and select the text element on the page that you would like to change and edit.  Click the element, and it will open a box on the left-hand side of the page.

From this box, you can change the content, edit the style, and access advanced features such as animations and responsiveness options.

Interface of text editor content tab
You can edit the text and other options here
Each element has 3 editing options

The Text Editor Tabs

The Text Editor widget can be edited across three tabs. These three tabs will appear for each widget that is available in Elementor. They are Content, Style, and Advanced.

Content Tab

Using the Content tab, you can change the text that appears on your page through the text editor. Then, from here, you can change the text as needed by simply typing into the box as you would with any word processor or document.

The Content tab also allows you to add a couple of other things:

  • Visual/ Text/ Dynamic – Each of these tabs serves a different purpose, and likely for now you will need the Visual tab and occasionally the Text.  The Dynamic tab is likely important later or possibly never, depending on your website.
    • The Visual tab displays everything as it will be seen on the website; any code or links in the text will be seen as the end-user sees them.
    • The Text tab will show you any code behind the text; this could be making the text bold or perhaps the URL that your Hyperlink leads to.
Interface of text editor content tab
The Content tab is the easiest to use and probably the most important
    • The Dynamic tab with the small stacked cylindrical icon is useful when you need the information to change depending on the page or post that it is being displayed or for the person viewing it.  This is particularly useful for blog posts when the page title, categories, date, author, etc., need to update and change itself depending on the post that is being viewed.
  • Drop Cap – This will display the first letter in the paragraph as oversized; this is often what you’ll see in Newspapers and sometimes on other websites.  You can edit the style for your drop cap.
  • Columns – You can set the number of columns that you would like your text to appear in.
  • Columns Gap – The gap between the columns can be increased and decreased as needed.

Style Tab

The style tab takes care of, well… the style…

If your global colors and fonts are set, there will not be so much for you to do here.

  • Alignment – You can set how your title will be positioned.  You can sometimes find the alignment under Style (for example, when editing text).  You can adjust further in the Advanced tab using the padding and margins.
  • Text Color – As you’d imagine, from here, you can change the text’s color. If nothing is selected, it will take the color from the Global Colors; if set here, it will override the Global colors.  You can reset the color by clicking the arrow going in a circle when choosing a color.
  • Typography – Takes care of everything from the font family, weight, transform, decoration, line height, and line spacing.
Interface of text editor style tabjpg
Control the style and look of your text in this tab
Advance tab of text widget
The Advanced tab has lots of options to work through

Advanced Tab

The Advanced tab is full of useful features:

  • Advanced – Options include; margin, padding, z-index, CCS ID and CSS Class.
  • Motion Effects – There are a range of scrolling effects, mouse effects, and you can also choose how the selected element enters the screen, the delay and if it is sticky.
  • Background – You can select the background for standard and also for hover.  You can choose from a solid background and a gradient.
  • Border – This allows you to add a border to the element when standard and hover along with the border-radius.  You can also add a box-shadow.
  • Positioning – You can change how the element is positioned on the page. For the page width, you have default, inline, and custom.  For the page position, you have default, absolute, and fixed.  Check out this article for a deep look into the positioning properties in Elementor.
  • Responsive – The responsive options will allow you to hide certain sections or elements on different screen sizes.  This can be useful when redesigning a page for mobile. On certain elements, you can reverse the columns.
  • Attributes – (Pro Feature) You can add custom attributes to the element; you can find a full list here.
  • Custom CSS – (Pro Feature) You can add CSS to the site or the element through this box.  It is best to add the CSS for the element and add the CSS for the global setting site.  You can use “selector” to target the specific element you have open.

How to Delete Text in Elementor

To delete the widget, just right-click on it on the page and select Delete from the menu. Then click Update / Save Changes or Publish and the widget will be successfully removed.

Find the element to delete, right click and click delete. Update the page after to save changes
Social Media
Recent Posts
5 Web Design Trends for 2022
5 Web Design Trends for 2022

The creative world of web design has always been the designer’s wonderland that combines various disciplines, including visual design, psychology, and wordcraft. As technology progresses

Read More »
Want us to get Creative?

We would love to hear from you!

Josh Cut Out


Typically replies in minutes

Hi there,

Feel free to message me if you have any questions.