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

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

---
import Base from "@/layouts/Base.astro";
import WhyUs from "@/components/sections/WhyUs.astro";
import { getEntryCTM } from "@/lib/contentParser.astro";
import { generatePaths } from "@/lib/utils/i18nUtils";
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.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:

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

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