Configuration

In your sites root folder you will find a file called config.toml. Open this file with your text editor or IDE.

Sitewide configuration

  • At the very top you will see a baseURL field for your site URL. Add your sites URL here.
  • theme sets up the used theme. If your theme is located in /themes/themename then the value for this parameter is themename.

    If you use theme components you can change this parameter to the following format:

    themes = ["theme1", "theme2", "themename"]
    

    Make sure, that your theme is the last item in this list. Hugo will load these themes and module from the left and files with identical names will be overwritten subsequently.

  • title is for your site’s title.

Parameter Configuration

You can change the whole landing page by changing the paramters in config.toml.

In customHead you can add code to your <head>. This is useful to add for instance you analytics code.

This is followed by the configuration of various sections on the page:

[params.navigation]
logo = "images/logo.png"
home = "Home"
about = "About"
service = "Services"
contact = "Contact"

The [params.navigation] section lets you configure the navigation bar of the theme.

Hero Section

[params.hero]
enable            = true
bg                = "images/header-bg.jpg"
title             = "BRING YOUR PRODUCT TO LIGHT"
subtitle          = "Lorem ipsum dolor sit amet"
btnText           = "Get Started"
disableCountdown  = false
countdownYear = "2020"
countdownMonth = "12"
countdownDay  = "31"

The hero section displays an introduction into the product or service you want to present. To disable the whole section set enable to false. To disable the countdown set disableCountdown to true. You can configure the date this section is counting down to by setting countdownYear, countdownMonth and countdownDay to this date.

About Section

[params.about]
enable      = true
heading     = "Lorem ipsum dolor sit amet"
description = "Lorem ipsum dolor sit amet"

[[params.about.sliderItem]]
image   = "images/about/1.jpg"
[[params.about.sliderItem]]
image   = "images/about/2.jpg"

The about section lets you show more information about your product or service. If you do not wish to add a subtitle then just leave this parameter empty or delete it. To disable the whole section set enable to false.

The [[params.about.sliderItem]] blocks (mind the double brackets) define images in the slider of the about section. Copy as many items as you wish to appear in the section, each time repeating the header of the block.

Service Section


# Service Section
[params.service]
enable      = true
title       = "Find Better Solutions Build Better Products"
subtitle    = "Lorem ipsum dolor sit amet"

[[params.service.serviceItem]]
icon    = "tf-strategy"
title   = "Fully Responsive"
description = "Lorem ipsum dolor sit amet"
delay   = "0s"

The service section contains a subscription form that you can use with Mailchimp to have your visitors subscribe to latest news about your product. If you do not wish to add a subtitle then just leave this parameter empty or delete it. To disable the whole section set enable to false.

Next you will see a number of [[params.service.serviceItem]] sections in the configuration. Each of these blocks defines one item of the services you provide. The value in the icon parameter is an icon from the themefisher icon font. You can select from a wide range of icons on our overview page.

After you added title and description you can set a delay of the animation for the service items to transition into the page. Have a look at the sample configuration, we use a time interval of 0.2 seconds between the items. The format of this variable has to be 1s or 1.1s.

Call to Action Section

[params.cta]
enable      = true
bg          = "images/call-to-action.jpg"
title       = "Subscribe to our mailing list"
subtitle    = "Lorem ipsum dolor sit amet"

The call to action section contains a subscription form that you can use with Mailchimp to have your visitors subscribe to latest news about your product. If you do not wish to add a subtitle then just leave this parameter empty or delete it. To disable the whole section set enable to false.

Contact Section

[params.contact]
enable      = true
title       = "Get In Touch"
subtitle    = "Lorem ipsum dolor sit amet"

The contact section contains a contact form that you can use with Mailchimp to have your visitors send you messages. If you do not wish to add a subtitle then just leave this parameter empty or delete it. To disable the whole section set enable to false.

Improve this page on Github  — Last updated:  Tue, Dec 29, 2020