---
title: "First steps"
manual: "Frontend Edit"
version: "2.6"
source: "Usage/FirstSteps.rst"
rendered: "2026-10-01T07:11:45+00:00"
---

# First steps {#first-steps}

A short tour for editors. It assumes an administrator has already
[installed](../Installation/Index.html#installation) the extension for your site.

## 1\. Log in, then open your site {#first-steps-visible}

Frontend editing only appears for logged-in backend users. Log into the TYPO3
backend, then open a page of your website in the same browser.

Two things appear:

| What you see | What it is |
| --- | --- |
| A small bar in the bottom-right corner | The [toolbar](Toolbar.html#toolbar) — actions for the **whole page** |
| A pencil button when you hover a content element | The [Edit Menu](EditMenu.html#edit-menu) — actions for **that element** |

![Edit button and content-type label shown when hovering a content element](../Images/edit-button.png)

> [!NOTE]
> Visitors of your website never see any of this. Nothing is injected for
> users without a backend session.

## 2\. Change a content element {#first-steps-edit}

Hover the element you want to change and click its pencil button. The TYPO3 edit
form opens — either in the backend, or, if your site has
[inline editing](InlineEditing.html#inline-editing) enabled, in a panel right next to the
page.

Save with **Save & Close** and you land back on the same spot in the frontend,
with a confirmation message.

![Save and Close button in the TYPO3 edit form](../Images/save-close.png)

> [!TIP]
> The three-dot button next to the pencil holds the remaining actions: hide,
> delete, info, history, move, and "new content after".

## 3\. Change the page itself {#first-steps-page}

The toolbar covers everything that concerns the page rather than a single
element — page properties, opening the page module, page info.

## 4\. Switch it off when it gets in the way {#first-steps-off}

The eye icon in the toolbar turns frontend editing off. Your choice is stored
for your user and survives a reload, so you can check the page exactly as a
visitor sees it and switch back when you are done.

![Screencast of disabling frontend editing via the toolbar toggle](../Images/disable.gif)

> [!NOTE]
> **See also**
>
> -   [Keyboard and screen reader use](Keyboard.html#keyboard) — operating everything without a mouse
> -   [FAQ](../FAQ/Index.html#faq) — what to do when nothing appears