In this chapter, we will familiarize ourselves with the homepage layout, explain each tile, and show you how to customize it.
The following image shows the homepage layout:
🤓
You may have noticed a few warnings on your homepage after you have activated the theme. Bento is self-documenting and can give you a hint directly on the homepage whenever something is missing!
Hero
By default, Hero tile shows the following:
Title = Site Title
Subtitle = Site Description
Bottom Image = Publication Cover
You can completely customize the Hero tile. Please refer to the chapter Homepage Sections for more information.
💡
You may use these default settings for search engine indexing, while showing completely different information on the home page.
Search
By default, Search has the following properties:
Title = "Search"
Font Color = Dark
Background Color = White
Image = "Magnifying Glass"
You can completely customize or even replace the Search tile by Tile One. Please refer to the chapter Special Pages for more information.
Sign In (or Account)
When the member is logged out, the "Sign In" tile is shown. This tile links to the sign-in page of the website.
When the member is logged in, the "Account" tile is shown. This tile links to the account page of the website.
Sign In
By default, Sign In has the following properties:
Title = "Sign In"
Font Color = White
Background Color = Theme Color
Image = "Keyhole"
You can completely customize or even replace the Sign In tile by Tile Two. Please refer to the chapter Special Pages for more information.
Account
By default, Account has the following properties:
Title = "Account"
Font Color = White
Background Color = Theme Color
Image = "User"
You can completely customize or even replace the Account tile by Tile Two. Please refer to the chapter Special Pages for more information.
Membership
The Membership tile shows different information depending on the membership settings of your Ghost site:
Membership is free = Sign up form is shown along with benefits
Membership is paid = View plans button is shown along with benefits
Membership is invite-only = Link to contact the owner is shown
Membership is turned off = Latest Post is shown as a placeholder
Featured Posts
The Featured Section shows the 4 latest featured posts.
The Featured Posts may have the following labels:
Star icon to indicate a featured post (always the case)
Primary tag if present (such as #nature)
Lock icon if post is for members-only
The Featued Section can be disabled by going to Site → Design & branding → Homepage and setting "Show featured section" to off.
Latest Posts
The Homepage shows the 8 latest posts distributed across the layout.
The Latest Post may have the following labels:
Star icon to indicate a featured post
Primary tag if present (such as #nature)
Lock icon if post is for members-only
♾️
The homepage implements the Infinite Scroll, which shows older posts whenever you scroll to the bottom of the homepage.
Sections
The homepage features 5 sections that are completely customizable. Please refer to the chapter Homepage Sections for more information.
Authors
⚠️
You will need to create a page with a slug "authors".
By default, Authors has the following properties:
Title = "Authors"
Font Color = Dark
Background Color = White
Image = "Writing Pen"
You can completely customize or even replace the Authors tile by Tile Three. Please refer to the chapter Special Pages for more information.
Tags
⚠️
You will need to create a page with a slug "tags".
By default, Authors has the following properties:
Title = "Tags"
Font Color = White
Background Color = Theme Color
Image = "Hashtag"
You can completely customize or even replace the Tags tile by Tile Four. Please refer to the chapter Special Pages for more information.
Social Media
Homepage supports showing four social media tiles:
Facebook
X (formerly Twitter)
Instagram
Linkedin
The Facebook and X (formerly Twitter) are directly supported by Ghost, whereas Instagram and LinkedIn are configured within the theme settings. Please go to Site → Design & branding → Site wide and look for Instagram profile and LinkedIn profile settings.
If an odd number of social media accounts is configured (such as 1 or 3), a Contact tile is shown that links to an owner's email address as a placeholder.
If no social accounts are configured at all, a Contact tile and a Publication Icon are shown as placeholders. The Publication Icon links to the homepage.
In this chapter, we will familiarize ourselves with the homepage layout, explain each tile, and show you how to customize it.
The following image shows the homepage layout:
Hero
By default, Hero tile shows the following:
You can completely customize the Hero tile. Please refer to the chapter Homepage Sections for more information.
Search
By default, Search has the following properties:
You can completely customize or even replace the Search tile by Tile One. Please refer to the chapter Special Pages for more information.
Sign In (or Account)
When the member is logged out, the "Sign In" tile is shown. This tile links to the sign-in page of the website.
When the member is logged in, the "Account" tile is shown. This tile links to the account page of the website.
Sign In
By default, Sign In has the following properties:
You can completely customize or even replace the Sign In tile by Tile Two. Please refer to the chapter Special Pages for more information.
Account
By default, Account has the following properties:
You can completely customize or even replace the Account tile by Tile Two. Please refer to the chapter Special Pages for more information.
Membership
The Membership tile shows different information depending on the membership settings of your Ghost site:
Featured Posts
The Featured Section shows the 4 latest featured posts.
The Featured Posts may have the following labels:
The Featued Section can be disabled by going to Site → Design & branding → Homepage and setting "Show featured section" to off.
Latest Posts
The Homepage shows the 8 latest posts distributed across the layout.
The Latest Post may have the following labels:
Sections
The homepage features 5 sections that are completely customizable. Please refer to the chapter Homepage Sections for more information.
Authors
By default, Authors has the following properties:
You can completely customize or even replace the Authors tile by Tile Three. Please refer to the chapter Special Pages for more information.
Tags
By default, Authors has the following properties:
You can completely customize or even replace the Tags tile by Tile Four. Please refer to the chapter Special Pages for more information.
Social Media
Homepage supports showing four social media tiles:
The Facebook and X (formerly Twitter) are directly supported by Ghost, whereas Instagram and LinkedIn are configured within the theme settings. Please go to Site → Design & branding → Site wide and look for Instagram profile and LinkedIn profile settings.
If an odd number of social media accounts is configured (such as 1 or 3), a Contact tile is shown that links to an owner's email address as a placeholder.
If no social accounts are configured at all, a Contact tile and a Publication Icon are shown as placeholders. The Publication Icon links to the homepage.