Customizing Layouts

The Looka 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/

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:

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

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

---
import Base from "@/layouts/Base.astro";
import { getEntryCTM } from "@/lib/contentParser.astro";
import AboutUs from "@/components/sections/AboutUs.astro";
import Customers from "@/components/sections/Customers.astro";
import HomeBanner from "@/components/sections/HomeBanner.astro";
import HowItWorks from "@/components/sections/HowItWorks.astro";
import Testimonial from "@/components/sections/Testimonial.astro";
import BlogSection from "@/components/sections/BlogSection.astro";
import CallToAction from "@/components/sections/CallToAction.astro";
import ServicesSection from "@/components/sections/ServicesSection.astro";
import PortfolioSection from "@/components/sections/PortfolioSection.astro";
import { generatePaths } from "@/lib/utils/languageParser.ts";

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

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

<Base {...page?.data}>
  <HomeBanner />
  <Customers />
  <AboutUs />
  <ServicesSection content={page?.data.services_section} />
  <HowItWorks />
  <PortfolioSection />
  <Testimonial />
  <BlogSection />
  <CallToAction content={page?.data.call_to_action_section} />
</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/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 and Frontmatter Guide.

src/content/sections/about-us.md

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