The WordPress visual editor is an extremely flexible tool when creating your content. Thanks to it, you can not only format your texts and control in detail all the styling of a page, but you can also create true landing pages thanks to the use of shortcodes.
But being such a powerful utility, you also have to use it responsibly. Creating quality content is not a matter of stylizing your texts with everything it offers you, but rather taking advantage of the flexibility that this tool gives you to make reading easier for visitors.
Let’s look at some of the things you should avoid doing in the visual editor, and why.
Avoid coloring texts in WordPress visual editor
One of the most powerful options that the WordPress visual editor has is the color picker. Thanks to it, you have the ability to give any color to your texts from a virtually unlimited RGB palette.
There’s only one problem with all of this – it’s also one of the options you should never have to use.
The main problem with styling text with the WordPress color picker is consistency. Unlike other types of stylization such as bold or italic text, colors are not a standardized or CSS-defined tool for your theme, but are inserted as HTML code directly into your text:
This is an example
Your pages will not only get dirty with embedded CSS attributes, they will also be much more difficult to maintain.
For example: if you decide to color your brand name every time it appears on a page in order to give it a special touch, you would have to make sure that the same color is applied on all pages to be consistent.
And if at any particular time you wanted to change the appearance of those colors throughout your site, it would be a very difficult task to perform because the colors are embedded directly in your content.
Using the custom colors in the visual editor is not a bad thing in itself; the problem is rather the maintenance that it entails, in addition to the fact that it will not benefit you at the SEO or usability level.
If you want to use colors in the editor, my recommendation is to use any of the other HTML tags: bold, italic, underline, etc … Since they are part of the HTML standard, you can then make changes with CSS globally without having to touch up any of your items.
Avoid justifying your paragraphs
Another option that is usually used more than normal is the Justified Text option. For many, this option will remind you of Microsoft Word, where as a general rule the documents you create usually come with completely justified texts so that they take up all the available width.
However, the Web is a completely different environment than printable documents and has a somewhat peculiar set of rules for usability and readability.
Compared to specialized document-writing programs, web browsers do not have as much flexibility in controlling paragraphs of text in detail. There is no automatic word division, nor is there a kerning adjustment that makes a justified paragraph as readable as a normal paragraph.
Although this type of technology is starting to appear in some of the most modern browsers, there is still a long way to go before it becomes a viable option.
When justifying a text on the web, what we are doing is distributing all the space that is left over at the end of a line among all the spaces. In this way, the phrases occupy the entire available width and give a more compact block shape. The problem is that justifying texts can lose a lot of readability, because the spaces become inconsistent and make the text more difficult to read continuously and without interruptions.
Because of this, justifying texts in WordPress many times ends up giving a worse result than simply aligning them to the left. This happens quite a bit when using very long words in much closed spaces, such as in columns or articles with little width, where the spaces can create very visible cuts between each word.
Conversely, aligning texts to the left without any justification can often help make them easier to read. Due to the different lengths of each line, the reader’s eyes can more easily remember which line they are on, facilitating reading speed.
Avoid overlapping styles
Given the large number of options at your disposal to stylize your pages, you may be tempted to use many of them to bring your content to life – but you have to be careful with that.
Each of the HTML elements that you can use in the visual editor has a semantic use ; This means that labels such as bold, italics or even underlining have been created to have a very particular meaning, and that they must be taken into account when using them in a text. For example, according to WHATWG specifications:
- Bold or <strong> texts are used to give importance or urgency to a piece of text. It is generally used to extract some sentence or information from a paragraph.
- Texts in italics or <em> serve to emphasize a phrase without necessarily indicating importance, or that can be read in another tone of voice.
- The Address or <address> style is used to provide relevant contact information to the page. Contrary to what many people think, this label does not have to contain a postal address.
When writing your pages, it is important to take into account what each of these elements represent and make correct use of them. In other words, you have to avoid mixing several different styles just for their visual appearance.
If for example you want to make your headlines more visible, it is not a good idea to use the bold tool to highlight them, or to overlap multiple labels at the same time. Instead, you can take advantage of CSS to modify the appearance or size of headings without affecting the markup of your content.
Writing articles that are semantically correct can bring benefits to your website. As search engines become more advanced, they may later use these semantic elements to position web pages, taking into account whether they are used correctly or not.
A clear example of this is the use that H1-H6 tags now have to determine the importance of content, and how they can influence the positioning of keywords on a page. In a few years, they may make more extensive use of HTML5 tags to determine what kind of information each section of a website contains.
Avoid pasting stylized content
Although TinyMCE– the software that gives life to the visual WordPress editor– tries to maintain the stylization of a text when copying them from one window to another, the results are very likely not optimal. Because each WYSIWYG word processor has its own way of managing the styles it applies to text, achieving a consistent appearance when copying and pasting is a very difficult task.
This usually happens when copying content from a web page, as several unwanted HTML tags such as <div> and <span> may be selected during the copying process . For example, if I try to copy the contents of the following page:
By pasting this little paragraph, not only will the contents appear very differently from the originals, but by looking at the HTML code you can see that there are many <div> tags and CSS classes that can get in the way:
It is always recommended that you thoroughly review the contents that you have pasted in the visual editor of WordPress before retouching them, since it is possible that you will have some surprises. Your theme’s CSS style sheet may apply to these tags, causing unexpected results.
It is preferable to clean all these styles, since in the worst case it may happen that the CSS styles of your theme interfere with the content that you have pasted, and completely disrupt the design. The best way to avoid this is to use the Paste as Text option, and do all the styling with the visual editor itself.