GatsbyCar - Car Rental Theme

GatsbyCar - Gatsby Car Rental Theme RentCar
About
Docs
Fleet
Blog

Documentation

Step 5

Managing Content with Decap CMS

Complete guide to editing every page and collection in Decap CMS.

Managing Content with Decap CMS

This guide covers all content you can edit through Decap CMS. Each collection has a specific purpose. Follow each section carefully.

Overview of Collections

Collection Purpose File Location
Home Page Homepage content content/data/home.json
About Page About page content content/data/about.json
Contact Page Contact page content content/data/contact.json
Cars (Fleet) Car listings content/car/*.md
Blog Posts Blog articles content/blog/*.md
Widget Setting Site-wide settings content/data/widget.json
Navbar Navigation menu content/data/widget.json
Car List Homepage car display content/data/widget.json
Contact Widget Footer contact menu content/data/widget.json

Every change you save in Decap CMS will be written to these files automatically. Gatsby will detect the change and rebuild the website.

Collection 1: Home Page

The Home Page collection controls everything on the homepage.

Fields explained:

Title

  • Type: String
  • Purpose: Homepage title for SEO and browser tab
  • Example: GatsbyCar - Gatsby Car Rental Theme

Description

  • Type: String
  • Purpose: Homepage description for search engines
  • Example: Launch your car rental website in hours with GatsbyCar.
  • Keep it between 150 and 160 characters for best SEO results

Cover Image

  • Type: Image
  • Purpose: Main hero image at the top of the homepage
  • Recommended size: 1200 x 800 pixels
  • Format: WebP or JPG

Brand Image

  • Type: Image
  • Purpose: Brand banner displayed below the hero
  • Recommended size: 1400 x 200 pixels
  • Format: WebP or PNG

Intro Cover Image

  • Type: Image
  • Purpose: Secondary image in the intro section
  • Recommended size: 800 x 600 pixels
  • Format: WebP or JPG

Intro

  • Type: String
  • Purpose: Main headline text
  • Example: Launch Your Car Rental Website in Hours
  • Keep it short and impactful (under 60 characters)

Intro Text

  • Type: Text
  • Purpose: Paragraph explaining your value proposition
  • Example: GatsbyCar is a complete Gatsby theme for independent car rental operators.
  • Aim for 2 to 3 sentences

Intro Button

  • Type: String
  • Purpose: Text on the call-to-action button
  • Example: Get Gatsby Car Now

Intro Button Link

  • Type: String
  • Purpose: URL the button points to
  • Example: https://creativitaz.gumroad.com/l/gatsbycar

Why Title

  • Type: String
  • Purpose: Section heading for the "Why Us" area
  • Example: Why GatsbyCar

Why Text

  • Type: Text
  • Purpose: Short description under the Why title
  • Example: Built for operators who want direct bookings and full control.

Icon 1 through Icon 4

  • Type: String
  • Purpose: Four feature titles
  • Example: Gatsby 5 + React 18, Decap CMS, Direct Email Booking, Netlify Ready

Icon Text 1 through Icon Text 4

  • Type: String
  • Purpose: Four feature descriptions
  • Example: Modern Jamstack stack with fast build and clean SEO.

Customer Title

  • Type: String
  • Purpose: Heading for the customer section
  • Example: Built for Independent Operators

Customer Text

  • Type: Text
  • Purpose: Paragraph describing your customer value
  • Example: Stop paying 15-25% commission to OTAs.

Customer Cover Image

  • Type: Image
  • Purpose: Image for the customer section
  • Recommended size: 1200 x 600 pixels

How to edit:

  1. Click Home Page in the sidebar
  2. Click Content Home Page
  3. Edit any field
  4. Click Save in the top right
  5. Refresh your website to see the changes

Collection 2: About Page

The About Page collection controls the about page content.

Fields explained:

Title

  • Type: String
  • Purpose: About page title for SEO
  • Example: About | GatsbyCar - Modern Gatsby Car Rental Theme

Description

  • Type: String
  • Purpose: About page description for SEO
  • Example: Learn what GatsbyCar is, who it is for, and what is included.
  • Keep it under 160 characters

Cover Image

  • Type: Image
  • Purpose: Main image on the about page
  • Recommended size: 1200 x 800 pixels

Intro

  • Type: Text
  • Purpose: Opening paragraph of the about page
  • Example: GatsbyCar is a modern car rental website theme built with Gatsby and Decap CMS.
  • Aim for 2 to 4 sentences

Content

  • Type: Text
  • Purpose: Detailed about content
  • Example: GatsbyCar ships with a complete car rental website: fleet listing, car detail pages, about, contact, and a blog.
  • Can be longer, up to 5 to 6 sentences

How to edit:

  1. Click About Page in the sidebar
  2. Click Update About
  3. Edit any field
  4. Click Save

Collection 3: Contact Page

The Contact Page collection controls the contact page and the booking form.

Fields explained:

Title

  • Type: String
  • Purpose: Contact page title for SEO
  • Example: Contact | GatsbyCar - Gatsby Car Rental Theme

Description

  • Type: String
  • Purpose: Contact page description for SEO
  • Example: Get in touch about GatsbyCar. Questions about licensing, custom builds, or support?

Heading

  • Type: String
  • Purpose: Main heading shown on the contact page
  • Example: Contact Us

Intro

  • Type: Text
  • Purpose: Short introduction above the form
  • Example: Questions about GatsbyCar, custom builds, or licensing? Get in touch with our team.

Phone

  • Type: String
  • Purpose: Your phone number (with country code)
  • Example: +1 555 123 4567

Email

  • Type: String
  • Purpose: Your public email address
  • Example: hello@yourdomain.com

Address

  • Type: String
  • Purpose: Your business address
  • Example: 123 Main Street, City, Country

Form Action

  • Type: String
  • Purpose: Email address where form submissions are sent
  • Example: your@email.com
  • This is the most important field. All bookings from the form will be sent here.

Name Placeholder

  • Type: String
  • Purpose: Placeholder text for the name input field
  • Example: Your Name

Phone Placeholder

  • Type: String
  • Purpose: Placeholder text for the phone input field
  • Example: Phone / WhatsApp

Message Placeholder

  • Type: String
  • Purpose: Placeholder text for the message textarea
  • Example: Your Message

Button Text

  • Type: String
  • Purpose: Text shown on the submit button
  • Example: Send Message

How the form works:

  1. Visitor fills out the form on your contact page
  2. Clicks "Send Message"
  3. Submission is forwarded to the email in Form Action
  4. You receive the message in your inbox
  5. No server or database required

How to edit:

  1. Click Contact Page in the sidebar
  2. Click Update Contact
  3. Edit any field
  4. Click Save

Collection 4: Cars (Fleet)

The Cars collection manages all car listings. Each car is a separate Markdown file.

Fields explained:

Title

  • Type: String
  • Purpose: Name of the car
  • Example: Mercedes-Benz S-Class

Publish Date

  • Type: Datetime
  • Purpose: Date the car was added
  • Format: 2024-01-15T10:00:00.000Z
  • Used for sorting

Description

  • Type: String
  • Purpose: Short summary of the car
  • Example: Rent a Mercedes-Benz S-Class for executive travel.
  • Keep it under 160 characters

Cover Image

  • Type: Image
  • Purpose: Main photo of the car
  • Recommended size: 1200 x 800 pixels

Intro

  • Type: String
  • Purpose: Short tagline
  • Example: Executive Mercedes-Benz S-Class rental

Brand

  • Type: String
  • Purpose: Car manufacturer
  • Example: Mercedes-Benz

Car Model

  • Type: String
  • Purpose: Specific model name
  • Example: S-Class

Transmission

  • Type: String
  • Purpose: Transmission type
  • Example: Automatic

Capacity

  • Type: String
  • Purpose: Number of seats
  • Example: 5 Seats

Year

  • Type: String
  • Purpose: Model year
  • Example: 2024

Color

  • Type: String
  • Purpose: Exterior color
  • Example: Black

Price

  • Type: String
  • Purpose: Rental price
  • Example: 800

Duration

  • Type: String
  • Purpose: Price duration
  • Example: Day

Content

  • Type: Markdown
  • Purpose: Full description of the car
  • Supports headings, lists, links, and images

How to add a new car:

  1. Click Cars (Fleet) in the sidebar
  2. Click New Car at the top
  3. Fill in all fields
  4. Write content in Markdown
  5. Click Save
  6. Click Publish

How to edit an existing car:

  1. Click Cars (Fleet) in the sidebar
  2. Click the car you want to edit
  3. Make your changes
  4. Click Save

How to delete a car:

  1. Click Cars (Fleet) in the sidebar
  2. Click the car you want to delete
  3. Click Delete in the top right
  4. Confirm deletion

Example Markdown for car content:

## Mercedes-Benz S-Class — The Benchmark of Luxury

The S-Class is the world's best-selling luxury saloon. For decades, it has been the choice of executives, diplomats, and heads of state.

## Why Rent the S-Class

- **Executive comfort** — rear seats designed for work
- **Advanced technology** — MBUX infotainment system
- **Safety first** — the most advanced safety systems

## How to Book

Send us an email with your name, pickup date, location, and destination.

Collection 5: Blog Posts

The Blog Posts collection manages all blog articles. Each article is a separate Markdown file.

Fields explained:

Title

  • Type: String
  • Purpose: Article title
  • Example: How to Start a Car Rental Business

Publish Date

  • Type: Datetime
  • Purpose: Date the article was published
  • Format: 2024-01-15T10:00:00.000Z

Description

  • Type: String
  • Purpose: Short summary
  • Example: A practical guide to launching your car rental business online.
  • Keep it under 160 characters

Cover Image

  • Type: Image
  • Purpose: Main image of the article
  • Recommended size: 1200 x 800 pixels

Tags

  • Type: List
  • Purpose: Category labels for the article
  • Example: car-rental, business, guide
  • Each tag becomes a clickable link on the article page
  • Tags automatically create tag pages at /tags/

Content

  • Type: Markdown
  • Purpose: Full article body
  • Supports headings, lists, links, images, code blocks

How to add a new article:

  1. Click Blog Posts in the sidebar
  2. Click New Post
  3. Fill in title, date, description
  4. Upload a cover image
  5. Add tags (optional)
  6. Write your article in Markdown
  7. Click Save
  8. Click Publish

How to edit an article:

  1. Click Blog Posts in the sidebar
  2. Click the article you want to edit
  3. Make your changes
  4. Click Save

Markdown basics for articles:

## Heading Level 2

Regular paragraph text goes here.

### Heading Level 3

**Bold text** and *italic text*.

- Bullet list item 1
- Bullet list item 2

1. Numbered list item
2. Another item

[Link text](https://example.com)

![Image alt text](/images/photo.jpg)

Tags explained: When you add tags like car-rental and business, the system automatically:

  • Creates a tag page at /tags/car-rental/
  • Creates a tag page at /tags/business/
  • Lists all articles with that tag
  • Shows the tag as a clickable badge on the article page

This helps readers discover related content and improves SEO.

Collection 6: Widget Setting

The Widget Setting collection controls site-wide settings.

Fields explained:

Title

  • Type: String
  • Purpose: Website title
  • Example: GatsbyCar - Car Rental Theme

Description

  • Type: String
  • Purpose: Website description for SEO
  • Example: Launch your car rental website in hours with GatsbyCar.

Slogan

  • Type: String
  • Purpose: Short tagline shown next to the logo
  • Example: GatsbyCar

Logo Image

  • Type: Image
  • Purpose: Your website logo
  • Recommended size: 400 x 200 pixels
  • Format: PNG or WebP with transparent background

Contact Title

  • Type: String
  • Purpose: Heading for the contact widget
  • Example: Get in Touch

Contact Text

  • Type: Text
  • Purpose: Description in the contact widget
  • Example: Questions about GatsbyCar, custom builds, or licensing? Talk to us.

Contact Button

  • Type: String
  • Purpose: Button text in the contact widget
  • Example: Hire Us

Contact Link

  • Type: String
  • Purpose: URL the contact button points to
  • Example: https://www.fiverr.com/creativitas/create-your-custom-website-and-app

Car Title

  • Type: String
  • Purpose: Heading for the car section
  • Example: Everything You Need to Launch

Car Description

  • Type: Text
  • Purpose: Description for the car section
  • Example: Fleet listing, car detail pages, blog, Decap CMS, and direct email booking.

Car Info

  • Type: String
  • Purpose: Small text above the car title
  • Example: Built with Gatsby 5, React 18, and Decap CMS.

Car Button

  • Type: String
  • Purpose: Button text for the car section
  • Example: Explore All Fleet

Car Button Link

  • Type: String
  • Purpose: URL the car button points to
  • Example: /car

Payment Label

  • Type: String
  • Purpose: Payment section heading on car detail pages
  • Example: One-Time Payment

Bank

  • Type: String
  • Purpose: Payment method name
  • Example: Gumroad

Account Name

  • Type: String
  • Purpose: Account holder name
  • Example: GatsbyCar

Account Number

  • Type: String
  • Purpose: Price or account number
  • Example: $79

Blog Meta Title

  • Type: String
  • Purpose: Title for the blog listing page
  • Example: Blog | GatsbyCar

Blog Meta Description

  • Type: Text
  • Purpose: Description for the blog listing page
  • Example: Guides, tips, and insights on car rental, direct booking, and building websites with Gatsby.

Car Page Meta Title

  • Type: String
  • Purpose: Title for the car listing page
  • Example: Cars | GatsbyCar

Car Page Meta Description

  • Type: Text
  • Purpose: Description for the car listing page
  • Example: Browse our fleet of well-maintained, latest-model vehicles.

How to edit:

  1. Click Widget Setting in the sidebar
  2. Click Widget Setting
  3. Edit any field
  4. Click Save

Collection 7: Navbar

The Navbar collection controls the navigation menu and footer menu.

Fields explained:

Navbar Menu

  • Type: List
  • Purpose: Main navigation menu at the top of every page
  • Each item has:
    • Nav Menu — The label shown to users
    • Link URL — The URL path

Footer Menu

  • Type: List
  • Purpose: Menu links in the footer
  • Same structure as Navbar Menu

How to add a menu item:

  1. Click Navbar in the sidebar
  2. Click Navbar Setting
  3. Scroll to Navbar Menu
  4. Click Add to add a new item
  5. Fill in Nav Menu and Link URL
  6. Click Save

How to reorder menu items:

  1. Click and hold the drag handle (six dots icon)
  2. Drag the item up or down
  3. Release to drop in new position
  4. Click Save

Example menu items:

Home         →  /
About        →  /about/
Fleet        →  /car/
Blog         →  /blog/
Contact      →  /contact/

Collection 8: Car List (Homepage)

The Car List collection controls the car display on the homepage.

Fields explained:

Car Display

  • Type: List
  • Purpose: The cars shown on the homepage grid
  • Each item has:
    • Car Image — Photo of the car
    • Car Title — Label shown below the image
    • Link URL — Where the car links to

How to add a car to the homepage:

  1. Click Car List (Homepage) in the sidebar
  2. Click Car List Setting
  3. Scroll to Car Display
  4. Click Add
  5. Upload a car image
  6. Enter a title
  7. Enter a link URL
  8. Click Save

Example car items:

Car Image:    car1.webp
Car Title:    Mercedes-Benz Rental
Link URL:     /car/mercedes-benz/

Car Image:    car2.webp
Car Title:    BMW Rental
Link URL:     /car/bmw/

How to remove a car:

  1. Click the trash icon next to the item
  2. Confirm deletion
  3. Click Save

Collection 9: Contact Widget

The Contact Widget collection controls the contact menu in the footer.

Fields explained:

Contact Menu

  • Type: List
  • Purpose: Contact links shown in the footer
  • Each item has:
    • Contact Menu — The label shown
    • Link URL — The URL

How to add a contact link:

  1. Click Contact Widget in the sidebar
  2. Click Contact Setting
  3. Scroll to Contact Menu
  4. Click Add
  5. Fill in Contact Menu label and Link URL
  6. Click Save

Example contact items:

Call     →  tel:+1234567890
Chat     →  https://wa.me/1234567890
Email    →  mailto:hello@yourdomain.com
Buy      →  https://creativitaz.gumroad.com/l/gatsbycar

How Changes Are Saved

When you click Save in Decap CMS:

  1. The content is written to the JSON or Markdown file
  2. Gatsby detects the file change
  3. The website rebuilds in the background
  4. Your browser refreshes with new content

In local development mode, this takes a few seconds.

In production mode (Netlify), the rebuild takes about 1 to 3 minutes. Changes appear on your live site after the rebuild completes.

Best Practices

Keep descriptions short SEO descriptions should be under 160 characters. Anything longer gets cut off in search results.

Use WebP images WebP images are smaller and load faster than JPG or PNG. Convert your images before uploading.

Compress images before upload Large images slow down your website. Aim for under 200 KB per image.

Use descriptive file names Instead of IMG_1234.jpg, use mercedes-s-class.jpg. This helps with SEO.

Write meaningful tags Tags like car-rental and business are better than tag1 and tag2.

Test after every change Always open your website in a browser and check that the change looks correct.

Next Step

You now know how to manage all content. Proceed to:

Push to GitHub

Need Help?

If you get stuck, contact us:

All Documentation

Get in Touch

Questions about GatsbyCar, custom builds, or licensing? Talk to us.

Hire Us

GatsbyCar - Gatsby Car Rental Theme

RentCar

Home
About
Fleet
Blog
Tags
Contact
Buy Themes
Hire Us