{"id":13563362,"date":"2020-12-08T23:42:03","date_gmt":"2020-12-08T23:42:03","guid":{"rendered":"https:\/\/wordpress.org\/support\/?post_type=helphub_article&#038;p=13563362"},"modified":"2024-08-09T18:49:29","modified_gmt":"2024-08-09T18:49:29","slug":"twenty-twenty-one","status":"publish","type":"helphub_article","link":"https:\/\/wordpress.org\/documentation\/article\/twenty-twenty-one\/","title":{"rendered":"Twenty Twenty-One"},"content":{"rendered":"\n<p><a href=\"https:\/\/wordpress.org\/themes\/twentytwentyone\/\">Twenty Twenty-One<\/a> is the new default theme for <a href=\"https:\/\/wordpress.org\/documentation\/wordpress-version\/version-5-6\/\">WordPress Version 5.6<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/2021.wordpress.net\/\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"598\" src=\"https:\/\/wordpress.org\/documentation\/files\/2020\/11\/image-1024x598.png\" alt=\"Screenshot of the new default theme for WordPress, Twenty Twenty-One.\" class=\"wp-image-13655233\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2020\/11\/image-1024x598.png 1024w, https:\/\/wordpress.org\/documentation\/files\/2020\/11\/image-300x175.png 300w, https:\/\/wordpress.org\/documentation\/files\/2020\/11\/image-768x448.png 768w, https:\/\/wordpress.org\/documentation\/files\/2020\/11\/image-1536x897.png 1536w, https:\/\/wordpress.org\/documentation\/files\/2020\/11\/image-2048x1195.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p><a href=\"https:\/\/2021.wordpress.net\/\">Twenty Twenty-One<\/a> is a blank canvas for your ideas and it makes the block editor your best brush. With new block patterns, which allow you to create a beautiful layout in a matter of seconds, this theme\u2019s soft colors and eye-catching \u2014 yet timeless \u2014 design will let your work shine. Take it for a spin! See how Twenty Twenty-One elevates your portfolio, business website, or personal blog.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"quick-specs\">Quick Specs<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Requires\u00a0at\u00a0least WordPress 5.3.<\/li>\n\n\n\n<li>Requires\u00a0at least PHP version\u00a05.6.<\/li>\n\n\n\n<li>On a 1440px laptop screen, the main column width is up to 1240px wide. The \u201cWide\u201d block width is also up to 1240px wide, and the \u201cFull\u201d block width extends the entire width of the screen.<\/li>\n\n\n\n<li>The recommended Featured Image size is 610px wide or larger.<\/li>\n\n\n\n<li>The recommended size of the logo is at least 300px wide, or at least 100px tall.<\/li>\n\n\n\n<li>Twenty Twenty-One has one widget area that displays below the site content and above the footer. Each widget takes up one third of the available space, to a maximum of 380px wide.<\/li>\n\n\n\n<li>Note that Twenty Twenty-One has limited support for Internet Explorer 11.<br><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"accessibility-features\">Accessibility features<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Skip to content link<\/li>\n\n\n\n<li>Semantic HTML with landmarks<\/li>\n\n\n\n<li>Support for High Contrast mode and Dark Mode<\/li>\n\n\n\n<li>Support for keyboard navigation<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"starter-content\">Starter Content<\/h2>\n\n\n\n<p>Twenty Twenty-One comes with <a href=\"https:\/\/make.wordpress.org\/core\/2016\/11\/30\/starter-content-for-themes-in-4-7\/\">Starter Content<\/a> that explains how to use the theme&#8217;s <a href=\"https:\/\/wordpress.org\/documentation\/article\/block-pattern\/\">block patterns<\/a> and styles. You can only activate starter content on freshly installed sites that do not have any pages or posts. To activate, please head over to the Customizer and click on Publish.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"full-block-editor-support\">Full Block Editor Support<\/h2>\n\n\n\n<p>Twenty Twenty-One is designed and developed to take full advantage of the creative freedom enabled by the block editor. Extra care has been given to the Columns block so you can create impressive landing pages with intricate blocks layouts. Twenty Twenty-One includes styles for the block editor, so what you see in the editor will almost exactly match the end result.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"block-patterns\">Block patterns<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"large-text\">Large text<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"451\" src=\"https:\/\/wordpress.org\/documentation\/files\/2020\/11\/Large-Text-1024x451.png\" alt=\"A screenshot of the large text block pattern, with the text: A new portfolio default theme for WordPress.\" class=\"wp-image-13703980\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2020\/11\/Large-Text-1024x451.png 1024w, https:\/\/wordpress.org\/documentation\/files\/2020\/11\/Large-Text-300x132.png 300w, https:\/\/wordpress.org\/documentation\/files\/2020\/11\/Large-Text-768x338.png 768w, https:\/\/wordpress.org\/documentation\/files\/2020\/11\/Large-Text.png 1500w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">A heading with a 144px text size<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"links-area\">Links area<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"508\" src=\"https:\/\/wordpress.org\/documentation\/files\/2020\/11\/Links-Area-1024x508.png\" alt=\"The links area block pattern has a large text followed by social links and an email address. The section has a thin border on all four sides.\" class=\"wp-image-13703981\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2020\/11\/Links-Area-1024x508.png 1024w, https:\/\/wordpress.org\/documentation\/files\/2020\/11\/Links-Area-300x149.png 300w, https:\/\/wordpress.org\/documentation\/files\/2020\/11\/Links-Area-768x381.png 768w, https:\/\/wordpress.org\/documentation\/files\/2020\/11\/Links-Area.png 1500w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">For your social links and call-to-action<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"contact-information\">Contact Information<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"168\" src=\"https:\/\/wordpress.org\/documentation\/files\/2020\/11\/Contact-Information-1024x168.png\" alt=\"The contact information pattern has 3 columns that contains email and phone number, address and social media links with icons.\" class=\"wp-image-13703979\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2020\/11\/Contact-Information-1024x168.png 1024w, https:\/\/wordpress.org\/documentation\/files\/2020\/11\/Contact-Information-300x49.png 300w, https:\/\/wordpress.org\/documentation\/files\/2020\/11\/Contact-Information-768x126.png 768w, https:\/\/wordpress.org\/documentation\/files\/2020\/11\/Contact-Information.png 1500w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">How to get in touch with you<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"media-text-article-title\">Media &amp; Text article title<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"726\" src=\"https:\/\/wordpress.org\/documentation\/files\/2020\/11\/Media-and-Text-Article-Title-1024x726.png\" alt=\"The media &amp; text article title has a left aligned image combined with text section. The section has a thin border on all four sides.\" class=\"wp-image-13703982\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2020\/11\/Media-and-Text-Article-Title-1024x726.png 1024w, https:\/\/wordpress.org\/documentation\/files\/2020\/11\/Media-and-Text-Article-Title-300x213.png 300w, https:\/\/wordpress.org\/documentation\/files\/2020\/11\/Media-and-Text-Article-Title-768x545.png 768w, https:\/\/wordpress.org\/documentation\/files\/2020\/11\/Media-and-Text-Article-Title.png 1500w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Highlight your best image and include a summary at the beginning of your article<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"overlapping-images\">Overlapping images<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"905\" height=\"1024\" src=\"https:\/\/wordpress.org\/documentation\/files\/2020\/11\/Overlapping-Images-905x1024.png\" alt=\"The overlapping images block pattern displays 3 images in two columns.\nThe left column has two vertically placed images. The right hand column contains one mage and overlaps the left column.\" class=\"wp-image-13703985\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2020\/11\/Overlapping-Images-905x1024.png 905w, https:\/\/wordpress.org\/documentation\/files\/2020\/11\/Overlapping-Images-265x300.png 265w, https:\/\/wordpress.org\/documentation\/files\/2020\/11\/Overlapping-Images-768x869.png 768w, https:\/\/wordpress.org\/documentation\/files\/2020\/11\/Overlapping-Images-1357x1536.png 1357w, https:\/\/wordpress.org\/documentation\/files\/2020\/11\/Overlapping-Images.png 1500w\" sizes=\"auto, (max-width: 905px) 100vw, 905px\" \/><figcaption class=\"wp-element-caption\">Place images in a beautiful column pattern<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"two-images\">Two Images<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"688\" src=\"https:\/\/wordpress.org\/documentation\/files\/2020\/11\/Two-Images-Showcase-1024x688.png\" alt=\"The two images block pattern has two horizontally placed images. The images have different sizes and one image has a frame.\" class=\"wp-image-13703988\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2020\/11\/Two-Images-Showcase-1024x688.png 1024w, https:\/\/wordpress.org\/documentation\/files\/2020\/11\/Two-Images-Showcase-300x202.png 300w, https:\/\/wordpress.org\/documentation\/files\/2020\/11\/Two-Images-Showcase-768x516.png 768w, https:\/\/wordpress.org\/documentation\/files\/2020\/11\/Two-Images-Showcase.png 1500w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Showcase images next to each other with different sizes and borders<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"overlapping-images-and-text\">Overlapping images and text<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"532\" src=\"https:\/\/wordpress.org\/documentation\/files\/2020\/11\/Overlapping-Images-aand-Text-1024x532.png\" alt=\"The overlapping images and text pattern uses 3 columns. The two outer columns contains images.\nThe middle column contains a paragraph with a border around it, and overlaps the left most column.\" class=\"wp-image-13703983\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2020\/11\/Overlapping-Images-aand-Text-1024x532.png 1024w, https:\/\/wordpress.org\/documentation\/files\/2020\/11\/Overlapping-Images-aand-Text-300x156.png 300w, https:\/\/wordpress.org\/documentation\/files\/2020\/11\/Overlapping-Images-aand-Text-768x399.png 768w, https:\/\/wordpress.org\/documentation\/files\/2020\/11\/Overlapping-Images-aand-Text.png 1500w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Mix images and text content in columns<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"portfolio-list\">Portfolio list<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"720\" src=\"https:\/\/wordpress.org\/documentation\/files\/2020\/11\/Portfolio-List-1024x720.png\" alt=\"The portfolio list pattern has a vertical list of links and miniature images. The image is displayed to the right of the link text.\nEach portfolio item is separated by a bottom border.\n\" class=\"wp-image-13703987\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2020\/11\/Portfolio-List-1024x720.png 1024w, https:\/\/wordpress.org\/documentation\/files\/2020\/11\/Portfolio-List-300x211.png 300w, https:\/\/wordpress.org\/documentation\/files\/2020\/11\/Portfolio-List-768x540.png 768w, https:\/\/wordpress.org\/documentation\/files\/2020\/11\/Portfolio-List.png 1500w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Display links to your portfolio items together with miniature images<\/figcaption><\/figure>\n\n\n\n<p class=\"has-text-align-center has-medium-font-size\"><a href=\"https:\/\/wordpress.org\/documentation\/article\/block-pattern\/\">Learn more about block patterns and how to add them<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"block-styles\">Block styles<\/h2>\n\n\n\n<p>Block styles are selected in the block Settings sidebar in the editor.<\/p>\n\n\n\n<p><strong>Social links<\/strong>: In addition to the default styles, you can choose a dark grey icon color.<\/p>\n\n\n\n<p><strong>Separator<\/strong>: In addition to the default styles, you can choose an extra thick separator.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"borders\">Borders<\/h3>\n\n\n\n<p>In Twenty Twenty-One, borders can be added to the following blocks:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Media &amp; Text<\/li>\n\n\n\n<li>Latest posts -Styles for borders and dividers<\/li>\n\n\n\n<li>Image -Styles for borders and frames<\/li>\n\n\n\n<li>Cover<\/li>\n\n\n\n<li>Group<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"overlapping-columns\">Overlapping columns<\/h3>\n\n\n\n<p>The columns block has an optional style called overlap, where the content of every second column overlaps the previous:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"840\" height=\"324\" src=\"https:\/\/wordpress.org\/documentation\/files\/2020\/11\/twenty-twenty-one-column-overlap-840.png\" alt=\"A screenshot of a columns block with the overlapping style applied. The first column has a white background. The second column has a black background and overlaps the bottom right corner of the first column.\" class=\"wp-image-13706175\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2020\/11\/twenty-twenty-one-column-overlap-840.png 840w, https:\/\/wordpress.org\/documentation\/files\/2020\/11\/twenty-twenty-one-column-overlap-840-300x116.png 300w, https:\/\/wordpress.org\/documentation\/files\/2020\/11\/twenty-twenty-one-column-overlap-840-768x296.png 768w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"color-palette\">Color palette<\/h2>\n\n\n\n<p>The theme provides several recommended colors that works well with the design of the theme. Select the colors in the background color setting and in the editor. There are also matching gradients.<\/p>\n\n\n\n<p class=\"has-white-color has-black-background-color has-text-color has-background\">Black<\/p>\n\n\n\n<p class=\"has-white-background-color has-background\">White<\/p>\n\n\n\n<p class=\"has-white-color has-text-color has-background\" style=\"background-color:#28303d\">Dark Grey<\/p>\n\n\n\n<p class=\"has-white-color has-text-color has-background\" style=\"background-color:#39414d\">Grey<\/p>\n\n\n\n<p class=\"has-background\" style=\"background-color:#d1e4dd\">Green<\/p>\n\n\n\n<p class=\"has-background\" style=\"background-color:#d1dfe4\">Blue<\/p>\n\n\n\n<p class=\"has-background\" style=\"background-color:#d1d1e4\">Purple<\/p>\n\n\n\n<p class=\"has-background\" style=\"background-color:#e4d1d1\">Red<\/p>\n\n\n\n<p class=\"has-background\" style=\"background-color:#e4dad1\">Orange<\/p>\n\n\n\n<p class=\"has-background\" style=\"background-color:#eeeadd\">Yellow<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"custom-background-color\">Custom Background Color<\/h2>\n\n\n\n<p>Twenty Twenty includes the option to change your site&#8217;s background color. <\/p>\n\n\n\n<p>To change the background color, navigate to Customizer <span aria-hidden=\"true\" class=\"wp-exclude-emoji\">\u2192<\/span> Colors &amp; Dark Mode.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/wordpress.org\/documentation\/files\/2020\/11\/TT1-Customizer-Colors.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1792\" height=\"927\" src=\"https:\/\/wordpress.org\/documentation\/files\/2020\/11\/TT1-Customizer-Colors.png\" alt=\"A screenshot of the Customizer with the preview of the site and with the Colors &amp; Dark Mode settings panel opened.\" class=\"wp-image-13737371\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2020\/11\/TT1-Customizer-Colors.png 1792w, https:\/\/wordpress.org\/documentation\/files\/2020\/11\/TT1-Customizer-Colors-300x155.png 300w, https:\/\/wordpress.org\/documentation\/files\/2020\/11\/TT1-Customizer-Colors-1024x530.png 1024w, https:\/\/wordpress.org\/documentation\/files\/2020\/11\/TT1-Customizer-Colors-768x397.png 768w, https:\/\/wordpress.org\/documentation\/files\/2020\/11\/TT1-Customizer-Colors-1536x795.png 1536w\" sizes=\"auto, (max-width: 1792px) 100vw, 1792px\" \/><\/a><\/figure>\n\n\n\n<p>Add your own custom color, or select a color from the palette.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><a href=\"https:\/\/wordpress.org\/documentation\/files\/2020\/11\/TT1-Customizer-Color-Palettes.png\"><img loading=\"lazy\" decoding=\"async\" width=\"643\" height=\"1064\" src=\"https:\/\/wordpress.org\/documentation\/files\/2020\/11\/TT1-Customizer-Color-Palettes.png\" alt=\"The Dark Mode option in the Customizer.\" class=\"wp-image-13737374\" style=\"width:322px;height:532px\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2020\/11\/TT1-Customizer-Color-Palettes.png 643w, https:\/\/wordpress.org\/documentation\/files\/2020\/11\/TT1-Customizer-Color-Palettes-181x300.png 181w, https:\/\/wordpress.org\/documentation\/files\/2020\/11\/TT1-Customizer-Color-Palettes-619x1024.png 619w\" sizes=\"auto, (max-width: 643px) 100vw, 643px\" \/><\/a><\/figure>\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\" id=\"site-logo\">Site Logo<\/h2>\n\n\n\n<p>Twenty Twenty-One 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. <\/p>\n\n\n\n<p>The recommended size of the logo is at least 300px wide, or at least 100px tall. The logo is visible in the header and footer.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/wordpress.org\/documentation\/files\/2020\/12\/TT1-Centered-Logo.png\"><img loading=\"lazy\" decoding=\"async\" width=\"3584\" height=\"1854\" src=\"https:\/\/wordpress.org\/documentation\/files\/2020\/12\/TT1-Centered-Logo.png\" alt=\"The Site Identity settings panel in the Customizer.\" class=\"wp-image-13737393\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2020\/12\/TT1-Centered-Logo.png 3584w, https:\/\/wordpress.org\/documentation\/files\/2020\/12\/TT1-Centered-Logo-300x155.png 300w, https:\/\/wordpress.org\/documentation\/files\/2020\/12\/TT1-Centered-Logo-1024x530.png 1024w, https:\/\/wordpress.org\/documentation\/files\/2020\/12\/TT1-Centered-Logo-768x397.png 768w, https:\/\/wordpress.org\/documentation\/files\/2020\/12\/TT1-Centered-Logo-1536x795.png 1536w, https:\/\/wordpress.org\/documentation\/files\/2020\/12\/TT1-Centered-Logo-2048x1059.png 2048w\" sizes=\"auto, (max-width: 3584px) 100vw, 3584px\" \/><\/a><\/figure>\n\n\n\n<p><br>The logo in the site header is centered. If you want to hide the Site Title and Tagline, the logo is placed to the left of the menu:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/wordpress.org\/documentation\/files\/2020\/12\/TT1-Left-Logo.png\"><img loading=\"lazy\" decoding=\"async\" width=\"3584\" height=\"1854\" src=\"https:\/\/wordpress.org\/documentation\/files\/2020\/12\/TT1-Left-Logo.png\" alt=\"The Site Identity settings panel in the Customizer, with the Site Title and Tagline options toggled off.\" class=\"wp-image-13737396\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2020\/12\/TT1-Left-Logo.png 3584w, https:\/\/wordpress.org\/documentation\/files\/2020\/12\/TT1-Left-Logo-300x155.png 300w, https:\/\/wordpress.org\/documentation\/files\/2020\/12\/TT1-Left-Logo-1024x530.png 1024w, https:\/\/wordpress.org\/documentation\/files\/2020\/12\/TT1-Left-Logo-768x397.png 768w, https:\/\/wordpress.org\/documentation\/files\/2020\/12\/TT1-Left-Logo-1536x795.png 1536w, https:\/\/wordpress.org\/documentation\/files\/2020\/12\/TT1-Left-Logo-2048x1059.png 2048w\" sizes=\"auto, (max-width: 3584px) 100vw, 3584px\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"excerpt-settings\">Excerpt settings<\/h2>\n\n\n\n<p>In the Customizer you will find a panel called Excerpt Settings:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"345\" height=\"208\" src=\"https:\/\/wordpress.org\/documentation\/files\/2021\/01\/tt1-excerpt-settings.png\" alt=\"The Customizer Excerpt settings have two radio buttons where you can can choose between summary and full text.\" class=\"wp-image-13926634\" style=\"width:345px;height:208px\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2021\/01\/tt1-excerpt-settings.png 345w, https:\/\/wordpress.org\/documentation\/files\/2021\/01\/tt1-excerpt-settings-300x181.png 300w\" sizes=\"auto, (max-width: 345px) 100vw, 345px\" \/><\/figure>\n\n\n\n<p>Here you can choose if the blog and archive pages should show the full content or only the summary. <br>The default is summary. The search result page always shows the summary.<br>When the summary is selected, only text will be displayed.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"menus\">Menus<\/h2>\n\n\n\n<p>Twenty Twenty-One includes two menu locations:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A traditional responsive horizontal menu at the very top of the site, which supports dropdown menus.<\/li>\n\n\n\n<li>A horizontal menu between the widget area and the footer at the bottom of the screen, which only supports one level of navigation.<\/li>\n<\/ul>\n\n\n\n<p>You can choose a menu location by going to Appearance <span aria-hidden=\"true\" class=\"wp-exclude-emoji\">\u2192<\/span> Menus, where you can assign a menu to the \u201cPrimary Navigation\u201d or the \u201cFooter Navigation\u201d. You can also use both menu locations in combination, if you prefer.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"menu-descriptions\">Menu descriptions<\/h3>\n\n\n\n<p>The primary navigation menu supports menu descriptions.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"423\" height=\"86\" src=\"https:\/\/wordpress.org\/documentation\/files\/2021\/01\/tt1-menu-description-front.png\" alt=\"The menu description is shown below the menu item text.\" class=\"wp-image-13926296\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2021\/01\/tt1-menu-description-front.png 423w, https:\/\/wordpress.org\/documentation\/files\/2021\/01\/tt1-menu-description-front-300x61.png 300w\" sizes=\"auto, (max-width: 423px) 100vw, 423px\" \/><\/figure>\n\n\n\n<p>To enable menu descriptions, go to Appearance <span aria-hidden=\"true\" class=\"wp-exclude-emoji\">\u2192<\/span> Menus<strong>, <\/strong> and open the Screen Options tab at the top of the page.<\/p>\n\n\n\n<p>Under Show advanced menu properties, check the box for Description:<br><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"831\" height=\"266\" src=\"https:\/\/wordpress.org\/documentation\/files\/2021\/01\/tt1-menu-description-options.png\" alt=\"The screen options tab includes a form with settings for menu properties including the menu descriptions.\" class=\"wp-image-13926115\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2021\/01\/tt1-menu-description-options.png 831w, https:\/\/wordpress.org\/documentation\/files\/2021\/01\/tt1-menu-description-options-300x96.png 300w, https:\/\/wordpress.org\/documentation\/files\/2021\/01\/tt1-menu-description-options-768x246.png 768w\" sizes=\"auto, (max-width: 831px) 100vw, 831px\" \/><\/figure>\n\n\n\n<p>Add a description by selecting the menu item and filling out the Description textarea. Remember to save your changes.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"427\" height=\"385\" src=\"https:\/\/wordpress.org\/documentation\/files\/2021\/01\/tt1-menu-description-area.png\" alt=\"Each menu item uses a textarea where the description can be added.\" class=\"wp-image-13926165\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2021\/01\/tt1-menu-description-area.png 427w, https:\/\/wordpress.org\/documentation\/files\/2021\/01\/tt1-menu-description-area-300x270.png 300w\" sizes=\"auto, (max-width: 427px) 100vw, 427px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"add-social-icons\">Add Social Icons<\/h2>\n\n\n\n<p>There are two ways to add social icons in your site:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use the Social Icons block within the editor.<\/li>\n\n\n\n<li>Add a link to a social media site to your footer menu. <\/li>\n<\/ul>\n\n\n\n<p>When you create a social menu, the text label you provide will be hidden, and an icon will be shown in its place. If you\u2019re not familiar with this functionality, please check out the&nbsp;<a href=\"https:\/\/wordpress.org\/documentation\/article\/twenty-fifteen\/#add-social-icons\">documentation from Twenty Fifteen<\/a>.<\/p>\n\n\n\n<p>Twenty Twenty-One provides icons for the following social media services:<\/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>Mastodon<\/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>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 \u201cAdding icons in Twenty Twenty\u201d at&nbsp;<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\" id=\"widgets\">Widgets<\/h2>\n\n\n\n<p>Twenty Twenty-One comes with support for one widget area, at the very bottom of each page. Each widget column is 33% of the site width, up to 380px.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"3184\" height=\"833\" src=\"https:\/\/wordpress.org\/documentation\/files\/2020\/11\/widgets.png\" alt=\"The footer widget area has 3 columns.\nBelow the widget area is a site information section with the site title or logo, and a ink to WordPress.org with the link text &quot;Proudly powered by WordPress&quot;\" class=\"wp-image-13659561\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2020\/11\/widgets.png 3184w, https:\/\/wordpress.org\/documentation\/files\/2020\/11\/widgets-300x78.png 300w, https:\/\/wordpress.org\/documentation\/files\/2020\/11\/widgets-1024x268.png 1024w, https:\/\/wordpress.org\/documentation\/files\/2020\/11\/widgets-768x201.png 768w, https:\/\/wordpress.org\/documentation\/files\/2020\/11\/widgets-1536x402.png 1536w, https:\/\/wordpress.org\/documentation\/files\/2020\/11\/widgets-2048x536.png 2048w\" sizes=\"auto, (max-width: 3184px) 100vw, 3184px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"post-formats\">Post formats<\/h2>\n\n\n\n<p>Twenty Twenty-One has support for post formats.<br>Post formats are selected in the editors Settings sidebar  <span aria-hidden=\"true\" class=\"wp-exclude-emoji\">\u2192<\/span> Post <span aria-hidden=\"true\" class=\"wp-exclude-emoji\">\u2192<\/span> Status &amp; visibility. <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Standard<\/li>\n\n\n\n<li>Aside<\/li>\n\n\n\n<li>Gallery<\/li>\n\n\n\n<li>Link<\/li>\n\n\n\n<li>Image<\/li>\n\n\n\n<li>Quote<\/li>\n\n\n\n<li>Status<\/li>\n\n\n\n<li>Video<\/li>\n\n\n\n<li>Audio<\/li>\n\n\n\n<li>Chat<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"language-support\">Language Support<\/h2>\n\n\n\n<p>Twenty Twenty-One includes styles for RTL languages.<\/p>\n\n\n\n<p>The theme uses a native system font stack. This font stack provides support for a large number of languages.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif<\/code><\/pre>\n\n\n\n<details><summary>Expand this list to see the fonts used for non-Latin languages.<\/summary>\n<br \/>\n<ul>\n<li><b>ar, ary, azb, ckb, fa-IR, haz, ps<\/b>:  Tahoma, Arial, sans-serif.<\/li>\n<li><b>zh-CN<\/b>: PingFang SC, Helvetica Neue, Microsoft YaHei New, STHeiti Light.<\/li>\n<li><b>zh-TW<\/b>: PingFang TC, Helvetica Neue, Microsoft YaHei New, STHeiti Light.<\/li>\n<li><b>zh-HK<\/b>: PingFang HK, Helvetica Neue, Microsoft YaHei New, STHeiti Light.<\/li>\n<li><b>bel, bg-BG, kk, mk-MK, mn, ru-RU, sah, sr-RS, tt-RU, uk<\/b>: Helvetica Neue, Helvetica, Segoe UI, Arial, sans-serif.<\/li>\n<li><b>bn-BD, hi-IN, mr, ne-NP<\/b>: Arial, sans-serif.<\/li>\n<li><b>el<\/b>: Helvetica Neue, Helvetica, Arial, sans-serif.<\/li>\n<li><b>gu<\/b>: Arial, sans-serif.<\/li>\n<li><b>he-IL<\/b>: Arial Hebrew, Arial, sans-serif.<\/li>\n<li><b>ja<\/b>: sans-serif.<\/li>\n<li><b>ko-KR<\/b>: Apple SD Gothic Neo, Malgun Gothit, Nanum Gothic, Dotum, sans-serif.<\/li>\n<li><b>th<\/b>: Sukhumvit Set, Helvetica Neue, Helvetica, Arial, sans-serif.<\/li>\n<li><b>vi<\/b>: Libre Franklin, sans-serif.<\/li>\n<\/ul>\n<\/details>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"dark-mode-support\">Dark Mode Support<\/h2>\n\n\n\n<p>One of the accessibility features of the Twenty Twenty-One theme is support for the visitor&#8217;s color scheme preferences in their operating system or browser&#8217;s settings. The feature is opt-in and supported in most operating systems, including <a href=\"https:\/\/support.google.com\/chrome\/answer\/9275525?co=GENIE.Platform=Android&amp;hl=en\">Android<\/a>, <a href=\"https:\/\/support.apple.com\/en-us\/HT210332\">iOS<\/a>, <a href=\"https:\/\/support.apple.com\/en-us\/HT208976\">OSX<\/a>, <a href=\"https:\/\/support.microsoft.com\/en-us\/windows\/change-desktop-background-and-colors-176702ca-8e24-393b-15f2-b15b38f69de6\">Windows 10<\/a>, as well as most Linux distributions.<\/p>\n\n\n\n<p>If you have Dark Mode enabled, your site will be shown to visitors using a light or dark color scheme, respecting their operating system&#8217;s preferences. Depending on their lighting conditions or personal preferences they may choose to switch color schemes using a dedicated button on the bottom-right of their site (or bottom-left for RTL languages).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"enabling-dark-mode-from-the-customizer\">Enabling Dark Mode from the Customizer<\/h3>\n\n\n\n<p>To activate Dark Mode Support, you can go to the Colors &amp; Dark Mode section in your Customizer. If you have a light color selected for the site&#8217;s background, you will be able to see and activate the <code>Dark Mode Support<\/code> setting. The background color you select will be applied to light mode, while Dark Mode colors are optimized automatically. You can use the Dark Mode On\/Off button at the bottom of the preview screen to toggle between dark &amp; light schemes in your preview.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"dark-mode-in-the-editor\">Dark Mode in the Editor<\/h3>\n\n\n\n<p>The editor will by default respect your operating system&#8217;s color scheme settings. If on the front of your site you have chosen a different scheme (using the Dark Mode On\/Off button), then the editor will use the preferred scheme.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/wordpress.org\/documentation\/files\/2020\/12\/TT1-Dark-Mode-Editor-scaled-1.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"2560\" height=\"1324\" src=\"https:\/\/wordpress.org\/documentation\/files\/2020\/12\/TT1-Dark-Mode-Editor-scaled-1.jpg\" alt=\"The post editor with Dark Mode enabled. The background color is dark grey and the text is white,\" class=\"wp-image-13737416\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2020\/12\/TT1-Dark-Mode-Editor-scaled-1.jpg 2560w, https:\/\/wordpress.org\/documentation\/files\/2020\/12\/TT1-Dark-Mode-Editor-scaled-1-300x155.jpg 300w, https:\/\/wordpress.org\/documentation\/files\/2020\/12\/TT1-Dark-Mode-Editor-scaled-1-1024x530.jpg 1024w, https:\/\/wordpress.org\/documentation\/files\/2020\/12\/TT1-Dark-Mode-Editor-scaled-1-768x397.jpg 768w, https:\/\/wordpress.org\/documentation\/files\/2020\/12\/TT1-Dark-Mode-Editor-scaled-1-1536x794.jpg 1536w, https:\/\/wordpress.org\/documentation\/files\/2020\/12\/TT1-Dark-Mode-Editor-scaled-1-2048x1059.jpg 2048w\" sizes=\"auto, (max-width: 2560px) 100vw, 2560px\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"support-and-resources\">Support and Resources<\/h2>\n\n\n\n<p><a href=\"https:\/\/wordpress.org\/support\/theme\/twentytwentyone\/\">Get community help with Twenty Twenty-One in its support forum<\/a>.<\/p>\n\n\n\n<p>You can also <a href=\"https:\/\/wordpress.org\/documentation\/article\/twenty-twenty-one-changelog\/\">read&nbsp;the theme\u2019s changelog<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Twenty Twenty-One is the new default theme for WordPress Version 5.6. Twenty Twenty-One is a blank canvas for your ideas and it makes the block editor your best brush. With new block patterns, which allow you to create a beautiful layout in a matter of seconds, this theme\u2019s soft colors and eye-catching \u2014 yet timeless [&hellip;]<\/p>\n","protected":false},"featured_media":0,"menu_order":21,"comment_status":"open","ping_status":"closed","template":"","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false},"category":[80,82],"class_list":["post-13563362","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\/13563362","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=13563362"}],"version-history":[{"count":7,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/13563362\/revisions"}],"predecessor-version":[{"id":16359791,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/13563362\/revisions\/16359791"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/media?parent=13563362"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/category?post=13563362"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}