Quadrat

by Automattic

Quadrat is a simple, versatile WordPress theme, designed for blogs and podcasts. Inspired by squared shapes and colourful, minimalist flat illustrations, Quadrat includes a set of custom images you can use on your site in block patterns. Quadrat’s default styles are bold and playful, relying on a simple sans-serif font and a strong color scheme that you can customize.

 

We’re here to help you succeed online

We know starting from scratch can be daunting, so we included step-by-step instructions to help you build an attractive website. If you’d like to skip right to a specific section, click on the relevant link:

  Setting up Your HomepageCustomizing Colors Customizing Fonts Adding Content via Block Patterns Adding Your Logo 

 

Setting up Your Homepage

You can set your home page to be a static page, or display your latest posts.

  1. From your site’s dashboard, use the left-hand menu to navigate to Appearance→ Customize. Inside the customizer, click on the Homepage Settings tab.
  2. Under the “Your homepage displays” section, select “A static page”.
  3. Select an existing page to use as your homepage, or select “Add a new page” to create a new one.
  4. Click the Save Changes button on top.

 

Customizing Your Site’s Colors

Quadrat allows you to select from preset palettes that work well with the theme, or choose your own custom palette. Follow these steps to change your site’s colors:

1. From your site’s dashboard, use the left-hand menu to navigate to Appearance→ Customize. Inside the customizer, click on the Colors tab.

2. You should see a panel that looks similar to the following:

A screenshot of a website editor showing various color palettes to select from

3. Select a custom Primary, Secondary, and / or Background color, and preview the changes live in the browser. You can also select from a predefined color scheme.

4. Click the Save Changes button.

 

Changing Your Site’s Fonts

Quadrat also allows you to change the body and heading fonts across your site:

1. From your site’s dashboard, use the left-hand menu to navigate to Appearance→ Customize. Inside the customizer, click on the Fonts tab.

2. You should see the following panel:

A screenshot of a website editor showing custom heading and body font dropdowns

3. From this panel, you can choose a custom Body font and / or Heading font from a set of pre-determined fonts.

4. Click the Save Changes button.

 

Adding content via Block Patterns

Quadrat includes nine Block Patterns. The theme also comes bundled with a set of illustrations, which you can also download here.

An image showing the theme's block pattern collection

To access these, open any post or page in the WordPress Editor. Then:

1. Click the + button to add a new block at the top of the screen (click “Browse all” if you’ve clicked + from inside the post)

2. Click on the Patterns tab. Select Quadrat from the dropdown, and you should see the following:

A screenshot of the WordPress block editor with the sidebar panel open to insert block patterns

3. Click on the pattern you wish to insert and the pattern is inserted in the document at the location of your cursor.

Once you insert a Block Pattern, the blocks can be edited and customized just like any other blocks.

 

Adding Your Logo

If your site has a logo, you can display it in your site’s header. Here’s how:

  1. From your site’s dashboard, use the left-hand menu to navigate to Appearance→ Customize. Inside the customizer, click on the Site Identity tab.
  2. Click the Add logo button to open the Media Manager.
  3. Upload a new image, or select one that’s already in your Media Library.
  4. Click Set as logo and you’ll see your logo appear in the preview.
  5. If your logo includes your site’s name or you prefer the header only to display your logo, you can hide the site title by unchecking the box next to Display Site Title.
  6. Click the Save Changes button on top to save your changes.

Your logo will appear to the left of the site title on desktop computers, and above the Site Title on mobile devices.

A screenshot of the Customizer displaying the logo customization feature

 

Downloading the Theme

To use Quadrat on your self-hosted site, download and install both Quadrat and Blockbase from the links below, and activate Quadrat:

Download Quadrat

Download Blockbase

Quick Specs (all measurements in pixels):

  1. The main column width is 664px.
  2. The wide width is 1128px.

Keywords

blog, podcast, writer, design, poetry, creative, simple, dark, interior

This theme is available for download to be used on your WordPress self-hosted installation.

Download
Have a question about this theme?Pick this design and start a site with us, we can help!