> ## Content Index
> Fetch the complete content index at: https://www.ectobuilder.com/llms.txt
> Use this file to discover other available public pages before exploring further.

# 3 Small Upgrades for Your Ghost Site: Reading Progress, Page Transitions and AI Alt Text
- URL: https://www.ectobuilder.com/blog/ghost-reading-progress-transitions-alt-text/
- Published: 2026-10-21T16:23:33.000Z
- Updated: 2026-10-25T17:52:51.000Z
- Description: A reading progress bar for long posts, smooth transitions between pages, and alt text written for you by AI. Three small improvements readers notice, each in a couple of clicks.
- Author: Michal Wlosik
- Tags: Guides, Design

Some improvements are small but readers notice them every day. This guide covers three of them for Ghost sites, all without code: a reading progress bar for long posts, smooth transitions between pages, and alt text written for you by AI.

## A reading progress bar

A thin bar at the top of the screen that fills as the reader moves through a post. It answers the question every reader of a long post has: how much is left?

- **It measures the post, not the page.** Comments and the footer don't count, so the bar is full when the reader reaches the end of the article.
- **It sits below a sticky header**, so it's never hidden.
- **It's set per template.** Long reads can have it while short news posts don't.

### How to add a reading progress bar

1. In [Ectobuilder](https://www.ectobuilder.com/), open the **Post** page and select the section with the post's content.
2. Open the **Layout** group and set **Reading progress bar** to **Thin** or **Thick**.
3. Deploy. The bar takes your accent color.

![The Ectobuilder editor on the Post page with the Post content section selected; in the Layout group on the right, Reading progress bar is set to Thin](https://www.ectobuilder.com/content/images/2026/10/image-mvo41jlc.webp)

(1) The post’s content section. (2) Layout → Reading progress bar.

Using a custom template for long posts, like "Guide"? Turn the bar on there and leave it off on the regular Post page. See [how to add a table of contents](https://www.ectobuilder.com/blog/ghost-table-of-contents/), which pairs well with it.

## Page transitions

Normally, clicking a link makes the page flash white and the new one appears. With page transitions, the old page fades or slides into the new one, so moving around your site feels like an app.

- **Built into the browser.** It uses the browser's own view transitions: no script, nothing to load. Chrome, Edge and Safari show it; browsers that don't support it yet change pages as usual.
- **Respects your readers.** Visitors who ask their device for less motion get normal page changes.
- **Two styles.Fade** is subtle and suits most sites. **Slide** is livelier, for portfolios and product sites.

### How to turn on page transitions

Click **Style** in the left bar, open **Motion** and set **Page transitions** to **Fade** or **Slide**. Deploy.

![The Style panel in Ectobuilder with the Motion group open: Page transitions is set to Fade](https://www.ectobuilder.com/content/images/2026/10/image-mvo4ky2i.webp)

(1) Style in the left bar. (2) Motion → Page transitions.

[![CTA Image](https://www.ectobuilder.com/content/images/size/w256h256/2026/06/Ecto_builder_logo_sq_small.png)](https://editor.ectobuilder.com/login?mode=signup&plan=free&ref=ectobuilder.com) 

****Make your Ghost site nicer to read.**  
A reading progress bar, page transitions and AI alt text, each in a couple of clicks.

[Try it free ](https://editor.ectobuilder.com/login?mode=signup&plan=free&ref=ectobuilder.com) 

## AI alt text

Alt text describes a picture for people who use screen readers, and for search engines, which use it to understand the picture and show it in image search. Most sites skip it, because writing it is tedious.

Ectobuilder writes it for you, for the pictures in your theme: heroes, feature sections, team photos, galleries. (For pictures in your posts, Ghost's editor has its own alt text field.)

- **Automatically** when you add or replace a picture. It's on by default, under **Settings → SEO → Images**.
- **On demand** with the sparkle button next to any picture's description. Use it for pictures you added before, or to try again.
- **In your site's language**, using the text around it for context, so it describes what matters on that page.
- **Decorative pictures are left empty**, as they should be: screen readers skip them.

![A picture selected in the Ectobuilder editor; its description field on the right was filled in by AI, with the Write alt text with AI button next to it](https://www.ectobuilder.com/content/images/2026/10/image-mvmrzp6b.webp)

Click the sparkle button and the description is written for you.

Each plan includes AI descriptions every month: 50 on Free, 3,000 on Pro and 10,000 on Studio. A picture is only described once, however many times you use it.

## Related guides

- [A lightbox for Ghost pictures](https://www.ectobuilder.com/blog/ghost-lightbox/): click any picture to see it full size.
- [Share buttons for Ghost posts](https://www.ectobuilder.com/blog/ghost-share-buttons/): no plugins, no tracking.
- [How to build your Ghost theme visually](https://www.ectobuilder.com/blog/build-ghost-theme-visually/): every step, from picking a theme to publishing it to Ghost.

## FAQ

#### Does the progress bar work on pages too?

It goes on any template with a post content section: Post, Page or a custom template. Turn it on where you want it.

#### Do page transitions slow my site down?

No. They’re a few lines of CSS that the browser handles itself. Nothing extra loads.

#### Why don’t I see transitions in my browser?

Either your browser doesn’t support transitions between pages yet, or your device is set to reduce motion. Pages change normally in both cases.

#### Can I edit the AI alt text?

Yes. It’s an ordinary text field: change it, or clear it and write your own.

#### Does AI alt text work for pictures in my posts?

Not yet: it covers pictures in your theme’s sections. For pictures in posts, use the alt text field in Ghost’s image card.

[![CTA Image](https://www.ectobuilder.com/content/images/size/w256h256/2026/06/Ecto_builder_logo_sq_small.png)](https://editor.ectobuilder.com/login?mode=signup&plan=free&ref=ectobuilder.com) 

****Build a Ghost theme that’s a pleasure to read.**  
Reading progress, page transitions, a table of contents and accessible pictures, designed visually and deployed straight to Ghost.

[Start building ](https://editor.ectobuilder.com/login?mode=signup&plan=free&ref=ectobuilder.com)