Customizing Layouts

Files: src/pages/[...lang]/, src/content/sections/<language>/, src/layouts/components/sections/ · Skill level: Beginner

Techlo 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>/.

In the Tina edition, section content is under Section defaults at /admin/. In the Sanity edition, it is under Sections in the Studio. The page files are code in every edition.

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

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

The page layout that includes the section
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

Techlo also includes other page entry files such as:

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

Step 2: Find the section in the layout file

Open the page file and look for the section imports and render calls:

---
import Base from "@/layouts/Base.astro";
import Banner from "@/components/sections/Banner.astro";
import Features from "@/components/sections/Features.astro";
import MultipurposeSection from "@/components/sections/Section.astro";
import ServicesSection from "@/components/sections/ServicesSection.astro";
import ProjectsSection from "@/components/sections/ProjectsSection.astro";
import TeamSection from "@/components/sections/TeamSection.astro";
import TestimonialGrid from "@/components/sections/TestimonialGrid.astro";
import BlogSection from "@/components/sections/BlogSection.astro";
---

<Base {...homepageContent?.data} headerLayout="one" hasFooterDarkBackground={true}>
  <Banner />
  <Features />
  <MultipurposeSection dividerTop={true} />
  <ServicesSection />
  <MultipurposeSection content={skillSectionContent.data} />
  <ProjectsSection content={{ options: { layout: "masonry", limit: 7 } }} />
  <TeamSection />
  <TestimonialGrid />
  <BlogSection />
</Base>

From this, you can see which component controls each homepage block. Many sections also accept props such as content, hasSectionBackground, hasLightBackground, and hasDarkAppearance to tune their appearance per page.

Step 3: Modify the Markdown file

Next, open the related section content file, for example:

src/content/sections/english/about-section.md

Example frontmatter:

---
enable: true # Boolean: true | false
imagePosition: "left" # Enum: left | right

images:
  large: "/images/about-us/about-1-a.jpg"
  small: "/images/about-us/about-1-b.jpg"

title: |
  More than 25+ years we provide IT solutions
description: |
  We help organizations modernize technology with clear planning, focused delivery, and maintainable systems.

# EXTRATYPE OPTIONS: "skills" | "list-x" | "list-y" | "stats" | "none"
extraType: "none"

buttons:
  - enable: true
    label: "More About Us"
    url: "/about"
    variant: "fill"
    hoverEffect: "magnetic-text-flip"
---

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:

Open src/layouts/components/sections/Section.astro (or the matching section component). Section.astro is the component that reads about-section.md
Adjust the Astro markup, logic, or styling

Techlo sections typically follow this pattern:

fetch default content with getEntryCTM("sections", "...", Astro.currentLocale)
merge optional content overrides passed in from the page
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.

Page-Level Content Overrides

Page entries can override a section’s default content without touching the section file. For example, Home 02’s entry overrides the Team section’s title:

teamSection:
  enable: true
  title: "Our expert team is always ready to help you"

The page passes that object into the section component, which merges it over the section’s own Markdown defaults. A block works only if the page’s route file passes it on, so check the route file. In the Astro and Sanity editions, Home 01’s route file doesn’t pass servicesSection, so that block in its entry changes nothing. In the Tina edition, every block in a page’s form is passed on. See What Is Editable In Tina.

ctaSection is the exception: Base.astro reads it, so a page’s entry can change its closing call to action without any change to the route file.