# Customizing Layouts

## Customizing Layouts

Each of our themes is structured with different sections that you can customize. Every page in the theme consists of various sections. 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/`)

For example, let's say you want to remove the video part from the "About Us" section on the homepage. Below is a visual representation of this section:

<div class="border border-dark">![alt text](/layouts/looka.png)</div>

There are **two ways** to remove or disable this video part:

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

### Customizing the Section Markdown File

If you want to disable the video part of the "About Us" 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 "About Us" section. For example, the homepage layout file is located at:

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

For other pages like blog or case studies (theme-specific), the corresponding layout files are:

- `src/pages/[...lang]/blog/index.astro`
- `src/pages/[...lang]/case-studies/index.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 following code that imports the sections:

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












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

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

<Base {...homepage?.data} homepage={true}>
  <HomeBanner />
  <Customers />
  <AboutUs />
  <ServicesSection content={homepage?.data.servicesSection} />
  <HowItWorks />
  <PortfolioSection />
  <Testimonial />
  <BlogSection />
  <CallToAction content={homepage?.data.callToActionSection} />
</Base>
```

From this code, you can see that the `AboutUs` section is responsible for the "About Us" video part.

#### Step 3: Modify the Markdown file

Next, locate the corresponding Markdown file for the section. For example, the file for the "About Us" section is located at:

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

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

> If you're new to Markdown or frontmatter, check out [Markdown Guide](https://www.markdownguide.org/cheat-sheet/) and [Frontmatter Guide](https://mystmd.org/guide/frontmatter).

```mdx
---
enable: true # Controls whether this section is visible across all pages
title: "Expertise, Integrity, and Transformable Solutions"
cta_btn:
  enable: true
  label: "Learn More About Us"
  url: "/about"
  rel: ""
  target: ""

achievements:
  enable: true
  list:
    - value: "500"
      prepend_value: ""
      append_value: "+"
      description: "We have delivered outstanding results for over 500 projects"
    - value: "20"
      prepend_value: ""
      append_value: "+"
      description: "With over two decades of experience, our consultants bring unparalleled expertise"
    - value: "1"
      prepend_value: "$"
      append_value: "B+"
      description: "We’ve helped our clients generate over $1 billion in revenue"

banner:
  enable: true
  image:
    src: "/images/about-us-banner.jpg"
    alt: "Example Alt Text"
  video:
    src: "CHSnz0bCaUk" # Video ID (from YouTube, Vimeo, or local video file)
    type: "" # For local videos, specify the type (e.g., "video/mp4")
    provider: "youtube" # Options: "youtube", "vimeo", or "html5"
    poster: "" # Thumbnail image for the video
    autoplay: true # Set to true to autoplay, false for manual start
    id: "about-us-video"
---
```


In the code above, the `banner` field controls the video part of the "About Us" section. To hide the video, simply change the `enable` field to `false`.

### Customizing the Section Layout File

If you want more advanced customization, such as modifying the layout of the section itself, you will need to adjust the corresponding layout file for that section. To do this:

1. **Locate the layout file** for the section in the `src/layouts/components/sections/` folder. For the "About Us" section, the layout file is likely found in `src/layouts/components/sections/AboutUs.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.