How to use visual editor in WordPress

Tutorial on how to use the WordPress visual editor – what a visual editor actually is, writing the text, creating headlines, subheadings, and adding images.

How to use visual editor in WordPress

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:

Kde nájsť vizuálny editor
Where to find the visual editor

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.”

💡 Tip: Choosing the right hosting is crucial for a fast website ⏱ . I recommend betting on verified quality ➡️ Bluehost or SiteGround.

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:

Wordpress trvalý odkaz
Permalink

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.

WordPress formáty nadpisov
Formats of headings

You’ll also find the “Preformatted” option here. If you choose it, you will write without formatting.

💡 Tip for themes: From premium themes, I have good experience with themes Divi, Avada and with page builder Elementor.

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.

WordPress vizuálny-editor
Visual editor
💡 Do you want a faster ⏱ website? Website speed is important for both visitors and SEO. I got the best results thanks to the WP Rocket plugin, which I highly recommend.

Individual buttons

tučné písmo kurzívaBold and Italic – to apply, mark the selected text and click the button.

 

odrážkyBulleted List – used for writing bulleted text without numbering. To type a new bulleted line, press “Enter”.

číslovaný zoznamNumbered List — allows you to create a numerically ordered list.

 

citátQuote — this feature is used to highlight a quote or text that you want to draw attention to.

zarovnanie textu“Align Left”, “Align Center” and “Align Right” — aligns the highlighted text to the left, center, and right.

vložiť upraviť odkazInsert / 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.

vložiť značku čítať viacInsert 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.

predčiarknutéStrikethrough – Strikethrough text with which, for example, you can notify site visitors that you’ve changed something.

horizontálna čiaraHorizontal 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.

vložiť ako textInsert 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.

vymazať formátovanieClear Formatting – Removes formatting from the selected text.

špeciálny znakSpecial 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: © € £ » ⇔.

zmenšiť odsadenieDecrease Indent – shifts the text to the left.

zväčšiť odsadenieIncrease Indent – shifts the text to the right.

šípky späť a znovaArrows “Back” and “Again” – these icons are used to step back or forward.

klávesové skratkyKeyboard shortcuts – below the last box, you can find keyboard shortcuts for faster execution of the above functions.

Was this article helpful for you? Support me by sharing, please. 👍

LEAVE A REPLY

Please enter your comment!
Please enter your name here