# What Is Editable In Tina

## What Is Editable In Tina

**Files:** `src/content/`, `src/config/`, `src/i18n/`, `tina/` · **Skill level:** Beginner

Keep `npm run dev` running, open `http://localhost:4321/admin/`, and click **Enter Edit Mode**. You need no account and no password. Open the menu at the top left, then pick an entry, a language folder, and a file. [Tina](/margo/features/tina/) has the full guide. Everything below exists in English, French, and Arabic, and an edit changes one language.

The menu has four groups: **Pages**, **Collections**, **Sections**, and **Settings**.

### Where Each Page Is Edited
The last column lists the blocks in the page's own form, such as **Hero Section** or **Cta Section**. Fill one in to change that section on this page only. Every other section comes from **Section defaults**.

| Address | Entry in `/admin/` | The page's own blocks and fields |
| ------- | ------------------ | -------------------------------- |
| `/` | **Home pages**, file `-index` | Hero, Projects, Services, Stats, About, Pricing, Logos, Testimonials, Faq, Journal. The form also lists Quote, but this page doesn't show a quote section |
| `/home-studio/` | **Home pages**, file `home-studio` | Hero, Logos, Projects, Quote, Services, Steps, Stats, Team Grid, Testimonials, Journal, Cta |
| `/home-photo/` | **Home pages**, file `home-photo` | Hero, Quote, Gallery, Projects, Pricing, Logos, Testimonials, Cta |
| `/about/` | **About** | Page Header, About, Stats, Services, Testimonials, Logos, Cta |
| `/pricing/` | **Pricing** | Page Header, Pricing, Faq, Cta |
| `/contact/` | **Contact** | Page Header, Contact, Faq |
| `/faq/` | **FAQ** | Page Header, Faq, Cta |
| `/testimonials/` | **Testimonials** | Page Header, Testimonials, Stats, Cta |
| `/projects/` | **Projects**, the listing page | Page Header, Projects, Logos, Cta |
| `/projects/{slug}/` | **Projects**, one file per project | **Images** (the blocks of the page, in order), **Metrics**, **Quote**, **Information**, **Options > Layout** (`default`, `gallery`, or `split`), and the blocks Stats, Quote, Gallery, Next Project, Logos, Cta |
| `/services/` | **Services**, the listing page | Page Header, Services, Steps, Faq, Cta, and **Detail**, the shared texts of every service page |
| `/services/{slug}/` | **Services**, one file per service | **Price**, **Duration**, **Deliverables**, **Tools**, **Process**, **Faq**, **Related** (project file names), and the block Cta |
| `/blog/` | **Journal**, the listing page | Page Header, Blog List, Newsletter |
| `/blog/{slug}/` | **Journal**, one file per post | Related Posts, Cta |
| `/blog/category/...`, `/blog/tag/...`, `/blog/page/...` | Built from the posts' categories and tags | None |
| `/team/` | **Team**, the listing page | Page Header, Team Grid, Cta |
| `/team/{slug}/` | **Team**, one file per member | **Social**, and the blocks Team Grid, Cta |
| `/archive/` | **Other pages**, file `archive` | Page Header, Projects, Cta |
| `/elements/` | **Other pages**, file `elements` | Page Header, Layout Gallery (its labels and notes) |
| Legal pages | **Other pages**, one file per page | Page Header, Content Page, and the body |
| `/components/` | **Other pages**, file `components`. Its body is edited as source code | Page Header, Cta |
| 404 | The **Not found section** in **Section defaults**, and **Interface labels** | None |

The form of **Other pages** lists every block those pages can use. A block only works on a page that shows that section.

Most page forms also have **Header layout** (`pill`, `bar`, or `overlay`), **Footer layout** (`wordmark`, `columns`, or `email`), **Show the contact dock**, **Robots**, **Leave out of the sitemap**, **Leave out of the site search**, **Leave out of llms.txt and Markdown copies**, and **Draft**.

Journal posts and the legal pages use a rich text editor. Its **Embed** button adds a Button, Notice, Callout, image list, or another of the theme's components. Project, service, and team member text uses the same editor, without components.

### New Entries
Use **Create New** in **Projects**, **Services**, **Journal**, **Team**, **Authors**, and **Other pages**. The header menu doesn't pick up a new project or service, so add its link in **Menus**. See [Menus](/margo/customization/menus/).

A new entry with only a title won't break the site, and it builds. Its card or page shows what you filled in, and images and other fields stay empty until you add them, so fill them in before you publish.

### Sections
**Section defaults** holds the shared content and options of each section, 25 files in all, in each language. A change there shows on every page that uses the section, unless the page has filled in its own block.

| Section | Where it appears |
| ------- | ---------------- |
| **About section** | `/`, `/about/` |
| **Blog list section** | `/blog/`, its pages, and category and tag pages |
| **Call to action** | Above the footer on most pages. Not on `/`, `/contact/`, the journal lists, `/elements/`, or 404 |
| **Contact section** | `/contact/` |
| **Cookie consent** | The cookie banner on every page |
| **Experience section** | The experience rows inside the About section |
| **Faq section** | `/`, `/contact/`, `/faq/`, `/pricing/`, `/services/`, service pages |
| **Footer** | Every page. Its links come from **Menus** |
| **Gallery section** | `/home-photo/`, project pages |
| **Hero section** | The three homepages |
| **Journal section** | `/`, `/home-studio/` |
| **Logos section** | The three homepages, `/about/`, `/projects/`, project pages |
| **Newsletter section** | `/blog/` |
| **Next project section** | Project pages |
| **Not found section** | 404 pages |
| **Pricing section** | `/`, `/home-photo/`, `/pricing/` |
| **Projects section** | The three homepages, `/projects/`, `/archive/`, service pages |
| **Quote section** | `/home-studio/`, `/home-photo/`, project pages |
| **Related posts section** | Under each journal post |
| **Services section** | `/`, `/home-studio/`, `/about/`, `/services/` |
| **Stats section** | `/`, `/home-studio/`, `/about/`, `/testimonials/`, project pages |
| **Steps section** | `/home-studio/`, `/services/`, service pages |
| **Team grid section** | `/home-studio/`, `/team/`, team member pages |
| **Testimonials section** | The three homepages, `/about/`, `/testimonials/` |
| **Tools section** | The tool tiles in the Services section and on service pages |

To hide a section, use its **Enable** field. To change its look, use **Options > Layout**. `/elements/` previews every layout. The hero and the call to action also have **Options > Webgl** (`dots`, `flow`, or `none`) for an animated background.

### Site-Wide Content
| Entry | What's in it |
| ----- | ------------ |
| **Site settings** | **Site** (title, tagline, description, Base Url, logo), **Seo** (identity, robots.txt, AI files, sitemap), **Settings**, **Opengraph**, and **Head** for analytics tags. These are the values of `config.toml` |
| **Menus** | **Header Primary** (the dropdowns, flyouts, and mega menus) and **Footer** (the footer link groups), in `menu.en`, `menu.fr`, and `menu.ar`. See [Menus](/margo/customization/menus/) |
| **Social links** | Your social profiles |
| **Interface labels** | Buttons, form messages, and other interface text, per language. The tagline and description of each language are under **Site**, and the summary in `llms.txt` is **Ai > Site Summary** |

Margo has three header layouts and three footer layouts. Choose them in **Site settings > Settings > Layout**, or per page with **Header layout** and **Footer layout**. **Settings** also holds **Color Mode**, **Search**, **Smooth Scroll**, **Animation**, **Cookie Consent**, **Theme Credit**, **Page Actions**, **Contact Dock**, **Contact Info**, **Navigation Button**, **Copyright**, **Subscription**, **Contact Form Action**, and **Contact Form Provider**. Leave **Layout Switcher** off: it is for the theme's own demo.

### The Menus Form
The menu form follows the menu file. **Open a dropdown** with **Dropdown links** makes a dropdown, and a dropdown link can open its own. **Open a mega menu** adds **Mega menu columns**, the **Mega menu photo card**, and the **Mega menu bottom row**:

- In the card, **Project** is the file name of a project, such as `ceramic-forms`. Empty uses the first project marked **Featured**.
- In the bottom row, each of the **Links** can have an **Action**: `search` turns it into the site search button, and **Shortcut** is its key hint.

Some fields in this form do nothing in Margo. They are kept so the files have the same shape as in other themes:

- **Order** doesn't move an item. Items show in the order of the list, so drag them to reorder.
- **Icon** on mega menu links doesn't show. No menu link has an icon.
- **Description** and **Items** on the card don't show. The card shows the project's cover, title, and year.

The form edits dropdowns up to four levels deep. For a deeper menu, edit `src/config/menu.<language>.json` in a text editor. The demo menu doesn't go that deep.

### If You Clear A Field
In a page's form, a field you never filled uses the default. A field you clear is saved empty, which hides that text or image on that page.

Tina can't bring the default back by itself. To get the text back, do either of these:

- Copy it from **Section defaults** into the field.
- Remove the empty line from the page's file in `src/content/` with a text editor.

<Aside type="caution">
  Clicking text in the preview opens the file the text comes from. If that is a
  section default, your edit shows on every page that uses it.
</Aside>

### What The Preview Doesn't Update
Click-to-edit works on the page content, the call to action, and the footer. The header, the menus, and values from **Site settings**, such as the contact details, don't change while you type. They update when you save. Some **Site settings** also need `npm run dev` restarted.

These have no click-to-edit outline, so change them in their forms: the header and menus, values from **Site settings**, images with no alt field, categories and tags, and one-word options such as layouts. Online with Tina Cloud there are forms only.

When Tina saves, it removes comments and rewrites Markdown in its own style, such as `*` in place of `-`. Your words and values stay, and the comments' text is kept as the note under each field. If you also edit content files by hand, run `npm run tina:audit`. It tells you if a save would lose anything.

### What Stays In Code
- Which sections a page has, and their order: the route in `src/pages/[...lang]/`. You can hide a section with its **Enable** field.
- New sections, new page routes, new fields, and new layouts. Then run `npm run tina:generate` so the editor offers them, and commit `tina/generated/collections.json`.
- Colors and type scale (`src/styles/theme.css`) and fonts (`src/config/fonts.json`).
- The list of languages. See [Internationalization](/margo/customization/internationalization/). After you add or remove one, run `npm run tina:generate`, then `npm run dev` once.
- The icons and the animated backgrounds themselves. Icon names and the background choice are editable.
- The fields of the contact form are editable, but its markup is in `src/layouts/components/widgets/ContactForm.astro`.

### Versions And Testing
This edition is tested on Astro 7.4.12 and Node 22, with `tinacms` 3.15.1, `@tinacms/cli` 4.0.4, `@tinacms/astro` 0.8.0, and React 19.3.1. They are pinned in `package.json`. The live preview uses experimental features of `@tinacms/astro`, so test it before you upgrade. Node must be 22.23.4 or later, on version 22 or 24, because Tina's command line tool supports only those two.

We saved every content and settings file through the editor and checked that nothing was lost, saved an Arabic page at `/admin/`, and checked that the live preview shows the same page as the built site on 200 page addresses in the three languages. We have not run online editing against a live Tina Cloud project. Try one save on a copy of your site before you rely on it.

### Do It With AI
```text
I use the Tina edition of Margo. Tell me where to edit [TEXT OR SETTING] in /admin/: the entry, the
language folder, the file, and the field. If it comes from Section defaults, say which pages will
change, and how to change it on one page only. Don't change any files.
```