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 has the full guide. Everything below exists in English, French, and Arabic, and an edit changes one language.

Where Each Page Is Edited

The last column lists the blocks in the page’s own form. Fill one in to change that section on this page only. Everything else on the page comes from Section defaults.

Authors holds the author shown on blog posts. The header and footer are on every page, so they have no blocks. See Site-Wide Content below.

New Entries

Use Create New to add a service, project, team member, post, or text page. It asks which form to use: pick the entry, not “Listing page (one per language, already there)”. An entry you create exists in one language, so create it in each language’s folder.

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 of each section, in each language, including the pricing plans, the testimonial quotes, and the contact form’s fields. A change there shows on every page that uses the section, unless the page has filled in its own block.

About one, About two, Awards, Clients, Personal portfolio banner, Portfolio section, Skills, and Video section also have forms, but no page shows them.

To hide a section, turn off its Enable field. In Section defaults that hides it on every page, and in a page’s block on that page only.

Site-Wide Content

Settings holds the header and footer options: Sticky Header, Navigation Button, Header Offcanvas, Contact Info, Footer Description, Copyright, Page Actions, and Theme Credit. It also has Contact Form Action, Contact Form Provider, Smooth Scroll, Animation, and Multilingual. Subscription has settings there too, but no page shows that form as it ships. See Subscription.

Techlo has three header layouts, and one footer with a light and a dark background. Which header a page uses, and whether its footer is dark, stay in the page’s route file, with one exception: Home 3 has Has Footer Dark Background in its form.

In Menus, Show hides an item in the header, and Enable hides a link in the footer. Items appear in the order of the list, so change their place in the list to move them. Order doesn’t move an item.

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.
• Delete that line from the page’s file in src/content/ with a text editor.

What The Preview Doesn’t Update

The header, the menus, and values from Site settings don’t change while you type. They update when you save. Some Site settings also need npm run dev restarted, and the comment in the field says so.

Other things to expect:

• After a save, the next page can take up to half a minute to open while the site reloads. The terminal can print Failed to load url astro:server-app.js at that moment. The page still opens normally.
• Images with no alt text, categories and tags, and one-word options have no outline. Change them in their forms.
• If the cursor leaves a rich text field while you type right before an embedded block, click back in.
• The Components page uses raw HTML, so its body is edited as source code.
• Online, through Tina Cloud, there are forms only. The live preview and click-to-edit need npm run dev on your computer.

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.
• Which header layout a page uses, and whether its footer is dark: headerLayout and hasFooterDarkBackground in the same routes. Home 3 has the footer switch in its form.
• New sections, new page layouts, and new home pages. Then run npm run tina:generate so the editor offers them.
• Colors and type scale (src/styles/theme.css) and fonts (src/config/fonts.json).
• Icons. You can change an icon’s name in a form, and new inline icons go in src/layouts/helpers/Icons.astro.
• The list of languages. See Internationalization.

Versions And Testing

This edition is tested on Astro 7.1.3 and Node 22, in a Chromium browser, with tinacms 3.15.1, @tinacms/cli 4.0.4, and @tinacms/astro 0.8.0. npm ci installs exactly these. The live preview uses experimental features of @tinacms/astro, so test it before you upgrade.

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

I use the Tina edition. 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.