Update Widget Promotion — Astro Template Guide

documentation

Publih On: 2023-12-02

Learn how to create and update promotion widgets on the Blacks Astro JS template.

Full documentation: Widget guide →

---

Where Widgets Live

All promotion widgets are in the folder:

src/content/services

This area displays promotional services or blog links on your post articles.

Important: You need to create four promotion widget files. The template expects four — fewer will leave empty slots.

---

Create a New Promotion Widget

To add a new widget:

1. Create a new .md file inside src/content/services/
2. Open it in your code editor
3. Add the frontmatter (see below)
4. Save the file

Unlike regular pages, widgets do not need content below the frontmatter — the frontmatter alone drives the widget display.

---

Frontmatter Format

---
layout: ../../design/servicespost.astro
title: insert title in here...
link: link for widget promotion...
description: insert description here...
image: insert url image here...
pubDate: 2023-11-28
---

---

What Each Field Does

Field	Purpose
layout	Widget layout template. Don’t change this.
title	Widget title — displayed on the article page
link	URL the widget points to (relative or absolute)
description	Short description shown under the title
image	Cover image for the widget
pubDate	Publication date — format: YYYY-MM-DD

---

Tips for Promotion Widgets

1. Keep titles short. Two to four words work best.
2. Write benefit-driven descriptions. Not “Our Services” — instead “Build a portfolio that stands out.”
3. Use compelling images. This is the first thing readers see.
4. Point to something relevant. If the widget appears on a blog post about galleries, link to a gallery-related service.
5. Update regularly. A stale promotion widget loses impact.

---

Save and Preview

After updating:

1. Save the file
2. The development server refreshes automatically
3. Visit any blog post — the widgets appear on the right side (or below the content, depending on layout)

---

Need Help?

If you need custom work or a headless CMS integrated, our team can help.

Headless CMS Integration →