Available on
Fontaine

by Automattic

Fontaine is a portfolio and personal profile theme designed for visual designers who appreciate the bold simplicity of Brutalist aesthetics. The goal was to create a theme that gracefully steps back, allowing your content to shine and capture the spotlight.

Theme setup

In addition to the Front Page template, the theme carries two additional page templates designed to showcase your work and share information about you in a striking light-on-dark colour scheme. To set up your site like the demo site, follow the steps below.

  1. Publish a page called Work. Like the homepage, we don’t need to add content; we just need a published page for your work page. Choose Page: Work template.
  2. Publish a page called Info. Like the homepage and the work page, we don’t need to add content; we just need a published page for your info page. Choose Page: Info template.
  3. Edit the content in those templates with the Site Editor.
  4. Add a Navigation block to the header and add page links to the Work and the Info pages.

Blending mode for header

This theme has a sticky header which stays in the same place as the page scrolls. Therefore, the header is equipped with an interesting blending mode. See this example—the color of the text in the header changes dynamically depending on what’s behind them.

To achieve that, the text colour in this group block is intentionally set to white, while it appears in black on the light grey background colour.

If you want to change the text colour, the site background colour, or turn off the blending mode, you can do so by removing the custom CSS added here. You’d need to remove that from all the templates in this theme.

Screenshot

You can also turn off the sticky header by simply changing the position option here to default.

 

Learn WordPressFollow along with beginner-friendly courses and build your first website or blog.
Watch a course