# Customizing Layouts

## 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:

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`

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:

```astro
// src/pages/[...lang]/index.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:

```yaml
---
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:

1. Open `src/layouts/components/sections/Section.astro` (or the matching section component). `Section.astro` is the component that reads `about-section.md`
2. 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:

```yaml
# src/content/homepage/english/home-two.md
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](../../features/what-is-editable-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.