Formatting Text in the Editor

Well-formatted text is essential for a professional and readable website. Webey's rich text editor offers a wide range of formatting options that let you style your text without any knowledge of HTML. In this article, you will learn about all available formatting features and get tips for readability and accessibility.

The Rich Text Editor

When you edit a Text block, the rich text editor opens. At the top, you will see a toolbar with formatting buttons. The editor works the same way as a word processor: select text and click a button to apply formatting, or use keyboard shortcuts for a faster workflow.

Basic Text Formatting

The following basic formatting is available in every text block:

• Bold — select text and click B or use Ctrl + B. Use bold text to emphasize important words or phrases.
• Italic — select text and click I or use Ctrl + I. Italics are useful for book titles, terms, or subtle emphasis.
• Underline — select text and click U or use Ctrl + U. Use underlining sparingly, as visitors often confuse underlined text with links.

Headings

Headings give structure to your text and help visitors and search engines understand the content. Webey supports four levels:

• Heading 1 (H1) — the main topic of the page. Use only one H1 per page, typically as the page title.
• Heading 2 (H2) — main sections within your page. These are the primary divisions of your content.
• Heading 3 (H3) — subsections within an H2 section. Use these for further subdivision.
• Heading 4 (H4) — detailed subdivisions within an H3 section.

To apply a heading, place your cursor on the desired line and select the heading level from the dropdown menu in the toolbar.

Heading Hierarchy for Accessibility

It is important to use headings in the correct order: go from H1 to H2 to H3 and do not skip levels. Screen readers use the heading structure to navigate through the page. A logical hierarchy makes your website accessible to visitors with visual impairments.

Lists

Lists are ideal for enumerating points, steps, or features:

• Unordered list (bullet points) — click the list icon or use a keyboard shortcut. Each line is preceded by a bullet point. Use these for items without a specific order.
• Ordered list (numbering) — click the numbered list icon. Each line gets a number. Use these for steps, instructions, or rankings where the order matters.

You can nest lists by selecting an item and pressing Tab to indent, or Shift + Tab to go back to the previous level.

Adding Links

To add a link, select the text you want to link and click the link icon in the toolbar (or use Ctrl + K). A dialog box appears where you enter the URL. You can choose to open the link in the same tab or in a new tab. For internal pages, use a relative path (e.g., /about-us) and for external links, use the full URL with https://.

Blockquotes

Want to make a quote or important excerpt stand out visually? Select the text and click the quotation mark icon in the toolbar. The text is displayed as an indented quote block with a vertical line on the left side. This is ideal for customer quotes, source citations, or important statements.

Code Blocks

For displaying code or technical content, the editor offers an inline code option and a code block:

• Inline code — select a word or short fragment and click the code icon. The text is displayed in a monospace font with a light background, like this example.
• Code block — for longer pieces of code, you can use the separate Code block type, which offers syntax highlighting for various programming languages.

Text Alignment

By default, text is left-aligned, but you can adjust the alignment:

• Left — the default alignment for body text. Recommended for most content.
• Center — useful for titles, subtitles, and short statements.
• Right — rarely used, but useful for specific design purposes.

Select the text and click the desired alignment icon in the toolbar.

Colors and Spacing

In the text block's settings panel, you can adjust the following visual properties:

• Text color — choose a color from your brand palette or manually enter a color code. Make sure the color has sufficient contrast with the background.
• Background color — give the entire text block a background color to make it stand out visually.
• Padding — adjust the inner spacing to create more or less white space around your text.

Tips for Readability

Well-readable text keeps visitors on your website longer:

• Keep paragraphs short — aim for 3 to 5 sentences per paragraph. Long walls of text discourage readers.
• Use headings — divide your text into clear sections with H2 and H3 headings. This makes the text scannable.
• Use lists — bullet points are easier to read than long sentences with commas.
• Mix it up — combine text with images, quotes, and other elements to keep the page visually appealing.
• Write actively — use active sentences instead of passive constructions. "Click the button" is better than "The button can be clicked".

Accessibility Tips

Make your text accessible to all visitors:

• Heading hierarchy — use headings in the correct order (H1, then H2, then H3). Do not skip levels.
• Sufficient contrast — ensure text color and background color have adequate contrast. The WCAG guidelines require a contrast ratio of at least 4.5:1 for normal text.
• Descriptive link text — avoid "click here" as link text. Instead, write descriptive links like "view our pricing" so screen readers understand the context.
• Plain language — write clearly and simply. Avoid jargon unless your audience expects it.