# Customizing Layouts

## Customizing Layouts

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

The `Upstart` theme is structured with different sections that you can customize. Each page in the theme is made up of various sections. If you want to modify a specific section, you can find the layout and content files in the following folders:

- **Layout files:** `src/layouts/components/sections/`
- **Content files (Markdown):** `src/content/sections/<language>/` (e.g., `english/`, `french/`, `arabic/`)

In the Tina edition, the content is under **Section defaults** at `/admin/`, and each page can have its own version. In the Sanity edition, it is under **Sections** in the Studio. The layout files are the same in all three editions.

For example, let's say you want to edit the animated text effects in the "Why Upstart" section on the homepage. Below is a visual representation of this section:

![alt text](./upstart-homepage.jpg)

There are **two ways** to do it:

1. Customizing the section's Markdown file.
2. Customizing the section's Layout file (for developers).

### When to Use Markdown vs. Layout Files

- Use **Markdown files** (`.mdx`) for content changes, such as updating text, toggling features, or modifying section settings.
- Use **Layout files** (`.astro`) for structural changes, such as modifying animations, design elements, or layout styles.

### Customizing the Section Markdown File

If you want to update the animated text effects of the `Why Upstart` section using the Markdown file, follow these steps:

#### Step 1: Locate the Page Layout File

Start by finding the page layout file that includes the `Why Upstart` section. For example, the homepage layout file is located at:

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

For other pages like blog or integration, the corresponding layout files are:

- `src/pages/[...lang]/blog/index.astro`
- `src/pages/[...lang]/integration/index.astro`
- `src/pages/[...lang]/features.astro`
- `src/pages/[...lang]/pricing.astro`

#### Step 2: Find the Section in the Layout File

Open the layout file (e.g., `index.astro` for the homepage) and look for the code that imports the sections and places them on the page. This is a shortened view of it:

```jsx
// src/pages/[...lang]/index.astro
---











export function getStaticPaths() {
  return generatePaths();
}

const homepage = await getEntryCTM("homepage", "-index", Astro.currentLocale);
---

<Base {...homepage.data}>
  <HomeBanner />
  <Features />
  <WhyUs />
  <PricingSection />
  <TestimonialSection />
  <IntegrationSection />
  <FaqSection content={homepage.data.faqSection} />
  <CallToAction />
</Base>
```

From this code, you can see that the `WhyUs` section is responsible for the `Why Upstart` section.

#### Step 3: Modify the Markdown File

Next, locate the corresponding Markdown file for the section. For example, the file for the `Why Upstart` section is located at:

- `src/content/sections/english/why-us.md`

Open the file, and you will see something like this, shortened here:

```mdx
---
enable: true
subtitle: Why Upstart
title: Take Control with <br /> **Privacy-Focused** Analytics
layoutType: creative # creative / modern (default - creative)

list:
  - title: Put Privacy First
    image: "/images/why-us/1.png"
    description: |
      Unlike other platforms, Upstart doesn't track users across websites or collect any personally identifiable information.
  - title: Own Your Data
    image: "/images/why-us/2.png"
    description: |
      Upstart is self-hosted, meaning your website data stays on your server. You have complete control.
  - title: Focus on What Matters
    description: |
      Upstart tracks the essential website metrics you care about - pageviews, visitor demographics, and custom events. No unnecessary data.
    bouncedContent:
      enable: true
      bgImage: "/images/why-us/3.png"
      list:
        - Drag me!
        - Filtering
        - Teams
        - Visitor info
        - Page views
        - Languages
        - Compare
        - Device
        - Traffic sources
---
```

The `bouncedContent` field controls the animated text effects of the `Why Upstart` section. You can update these animations by modifying the list of items. In other languages, edit the same file in that language's folder.

The "Why us" sections have two layouts: set `layoutType` to `creative` or `modern`, in `why-us.md` or in `why-us-two.md`, which the features page uses.

To hide a section on every page that uses it, set `enable: false` in its file. The home banner and the integration section don't have this switch: to hide one, delete its line from the page file in `src/pages/[...lang]/`.

### Customizing the Section Layout File

If you want more advanced customization, such as modifying the layout of the section itself, follow these steps:

1. **Locate the layout file** for the section in the `src/layouts/components/sections/` folder. For the `Why Upstart` section, the layout file is `src/layouts/components/sections/WhyUs.astro`.
2. **Make changes** to the layout file as per your requirements. You can adjust the HTML structure, styling, or logic in this file to suit your needs.

By following these steps, you can easily customize the content and design of the `Why Upstart` section as well as other sections in the `Upstart` theme.