Tutorial on how to use the WordPress visual editor – what a visual editor actually is, writing the text, creating headlines, subheadings, and adding images.
What is a visual editor?
The visual editor displays your post as it looks. The text editor also displays text with html codes. The option to change the current editor can be found just above the window where you are creating the content:
Editor features
Working with WordPress editors is not difficult. Let’s go through the individual features one by one.
Typing in a visual editor is much like working in a regular text editor. You can even use keyboard shortcuts for individual fonts, copy and paste text here.
If you move the cursor over each button, you will see a hint for each of them to indicate what the button is used for. The text input window automatically adjusts to the amount of text. Howsoever long your text will be, you will still have visual editor options at the top of the window.
Creating paragraphs
For clarity of the text, write in the paragraphs. Press “Enter” to create them. If you need to write a new line but don’t want to start a new paragraph, press “Shift Enter.”
Permalink
After entering the title of the page or post, the “Permalink” line will appear below the name entry window. Permalink is the URL of the page and post. Edit it so it includes its specific name. See the example on illustration:
To edit a permanent link, click the “Edit” button. Type your text in the window that will open. Then click “OK”. If you don’t want to save the changes, click “Cancel.”
Headings and subheadings
The size of the subheadings included in the text of the post can be set in the “Paragraph” box. Individual font size options will appear when you click on it.
Heading 1 (h1) is the 1st level heading. In this format is the name of your post or page. Therefore, for sub-headings in the text, use the 2nd to 4th level headings.
You’ll also find the “Preformatted” option here. If you choose it, you will write without formatting.
Adding media
The button for adding pictures, video and audio is called “Add File”. Click it to access the media library.
Writing a text
In the picture, you can see that the WordPress visual editor has one line of icons on top. The other one is hidden. To reveal it, click the Enable Toolbar button. Now your editor has two lines. Let’s go through its individual icons.
Individual buttons
Bold and Italic – to apply, mark the selected text and click the button.
Bulleted List – used for writing bulleted text without numbering. To type a new bulleted line, press “Enter”.
Numbered List — allows you to create a numerically ordered list.
Quote — this feature is used to highlight a quote or text that you want to draw attention to.
“Align Left”, “Align Center” and “Align Right” — aligns the highlighted text to the left, center, and right.
Insert / Edit Link — to a page or post, you can insert a link to another post or page. This button is used exactly for this purpose. To paste the link, select the text you want to link to and click the “Insert / Edit Link” button.
Insert tag Read more — it is mainly used when writing posts. The text in front of the tag appears in the post preview list. Usually, these are the initial 2-3 sentences that reveal what the post is about.
Strikethrough – Strikethrough text with which, for example, you can notify site visitors that you’ve changed something.
Horizontal Line – inserts a horizontal line on the page.
Text Colour — here you can choose the font colour. You have a choice of default colours or set your own colour.
Insert as Text – When you copy text that you have typed in a regular text editor or text from another page, its formatting can be changed when you insert it into a WordPress visual editor. If you click this button, the text is inserted without formatting.
Clear Formatting – Removes formatting from the selected text.
Special character – Use the special character button to enter special symbols. Clicking on this symbol will display a window in which you can select the desired symbol. For example: © € £ » ⇔.
Decrease Indent – shifts the text to the left.
Increase Indent – shifts the text to the right.
Arrows “Back” and “Again” – these icons are used to step back or forward.
Keyboard shortcuts – below the last box, you can find keyboard shortcuts for faster execution of the above functions.
