Homepage Sections

Homepage Sections

Profile image
Miro Kosut
Jan 28, 2024 • 2 min read

There are six customizable sections on the homepage.

Creating pages with corresponding slugs allows you to customize the content of these sections. Here is the list of the six sections and corresponding page slugs that the content is retrieved from:

  • Hero (page slug "hero")
  • Section One (page slug "section-one")
  • Section Two (page slug "section-two")
  • Section Three (page slug "section-three")
  • Section Four (page slug "section-four")
  • Section Five (page slug "section-five")

Please recall the Homepage Layout to understand their position.

Hero Section

Hero section is the first tile on the home page. You can customize it by creating a page with a slug "hero" and adjusting its following attributes:

Title

The hero section title corresponds to the page title. Please ensure that the page slug remains "hero".

Tagline

The hero section can have a short tagline above the title. This tagline always corresponds to the site title and cannot be changed.

Subtitle

The subtitle of the hero section corresponds to the custom excerpt.

Content

The content of the hero section corresponds to the page content. You can use Ghost Editor to create any content, including the cards such as buttons, callouts, toggles, videos, images, galleries, etc. 🥳

However, it is recommended to keep the content short. The following content works best:

  • Use a button if the bottom image is set
  • Use a video or a longer paragraph if the bottom image is not set

Bottom Image

You can optionally set the bottom image of each section by setting a feature image.

Sections One to Five

You can customize these sections by creating pages with slugs "section-one" to "section-five" and adjusting their following attributes:

Tagline

These sections can have a short tagline above the title. This tagline corresponds to the custom excerpt of each page.

Content

The content of these sections corresponds to the page content. You can use Ghost Editor to create any content, including the cards such as buttons, callouts, toggles, videos, images, galleries, etc. 🥳

However, there are guidelines regarding the content length to make the home page look beautiful:

  • Section One should be just a little longer than Section Two
  • Section Three and Section Four should have the same lengths
  • Section Five should be long enough

Generally speaking, all these sections should cover all available space when the website is open on a desktop. On smaller screens, sections stack into one column, and the length of each does not matter. Please take a look at the desktop version to make the homepage look nice.

Bottom Image

You can optionally set the bottom image of each section by setting a feature image of each page. If you do not prefer the fade out effect, you can include an Image Card within the Ghost Editor instead.