Lumio Theme Documentation

Customizing Layouts

Lumio is built from reusable sections. Most pages are assembled by importing section components in src/pages/[...lang]/... files, while each section reads its default content from src/content/sections/<language>/.

• Layout files: src/layouts/components/sections/
• Content files (Markdown): src/content/sections/<language>/

For example, if you want to change the main “About Company” section on the homepage, there are two layers involved:

1. The page layout that includes the section
2. The section content Markdown file

Customizing the Section Markdown File

Step 1: Locate the page layout file

The main homepage file is:

• src/pages/[...lang]/index.astro

Lumio also includes other page entry files such as:

• src/pages/[...lang]/home-two.astro
• src/pages/[...lang]/home-three.astro
• src/pages/[...lang]/contact.astro
• src/pages/[...lang]/about.astro

Step 2: Find the section in the layout file

Open the page file and look for the section import and render call:

src/pages/[...lang]/index.astro

---
import Base from "@/layouts/Base.astro";
import HomeBanner from "@/components/sections/HomeBanner.astro";
import AboutCompanySection from "@/components/sections/AboutCompanySection.astro";
import OurServicesSection from "@/components/sections/OurServicesSection.astro";
import ContactSection from "@/components/sections/ContactSection.astro";
---

<Base {...homepage.data} homepage={true} footer="one">
  <HomeBanner />
  <AboutCompanySection />
  <OurServicesSection />
  <ContactSection />
</Base>

From this, you can see that AboutCompanySection controls that homepage block.

Step 3: Modify the Markdown file

Next, open the related section content file:

• src/content/sections/english/about-company.md

Example frontmatter:

---
enable: true
badge: "About Company"
title: "Our IT service and technology agency partners with companies and organizations across the globe to enhance audience engagement and fuel business growth."
description: "Nemo enim ipsam voluptatem..."

image: "/images/about/about-company-pic.jpg"
imageAlt: "About our team"
imageSecondary: "/images/about/about-rated-pic.jpg"
imageSecondaryAlt: "Team meeting"

bgPatternImage: "/images/about/about-bg.png"
bgPatternImageAlt: "About pattern"
sinceYear: "Since, 2000"

rating:
  enable: true
  score: "5.0 Rated"
  label: "Rated Superb Over 4.5k Rating"
---

To hide the entire section, set enable: false. To change the copy or artwork, update the frontmatter fields.

Customizing the Section Layout File

For deeper structural changes, edit the section component itself:

1. Open src/layouts/components/sections/AboutCompanySection.astro
2. Adjust the Astro markup, logic, or styling

Lumio sections typically follow this pattern:

• fetch default content with getEntryCTM("sections", "...", Astro.currentLocale)
• merge optional overrides
• bail out early when enable is false

That means content-level changes are safe for most users, while layout changes are the right path for more advanced design edits.