Customizing Layouts

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/

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

There are two ways to do it:

Customizing the section’s Markdown file.
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

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:

---
import Base from "@/layouts/Base.astro";
import WhyUs from "@/components/sections/WhyUs.astro";
import { getEntryCTM } from "@/lib/contentParser.astro";
import { generatePaths } from "@/lib/utils/languageParser.ts";

import FaqSection from "@/components/sections/FaqSection.astro";
import HomeBanner from "@/components/sections/HomeBanner.astro";
import Features from "@/components/sections/FeaturesSection.astro";
import CallToAction from "@/components/sections/CallToAction.astro";
import PricingSection from "@/components/sections/PricingSection.astro";
import IntegrationSection from "@/components/sections/IntegrationSection.astro";
import TestimonialSection from "@/components/sections/TestimonialSection.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.faq_section} />
  <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/why-us.md

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

---
enable: true
subtitle: Why Upstart
title: Take Control with <br /> **Privacy-Focused** Analytics
layout_type: 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 essential website metrics - pageviews, visitor demographics, and custom events. No unnecessary data.
    bounced_content:
      enable: true
      bg_image: "/images/why-us/3.png"
      list:
        - Drag me!
        - Filtering
        - Teams
        - Visitor info
        - Page views
        - Languages
        - Compare
        - Device
        - Traffic sources
---

The bounced_content field controls the animated text effects of the Why Upstart section. You can update these animations by modifying the list of items.

Customizing the Section Layout File

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

Locate the layout file for the section in the src/layouts/components/sections/ folder. For the Why Upstart section, the layout file is likely found in src/layouts/components/sections/WhyUs.astro.
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.