Hugo Advance Docs

Services Page

Site Config

You can configure some of the services page options in the config.toml

# content/en/services/_index.md
---
title: 'Services'
description: 'We deliver a complete range of digital services.'
date: 2018-02-10T11:52:18+07:00
menu:
  main:
      identifier: services
      url: /services/
      weight: 1
  footer_primary:
      identifier: services_footer
      url: /services/
      weight: 1
header_transparent: true
hero:
  background: "images/services/services-hero-1600.jpg"
  blend_mode: "overlay"
  theme: "primary"
---

Changing the hero image

You can configure how image at the top of the services page looks by editing the markdown file located at /content/en/services/_index.md and modifying the frontmatter.

header_transparent: true
hero:
  background: "images/services/services-hero-1600.jpg"
  blend_mode: "overlay"
  theme: "primary"

By adding a image to hero.background a hero image will appear fullwidth at the top of the page. If you like the background image to blend into the background color then set blend_mode: overlay.

List of services

The services page automatically displays all of your service pages in a grid. Any markdown files located in content/en/services will be displayed (excluding _index.md)

Adding services

To create a new service, create a new markdown file in the content/en/services/ directory. For example content/en/services/my-new-service.md. Add the following frontmatter.

---
title: 'Branding'
description: 'The expression of a brand including its name, trademark, and visual appearance.'
date: 2019-10-03
menu:
  main:
    weight: 4
    parent: "services"
weight: 4
icon: 'images/services/icons8-adobe_indesign.png'
thumbnail: 'https://source.unsplash.com/hqCEQTc5gZA/640x360'
image: 'https://source.unsplash.com/hqCEQTc5gZA/640x450'
hero:
  background: ""
  blend_mode: "normal"
  theme: "base"
---

# Some text about the service

this is the content paragraph about the service

Renaming the services page

A common request is to rename the services page. Say to something like “Courses”.

  1. rename the folder content/services to content/courses
  2. This will also change the URL from /services -> /courses.
  3. Update the menus.
  4. rename the layout folder layouts/services to layouts/courses