HTML Text Editors
I recommend that my clients use a page builder plugin for building their sites, and my two favourite page builders are Elementor and Visual Composer – they both have pros and cons, which are discussed in a separate article.
As you build out the content of a website, having a good HTML text editor is an invaluable resource. However, the text editors in different page builders have varying levels of functionality. In my opinion the Elementor has quite limited functionality. In particular, the Elementor text editor does not include functionality to change the font, font darkness, font size, or line height. I think that it also confuses text editing by having both a Heading element and a Text element (which also allows you to select the heading level) – if you don’t understand HTML, then you will probably end up using the Heading element, which just introduces more elements to your page, making it more cumbersome to edit. Other text editors don’t have separate elements for Headings. On the other hand, Visual Composer has an excellent HTML text editor.
So if you are using a text editor that doesn’t have the functionality that you are looking for, or you want to use Word as your text editor, then I recommend that you use the following steps:
- Create your text in Word
- Open the “Word to HTML editor” at https://wordhtml.com/
- Clear the sample text that is displayed and paste your Word text into the left panel – HTML will be displayed in the right panel
You can then edit your text in either the left or right panel to clean it up. Once it is clean then you can copy the HTML from the right panel, and paste it into the text editor within your page builder
Adding additional formatting to your text
However, there are some commonly used HTML commands that do not appear in the menu on the Word to HTML editor, and they require you to insert additional HTML. Following are some examples that I have used on websites:
To include a heading in a text block, followed by a paragraph of text, use the "Formats" function in the HTML editor - it will insert the appropriate tags against the text:
<h2>This is a Heading level 2</h2>
<p>This is a normal paragraph</p> This will look like:
This is a Heading level 2
This is a normal paragraph
To remove the space in between two lines use the break tag <br /> like this:
<p>This is the first line<br />and this is line 2</p> This will look like:
This is line 1
and this is line 2
To change the font size you need to use the span tag:
<p><span style="font-size: 24px;">Big font size</span></p> This will look like:
Big font size
Place a button in the middle of text: Page builders include functionality to insert a button as an element. But if you want to insert a button into the middle of your text then you need to give the text a background colour with a radius, and change the font colour. You can then use the HTML editor link function to add a linking URL. In this case I have added two spaces before and after the button text using the character “nbsp;” which is the non-breaking space character in HTML:
<p>I want to put <strong style="box-shadow: 3px 3px 3px #aaa; border-radius: 5px; padding: 0 5px; background-color: #2b3a56; color: #fff;"> a Button</strong> in the middle of this text</p> This will look like:
I want to put a Button in the middle of this text
If you want to insert an icon into your text without using a plugin like "Font Awesome", then you can upload the icon picture to your media library, then insert text similar to the following (but using the URL from your media library) - the following is for inserting a telephone icon. You can also insert text and/or a link if you like:
<p><img style="width: 20px;" src="https://your.domain/wp-content/uploads/phone-icon.png" alt="Phone" /> <strong>Phone:</strong> .........</p> This will look like:
Phone: .........
If you want to insert a picture or icon into your text and you want to include a link, then you need to embed the image within the attribute tags e.g. following is for a Facebook icon:
HTML courses
If you want to learn more HTML then I recommend the free course with CodeAcademy (I have done it and they have excellent learning tools) - see https://www.codecademy.com/learn/learn-html
The HTML guides and examples at W3 Schools are also excellent – see https://www.w3schools.com/html/html_examples.asp . They also have a free course that you can use.