{"id":11965628,"date":"2019-09-25T00:18:57","date_gmt":"2019-09-25T00:18:57","guid":{"rendered":"https:\/\/wordpress.org\/support\/?post_type=helphub_article&#038;p=11965628"},"modified":"2024-08-09T18:49:38","modified_gmt":"2024-08-09T18:49:38","slug":"twenty-twenty","status":"publish","type":"helphub_article","link":"https:\/\/wordpress.org\/documentation\/article\/twenty-twenty\/","title":{"rendered":"Twenty Twenty"},"content":{"rendered":"\n<p><a href=\"https:\/\/wordpress.org\/themes\/twentytwenty\/\">Twenty Twenty<\/a>\u00a0is the new default theme for <a href=\"\/support\/wordpress-version\/version-5-3\/\">WordPress Version 5.3<\/a>. It is designed with the flexibility of the block editor at its core. If you want to use it for an organization or a business, you can combine columns, groups, and media to create dynamic layouts that show off your services or products. If you want to use it for a traditional blog, the centered content column and considered typography makes it perfect for that as well.\u00a0<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"900\" src=\"https:\/\/i0.wp.com\/wordpress.org\/documentation\/files\/2019\/09\/screenshot.jpg?fit=1024%2C768&amp;ssl=1\" alt=\"\" class=\"wp-image-11979105\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2019\/09\/screenshot.jpg 1200w, https:\/\/wordpress.org\/documentation\/files\/2019\/09\/screenshot-300x225.jpg 300w, https:\/\/wordpress.org\/documentation\/files\/2019\/09\/screenshot-1024x768.jpg 1024w, https:\/\/wordpress.org\/documentation\/files\/2019\/09\/screenshot-768x576.jpg 768w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><figcaption class=\"wp-element-caption\">The Twenty Twenty screenshot<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Quick Specs<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>On a 1440px laptop screen, the main column width is up to 580px wide. The &#8220;Wide&#8221; block width is up to 1200px wide, and the &#8220;Full&#8221; block width extends the entire width of the screen.<\/li>\n\n\n\n<li>There are two widget areas in the footer with a maximum column width of 570px.<\/li>\n\n\n\n<li>The recommended Featured Image size is 1980px wide by 1485px high.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Starter Content<\/h2>\n\n\n\n<p>Twenty Twenty contains Starter Content that helps to set up the theme identical to the theme demo page. The Starter Content can only be activated on freshly installed sites that do not have any pages or posts yet. To activate, please head over to the Customizer and click on <code>Publish<\/code>. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Full Block Editor Support<\/h2>\n\n\n\n<p>Twenty Twenty is designed and developed to take maximum advantage of the creative freedom enabled by the block editor. Extra care has been given to the Columns and Group blocks, which can be combined into impressive landing pages with intricate blocks layouts. Twenty Twenty includes full editor styles for the block editor, so what you see in the editor will almost exactly match the end result. <\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"2560\" height=\"1600\" src=\"https:\/\/wordpress.org\/documentation\/files\/2019\/10\/image-2560.png\" alt=\"\" class=\"wp-image-12046818\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2019\/10\/image-2560.png 2560w, https:\/\/wordpress.org\/documentation\/files\/2019\/10\/image-2560-300x188.png 300w, https:\/\/wordpress.org\/documentation\/files\/2019\/10\/image-2560-1024x640.png 1024w, https:\/\/wordpress.org\/documentation\/files\/2019\/10\/image-2560-768x480.png 768w, https:\/\/wordpress.org\/documentation\/files\/2019\/10\/image-2560-1536x960.png 1536w, https:\/\/wordpress.org\/documentation\/files\/2019\/10\/image-2560-2048x1280.png 2048w\" sizes=\"auto, (max-width: 2560px) 100vw, 2560px\" \/><figcaption class=\"wp-element-caption\">The block editor in Twenty Twenty<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Site Logo<\/h2>\n\n\n\n<p>Twenty Twenty includes a site logo setting which can be used to display the logo of your business or an image of yourself. You can set your site logo by going to Customizer <span aria-hidden=\"true\" class=\"wp-exclude-emoji\">\u2192<\/span> Site Identity. The recommended resolution of the logo is 240px wide by 180px high.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Custom Colors<\/h2>\n\n\n\n<p>Twenty Twenty includes three color settings that make it easy to give your site a personal touch. To change the color settings, navigate to Customizer <span aria-hidden=\"true\" class=\"wp-exclude-emoji\">\u2192<\/span> Colors. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"2560\" height=\"1600\" src=\"https:\/\/i1.wp.com\/wordpress.org\/documentation\/files\/2019\/10\/twenty-twenty-color-settings-2560.jpg?fit=1024%2C640&amp;ssl=1\" alt=\"\" class=\"wp-image-12046829\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2019\/10\/twenty-twenty-color-settings-2560.jpg 2560w, https:\/\/wordpress.org\/documentation\/files\/2019\/10\/twenty-twenty-color-settings-2560-300x188.jpg 300w, https:\/\/wordpress.org\/documentation\/files\/2019\/10\/twenty-twenty-color-settings-2560-1024x640.jpg 1024w, https:\/\/wordpress.org\/documentation\/files\/2019\/10\/twenty-twenty-color-settings-2560-768x480.jpg 768w, https:\/\/wordpress.org\/documentation\/files\/2019\/10\/twenty-twenty-color-settings-2560-1536x960.jpg 1536w, https:\/\/wordpress.org\/documentation\/files\/2019\/10\/twenty-twenty-color-settings-2560-2048x1280.jpg 2048w\" sizes=\"auto, (max-width: 2560px) 100vw, 2560px\" \/><\/figure>\n\n\n\n<p>The color settings included in Twenty Twenty are:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Background Color (defaults to a light beige)<\/li>\n\n\n\n<li>Header &amp; Footer Background Color (defaults to white)<\/li>\n\n\n\n<li>Primary Color (defaults to pink)<\/li>\n<\/ul>\n\n\n\n<p>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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Cover Template<\/h2>\n\n\n\n<p>Twenty Twenty includes a page template called the &#8220;Cover Template&#8221; that displays the title of the post or page on top of the featured image.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"2560\" height=\"1600\" src=\"https:\/\/wordpress.org\/documentation\/files\/2019\/09\/twenty-twenty-cover-template-2560.jpg\" alt=\"The Cover Template in Twenty Twenty\" class=\"wp-image-12046852\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2019\/09\/twenty-twenty-cover-template-2560.jpg 2560w, https:\/\/wordpress.org\/documentation\/files\/2019\/09\/twenty-twenty-cover-template-2560-300x188.jpg 300w, https:\/\/wordpress.org\/documentation\/files\/2019\/09\/twenty-twenty-cover-template-2560-1024x640.jpg 1024w, https:\/\/wordpress.org\/documentation\/files\/2019\/09\/twenty-twenty-cover-template-2560-768x480.jpg 768w, https:\/\/wordpress.org\/documentation\/files\/2019\/09\/twenty-twenty-cover-template-2560-1536x960.jpg 1536w, https:\/\/wordpress.org\/documentation\/files\/2019\/09\/twenty-twenty-cover-template-2560-2048x1280.jpg 2048w\" sizes=\"auto, (max-width: 2560px) 100vw, 2560px\" \/><figcaption class=\"wp-element-caption\">The Cover Template in Twenty Twenty<\/figcaption><\/figure>\n\n\n\n<p>You can set a post or page to use the cover template by editing the post or page, selecting the &#8220;Document&#8221; tab in the right sidebar, expanding the &#8220;Post\/Page Attributes&#8221; tab, and selecting &#8220;Cover Template&#8221; in the &#8220;Template&#8221; dropdown.<\/p>\n\n\n\n<p>Twenty Twenty includes a number of different options for the Cover Template, located in the &#8220;Cover Template&#8221; tab in the Customizer. Here, you can set the background color of the image overlay, the opacity of the image overlay, and the color of the text displayed on top of the overlay. You can also select whether the background image should have a fixed position when the visitor scrolls, which creates a gentle parallax effect.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Language Support<\/h2>\n\n\n\n<p>Twenty Twenty includes optimal font styles for many languages, thanks to feedback from the WordPress community. The theme uses local system fonts by default and makes adjustments to the typography for the following alphabets:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Arabic<\/li>\n\n\n\n<li>Chinese<\/li>\n\n\n\n<li>Cyrillic<\/li>\n\n\n\n<li>Devanagari<\/li>\n\n\n\n<li>Greek<\/li>\n\n\n\n<li>Gujarati<\/li>\n\n\n\n<li>Hebrew<\/li>\n\n\n\n<li>Japanese<\/li>\n\n\n\n<li>Korean<\/li>\n\n\n\n<li>Thai<\/li>\n\n\n\n<li>Vietnamese<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Menus<\/h2>\n\n\n\n<p>There are two different desktop menus to choose from in Twenty Twenty:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A traditional horizontal menu, which is always visible<\/li>\n\n\n\n<li>An expandable menu, which is hidden behind a menu button<\/li>\n<\/ul>\n\n\n\n<p>You can choose which menu location to use by going to Appearance <span aria-hidden=\"true\" class=\"wp-exclude-emoji\">\u2192<\/span> Menus, where you can assign a menu to the &#8220;Desktop Horizontal Menu&#8221; or the &#8220;Desktop Expanded Menu&#8221;. You can also use both menu locations in combination, if you prefer.<\/p>\n\n\n\n<p>Twenty Twenty also includes a footer menu, which is displayed beneath the site content, and a mobile menu, which defaults to the menu set to either the desktop horizontal menu or the desktop expanded menu.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Widgets<\/h2>\n\n\n\n<p>Twenty Twenty includes two widget areas below the site content and above the footer.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"967\" src=\"https:\/\/wordpress.org\/documentation\/files\/2019\/09\/Twenty-Twenty-widgets-stacked-1024x967.png\" alt=\"\" class=\"wp-image-11966150\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2019\/09\/Twenty-Twenty-widgets-stacked-1024x967.png 1024w, https:\/\/wordpress.org\/documentation\/files\/2019\/09\/Twenty-Twenty-widgets-stacked-300x283.png 300w, https:\/\/wordpress.org\/documentation\/files\/2019\/09\/Twenty-Twenty-widgets-stacked-768x725.png 768w, https:\/\/wordpress.org\/documentation\/files\/2019\/09\/Twenty-Twenty-widgets-stacked.png 1398w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>On screens larger than 699px wide, widgets in this area are automatically arranged into two columns.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"2000\" height=\"900\" src=\"https:\/\/i1.wp.com\/wordpress.org\/documentation\/files\/2019\/09\/Twenty-Twenty-widgets-inline.png?fit=1024%2C461&amp;ssl=1\" alt=\"\" class=\"wp-image-11966153\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2019\/09\/Twenty-Twenty-widgets-inline.png 2000w, https:\/\/wordpress.org\/documentation\/files\/2019\/09\/Twenty-Twenty-widgets-inline-300x135.png 300w, https:\/\/wordpress.org\/documentation\/files\/2019\/09\/Twenty-Twenty-widgets-inline-1024x461.png 1024w, https:\/\/wordpress.org\/documentation\/files\/2019\/09\/Twenty-Twenty-widgets-inline-768x346.png 768w, https:\/\/wordpress.org\/documentation\/files\/2019\/09\/Twenty-Twenty-widgets-inline-1536x691.png 1536w\" sizes=\"auto, (max-width: 2000px) 100vw, 2000px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Add Social Icons<\/h2>\n\n\n\n<p>Twenty Twenty includes a Social Icons Menu, where you can add links to your social media profiles that will be displayed as logos in the footer. If you\u2019re not familiar with this functionality, please check out the <a href=\"\/support\/article\/twenty-fifteen\/#add-social-icons\">documentation from Twenty Fifteen<\/a>.<\/p>\n\n\n\n<p>The following services are supported by Twenty Twenty&#8217;s Social Icons Menu:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>500px<\/li>\n\n\n\n<li>Amazon<\/li>\n\n\n\n<li>Bandcamp<\/li>\n\n\n\n<li>Behance<\/li>\n\n\n\n<li>Codepen<\/li>\n\n\n\n<li>DeviantArt<\/li>\n\n\n\n<li>Dribbble<\/li>\n\n\n\n<li>Dropbox<\/li>\n\n\n\n<li>Etsy<\/li>\n\n\n\n<li>Facebook<\/li>\n\n\n\n<li>Feed<\/li>\n\n\n\n<li>Flickr<\/li>\n\n\n\n<li>Foursquare<\/li>\n\n\n\n<li>GitHub<\/li>\n\n\n\n<li>GitLab<\/li>\n\n\n\n<li>Goodreads<\/li>\n\n\n\n<li>Google<\/li>\n\n\n\n<li>Instagram<\/li>\n\n\n\n<li>Kickstarter<\/li>\n\n\n\n<li>JSFiddle<\/li>\n\n\n\n<li>Last.fm<\/li>\n\n\n\n<li>LinkedIn<\/li>\n\n\n\n<li>Mail<\/li>\n\n\n\n<li>Mastadom<\/li>\n\n\n\n<li>Medium<\/li>\n\n\n\n<li>Meetup<\/li>\n\n\n\n<li>Pinterest<\/li>\n\n\n\n<li>Pocket<\/li>\n\n\n\n<li>Reddit<\/li>\n\n\n\n<li>Skype<\/li>\n\n\n\n<li>Snapchat<\/li>\n\n\n\n<li>SoundCloud<\/li>\n\n\n\n<li>Spotify<\/li>\n\n\n\n<li>TikTok<\/li>\n\n\n\n<li>Tumblr<\/li>\n\n\n\n<li>Twitch<\/li>\n\n\n\n<li>Twitter<\/li>\n\n\n\n<li>Vimeo<\/li>\n\n\n\n<li>VK<\/li>\n\n\n\n<li>WhatsApp<\/li>\n\n\n\n<li>WordPress<\/li>\n\n\n\n<li>Yelp<\/li>\n\n\n\n<li>YouTube<\/li>\n<\/ul>\n\n\n\n<p>Additional icons can be added following the steps under &#8220;Adding icons in Twenty Twenty&#8221; at <a href=\"https:\/\/make.wordpress.org\/core\/2020\/07\/30\/themes-field-guide-wordpress-5-5\/\">Themes field guide: WordPress 5.5<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Support &amp; Resources<\/h2>\n\n\n\n<p>Get community help with Twenty Twenty in its <a href=\"https:\/\/wordpress.org\/support\/theme\/twentytwenty\/\">forum<\/a>.<\/p>\n\n\n\n<p>You can also read <a href=\"https:\/\/wordpress.org\/documentation\/article\/twenty-twenty-changelog\/\">the theme&#8217;s changelog<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Twenty Twenty\u00a0is the new default theme for WordPress Version 5.3. It is designed with the flexibility of the block editor at its core. If you want to use it for an organization or a business, you can combine columns, groups, and media to create dynamic layouts that show off your services or products. If you [&hellip;]<\/p>\n","protected":false},"featured_media":0,"menu_order":20,"comment_status":"open","ping_status":"closed","template":"","category":[80,82],"class_list":["post-11965628","helphub_article","type-helphub_article","status-publish","hentry","category-customization","category-default-themes"],"revision_note":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/11965628","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles"}],"about":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/types\/helphub_article"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/comments?post=11965628"}],"version-history":[{"count":3,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/11965628\/revisions"}],"predecessor-version":[{"id":16359784,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/11965628\/revisions\/16359784"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/media?parent=11965628"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/category?post=11965628"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}