---
metadata:
  - name: generator
    content: Diplodoc Platform v5.46.1
alternate:
  - https://yandex.com.tr/support/wiki/en/wysiwyg/block-format.md
title: "How to\_format a\_text block in\_Yandex\_Wiki"
description: "Follow this guide to\_format a\_text block in\_Yandex\_Wiki."
---
> **Documentation Index:** Fetch the complete configuration index at https://yandex.com.tr/support/wiki/en/llms.txt


# Block formatting

You can add quotes, notes, collapsible text, custom-designed blocks, or clusters containing multiple cells to Wiki pages.

<!-- source: en/yfmeditor/block-format.md -->
In the visual editor, you can drag and drop blocks and other elements (like paragraphs and headings) to rearrange them or create nested structures. To move the block, hover over it and drag the <svg xmlns="http://www.w3.org/2000/svg" width="6" height="10" fill="currentColor" aria-hidden="true" class="yc-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 10"><path d="M0 0h2v2H0zm0 4h2v2H0zm0 4h2v2H0zm4-8h2v2H4zm0 4h2v2H4zm0 4h2v2H4z"/></svg></svg> icon on the left side.

You can use other markup elements inside the block formating elements.

To add a block to a page, select one or more paragraphs and use the toolbar buttons or keyboard shortcuts:

| Block | Toolbar button | Windows shortcuts | MacOS shortcuts |
--- | --- | --- | ---
| Comment | <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" aria-hidden="true" class="yc-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M13.688 10.486v-6.83c0-.66-.56-1.219-1.22-1.219H3.532a1.22 1.22 0 0 0-1.219 1.22v8.937c0 .685.534 1.219 1.22 1.219h6.804c.28 0 .66-.153.863-.356l2.108-2.107c.203-.204.38-.584.38-.864zm-3.25 2.032v-1.956h1.93l-1.93 1.956zm2.03-8.862v5.688h-2.64a.602.602 0 0 0-.61.61v2.64H3.532V3.656h8.938z"/></svg></svg> | **Ctrl** + **Shift** + **8** | **⌘** + **⌥** + **8** |
| Cut | <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" aria-hidden="true" class="yc-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m8.99 8.125 4.621-4.621a.2.2 0 0 0 0-.28 1.21 1.21 0 0 0-1.726 0l-3.91 3.91-1.092-1.091c.178-.356.304-.736.304-1.168A2.438 2.438 0 0 0 4.75 2.437a2.422 2.422 0 0 0-2.438 2.438A2.406 2.406 0 0 0 4.75 7.313c.406 0 .787-.102 1.143-.28l1.091 1.092-1.091 1.117c-.356-.178-.737-.305-1.143-.305a2.422 2.422 0 0 0-2.438 2.438 2.406 2.406 0 0 0 2.438 2.438 2.422 2.422 0 0 0 2.438-2.438c0-.406-.127-.787-.305-1.143l1.092-1.091 3.91 3.91a1.21 1.21 0 0 0 1.726 0 .2.2 0 0 0 0-.28l-4.62-4.646zM4.75 6.094a1.203 1.203 0 0 1-1.219-1.219c0-.66.533-1.219 1.219-1.219.66 0 1.219.559 1.219 1.219A1.22 1.22 0 0 1 4.75 6.094zm0 6.5a1.203 1.203 0 0 1-1.219-1.219c0-.66.533-1.219 1.219-1.219.66 0 1.219.559 1.219 1.219a1.22 1.22 0 0 1-1.219 1.219z"/></svg></svg> | **Ctrl** + **Shift** + **7** | **⌘** + **⌥** + **7** |
| Tabs | <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" aria-hidden="true" class="yc-icon ye-command-menu__item-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M5.25 3.5H4A1.5 1.5 0 0 0 2.5 5v6A1.5 1.5 0 0 0 4 12.5h8a1.5 1.5 0 0 0 1.5-1.5V7H6a.75.75 0 0 1-.75-.75V3.5Zm1.5 0h2.5v2h-2.5v-2Zm4 0H12A1.5 1.5 0 0 1 13.5 5v.5h-2.75v-2ZM15 5a3 3 0 0 0-3-3H4a3 3 0 0 0-3 3v6a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V5Z" clip-rule="evenodd"/></svg></svg> | — | — |
| Quote | <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" aria-hidden="true" class="yc-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M5.766 2.438h-3.25A1.837 1.837 0 0 0 .687 4.266v2.843a1.82 1.82 0 0 0 1.829 1.829h1.421v.203c0 .584-.457 1.015-1.015 1.015h-.203A1.22 1.22 0 0 0 1.5 11.375v1.219c0 .685.533 1.219 1.219 1.219h.203A4.676 4.676 0 0 0 7.594 9.14V4.266c0-.99-.838-1.829-1.828-1.829zm.609 6.703a3.457 3.457 0 0 1-3.453 3.453h-.203v-1.219h.203c1.219 0 2.234-.99 2.234-2.234V7.719h-2.64a.587.587 0 0 1-.61-.61V4.266c0-.33.254-.61.61-.61h3.25c.33 0 .609.28.609.61V9.14zm7.11-6.704h-3.25a1.837 1.837 0 0 0-1.829 1.829v2.843a1.82 1.82 0 0 0 1.828 1.829h1.422v.203c0 .584-.457 1.015-1.015 1.015h-.204c-.685 0-1.218.559-1.218 1.219v1.219c0 .685.533 1.219 1.219 1.219h.203a4.676 4.676 0 0 0 4.671-4.672V4.266c0-.99-.837-1.829-1.828-1.829zm.609 6.704a3.457 3.457 0 0 1-3.453 3.453h-.204v-1.219h.204c1.218 0 2.234-.99 2.234-2.234V7.719h-2.64a.587.587 0 0 1-.61-.61V4.266c0-.33.254-.61.61-.61h3.25c.33 0 .609.28.609.61V9.14z"/></svg></svg> | **Ctrl** + **>** | **⌘** + **>** |
| Formatting block | <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" aria-hidden="true" class="yc-icon"><path d="M3.65 3.3a.353.353 0 0 0-.079.009.648.648 0 0 1-.256.006.648.648 0 0 1-.006.256.353.353 0 0 0-.009.079v.571a.65.65 0 0 1-1.3 0V3.15C2 2.515 2.515 2 3.15 2h1.071a.65.65 0 1 1 0 1.3H3.65Zm2.779-.65a.65.65 0 0 1 .65-.65H8.22a.65.65 0 1 1 0 1.3H7.08a.65.65 0 0 1-.65-.65Zm4 0a.65.65 0 0 1 .65-.65h1.071c.635 0 1.15.515 1.15 1.15v1.071a.65.65 0 1 1-1.3 0V3.65a.353.353 0 0 0-.009-.079.649.649 0 0 1-.006-.256.648.648 0 0 1-.256-.006.353.353 0 0 0-.079-.009h-.571a.65.65 0 0 1-.65-.65ZM2.65 6.429a.65.65 0 0 1 .65.65V8.22a.65.65 0 0 1-1.3 0V7.08a.65.65 0 0 1 .65-.65Zm10 0a.65.65 0 0 1 .65.65V8.22a.65.65 0 1 1-1.3 0V7.08a.65.65 0 0 1 .65-.65Zm0 4a.65.65 0 0 1 .65.65v1.071a1.15 1.15 0 0 1-1.15 1.15h-1.071a.65.65 0 1 1 0-1.3h.571a.353.353 0 0 0 .079-.009.649.649 0 0 1 .256-.006.649.649 0 0 1 .006-.256.353.353 0 0 0 .009-.079v-.571a.65.65 0 0 1 .65-.65Zm-10 0a.65.65 0 0 1 .65.65v.571c0 .028.003.054.009.079a.65.65 0 0 1 .006.256.649.649 0 0 1 .256.006.335.335 0 0 0 .079.009h.571a.65.65 0 1 1 0 1.3H3.15A1.15 1.15 0 0 1 2 12.15v-1.071a.65.65 0 0 1 .65-.65Zm3.779 2.221a.65.65 0 0 1 .65-.65H8.22a.65.65 0 1 1 0 1.3H7.08a.65.65 0 0 1-.65-.65ZM5.1 4.7a.1.1 0 0 0-.1.1v1.1a.1.1 0 0 0 .1.1h5.3a.1.1 0 0 0 .1-.1V4.8a.1.1 0 0 0-.1-.1H5.1ZM5 7.1a.1.1 0 0 1 .1-.1h5.3a.1.1 0 0 1 .1.1v1.1a.1.1 0 0 1-.1.1H5.1a.1.1 0 0 1-.1-.1V7.1Zm.1 2.2a.1.1 0 0 0-.1.1v1.1a.1.1 0 0 0 .1.1h5.3a.1.1 0 0 0 .1-.1V9.4a.1.1 0 0 0-.1-.1H5.1Z"/></svg> | — | — |
| Section | <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" aria-hidden="true" class="yc-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M12 3.5h-1.25v9H12a1.5 1.5 0 0 0 1.5-1.5V5A1.5 1.5 0 0 0 12 3.5Zm-5.25 0h2.5v9h-2.5v-9Zm-1.5 0H4A1.5 1.5 0 0 0 2.5 5v6A1.5 1.5 0 0 0 4 12.5h1.25v-9ZM4 2a3 3 0 0 0-3 3v6a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V5a3 3 0 0 0-3-3H4Z" clip-rule="evenodd"/></svg></svg> | — | — |
<!-- endsource: en/yfmeditor/block-format.md -->

## Note {#note}

<!-- source: en/yfmeditor/block-format.md -->
{% list tabs group=editor %}

- Visual editor

    1. To add a note, click <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" aria-hidden="true" class="yc-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M13.688 10.486v-6.83c0-.66-.56-1.219-1.22-1.219H3.532a1.22 1.22 0 0 0-1.219 1.22v8.937c0 .685.534 1.219 1.22 1.219h6.804c.28 0 .66-.153.863-.356l2.108-2.107c.203-.204.38-.584.38-.864zm-3.25 2.032v-1.956h1.93l-1.93 1.956zm2.03-8.862v5.688h-2.64a.602.602 0 0 0-.61.61v2.64H3.532V3.656h8.938z"/></svg></svg> **Note** on the toolbar.

        <!-- source: en/yfmeditor/tools-tip.md -->
        You can also use the quick access menu: type `/` and select a command from the list. {#slash}
        <!-- endsource: en/yfmeditor/tools-tip.md -->

    1. In the menu under the block, select a note type:
        - <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" class="g-icon" fill="currentColor" color="#42aaff" stroke="none" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 13.5a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11ZM8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Zm1-9.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-.25 3a.75.75 0 0 0-1.5 0V11a.75.75 0 0 0 1.5 0V8.5Z" clip-rule="evenodd"/></svg></svg> **Note**
        - <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" class="g-icon" fill="currentColor" color="green" stroke="none" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 13.5a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11ZM8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Zm1-9.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-.25 3a.75.75 0 0 0-1.5 0V11a.75.75 0 0 0 1.5 0V8.5Z" clip-rule="evenodd"/></svg></svg> **Tip**
        - <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" class="g-icon" fill="currentColor" color="orange" stroke="none" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 13.5a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11ZM8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Zm1-9.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-.25 3a.75.75 0 0 0-1.5 0V11a.75.75 0 0 0 1.5 0V8.5Z" clip-rule="evenodd"/></svg></svg> **Warning**
        - <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" class="g-icon" fill="currentColor" color="red" stroke="none" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 13.5a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11ZM8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Zm1-9.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-.25 3a.75.75 0 0 0-1.5 0V11a.75.75 0 0 0 1.5 0V8.5Z" clip-rule="evenodd"/></svg></svg> **Alert**

    1. Enter the note title and text. Use other text formatting elements.

    1. To delete a block, click <svg xmlns="http://www.w3.org/2000/svg" width="14" height="15" fill="currentColor" aria-hidden="true" class="yc-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 15"><path d="M8.203 12.125h.656a.332.332 0 0 0 .329-.328V5.89a.353.353 0 0 0-.329-.329h-.656a.332.332 0 0 0-.328.329v5.906c0 .191.137.328.328.328zm4.485-9.188h-2.27l-.93-1.53C9.27 1.05 8.778.75 8.368.75H5.604c-.41 0-.902.3-1.12.656l-.93 1.532H1.312a.45.45 0 0 0-.437.437v.438c0 .246.191.437.438.437h.437v9.188c0 .738.574 1.312 1.313 1.312h7.874c.711 0 1.313-.574 1.313-1.313V4.25h.438a.45.45 0 0 0 .437-.438v-.437a.47.47 0 0 0-.438-.438zM5.55 2.146a.364.364 0 0 1 .136-.083h2.598c.027 0 .11.055.137.083l.465.792h-3.8l.465-.792zm5.386 11.293H3.064V4.25h7.874v9.188zM5.14 12.126h.656a.332.332 0 0 0 .328-.328V5.89a.353.353 0 0 0-.328-.329H5.14a.332.332 0 0 0-.329.329v5.906c0 .191.137.328.329.328z"/></svg></svg> in the menu under the block.

- Markdown markup

    To add a **Note** block, insert code in the following format into the text:

    ```
    {% note <note_type> "Heading" %}

    Add content for the note

    {% endnote %}
    ```

    - Specify the note type:

        - `{% note info "" %}`: Note.

        - `{% note warning "" %}`: Warning.

        - `{% note alert "" %}`: Alert.

        - `{% note tip "" %}`: Tip.

    - To change the text of the default title, add a custom title in quotation marks (`""`) after the specified type.

{% endlist %}
<!-- endsource: en/yfmeditor/block-format.md -->

## Code block {#code-block}

<!-- source: en/yfmeditor/block-format.md -->
<!--
Учитывать при внесении изменений: текст из файла также собирается в документации Yandex Tracker.
-->

## General information {#common}

In the visual editor, you can drag and drop blocks and other elements (like paragraphs and headings) to rearrange them or create nested structures. To move the block, hover over it and drag the <svg xmlns="http://www.w3.org/2000/svg" width="6" height="10" fill="currentColor" aria-hidden="true" class="yc-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 10"><path d="M0 0h2v2H0zm0 4h2v2H0zm0 4h2v2H0zm4-8h2v2H4zm0 4h2v2H4zm0 4h2v2H4z"/></svg></svg> icon on the left side.

You can use other markup elements inside the block formating elements.

To add a block to a page, select one or more paragraphs and use the toolbar buttons or keyboard shortcuts:

| Block | Toolbar button | Windows shortcuts | MacOS shortcuts |
--- | --- | --- | ---
| Comment | <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" aria-hidden="true" class="yc-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M13.688 10.486v-6.83c0-.66-.56-1.219-1.22-1.219H3.532a1.22 1.22 0 0 0-1.219 1.22v8.937c0 .685.534 1.219 1.22 1.219h6.804c.28 0 .66-.153.863-.356l2.108-2.107c.203-.204.38-.584.38-.864zm-3.25 2.032v-1.956h1.93l-1.93 1.956zm2.03-8.862v5.688h-2.64a.602.602 0 0 0-.61.61v2.64H3.532V3.656h8.938z"/></svg></svg> | **Ctrl** + **Shift** + **8** | **⌘** + **⌥** + **8** |
| Cut | <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" aria-hidden="true" class="yc-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m8.99 8.125 4.621-4.621a.2.2 0 0 0 0-.28 1.21 1.21 0 0 0-1.726 0l-3.91 3.91-1.092-1.091c.178-.356.304-.736.304-1.168A2.438 2.438 0 0 0 4.75 2.437a2.422 2.422 0 0 0-2.438 2.438A2.406 2.406 0 0 0 4.75 7.313c.406 0 .787-.102 1.143-.28l1.091 1.092-1.091 1.117c-.356-.178-.737-.305-1.143-.305a2.422 2.422 0 0 0-2.438 2.438 2.406 2.406 0 0 0 2.438 2.438 2.422 2.422 0 0 0 2.438-2.438c0-.406-.127-.787-.305-1.143l1.092-1.091 3.91 3.91a1.21 1.21 0 0 0 1.726 0 .2.2 0 0 0 0-.28l-4.62-4.646zM4.75 6.094a1.203 1.203 0 0 1-1.219-1.219c0-.66.533-1.219 1.219-1.219.66 0 1.219.559 1.219 1.219A1.22 1.22 0 0 1 4.75 6.094zm0 6.5a1.203 1.203 0 0 1-1.219-1.219c0-.66.533-1.219 1.219-1.219.66 0 1.219.559 1.219 1.219a1.22 1.22 0 0 1-1.219 1.219z"/></svg></svg> | **Ctrl** + **Shift** + **7** | **⌘** + **⌥** + **7** |
| Tabs | <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" aria-hidden="true" class="yc-icon ye-command-menu__item-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M5.25 3.5H4A1.5 1.5 0 0 0 2.5 5v6A1.5 1.5 0 0 0 4 12.5h8a1.5 1.5 0 0 0 1.5-1.5V7H6a.75.75 0 0 1-.75-.75V3.5Zm1.5 0h2.5v2h-2.5v-2Zm4 0H12A1.5 1.5 0 0 1 13.5 5v.5h-2.75v-2ZM15 5a3 3 0 0 0-3-3H4a3 3 0 0 0-3 3v6a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V5Z" clip-rule="evenodd"/></svg></svg> | — | — |
| Quote | <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" aria-hidden="true" class="yc-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M5.766 2.438h-3.25A1.837 1.837 0 0 0 .687 4.266v2.843a1.82 1.82 0 0 0 1.829 1.829h1.421v.203c0 .584-.457 1.015-1.015 1.015h-.203A1.22 1.22 0 0 0 1.5 11.375v1.219c0 .685.533 1.219 1.219 1.219h.203A4.676 4.676 0 0 0 7.594 9.14V4.266c0-.99-.838-1.829-1.828-1.829zm.609 6.703a3.457 3.457 0 0 1-3.453 3.453h-.203v-1.219h.203c1.219 0 2.234-.99 2.234-2.234V7.719h-2.64a.587.587 0 0 1-.61-.61V4.266c0-.33.254-.61.61-.61h3.25c.33 0 .609.28.609.61V9.14zm7.11-6.704h-3.25a1.837 1.837 0 0 0-1.829 1.829v2.843a1.82 1.82 0 0 0 1.828 1.829h1.422v.203c0 .584-.457 1.015-1.015 1.015h-.204c-.685 0-1.218.559-1.218 1.219v1.219c0 .685.533 1.219 1.219 1.219h.203a4.676 4.676 0 0 0 4.671-4.672V4.266c0-.99-.837-1.829-1.828-1.829zm.609 6.704a3.457 3.457 0 0 1-3.453 3.453h-.204v-1.219h.204c1.218 0 2.234-.99 2.234-2.234V7.719h-2.64a.587.587 0 0 1-.61-.61V4.266c0-.33.254-.61.61-.61h3.25c.33 0 .609.28.609.61V9.14z"/></svg></svg> | **Ctrl** + **>** | **⌘** + **>** |
| Formatting block | <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" aria-hidden="true" class="yc-icon"><path d="M3.65 3.3a.353.353 0 0 0-.079.009.648.648 0 0 1-.256.006.648.648 0 0 1-.006.256.353.353 0 0 0-.009.079v.571a.65.65 0 0 1-1.3 0V3.15C2 2.515 2.515 2 3.15 2h1.071a.65.65 0 1 1 0 1.3H3.65Zm2.779-.65a.65.65 0 0 1 .65-.65H8.22a.65.65 0 1 1 0 1.3H7.08a.65.65 0 0 1-.65-.65Zm4 0a.65.65 0 0 1 .65-.65h1.071c.635 0 1.15.515 1.15 1.15v1.071a.65.65 0 1 1-1.3 0V3.65a.353.353 0 0 0-.009-.079.649.649 0 0 1-.006-.256.648.648 0 0 1-.256-.006.353.353 0 0 0-.079-.009h-.571a.65.65 0 0 1-.65-.65ZM2.65 6.429a.65.65 0 0 1 .65.65V8.22a.65.65 0 0 1-1.3 0V7.08a.65.65 0 0 1 .65-.65Zm10 0a.65.65 0 0 1 .65.65V8.22a.65.65 0 1 1-1.3 0V7.08a.65.65 0 0 1 .65-.65Zm0 4a.65.65 0 0 1 .65.65v1.071a1.15 1.15 0 0 1-1.15 1.15h-1.071a.65.65 0 1 1 0-1.3h.571a.353.353 0 0 0 .079-.009.649.649 0 0 1 .256-.006.649.649 0 0 1 .006-.256.353.353 0 0 0 .009-.079v-.571a.65.65 0 0 1 .65-.65Zm-10 0a.65.65 0 0 1 .65.65v.571c0 .028.003.054.009.079a.65.65 0 0 1 .006.256.649.649 0 0 1 .256.006.335.335 0 0 0 .079.009h.571a.65.65 0 1 1 0 1.3H3.15A1.15 1.15 0 0 1 2 12.15v-1.071a.65.65 0 0 1 .65-.65Zm3.779 2.221a.65.65 0 0 1 .65-.65H8.22a.65.65 0 1 1 0 1.3H7.08a.65.65 0 0 1-.65-.65ZM5.1 4.7a.1.1 0 0 0-.1.1v1.1a.1.1 0 0 0 .1.1h5.3a.1.1 0 0 0 .1-.1V4.8a.1.1 0 0 0-.1-.1H5.1ZM5 7.1a.1.1 0 0 1 .1-.1h5.3a.1.1 0 0 1 .1.1v1.1a.1.1 0 0 1-.1.1H5.1a.1.1 0 0 1-.1-.1V7.1Zm.1 2.2a.1.1 0 0 0-.1.1v1.1a.1.1 0 0 0 .1.1h5.3a.1.1 0 0 0 .1-.1V9.4a.1.1 0 0 0-.1-.1H5.1Z"/></svg> | — | — |
| Section | <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" aria-hidden="true" class="yc-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M12 3.5h-1.25v9H12a1.5 1.5 0 0 0 1.5-1.5V5A1.5 1.5 0 0 0 12 3.5Zm-5.25 0h2.5v9h-2.5v-9Zm-1.5 0H4A1.5 1.5 0 0 0 2.5 5v6A1.5 1.5 0 0 0 4 12.5h1.25v-9ZM4 2a3 3 0 0 0-3 3v6a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V5a3 3 0 0 0-3-3H4Z" clip-rule="evenodd"/></svg></svg> | — | — |

## Note {#note}

{% list tabs group=editor %}

- Visual editor

    1. To add a note, click <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" aria-hidden="true" class="yc-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M13.688 10.486v-6.83c0-.66-.56-1.219-1.22-1.219H3.532a1.22 1.22 0 0 0-1.219 1.22v8.937c0 .685.534 1.219 1.22 1.219h6.804c.28 0 .66-.153.863-.356l2.108-2.107c.203-.204.38-.584.38-.864zm-3.25 2.032v-1.956h1.93l-1.93 1.956zm2.03-8.862v5.688h-2.64a.602.602 0 0 0-.61.61v2.64H3.532V3.656h8.938z"/></svg></svg> **Note** on the toolbar.

        <!-- source: en/yfmeditor/tools-tip.md -->
        You can also use the quick access menu: type `/` and select a command from the list. {#slash}
        <!-- endsource: en/yfmeditor/tools-tip.md -->

    1. In the menu under the block, select a note type:
        - <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" class="g-icon" fill="currentColor" color="#42aaff" stroke="none" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 13.5a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11ZM8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Zm1-9.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-.25 3a.75.75 0 0 0-1.5 0V11a.75.75 0 0 0 1.5 0V8.5Z" clip-rule="evenodd"/></svg></svg> **Note**
        - <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" class="g-icon" fill="currentColor" color="green" stroke="none" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 13.5a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11ZM8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Zm1-9.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-.25 3a.75.75 0 0 0-1.5 0V11a.75.75 0 0 0 1.5 0V8.5Z" clip-rule="evenodd"/></svg></svg> **Tip**
        - <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" class="g-icon" fill="currentColor" color="orange" stroke="none" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 13.5a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11ZM8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Zm1-9.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-.25 3a.75.75 0 0 0-1.5 0V11a.75.75 0 0 0 1.5 0V8.5Z" clip-rule="evenodd"/></svg></svg> **Warning**
        - <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" class="g-icon" fill="currentColor" color="red" stroke="none" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 13.5a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11ZM8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Zm1-9.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-.25 3a.75.75 0 0 0-1.5 0V11a.75.75 0 0 0 1.5 0V8.5Z" clip-rule="evenodd"/></svg></svg> **Alert**

    1. Enter the note title and text. Use other text formatting elements.

    1. To delete a block, click <svg xmlns="http://www.w3.org/2000/svg" width="14" height="15" fill="currentColor" aria-hidden="true" class="yc-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 15"><path d="M8.203 12.125h.656a.332.332 0 0 0 .329-.328V5.89a.353.353 0 0 0-.329-.329h-.656a.332.332 0 0 0-.328.329v5.906c0 .191.137.328.328.328zm4.485-9.188h-2.27l-.93-1.53C9.27 1.05 8.778.75 8.368.75H5.604c-.41 0-.902.3-1.12.656l-.93 1.532H1.312a.45.45 0 0 0-.437.437v.438c0 .246.191.437.438.437h.437v9.188c0 .738.574 1.312 1.313 1.312h7.874c.711 0 1.313-.574 1.313-1.313V4.25h.438a.45.45 0 0 0 .437-.438v-.437a.47.47 0 0 0-.438-.438zM5.55 2.146a.364.364 0 0 1 .136-.083h2.598c.027 0 .11.055.137.083l.465.792h-3.8l.465-.792zm5.386 11.293H3.064V4.25h7.874v9.188zM5.14 12.126h.656a.332.332 0 0 0 .328-.328V5.89a.353.353 0 0 0-.328-.329H5.14a.332.332 0 0 0-.329.329v5.906c0 .191.137.328.329.328z"/></svg></svg> in the menu under the block.

- Markdown markup

    To add a **Note** block, insert code in the following format into the text:

    ```
    {% note <note_type> "Heading" %}

    Add content for the note

    {% endnote %}
    ```

    - Specify the note type:

        - `{% note info "" %}`: Note.

        - `{% note warning "" %}`: Warning.

        - `{% note alert "" %}`: Alert.

        - `{% note tip "" %}`: Tip.

    - To change the text of the default title, add a custom title in quotation marks (`""`) after the specified type.

{% endlist %}


## Cut {#cut}

{% list tabs group=editor %}

- Visual editor

    1. To add a cut, click <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" aria-hidden="true" class="yc-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m8.99 8.125 4.621-4.621a.2.2 0 0 0 0-.28 1.21 1.21 0 0 0-1.726 0l-3.91 3.91-1.092-1.091c.178-.356.304-.736.304-1.168A2.438 2.438 0 0 0 4.75 2.437a2.422 2.422 0 0 0-2.438 2.438A2.406 2.406 0 0 0 4.75 7.313c.406 0 .787-.102 1.143-.28l1.091 1.092-1.091 1.117c-.356-.178-.737-.305-1.143-.305a2.422 2.422 0 0 0-2.438 2.438 2.406 2.406 0 0 0 2.438 2.438 2.422 2.422 0 0 0 2.438-2.438c0-.406-.127-.787-.305-1.143l1.092-1.091 3.91 3.91a1.21 1.21 0 0 0 1.726 0 .2.2 0 0 0 0-.28l-4.62-4.646zM4.75 6.094a1.203 1.203 0 0 1-1.219-1.219c0-.66.533-1.219 1.219-1.219.66 0 1.219.559 1.219 1.219A1.22 1.22 0 0 1 4.75 6.094zm0 6.5a1.203 1.203 0 0 1-1.219-1.219c0-.66.533-1.219 1.219-1.219.66 0 1.219.559 1.219 1.219a1.22 1.22 0 0 1-1.219 1.219z"/></svg></svg> **Cut** on the toolbar.

        <!-- source: en/yfmeditor/tools-tip.md -->
        You can also use the quick access menu: type `/` and select a command from the list. {#slash}
        <!-- endsource: en/yfmeditor/tools-tip.md -->

    1. Enter the cut title and text. Use other text formatting elements.

    1. To collapse or expand a cut, click <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" aria-hidden="true" class="yc-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M4.502 5.775A.75.75 0 0 0 3.498 6.89l1.004-1.115zM8 9.932l-.502.557a.75.75 0 0 0 1.004 0L8 9.932zm4.502-3.042a.75.75 0 1 0-1.004-1.115l1.004 1.115zm-9.004 0 4 3.6 1.004-1.115-4-3.6L3.498 6.89zm5.004 3.6 4-3.6-1.004-1.115-4 3.6 1.004 1.114z"/></svg></svg>.

- Markdown markup

    To add a **Cut** block:

    1. Make sure there is an empty line before the block.

    2. Add markup in the following format:

        ```
        {% cut "Cut title" %}

        Content that appears when users click on it.

        {% endcut %}
        ```

{% endlist %}

## Tabs {#tabs}

{% list tabs group=editor %}

- Visual editor

    1. To add a block with tabs to the page, click <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" aria-hidden="true" class="yc-icon ye-command-menu__item-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M5.25 3.5H4A1.5 1.5 0 0 0 2.5 5v6A1.5 1.5 0 0 0 4 12.5h8a1.5 1.5 0 0 0 1.5-1.5V7H6a.75.75 0 0 1-.75-.75V3.5Zm1.5 0h2.5v2h-2.5v-2Zm4 0H12A1.5 1.5 0 0 1 13.5 5v.5h-2.75v-2ZM15 5a3 3 0 0 0-3-3H4a3 3 0 0 0-3 3v6a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V5Z" clip-rule="evenodd"/></svg></svg> **Tabs** on the toolbar.

        <!-- source: en/yfmeditor/tools-tip.md -->
        You can also use the quick access menu: type `/` and select a command from the list. {#slash}
        <!-- endsource: en/yfmeditor/tools-tip.md -->

    1. To add a new tab, click <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="yc-icon NavigationTree-ItemCreatePageIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><path fill-rule="evenodd" d="M6.75 11.252a.75.75 0 1 1-1.5 0V6.747H.75a.75.75 0 0 1 0-1.5h4.5V.75a.75.75 0 1 1 1.5 0v4.495h4.5a.75.75 0 0 1 0 1.501h-4.5v4.505z" clip-rule="evenodd"/></svg></svg> in the list of tabs.

    1. To delete a tab, click <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" fill="currentColor" aria-hidden="true" class="yc-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><path d="M9.756 8.577a.833.833 0 1 1-1.179 1.179L5 6.179 1.423 9.756A.833.833 0 1 1 .244 8.577L3.821 5 .244 1.423A.833.833 0 1 1 1.423.244L5 3.821 8.577.244a.833.833 0 1 1 1.179 1.179L6.179 5l3.577 3.577Z"/></svg></svg> to the right of its title.

    1. To switch to another tab, click its title.

    1. Add content to tabs by using other text formatting elements.

- Markdown markup

    To add a **Tabs** block, insert code in the following format into the text:

    ```
    {% list tabs %}

    - First tab title

        First tab text

    - Second tab title

        Second tab text

    {% endlist %}
    ```

    Make an indent of 2–4 spaces before the tab text and press the **Tab** key.

{% endlist %}

## Quote {#quote}

{% list tabs group=editor %}

- Visual editor

    1. To add a quote, click <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" aria-hidden="true" class="yc-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M5.766 2.438h-3.25A1.837 1.837 0 0 0 .687 4.266v2.843a1.82 1.82 0 0 0 1.829 1.829h1.421v.203c0 .584-.457 1.015-1.015 1.015h-.203A1.22 1.22 0 0 0 1.5 11.375v1.219c0 .685.533 1.219 1.219 1.219h.203A4.676 4.676 0 0 0 7.594 9.14V4.266c0-.99-.838-1.829-1.828-1.829zm.609 6.703a3.457 3.457 0 0 1-3.453 3.453h-.203v-1.219h.203c1.219 0 2.234-.99 2.234-2.234V7.719h-2.64a.587.587 0 0 1-.61-.61V4.266c0-.33.254-.61.61-.61h3.25c.33 0 .609.28.609.61V9.14zm7.11-6.704h-3.25a1.837 1.837 0 0 0-1.829 1.829v2.843a1.82 1.82 0 0 0 1.828 1.829h1.422v.203c0 .584-.457 1.015-1.015 1.015h-.204c-.685 0-1.218.559-1.218 1.219v1.219c0 .685.533 1.219 1.219 1.219h.203a4.676 4.676 0 0 0 4.671-4.672V4.266c0-.99-.837-1.829-1.828-1.829zm.609 6.704a3.457 3.457 0 0 1-3.453 3.453h-.204v-1.219h.204c1.218 0 2.234-.99 2.234-2.234V7.719h-2.64a.587.587 0 0 1-.61-.61V4.266c0-.33.254-.61.61-.61h3.25c.33 0 .609.28.609.61V9.14z"/></svg></svg> **Quote** on the toolbar.

        <!-- source: en/yfmeditor/tools-tip.md -->
        You can also add formatting elements [using your keyboard](https://yandex.com.tr/support/wiki/en/edit-page.md#keyboard) or through the quick access menu: type `/` and select an item from the list. {#keyboard}
        <!-- endsource: en/yfmeditor/tools-tip.md -->

    1. Use other text formatting elements inside quotes.

    1. Separate the quote from the other text with an empty line.

- Markdown markup

    ```
    > To display a quote, use this character.
    >>To create a nested quote, add two such characters at the beginning of the paragraph.
    ```

    - To create a quote, use the character `>`.

    - To create a nested quote, insert the `>>` characters at the start of the paragraph.

{% endlist %}

## Formatting block {#design-block}

{% list tabs group=editor %}

- Visual editor

    1. To add a formatting block, click <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" aria-hidden="true" class="yc-icon"><path d="M3.65 3.3a.353.353 0 0 0-.079.009.648.648 0 0 1-.256.006.648.648 0 0 1-.006.256.353.353 0 0 0-.009.079v.571a.65.65 0 0 1-1.3 0V3.15C2 2.515 2.515 2 3.15 2h1.071a.65.65 0 1 1 0 1.3H3.65Zm2.779-.65a.65.65 0 0 1 .65-.65H8.22a.65.65 0 1 1 0 1.3H7.08a.65.65 0 0 1-.65-.65Zm4 0a.65.65 0 0 1 .65-.65h1.071c.635 0 1.15.515 1.15 1.15v1.071a.65.65 0 1 1-1.3 0V3.65a.353.353 0 0 0-.009-.079.649.649 0 0 1-.006-.256.648.648 0 0 1-.256-.006.353.353 0 0 0-.079-.009h-.571a.65.65 0 0 1-.65-.65ZM2.65 6.429a.65.65 0 0 1 .65.65V8.22a.65.65 0 0 1-1.3 0V7.08a.65.65 0 0 1 .65-.65Zm10 0a.65.65 0 0 1 .65.65V8.22a.65.65 0 1 1-1.3 0V7.08a.65.65 0 0 1 .65-.65Zm0 4a.65.65 0 0 1 .65.65v1.071a1.15 1.15 0 0 1-1.15 1.15h-1.071a.65.65 0 1 1 0-1.3h.571a.353.353 0 0 0 .079-.009.649.649 0 0 1 .256-.006.649.649 0 0 1 .006-.256.353.353 0 0 0 .009-.079v-.571a.65.65 0 0 1 .65-.65Zm-10 0a.65.65 0 0 1 .65.65v.571c0 .028.003.054.009.079a.65.65 0 0 1 .006.256.649.649 0 0 1 .256.006.335.335 0 0 0 .079.009h.571a.65.65 0 1 1 0 1.3H3.15A1.15 1.15 0 0 1 2 12.15v-1.071a.65.65 0 0 1 .65-.65Zm3.779 2.221a.65.65 0 0 1 .65-.65H8.22a.65.65 0 1 1 0 1.3H7.08a.65.65 0 0 1-.65-.65ZM5.1 4.7a.1.1 0 0 0-.1.1v1.1a.1.1 0 0 0 .1.1h5.3a.1.1 0 0 0 .1-.1V4.8a.1.1 0 0 0-.1-.1H5.1ZM5 7.1a.1.1 0 0 1 .1-.1h5.3a.1.1 0 0 1 .1.1v1.1a.1.1 0 0 1-.1.1H5.1a.1.1 0 0 1-.1-.1V7.1Zm.1 2.2a.1.1 0 0 0-.1.1v1.1a.1.1 0 0 0 .1.1h5.3a.1.1 0 0 0 .1-.1V9.4a.1.1 0 0 0-.1-.1H5.1Z"/></svg> **Formatting block** on the toolbar.

        <!-- source: en/yfmeditor/tools-tip.md -->
        You can also use the quick access menu: type `/` and select a command from the list. {#slash}
        <!-- endsource: en/yfmeditor/tools-tip.md -->

    1. To set up rules for a formatting block, click <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" aria-hidden="true" class="yc-icon nv-aside-header-footer-item__icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none"><path fill="currentColor" fill-rule="evenodd" d="M9 2.5h2a.5.5 0 0 1 .5.5v.418c0 1.77 1.917 2.877 3.45 1.992l.362-.21a.5.5 0 0 1 .683.184l1 1.732a.5.5 0 0 1-.183.683l-.362.21c-1.533.884-1.533 3.098 0 3.983l.362.209a.5.5 0 0 1 .183.683l-1 1.732a.5.5 0 0 1-.683.183l-.362-.21c-1.533-.884-3.45.222-3.45 1.993V17a.5.5 0 0 1-.5.5H9a.5.5 0 0 1-.5-.5v-.418c0-1.77-1.917-2.877-3.45-1.992l-.362.209a.5.5 0 0 1-.683-.183l-1-1.732a.5.5 0 0 1 .183-.683l.362-.21c1.533-.884 1.533-3.098 0-3.983L3.188 7.8a.5.5 0 0 1-.183-.683l1-1.732a.5.5 0 0 1 .683-.183l.362.209c1.533.885 3.45-.221 3.45-1.992V3a.5.5 0 0 1 .5-.5ZM7 3a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v.418a.8.8 0 0 0 1.2.693l.362-.21a2 2 0 0 1 2.732.733l1 1.732a2 2 0 0 1-.732 2.732l-.362.21a.8.8 0 0 0 0 1.385l.362.209a2 2 0 0 1 .732 2.732l-1 1.732a2 2 0 0 1-2.732.732l-.362-.21a.8.8 0 0 0-1.2.694V17a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2v-.418a.8.8 0 0 0-1.2-.693l-.362.209a2 2 0 0 1-2.732-.732l-1-1.732a2 2 0 0 1 .732-2.732l.362-.21a.8.8 0 0 0 0-1.385l-.362-.209a2 2 0 0 1-.732-2.732l1-1.732a2 2 0 0 1 2.732-.732l.362.209A.8.8 0 0 0 7 3.418V3Zm5 7a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm1.5 0a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z" clip-rule="evenodd"/></svg></svg> in the top right corner of the block:

        - **Alignment**: Position of the block relative to the other page content:
        - **None**: No alignment. The block will be fixed to the left side of the page, and no other content will appear on the same line.
        - **Left**: Left-aligned.
        - **Center**: Centered.
        - **Right**: Right-aligned.

        - **Width**: Block width in pixels (px).

        - **Indents**: Padding between the border and block content.

        - **Border type**: Border layout:
        - **None**: No border.
        - **Solid**: Solid line.
        - **Dashed**: Dashed line.

        - **Border size**: Border thickness.

        - **Border color**: Color of the border:
        - **Info**: Blue.
        - **Tip**: Green.
        - **Warning**: Orange.
        - **Alert**: Red.

- Markdown markup

    To add a formatting block, insert code in the following format into the text:

    ```
    {% block align=center width=1000 padding=xs border=solid borderSize=m borderColor=warning %}

    Text inside the block

    {% endblock %}
    ```

    Block parameters:

    - `align`: Position of the block relative to the other page content. Optional.

        Possible values:
        - `left`: Left-aligned.
        - `center`: Centered.
        - `right`: Right-aligned.

    - `width`: Block width in pixels (px). Optional.

    - `padding`: Internal indent between the border and block content. Optional.

        Possible values:
        - `xs`: 4 px
        - `s`: 8 px
        - `m`: 12 px
        - `l`: 16 px
        - `xl`: 20 px

    - `border`: Border layout. Optional.

        Possible values:
        - `solid`: Solid line.
        - `dashed`: Dashed line.

    - `borderSize`: Border thickness.

        Possible values:
        - `xs`: 1 px
        - `s`: 2 px
        - `m`: 4 px
        - `l`: 6 px

    - `borderColor`: Border color. If not specified, the border will be black.

        Possible values:
        - `info`: Blue.
        - `tip`: Green.
        - `warning`: Orange.
        - `alert`: Red.

{% endlist %}

## Section {#layout}

{% list tabs group=editor %}

- Visual editor

    1. To add a section and split a part of your page into multiple cells, click <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" aria-hidden="true" class="yc-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M12 3.5h-1.25v9H12a1.5 1.5 0 0 0 1.5-1.5V5A1.5 1.5 0 0 0 12 3.5Zm-5.25 0h2.5v9h-2.5v-9Zm-1.5 0H4A1.5 1.5 0 0 0 2.5 5v6A1.5 1.5 0 0 0 4 12.5h1.25v-9ZM4 2a3 3 0 0 0-3 3v6a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V5a3 3 0 0 0-3-3H4Z" clip-rule="evenodd"/></svg></svg> **Section** on the toolbar.

        <!-- source: en/yfmeditor/tools-tip.md -->
        You can also use the quick access menu: type `/` and select a command from the list. {#slash}
        <!-- endsource: en/yfmeditor/tools-tip.md -->

    1. To add a new cell, click the space with the <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="yc-icon NavigationTree-ItemCreatePageIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><path fill-rule="evenodd" d="M6.75 11.252a.75.75 0 1 1-1.5 0V6.747H.75a.75.75 0 0 1 0-1.5h4.5V.75a.75.75 0 1 1 1.5 0v4.495h4.5a.75.75 0 0 1 0 1.501h-4.5v4.505z" clip-rule="evenodd"/></svg></svg> icon between two existing cells. You can use other markup elements of the new editor inside the cell.

    1. To change the cell width, click <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" aria-hidden="true" class="yc-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M14 6.125a1.874 1.874 0 1 1 .001 3.749A1.874 1.874 0 0 1 14 6.125zm-5.906 0a1.874 1.874 0 1 1 0 3.749 1.874 1.874 0 0 1 0-3.749zM2 6.125a1.874 1.874 0 1 1 .001 3.749A1.874 1.874 0 0 1 2 6.125z"/></svg></svg> in the top right corner of the cell and update the **Width** field value.

    1. To delete a cell, in its top right corner, click <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" aria-hidden="true" class="yc-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M14 6.125a1.874 1.874 0 1 1 .001 3.749A1.874 1.874 0 0 1 14 6.125zm-5.906 0a1.874 1.874 0 1 1 0 3.749 1.874 1.874 0 0 1 0-3.749zM2 6.125a1.874 1.874 0 1 1 .001 3.749A1.874 1.874 0 0 1 2 6.125z"/></svg></svg> → <svg xmlns="http://www.w3.org/2000/svg" width="14" height="15" fill="currentColor" aria-hidden="true" class="yc-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 15"><path d="M8.203 12.125h.656a.332.332 0 0 0 .329-.328V5.89a.353.353 0 0 0-.329-.329h-.656a.332.332 0 0 0-.328.329v5.906c0 .191.137.328.328.328zm4.485-9.188h-2.27l-.93-1.53C9.27 1.05 8.778.75 8.368.75H5.604c-.41 0-.902.3-1.12.656l-.93 1.532H1.312a.45.45 0 0 0-.437.437v.438c0 .246.191.437.438.437h.437v9.188c0 .738.574 1.312 1.313 1.312h7.874c.711 0 1.313-.574 1.313-1.313V4.25h.438a.45.45 0 0 0 .437-.438v-.437a.47.47 0 0 0-.438-.438zM5.55 2.146a.364.364 0 0 1 .136-.083h2.598c.027 0 .11.055.137.083l.465.792h-3.8l.465-.792zm5.386 11.293H3.064V4.25h7.874v9.188zM5.14 12.126h.656a.332.332 0 0 0 .328-.328V5.89a.353.353 0 0 0-.328-.329H5.14a.332.332 0 0 0-.329.329v5.906c0 .191.137.328.329.328z"/></svg></svg> **Delete cell**.

    1. To change display mode for all cells at once, click any cell. This opens a menu where you can:

        - Set the number and size of cells using one of the four templates:
            - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" aria-hidden="true" class="yc-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M4.5 8.5v7h5v-7h-5Zm10 0v7h5v-7h-5ZM3 8a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V8Zm10 0a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-6a1 1 0 0 1-1-1V8Z" clip-rule="evenodd"/></svg></svg> **Two cells**
            - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" aria-hidden="true" class="yc-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M5.5 8.5v7h1v-7h-1Zm6 0v7h6v-7h-6ZM4 8a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V8Zm6 0a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-7a1 1 0 0 1-1-1V8Z" clip-rule="evenodd"/></svg></svg> **Large on the right**
            - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" aria-hidden="true" class="yc-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M17.5 8.5v7h-1v-7h1Zm-6 0v7h-6v-7h6ZM19 8a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V8Zm-6 0a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V8Z" clip-rule="evenodd"/></svg></svg> **Large on the left**
            - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" aria-hidden="true" class="yc-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M18.5 8.5v7h-1v-7h1Zm-6 0v7h-1v-7h1Zm-6 0v7h-1v-7h1ZM19 7a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h2Zm-6 0a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h2ZM8 8a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V8Z" clip-rule="evenodd"/></svg></svg> **Three cells**

        - Align the cells block relative to the other page content:
        - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" aria-hidden="true" class="yc-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M18.5 8.5v7h-1v-7h1Zm-6 0v7h-1v-7h1Zm-6 0v7h-1v-7h1ZM19 7a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h2Zm-6 0a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h2ZM8 8a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V8Z" clip-rule="evenodd"/></svg></svg> **Entire section left-aligned**
        - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" aria-hidden="true" class="yc-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M3.25 7a.75.75 0 0 1 1.5 0v10a.75.75 0 0 1-1.5 0V7Zm5.197 6.493.681-.743H7a.75.75 0 0 1 0-1.5h2.462l-.682-.743a.75.75 0 0 1 1.106-1.014l1.667 1.818a.75.75 0 0 1 0 1.014l-2 2.182a.75.75 0 0 1-1.106-1.014Zm6.773-2.986-.682.743H17a.75.75 0 0 1 0 1.5h-2.128l.68.743a.75.75 0 0 1-1.105 1.014l-2-2.182a.75.75 0 0 1 0-1.014l1.667-1.818a.75.75 0 0 1 1.105 1.014ZM19.25 7a.75.75 0 0 1 1.5 0v10a.75.75 0 0 1-1.5 0V7Z" clip-rule="evenodd"/></svg></svg> **Entire section centered**
        - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" aria-hidden="true" class="yc-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M20 6.25a.75.75 0 0 1 .75.75v10a.75.75 0 0 1-1.5 0V7a.75.75 0 0 1 .75-.75Zm-16 0a.75.75 0 0 1 .75.75v10a.75.75 0 0 1-1.5 0V7A.75.75 0 0 1 4 6.25Zm4.22 4.257-.682.743h8.924l-.681-.743a.75.75 0 1 1 1.105-1.014l1.667 1.818a.75.75 0 0 1 0 1.014l-2 2.182a.75.75 0 0 1-1.106-1.014l.681-.743H7.872l.68.743a.75.75 0 0 1-1.105 1.014l-2-2.182a.75.75 0 0 1 0-1.014l1.667-1.818a.75.75 0 1 1 1.106 1.014Z" clip-rule="evenodd"/></svg></svg> **Entire section right-aligned**

        - Click <svg xmlns="http://www.w3.org/2000/svg" width="14" height="15" fill="currentColor" aria-hidden="true" class="yc-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 15"><path d="M8.203 12.125h.656a.332.332 0 0 0 .329-.328V5.89a.353.353 0 0 0-.329-.329h-.656a.332.332 0 0 0-.328.329v5.906c0 .191.137.328.328.328zm4.485-9.188h-2.27l-.93-1.53C9.27 1.05 8.778.75 8.368.75H5.604c-.41 0-.902.3-1.12.656l-.93 1.532H1.312a.45.45 0 0 0-.437.437v.438c0 .246.191.437.438.437h.437v9.188c0 .738.574 1.312 1.313 1.312h7.874c.711 0 1.313-.574 1.313-1.313V4.25h.438a.45.45 0 0 0 .437-.438v-.437a.47.47 0 0 0-.438-.438zM5.55 2.146a.364.364 0 0 1 .136-.083h2.598c.027 0 .11.055.137.083l.465.792h-3.8l.465-.792zm5.386 11.293H3.064V4.25h7.874v9.188zM5.14 12.126h.656a.332.332 0 0 0 .328-.328V5.89a.353.353 0 0 0-.328-.329H5.14a.332.332 0 0 0-.329.329v5.906c0 .191.137.328.329.328z"/></svg></svg> to delete a section.

- Markdown markup

    To add a section, insert code in the following format into the text:

    ```
    {% layout gap=l cols=auto justify=start %}

    {% block col=3 %}

    First cell content

    {% endblock %}

    {% block col=7 %}

    Second cell content

    {% endblock %}

    {% block col=1 %}

    Third cell content

    {% endblock %}

    {% endlayout %}
    ```

    Block parameters:

    - By default, sections are stretched at full page width. To change the block alignment, specify the `cols=auto` and `justify=` parameters for `layout` with the following values:
        - `start`: Left-aligned.
        - `center`: Centered.
        - `end`: Right-aligned.

    - To add a cell, insert its opening tag `{% block %}` and its closing tag `{% endblock %}` between the main tags.

    - For `block`, set the cell width `col=` to a value between 1 and 12.

    - Make sure there is at least one-line indent between the cell tags and content.

{% endlist %}
<!-- endsource: en/yfmeditor/block-format.md -->

## Cut {#cut}

<!-- source: en/yfmeditor/block-format.md -->
{% list tabs group=editor %}

- Visual editor

    1. To add a cut, click <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" aria-hidden="true" class="yc-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m8.99 8.125 4.621-4.621a.2.2 0 0 0 0-.28 1.21 1.21 0 0 0-1.726 0l-3.91 3.91-1.092-1.091c.178-.356.304-.736.304-1.168A2.438 2.438 0 0 0 4.75 2.437a2.422 2.422 0 0 0-2.438 2.438A2.406 2.406 0 0 0 4.75 7.313c.406 0 .787-.102 1.143-.28l1.091 1.092-1.091 1.117c-.356-.178-.737-.305-1.143-.305a2.422 2.422 0 0 0-2.438 2.438 2.406 2.406 0 0 0 2.438 2.438 2.422 2.422 0 0 0 2.438-2.438c0-.406-.127-.787-.305-1.143l1.092-1.091 3.91 3.91a1.21 1.21 0 0 0 1.726 0 .2.2 0 0 0 0-.28l-4.62-4.646zM4.75 6.094a1.203 1.203 0 0 1-1.219-1.219c0-.66.533-1.219 1.219-1.219.66 0 1.219.559 1.219 1.219A1.22 1.22 0 0 1 4.75 6.094zm0 6.5a1.203 1.203 0 0 1-1.219-1.219c0-.66.533-1.219 1.219-1.219.66 0 1.219.559 1.219 1.219a1.22 1.22 0 0 1-1.219 1.219z"/></svg></svg> **Cut** on the toolbar.

        <!-- source: en/yfmeditor/tools-tip.md -->
        You can also use the quick access menu: type `/` and select a command from the list. {#slash}
        <!-- endsource: en/yfmeditor/tools-tip.md -->

    1. Enter the cut title and text. Use other text formatting elements.

    1. To collapse or expand a cut, click <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" aria-hidden="true" class="yc-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M4.502 5.775A.75.75 0 0 0 3.498 6.89l1.004-1.115zM8 9.932l-.502.557a.75.75 0 0 0 1.004 0L8 9.932zm4.502-3.042a.75.75 0 1 0-1.004-1.115l1.004 1.115zm-9.004 0 4 3.6 1.004-1.115-4-3.6L3.498 6.89zm5.004 3.6 4-3.6-1.004-1.115-4 3.6 1.004 1.114z"/></svg></svg>.

- Markdown markup

    To add a **Cut** block:

    1. Make sure there is an empty line before the block.

    2. Add markup in the following format:

        ```
        {% cut "Cut title" %}

        Content that appears when users click on it.

        {% endcut %}
        ```

{% endlist %}
<!-- endsource: en/yfmeditor/block-format.md -->

## Tabs {#tabs}

<!-- source: en/yfmeditor/block-format.md -->
{% list tabs group=editor %}

- Visual editor

    1. To add a block with tabs to the page, click <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" aria-hidden="true" class="yc-icon ye-command-menu__item-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M5.25 3.5H4A1.5 1.5 0 0 0 2.5 5v6A1.5 1.5 0 0 0 4 12.5h8a1.5 1.5 0 0 0 1.5-1.5V7H6a.75.75 0 0 1-.75-.75V3.5Zm1.5 0h2.5v2h-2.5v-2Zm4 0H12A1.5 1.5 0 0 1 13.5 5v.5h-2.75v-2ZM15 5a3 3 0 0 0-3-3H4a3 3 0 0 0-3 3v6a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V5Z" clip-rule="evenodd"/></svg></svg> **Tabs** on the toolbar.

        <!-- source: en/yfmeditor/tools-tip.md -->
        You can also use the quick access menu: type `/` and select a command from the list. {#slash}
        <!-- endsource: en/yfmeditor/tools-tip.md -->

    1. To add a new tab, click <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="yc-icon NavigationTree-ItemCreatePageIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><path fill-rule="evenodd" d="M6.75 11.252a.75.75 0 1 1-1.5 0V6.747H.75a.75.75 0 0 1 0-1.5h4.5V.75a.75.75 0 1 1 1.5 0v4.495h4.5a.75.75 0 0 1 0 1.501h-4.5v4.505z" clip-rule="evenodd"/></svg></svg> in the list of tabs.

    1. To delete a tab, click <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" fill="currentColor" aria-hidden="true" class="yc-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><path d="M9.756 8.577a.833.833 0 1 1-1.179 1.179L5 6.179 1.423 9.756A.833.833 0 1 1 .244 8.577L3.821 5 .244 1.423A.833.833 0 1 1 1.423.244L5 3.821 8.577.244a.833.833 0 1 1 1.179 1.179L6.179 5l3.577 3.577Z"/></svg></svg> to the right of its title.

    1. To switch to another tab, click its title.

    1. Add content to tabs by using other text formatting elements.

- Markdown markup

    To add a **Tabs** block, insert code in the following format into the text:

    ```
    {% list tabs %}

    - First tab title

        First tab text

    - Second tab title

        Second tab text

    {% endlist %}
    ```

    Make an indent of 2–4 spaces before the tab text and press the **Tab** key.

{% endlist %}
<!-- endsource: en/yfmeditor/block-format.md -->

## Quote {#quote}

<!-- source: en/yfmeditor/block-format.md -->
{% list tabs group=editor %}

- Visual editor

    1. To add a quote, click <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" aria-hidden="true" class="yc-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M5.766 2.438h-3.25A1.837 1.837 0 0 0 .687 4.266v2.843a1.82 1.82 0 0 0 1.829 1.829h1.421v.203c0 .584-.457 1.015-1.015 1.015h-.203A1.22 1.22 0 0 0 1.5 11.375v1.219c0 .685.533 1.219 1.219 1.219h.203A4.676 4.676 0 0 0 7.594 9.14V4.266c0-.99-.838-1.829-1.828-1.829zm.609 6.703a3.457 3.457 0 0 1-3.453 3.453h-.203v-1.219h.203c1.219 0 2.234-.99 2.234-2.234V7.719h-2.64a.587.587 0 0 1-.61-.61V4.266c0-.33.254-.61.61-.61h3.25c.33 0 .609.28.609.61V9.14zm7.11-6.704h-3.25a1.837 1.837 0 0 0-1.829 1.829v2.843a1.82 1.82 0 0 0 1.828 1.829h1.422v.203c0 .584-.457 1.015-1.015 1.015h-.204c-.685 0-1.218.559-1.218 1.219v1.219c0 .685.533 1.219 1.219 1.219h.203a4.676 4.676 0 0 0 4.671-4.672V4.266c0-.99-.837-1.829-1.828-1.829zm.609 6.704a3.457 3.457 0 0 1-3.453 3.453h-.204v-1.219h.204c1.218 0 2.234-.99 2.234-2.234V7.719h-2.64a.587.587 0 0 1-.61-.61V4.266c0-.33.254-.61.61-.61h3.25c.33 0 .609.28.609.61V9.14z"/></svg></svg> **Quote** on the toolbar.

        <!-- source: en/yfmeditor/tools-tip.md -->
        You can also add formatting elements [using your keyboard](https://yandex.com.tr/support/wiki/en/edit-page.md#keyboard) or through the quick access menu: type `/` and select an item from the list. {#keyboard}
        <!-- endsource: en/yfmeditor/tools-tip.md -->

    1. Use other text formatting elements inside quotes.

    1. Separate the quote from the other text with an empty line.

- Markdown markup

    ```
    > To display a quote, use this character.
    >>To create a nested quote, add two such characters at the beginning of the paragraph.
    ```

    - To create a quote, use the character `>`.

    - To create a nested quote, insert the `>>` characters at the start of the paragraph.

{% endlist %}
<!-- endsource: en/yfmeditor/block-format.md -->

## Formatting block {#design-block}

<!-- source: en/yfmeditor/block-format.md -->
{% list tabs group=editor %}

- Visual editor

    1. To add a formatting block, click <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" aria-hidden="true" class="yc-icon"><path d="M3.65 3.3a.353.353 0 0 0-.079.009.648.648 0 0 1-.256.006.648.648 0 0 1-.006.256.353.353 0 0 0-.009.079v.571a.65.65 0 0 1-1.3 0V3.15C2 2.515 2.515 2 3.15 2h1.071a.65.65 0 1 1 0 1.3H3.65Zm2.779-.65a.65.65 0 0 1 .65-.65H8.22a.65.65 0 1 1 0 1.3H7.08a.65.65 0 0 1-.65-.65Zm4 0a.65.65 0 0 1 .65-.65h1.071c.635 0 1.15.515 1.15 1.15v1.071a.65.65 0 1 1-1.3 0V3.65a.353.353 0 0 0-.009-.079.649.649 0 0 1-.006-.256.648.648 0 0 1-.256-.006.353.353 0 0 0-.079-.009h-.571a.65.65 0 0 1-.65-.65ZM2.65 6.429a.65.65 0 0 1 .65.65V8.22a.65.65 0 0 1-1.3 0V7.08a.65.65 0 0 1 .65-.65Zm10 0a.65.65 0 0 1 .65.65V8.22a.65.65 0 1 1-1.3 0V7.08a.65.65 0 0 1 .65-.65Zm0 4a.65.65 0 0 1 .65.65v1.071a1.15 1.15 0 0 1-1.15 1.15h-1.071a.65.65 0 1 1 0-1.3h.571a.353.353 0 0 0 .079-.009.649.649 0 0 1 .256-.006.649.649 0 0 1 .006-.256.353.353 0 0 0 .009-.079v-.571a.65.65 0 0 1 .65-.65Zm-10 0a.65.65 0 0 1 .65.65v.571c0 .028.003.054.009.079a.65.65 0 0 1 .006.256.649.649 0 0 1 .256.006.335.335 0 0 0 .079.009h.571a.65.65 0 1 1 0 1.3H3.15A1.15 1.15 0 0 1 2 12.15v-1.071a.65.65 0 0 1 .65-.65Zm3.779 2.221a.65.65 0 0 1 .65-.65H8.22a.65.65 0 1 1 0 1.3H7.08a.65.65 0 0 1-.65-.65ZM5.1 4.7a.1.1 0 0 0-.1.1v1.1a.1.1 0 0 0 .1.1h5.3a.1.1 0 0 0 .1-.1V4.8a.1.1 0 0 0-.1-.1H5.1ZM5 7.1a.1.1 0 0 1 .1-.1h5.3a.1.1 0 0 1 .1.1v1.1a.1.1 0 0 1-.1.1H5.1a.1.1 0 0 1-.1-.1V7.1Zm.1 2.2a.1.1 0 0 0-.1.1v1.1a.1.1 0 0 0 .1.1h5.3a.1.1 0 0 0 .1-.1V9.4a.1.1 0 0 0-.1-.1H5.1Z"/></svg> **Formatting block** on the toolbar.

        <!-- source: en/yfmeditor/tools-tip.md -->
        You can also use the quick access menu: type `/` and select a command from the list. {#slash}
        <!-- endsource: en/yfmeditor/tools-tip.md -->

    1. To set up rules for a formatting block, click <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" aria-hidden="true" class="yc-icon nv-aside-header-footer-item__icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none"><path fill="currentColor" fill-rule="evenodd" d="M9 2.5h2a.5.5 0 0 1 .5.5v.418c0 1.77 1.917 2.877 3.45 1.992l.362-.21a.5.5 0 0 1 .683.184l1 1.732a.5.5 0 0 1-.183.683l-.362.21c-1.533.884-1.533 3.098 0 3.983l.362.209a.5.5 0 0 1 .183.683l-1 1.732a.5.5 0 0 1-.683.183l-.362-.21c-1.533-.884-3.45.222-3.45 1.993V17a.5.5 0 0 1-.5.5H9a.5.5 0 0 1-.5-.5v-.418c0-1.77-1.917-2.877-3.45-1.992l-.362.209a.5.5 0 0 1-.683-.183l-1-1.732a.5.5 0 0 1 .183-.683l.362-.21c1.533-.884 1.533-3.098 0-3.983L3.188 7.8a.5.5 0 0 1-.183-.683l1-1.732a.5.5 0 0 1 .683-.183l.362.209c1.533.885 3.45-.221 3.45-1.992V3a.5.5 0 0 1 .5-.5ZM7 3a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v.418a.8.8 0 0 0 1.2.693l.362-.21a2 2 0 0 1 2.732.733l1 1.732a2 2 0 0 1-.732 2.732l-.362.21a.8.8 0 0 0 0 1.385l.362.209a2 2 0 0 1 .732 2.732l-1 1.732a2 2 0 0 1-2.732.732l-.362-.21a.8.8 0 0 0-1.2.694V17a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2v-.418a.8.8 0 0 0-1.2-.693l-.362.209a2 2 0 0 1-2.732-.732l-1-1.732a2 2 0 0 1 .732-2.732l.362-.21a.8.8 0 0 0 0-1.385l-.362-.209a2 2 0 0 1-.732-2.732l1-1.732a2 2 0 0 1 2.732-.732l.362.209A.8.8 0 0 0 7 3.418V3Zm5 7a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm1.5 0a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z" clip-rule="evenodd"/></svg></svg> in the top right corner of the block:

        - **Alignment**: Position of the block relative to the other page content:
        - **None**: No alignment. The block will be fixed to the left side of the page, and no other content will appear on the same line.
        - **Left**: Left-aligned.
        - **Center**: Centered.
        - **Right**: Right-aligned.

        - **Width**: Block width in pixels (px).

        - **Indents**: Padding between the border and block content.

        - **Border type**: Border layout:
        - **None**: No border.
        - **Solid**: Solid line.
        - **Dashed**: Dashed line.

        - **Border size**: Border thickness.

        - **Border color**: Color of the border:
        - **Info**: Blue.
        - **Tip**: Green.
        - **Warning**: Orange.
        - **Alert**: Red.

- Markdown markup

    To add a formatting block, insert code in the following format into the text:

    ```
    {% block align=center width=1000 padding=xs border=solid borderSize=m borderColor=warning %}

    Text inside the block

    {% endblock %}
    ```

    Block parameters:

    - `align`: Position of the block relative to the other page content. Optional.

        Possible values:
        - `left`: Left-aligned.
        - `center`: Centered.
        - `right`: Right-aligned.

    - `width`: Block width in pixels (px). Optional.

    - `padding`: Internal indent between the border and block content. Optional.

        Possible values:
        - `xs`: 4 px
        - `s`: 8 px
        - `m`: 12 px
        - `l`: 16 px
        - `xl`: 20 px

    - `border`: Border layout. Optional.

        Possible values:
        - `solid`: Solid line.
        - `dashed`: Dashed line.

    - `borderSize`: Border thickness.

        Possible values:
        - `xs`: 1 px
        - `s`: 2 px
        - `m`: 4 px
        - `l`: 6 px

    - `borderColor`: Border color. If not specified, the border will be black.

        Possible values:
        - `info`: Blue.
        - `tip`: Green.
        - `warning`: Orange.
        - `alert`: Red.

{% endlist %}
<!-- endsource: en/yfmeditor/block-format.md -->

## Section {#layout}

<!-- source: en/yfmeditor/block-format.md -->
{% list tabs group=editor %}

- Visual editor

    1. To add a section and split a part of your page into multiple cells, click <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" aria-hidden="true" class="yc-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M12 3.5h-1.25v9H12a1.5 1.5 0 0 0 1.5-1.5V5A1.5 1.5 0 0 0 12 3.5Zm-5.25 0h2.5v9h-2.5v-9Zm-1.5 0H4A1.5 1.5 0 0 0 2.5 5v6A1.5 1.5 0 0 0 4 12.5h1.25v-9ZM4 2a3 3 0 0 0-3 3v6a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V5a3 3 0 0 0-3-3H4Z" clip-rule="evenodd"/></svg></svg> **Section** on the toolbar.

        <!-- source: en/yfmeditor/tools-tip.md -->
        You can also use the quick access menu: type `/` and select a command from the list. {#slash}
        <!-- endsource: en/yfmeditor/tools-tip.md -->

    1. To add a new cell, click the space with the <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="yc-icon NavigationTree-ItemCreatePageIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><path fill-rule="evenodd" d="M6.75 11.252a.75.75 0 1 1-1.5 0V6.747H.75a.75.75 0 0 1 0-1.5h4.5V.75a.75.75 0 1 1 1.5 0v4.495h4.5a.75.75 0 0 1 0 1.501h-4.5v4.505z" clip-rule="evenodd"/></svg></svg> icon between two existing cells. You can use other markup elements of the new editor inside the cell.

    1. To change the cell width, click <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" aria-hidden="true" class="yc-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M14 6.125a1.874 1.874 0 1 1 .001 3.749A1.874 1.874 0 0 1 14 6.125zm-5.906 0a1.874 1.874 0 1 1 0 3.749 1.874 1.874 0 0 1 0-3.749zM2 6.125a1.874 1.874 0 1 1 .001 3.749A1.874 1.874 0 0 1 2 6.125z"/></svg></svg> in the top right corner of the cell and update the **Width** field value.

    1. To delete a cell, in its top right corner, click <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" aria-hidden="true" class="yc-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M14 6.125a1.874 1.874 0 1 1 .001 3.749A1.874 1.874 0 0 1 14 6.125zm-5.906 0a1.874 1.874 0 1 1 0 3.749 1.874 1.874 0 0 1 0-3.749zM2 6.125a1.874 1.874 0 1 1 .001 3.749A1.874 1.874 0 0 1 2 6.125z"/></svg></svg> → <svg xmlns="http://www.w3.org/2000/svg" width="14" height="15" fill="currentColor" aria-hidden="true" class="yc-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 15"><path d="M8.203 12.125h.656a.332.332 0 0 0 .329-.328V5.89a.353.353 0 0 0-.329-.329h-.656a.332.332 0 0 0-.328.329v5.906c0 .191.137.328.328.328zm4.485-9.188h-2.27l-.93-1.53C9.27 1.05 8.778.75 8.368.75H5.604c-.41 0-.902.3-1.12.656l-.93 1.532H1.312a.45.45 0 0 0-.437.437v.438c0 .246.191.437.438.437h.437v9.188c0 .738.574 1.312 1.313 1.312h7.874c.711 0 1.313-.574 1.313-1.313V4.25h.438a.45.45 0 0 0 .437-.438v-.437a.47.47 0 0 0-.438-.438zM5.55 2.146a.364.364 0 0 1 .136-.083h2.598c.027 0 .11.055.137.083l.465.792h-3.8l.465-.792zm5.386 11.293H3.064V4.25h7.874v9.188zM5.14 12.126h.656a.332.332 0 0 0 .328-.328V5.89a.353.353 0 0 0-.328-.329H5.14a.332.332 0 0 0-.329.329v5.906c0 .191.137.328.329.328z"/></svg></svg> **Delete cell**.

    1. To change display mode for all cells at once, click any cell. This opens a menu where you can:

        - Set the number and size of cells using one of the four templates:
            - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" aria-hidden="true" class="yc-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M4.5 8.5v7h5v-7h-5Zm10 0v7h5v-7h-5ZM3 8a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V8Zm10 0a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-6a1 1 0 0 1-1-1V8Z" clip-rule="evenodd"/></svg></svg> **Two cells**
            - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" aria-hidden="true" class="yc-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M5.5 8.5v7h1v-7h-1Zm6 0v7h6v-7h-6ZM4 8a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V8Zm6 0a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-7a1 1 0 0 1-1-1V8Z" clip-rule="evenodd"/></svg></svg> **Large on the right**
            - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" aria-hidden="true" class="yc-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M17.5 8.5v7h-1v-7h1Zm-6 0v7h-6v-7h6ZM19 8a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V8Zm-6 0a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V8Z" clip-rule="evenodd"/></svg></svg> **Large on the left**
            - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" aria-hidden="true" class="yc-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M18.5 8.5v7h-1v-7h1Zm-6 0v7h-1v-7h1Zm-6 0v7h-1v-7h1ZM19 7a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h2Zm-6 0a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h2ZM8 8a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V8Z" clip-rule="evenodd"/></svg></svg> **Three cells**

        - Align the cells block relative to the other page content:
        - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" aria-hidden="true" class="yc-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M18.5 8.5v7h-1v-7h1Zm-6 0v7h-1v-7h1Zm-6 0v7h-1v-7h1ZM19 7a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h2Zm-6 0a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h2ZM8 8a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V8Z" clip-rule="evenodd"/></svg></svg> **Entire section left-aligned**
        - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" aria-hidden="true" class="yc-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M3.25 7a.75.75 0 0 1 1.5 0v10a.75.75 0 0 1-1.5 0V7Zm5.197 6.493.681-.743H7a.75.75 0 0 1 0-1.5h2.462l-.682-.743a.75.75 0 0 1 1.106-1.014l1.667 1.818a.75.75 0 0 1 0 1.014l-2 2.182a.75.75 0 0 1-1.106-1.014Zm6.773-2.986-.682.743H17a.75.75 0 0 1 0 1.5h-2.128l.68.743a.75.75 0 0 1-1.105 1.014l-2-2.182a.75.75 0 0 1 0-1.014l1.667-1.818a.75.75 0 0 1 1.105 1.014ZM19.25 7a.75.75 0 0 1 1.5 0v10a.75.75 0 0 1-1.5 0V7Z" clip-rule="evenodd"/></svg></svg> **Entire section centered**
        - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" aria-hidden="true" class="yc-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M20 6.25a.75.75 0 0 1 .75.75v10a.75.75 0 0 1-1.5 0V7a.75.75 0 0 1 .75-.75Zm-16 0a.75.75 0 0 1 .75.75v10a.75.75 0 0 1-1.5 0V7A.75.75 0 0 1 4 6.25Zm4.22 4.257-.682.743h8.924l-.681-.743a.75.75 0 1 1 1.105-1.014l1.667 1.818a.75.75 0 0 1 0 1.014l-2 2.182a.75.75 0 0 1-1.106-1.014l.681-.743H7.872l.68.743a.75.75 0 0 1-1.105 1.014l-2-2.182a.75.75 0 0 1 0-1.014l1.667-1.818a.75.75 0 1 1 1.106 1.014Z" clip-rule="evenodd"/></svg></svg> **Entire section right-aligned**

        - Click <svg xmlns="http://www.w3.org/2000/svg" width="14" height="15" fill="currentColor" aria-hidden="true" class="yc-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 15"><path d="M8.203 12.125h.656a.332.332 0 0 0 .329-.328V5.89a.353.353 0 0 0-.329-.329h-.656a.332.332 0 0 0-.328.329v5.906c0 .191.137.328.328.328zm4.485-9.188h-2.27l-.93-1.53C9.27 1.05 8.778.75 8.368.75H5.604c-.41 0-.902.3-1.12.656l-.93 1.532H1.312a.45.45 0 0 0-.437.437v.438c0 .246.191.437.438.437h.437v9.188c0 .738.574 1.312 1.313 1.312h7.874c.711 0 1.313-.574 1.313-1.313V4.25h.438a.45.45 0 0 0 .437-.438v-.437a.47.47 0 0 0-.438-.438zM5.55 2.146a.364.364 0 0 1 .136-.083h2.598c.027 0 .11.055.137.083l.465.792h-3.8l.465-.792zm5.386 11.293H3.064V4.25h7.874v9.188zM5.14 12.126h.656a.332.332 0 0 0 .328-.328V5.89a.353.353 0 0 0-.328-.329H5.14a.332.332 0 0 0-.329.329v5.906c0 .191.137.328.329.328z"/></svg></svg> to delete a section.

- Markdown markup

    To add a section, insert code in the following format into the text:

    ```
    {% layout gap=l cols=auto justify=start %}

    {% block col=3 %}

    First cell content

    {% endblock %}

    {% block col=7 %}

    Second cell content

    {% endblock %}

    {% block col=1 %}

    Third cell content

    {% endblock %}

    {% endlayout %}
    ```

    Block parameters:

    - By default, sections are stretched at full page width. To change the block alignment, specify the `cols=auto` and `justify=` parameters for `layout` with the following values:
        - `start`: Left-aligned.
        - `center`: Centered.
        - `end`: Right-aligned.

    - To add a cell, insert its opening tag `{% block %}` and its closing tag `{% endblock %}` between the main tags.

    - For `block`, set the cell width `col=` to a value between 1 and 12.

    - Make sure there is at least one-line indent between the cell tags and content.

{% endlist %}
<!-- endsource: en/yfmeditor/block-format.md -->
