Quickstart guide

Install Twentig

To install the Twentig plugin, follow these steps:

1. Log in to your WordPress Dashboard.
2. Click Plugins > Add New.
3. Type Twentig in the search box.
   Alternatively, you can click Upload Plugin to upload the plugin .zip file.
4. Click Install Now.
5. Once the installation is done, click Activate.

After you activate the plugin, you’ll be redirected to the Twentig home, where you can find quick links to help you get started.

↑ Table of Contents

Use a block theme

To take full advantage of Twentig, we recommend that you use Twenty Twenty-Four, the new default WordPress theme, or any block themes.

---

Full site editing features

A block theme, like Twenty Twenty-Four, is a theme that uses blocks for all parts of a site, including navigation menus, header, content, and site footer — allowing you to edit and customize all parts of your site.

Block themes are designed to support all of the features of full site editing. This includes the following: 

• Site Editor: an editor that allows you to edit all parts of your site, navigate between templates, and more.
• Styles: a feature that allows you to customize your site, including individual blocks, as much as you’d like with different colors, typography, layouts, and more.
• Templates: edit, create, and manage templates that a page or posts uses.
• Template parts: a way to organize and display groups of blocks as part of a block template mainly for site structure, like Headers and Footers.
• Theme blocks including the Navigation block, Query Loop block, and more.

Check out this video to get an introduction to these features.

↑ Table of Contents

---

Getting started with block themes and full site editing

The WordPress.org courses below will teach you the basics of full site editing and its features to help you get started with block themes.

• Part 1: Simple Site Design with Full Site Editing
• Part 2: Personalized Site Design with Full Site Editing and Theme Blocks
• Part 3: Advanced Site Design with Full Site Editing: Site Editor, Templates and Template Parts

↑ Table of Contents

Style your site

The Site Editor allows you to customize your entire site using a new styling system. Open the Site Editor from your WordPress Dashboard by clicking Appearance > Editor.

In the Site Editor, you can see the Styles icon in the top-right corner. Styles allows you to customize your site as much as you’d like with different colors, typography, layouts, and more.

To personalize your site even more, Twentig Styles adds extra options. Next to the Styles icon, you can find the Twentig Styles icon.

↑ Table of Contents

---

Change the typography

Inside Styles, you can manage your site’s typography by changing the font family, font size, font weight, line height, and more.

Add more Google Fonts

Twentig lets you define two additional fonts that you can choose from the Google Fonts catalog.

1. Inside Twentig Styles , click Typography.
2. Click Font 1.
3. Select the font family of your choice and the styles you want to include.
4. Save and reload the page to make these changes effective inside the editor. Now you can select the Font 1 you’ve just added in all the Font family dropdowns (inside the Styles and the block settings sidebar).

To define another font, repeat the process by clicking on Font 2.

Self-host your Google Fonts or use Google Fonts delivery service

By default, the Google Fonts you’re using are hosted locally on your server. Twentig lets you change the hosting method if needed.

1. Inside Twentig Styles , click Typography.
2. Click Font Hosting.
3. Click the toggle off to use the Google Fonts delivery service. Click the toggle on to host the fonts locally on your server.

Change the text font

1. Inside Styles , click Typography.
2. Click Text.
3. Here you can change the font size, line height, and font weight. To change the font family, open the Font family dropdown.
4. Select the font family of your choice.

Change the heading font

Edit the heading font settings

1. Inside Styles , click Blocks.
2. Click Heading.
3. Click Typography.
4. Here you can change the the font family, line height, font weight, and letter spacing. It’s likely you won’t use the size setting as it sets all the headings (H1 to H6) to the same size.

Change the blocks font settings (Navigation, Site Title…)

WordPress adds font family support to the following blocks:

• Navigation
• Site Title
• Site Tagline
• Post Title
• Query Title
• Heading
• Button
• List

You can either change their font setting globally inside Styles > Blocks. Or you can change the font settings of a block, individually and not across the site, by selecting them inside the Site Editor.

For example, you can change the font settings of your site navigation as follow:

1. Select your navigation block inside your header and click Settings . Inside the Typography panel, click + to add options.
2. Click Font family and the other settings you want to change.
3. Now you can change the font family and the other options you’ve added.

↑ Table of Contents

---

Change the colors

The Colors section inside Styles allows you to manage the default color of different global Elements on the site:

• Background: the background color for your whole website.
• Text: the default color used for text across the site.
• Link: the default color used for links across the site.

Here you can also manage the color palettes which are used to provide default color options for blocks.

For the Theme palette, most block themes such as Twenty Twenty-Four define a Base (background) and Contrast (text) color. If you’ve changed the Background and Text colors under Elements, we recommend that the Base and Contrast colors of the Palette match the Background and Text colors that you’ve set.

To change the color palettes:

1. Inside Styles > Colors, click the Palette.
2. Click and Edit colors.
3. Click the colors you want to change, and set your desired color.

↑ Table of Contents

---

Change the layout

Edit the content and wide width

Inside Styles > Layout, you can change the content and wide width settings defined by the theme.

The content width is applied to the content (paragraph, heading, list…) inserted at the root of the post/page editor and to all blocks whose alignment is set to None.

The wide width is applied to all blocks whose alignment is set to Wide width.

The content and wide widths are also applied to the blocks inside a Group or Cover block that has the “Inner blocks use content width” setting enabled.

Use Twentig spacing adjustments

To make it easier to build pages, Twentig includes an option to apply predefined spacing styles (margin and padding).

For example, it removes the margin between two consecutive full width groups with background color and adds proper vertical padding.

Enabling this option is helpful if you want spacing that looks great right out of the box. As Twentig block patterns rely on it, we recommend that you use this option.

Note: For each individual block, you can override the predefined spacing by setting a custom margin/padding/block spacing.

Edit site padding

Inside Styles > Layout, you can change the padding of your entire site’s structure. However, it’s likely you won’t need to use this setting.

↑ Table of Contents

---

Change the blocks styles

Inside Styles > Blocks, you can customize the appearance of the blocks across your entire site. It’s likely you won’t need to change all the block settings in this section, but it can help customize some blocks globally.

For example, you may find it useful to edit the Button block globally by changing its font family, font size, colors, padding, and border radius.

1. Inside Styles , click Blocks.
2. Click Button.
3. Here you can change the typography, colors, and layout of the Button block across your site.

Note: Changes here will impact each instance of this block unless it has been individually customized. For example, if you set a custom color on an individual button block, the global Styles won’t override this custom color.

↑ Table of Contents

---

Add custom CSS

You can use the WordPress editor to add custom CSS and make style customizations to your site. To do so, follow this step-by-step guide:

1. Inside your WordPress dashboard, go to Appearance > Editor.
2. Click Styles in the Design menu.
3. Click the Edit styles  icon.
4. Click the More  icon in the top-right corner of the Styles panel.
5. Select Additional CSS.
6. Add your CSS code in the Additional CSS box.
7. Once done, click the Save button.

↑ Table of Contents

---

Set your site icon

Site icon (favicon) is what you see in browser tabs and bookmark bars. By default, WordPress uses the image you’ve uploaded for the Site Logo block as the site icon.

To use a custom icon, click Twentig then Site icon inside your WordPress dashboard. It will open the Customizer, where you can upload your site icon.

↑ Table of Contents

Build your site with blocks

Twentig supercharges the block editor with additional block settings, styles, CSS classes, and pre-designed patterns — making it easier to create your own professional website.

---

Getting started with blocks

New to the WordPress block editor? In the WordPress.org articles listed below, you’ll learn the basics of using the block editor.

• An introduction to the block editor
• A detailed blocks guide

↑ Table of Contents

---

Enhance the core blocks

Twentig enhances the existing WordPress blocks by providing additional styles, block settings, margin controls, responsive visibility controls, and CSS classes. They appear in the block settings sidebar when a block is selected. Click to open the settings sidebar.

1. Selected block
2. Styles
3. Twentig settings
4. Margin
5. Responsive visibility
6. Additional CSS Classes

Use additional block settings and styles

Twentig provides additional settings, styles, and CSS classes for the following blocks:

• Group: shadow, shape divider
• Columns: responsive layout
• Column: styles (shadow, hard shadow), stretched link
• Media & Text: styles (shadow, overlap), responsive layout, reverse stack order, stretched link, full height
• Cover: styles (shadow, inner border, rounded), aspect ratio, shapes, stretched link, hover effect
• Heading: typography options, decoration, responsive alignment
• Paragraph: typography options, decoration, responsive alignment
• List: styles (dash, checkmark, arrow, border, no bullet, inline), spacing
• Separator: styles (asterisks, dotted, dashed), width, height
• Image: styles (rounded corner, shadow, frame, border), shapes
• Gallery: fixed width columns, image aspect ratio,responsive layout
• YouTube, Vimeo, SoundCloud, and Video blocks: style (frame)
• Social Icons: styles (square, rounded), hover effect
• Quote and Pullquote: additional styles
• Table: styles (border, inner border), vertical alignment
• Navigation: responsive breakpoint, menu icon size, hover style, active style
• Post Featured Image: styles (rounded, shadow, frame), shapes
• Post Tags and Post Categories: styles (outline, pill, hashtag, plain)
• Post Author: inline layout, avatar shape
• Pagination: page numbers styles (circle, square, plain), previous page and next page styles (pill, square)
• Previous Post and Next Post: styles (stack, arrow)
• Site Title: underline style
• Site Logo: image width on mobile
• Post Title: typography options
• Tag Cloud: style (pill)
• Search: style (underline)

Edit the margins of the blocks

WordPress lets you control the margins of a few blocks (Heading, Columns, Buttons…):

1. With your block selected, click Settings . Inside the Dimensions panel, click + to add options.
2. Click Margin to add this option.
3. Click Unlink Sides.
4. Now you can change the block margins with your custom values.

For the blocks that don’t have WordPress margin controls, Twentig adds Margin Top and Margin Bottom settings inside the Advanced panel to let you adjust the vertical spacing.

When you select a margin value, its respective CSS class is automatically added to the Additional CSS Class(es) field.

Control the visibility of the blocks

Inside the Advanced panel, Twentig lets you control the block’s visibility based on the viewport size. When you enable a visibility option (Hide on Desktop, Hide on Tablet, or Hide on Mobile), the block will be hidden on this device.

You can see that the respective class is automatically added to the Additional CSS Class(es) field.

Add CSS Classes

Inside the Advanced panel, you can add CSS classes to your block. To fine-tune your blocks, Twentig provides a list of predefined CSS classes for several blocks (indicated by the icon).

To add predefined CSS classes, follow these steps:

1. Inside the Advanced panel, click to open the Twentig CSS Library.
2. Select the class(es) you want to apply to the block.
3. Click to close the library. You can see that the classes are automatically added to the Additional CSS Class(es) field.

↑ Table of Contents

---

Build your pages with pre-designed patterns

Twentig brings hundreds of ready-to-use pre-designed patterns, making it easy to create stunning pages. There are 2 types of pre-designed patterns:

• Block pattern: a predefined arrangement of blocks that can be used standalone or combined with other block patterns to create a page.
• Page pattern: an entire pre-designed page (that you can find under the Pages category).

You can customize, mix and match the layouts to fit your needs. Or use them as is.

How to insert a block pattern

To insert a block pattern, follow these steps:

1. Inside the block editor, place your cursor where you want to insert the block pattern.
2. Click to open the block inserter.
3. Click the Patterns tab.
4. Browse the categories and click the block pattern you want to insert (you can also drag and drop the pattern into your content).
5. Once inserted, you can edit the block pattern with your own content, customize, or rearrange the blocks.

Note: WordPress includes its block patterns. If you wish to disable them, navigate to Twentig > Settings in your WordPress dashboard and uncheck the Core Block Patterns box.

↑ Table of Contents

---

Build your header and footer

Check out this video (from 0:00 to 2:54) to see how you can use Template parts to edit your header and footer.

Build your header

Use Twentig navigation settings

A typical header on a website includes a logo or a site title and a navigation menu. If you’re not familiar with the Navigation block, you can check out this video or this article to see how to create a menu with the Navigation block.

To customize your navigation even more, Twentig provides additional settings to the Navigation block under the Twentig settings panel. You can find them under the Twentig settings panel:

• Hover style: select the hover state style of the navigation links.
• Active style: select the active state style of the navigation links.
• Overlay menu breakpoint: control on which device the menu collapsed into a hamburger menu.
• Icon size: control the size of the hamburger and close icons.

Use block patterns to build your header

In addition to the header block patterns defined by your theme, Twentig provides header patterns that you can find in the Headers category of the patterns inserter:

• Full width header with border
• Wide width header with shadow

You can insert these patterns inside the Header template part defined by your theme, then you can edit it to fit your needs.

Build your footer

Like how you edit the header, you can modify your footer by editing the Footer template part defined by your theme.

Use block patterns to build your footer

In addition to the footer block patterns defined by your theme, Twentig provides footer patterns that you can find in the Footers category of the patterns inserter:

• Footer Inline: Copyright and Social Links
• Footer Inline: 2 Rows
• Footer Stack: Navigation
• Footer 2 Columns: Text and Navigation

You can insert these patterns inside the Footer template part, and then you can edit it to fit your needs.

↑ Table of Contents

---

Build your blog with the Query Loop block

The Query Loop block is an advanced block that allows you to display your posts. Check out this article to learn more about the Query Loop block.

Use Twentig settings

Twentig provides additional settings to the Theme blocks used to build the query loop:

• Post Featured Image: styles (rounded, shadow, frame), shapes
• Post Title: underline style, responsive text alignment
• Post Author: inline layout, avatar shape
• Post Categories and Post Tags: styles (outline, pill, hashtag, plain), underline style

Use block patterns to display your posts

In addition to the query block patterns defined by your theme, Twentig provides query patterns that you can find in the Query category of the patterns inserter:

• Posts 3 Columns
• Posts: Small Image on Left
• Posts Stack: Right Sidebar

You can insert these patterns to replace the existing Query Loop block inside the Home, Index, or Archive templates defined by your theme.

↑ Table of Contents