In this tutorial, we’ll explore the Text Editor widget. This widget allows you to place, edit, and style body text on your website. This tutorial will cover:
✔︎ Basic functions of the Text Editor widget
✔︎ Working with multiple columns of text
✔︎ How to style body text
✔︎ Adding and styling a drop cap
✔︎ And much more!
Hey there. It’s Aviva from Elementor.
In this tutorial, we’ll explore the Text Editor widget. The Text Editor widget is used to place, edit, and style body text on websites.
Body text is required on just about every website, and with the right styling, your website text will draw your visitors’ attention, and encourage them to read on, and engage with your site.
In this video, we’ll show you different examples of how you can showcase text in your website designs.
Let’s get started.
In our first example, we’ll create a block of text with two columns, for a law firm.
Let’s start by selecting the Text Editor widget, located here in the Basic widgets, and dragging it into place in the Editor.
In the content tab is the standard WordPress editor with its visual…and text tabs.
By default, a short paragraph of placeholder text already appears here. Update it with your own text, by typing or pasting it in.
Click the Dynamic tags icon to display dynamic content, which refers to select content drawn from the website, such as from a blog post.
Note that you can use dynamic content in any setting that has the dynamic tags icon displayed. For this example, there’s no need for dynamic content, so I’ll use the content I typed in before.
You can make text edits right here, or directly in the Elementor Editor by double-clicking the text.
Select text to apply basic text formatting styles, such as bold and italic styling, list options, and more.
Returning to the text editor, you can click this toggle to expand the toolbar for more formatting options.
Additionally, you can click and drag the corner to expand the text editing area, which is quite helpful for larger text blocks.
Below, you can add a drop cap by toggling it on here. I’ll leave it off for now, and we’ll go over the Drop Cap styling in the next example.
The text editor widget allows us to separate text into columns. I’ll select a two column layout, which works well here…in our Desktop view.
The presence of the viewport icon indicates that this setting may be adjusted for other devices. In the columns setting, you can change the number of columns displayed on tablet by clicking the tablet icon and adjusting the number of columns. Now click to switch to mobile view, and as you can see, it’s inherited the tablet settings. That’s perfect for this design, so there’s no need to change it.
For more about Responsive editing, check out our full Responsive tutorial, linked in the description below.
Click the Desktop viewport icon, to go back to Desktop view.
Next, you can adjust the columns gap, which is the amount of space between each column, by using the slider or typing the exact value.
Great, the content is all set. Click the style tab to style the text.
Here, you can adjust the text alignment: by default it’s aligned left. You can change it to center, right, or justified alignment. It looks better already!
Next, we’ll change the text color. Click the color swatch to choose a color. You can use the color picker, or type in a color code. Alternatively, you can select a global color.
You can customize the typography options, by clicking the pencil icon.
First, choose a font family.
Next, adjust the size. Then, select the weight.
You can also choose from several different Transform, Style, and Decoration options.
Next, set the line height, and last but not least, adjust the letter spacing, if desired.
Alternatively, you may use a previously saved global font style.
For more about Global Colors and Fonts, check out our dedicated video, linked in the description.
And that’s it. We now have a two column, styled block of text. Let’s preview. Looks great!
For our next example, on this Personal Chef landing page, we’ll take a closer look at the drop cap option we saw earlier.
Adding a drop cap, can add a stylistic edge to text. And using it together with a different text style, can further enhance your design.
For this example, I’ve already placed the text editor widget and content on the page and styled the text.
Enable the Drop Cap by toggling it on.
In the Style tab, you’ll notice a new option for the Drop Cap styling, which was activated when we enabled the Drop Cap in Content.
Click to Expand it.
Let’s take a look at the View options.
Change from default to stacked, or framed.
Here, you can change the primary color to better fit the design. You can also change the secondary color, depending on how you choose to showcase the drop cap. I’ll leave it on the default for now.
Next, adjust the size…the space between the drop cap and the rest of the text…and border-radius – for rounded corners, as needed
Below, you can adjust the border width. I’ll leave the default setting for my design. Note that the border width setting is only available in Framed view.
To make sure the letter matches the look and feel of the rest of our text,you can customize the typography manually, or choose a global font.
Now let’s preview. It looks great!
And there you have it, now you know how to use the Text Editor widget to style text in different ways, and better engage with your visitors.
(So go ahead…you’ve got this! Apply what you’ve learned here to your website’s text. We can’t wait to see how you use it)
Thanks for watching! For more tutorials, subscribe to our Youtube channel. And don’t forget to hit the notifications bell.
