Twenty Twenty-One

As the name suggests, Twenty Twenty-One is the default WordPress theme for 2021! This theme is a blank canvas for your ideas and it makes the block editor your best brush.

On a 1440px laptop screen, the main column width is up to 610px wide. The “Wide” block width is up to 1240px wide, and the “Full” block width extends the entire width of the screen.

Quick Specs (all measurements in pixels):

1. On a 1440px laptop screen, the main column width is up to 610px wide with the one column layout.
2. There is one widget area in the footer with a width of 1040px.
3. The recommended Featured Image size is 2000px wide by 1200px high.

Patterns

Twenty Twenty-One comes with support for several stunning block patterns. Customize the patterns to your liking with the copy, images, and colors that fit your story or brand.

Full Block Editor Support

The Block Editor in Twenty Twenty-One

Twenty Twenty-One is built to take maximum advantage of the full power of the block editor. Twenty Twenty-One includes full editor styles for the block editor, so what you see in the editor will match the end result. The theme also ships with a full set of custom colors and typography options as well as support for wide and full width blocks.

Custom Background Colors

Twenty Twenty-One gives you a range of pre-selected color palettes in pastel, all of which conform to AAA standards for contrast. You can also choose your own background color for the theme, and the theme chooses accessibility-conscious text colors for you — automatically!

To change the background color, navigate to Customizer → Colors.

The colors of the elements on your site are automatically calculated based on the background colors you pick. This ensures that the color contrast is always high enough to be accessible to all visitors.

Dark Mode

Twenty Twenty-One is the first default theme to support dark mode. Toggle dark mode support in the Customizer > Colors & Dark Mode panel.

Widgets

Twenty Twenty–One supports widgets below the site’s content, in the footer.

Adding content to your Homepage

Twenty Twenty-One fully supports the Block Editor. You can choose any of the available blocks to create a wide range of content for your site. Here’s how we built the homepage on the demo site, block by block:

Add a Site Logo

Twenty Twenty-One supports a Site Logo, which works great as an avatar for a personal blog or for your business logo or icon. To modify it on your site, do the following:

1. Open My Site → Customize and click on the Site Identity section.
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. Click the Publish button on top to save your changes.

Add Social Icons

Twenty Twenty–One includes the option to set a Secondary Menu just above the footer; this is a good place to add links to your social media profiles, and they’ll be displayed as logos:

To do this, you’ll first need to create a Social Links Menu.

Then, tell your site where to put that menu:

1. Head to Customize → Menu.
2. Select the Menu Locations panel.
3. Assign the menu you’ve created to the Social Links Location.
4. Click the Publish button on top to save your changes.

Twenty Twenty’s Social Icons Menu includes icons for:

• Behance
• Codepen
• DeviantArt
• DockerHub
• Digg
• Dribbble
• Dropbox
• Facebook
• Flickr
• Foursquare
• GitHub
• Google+
• Instagram
• LinkedIn
• Meanpath
• Medium
• Pinterest
• Periscope
• Pocket
• Reddit
• Skype
• SlideShare
• Snapchat
• SoundCloud
• Spotify
• StumbleUpon
• Tumblr
• Twitch
• Twitter
• Vimeo
• Vine
• VK
• WordPress
• Yelp
• YouTube

Keywords

design, art, blog, creative, fashion, clean, modern