Learn the basics of using Twentig.
Table of contents
To install the Twentig plugin, follow these steps:
- Log in to your WordPress Dashboard.
- Click Plugins > Add New.
- Type Twentig in the search box.
Alternatively, you can click Upload Plugin to upload the plugin .zip file.
- Click Install Now.
- Once the installation is done, click Activate.
After you activate the plugin, you’ll be redirected to the Twentig Home. To help you get started, take the guided tour that will walk you through the basics of Twentig. You’ll discover all the features that Twentig adds to the Customizer and the Block Editor.
Note: To take full advantage of Twentig, we recommend that you use Twenty Twenty-One (or Twenty Twenty), the default WordPress theme. If you aren’t using one of these themes, Twentig will guide you to install the Twenty Twenty-One theme.
Customize the default WordPress theme
Twentig helps you customize the default WordPress themes (Twenty Twenty-One or Twenty Twenty) the way you want.
To control the look of your site, launch the Customizer from your WordPress Dashboard by clicking Appearance > Customize. From here, you can easily make and preview changes to your website before publishing them.
How to customize the Twenty Twenty-One theme
To personalize your site even more, Twentig adds extra options to the Customizer. You can find these options in the Site Identity, Colors, and Twentig Options panels. From post grid to sticky header to footer layout, Twentig provides endless ways to enhance your theme. Change the look and feel of your site by customizing the fonts, colors, global styles, 404 page, and more.
Click around and explore, you won’t break anything. Then click Publish to make the changes live on your site.
How to customize the Twenty Twenty theme
Twentig adds extra options to the Customizer. You can find these options in the Site Identity, Colors, Cover Template, and Twentig Options panels.
Experiment with these options and customize the theme to make it your own. Then, once you’re happy with the way your site looks, don’t forget to click Publish.
Start with a pre-built website
Instead of starting from scratch, you can quickly import a starter website. Choose one from a variety of starter websites and seamlessly load it in the Customizer.
To import a starter website, follow these steps:
- Inside the Customizer, open the Twentig Starters Websites panel.
- Select the site that you want to import in the Starter Website dropdown. You can preview the live demos to help you choose.
- Select the Import Type (your existing posts and pages are always preserved):
- All: import the Customizer styles, pages, posts, menus, and widgets.
The starter website is fully replicated. Your current Customizer settings, menus, and widgets are replaced.
- Content: import the pages, posts, menus, and widgets.
Your current Customizer settings are preserved. Your current menus and widgets are replaced.
- Pages: import only the pages.
Your current Customizer settings, menus, and widgets are preserved.
- Customizer Styles: import only the Customizer styles.
Your current Customizer settings are replaced. No content (pages, menus, widgets) is imported to your site.
- All: import the Customizer styles, pages, posts, menus, and widgets.
- Click Load. Wait a few seconds until the Customizer reloads and displays the starter website.
- Click Publish at the top of the screen to publish the changes.
Note: After you load a starter website, you can customize it before publishing it. No changes appear on your live site until you click Publish.
Do more with the block editor
Twentig supercharges the block editor with additional block settings, pre-designed layouts, and page templates.
Getting started with the block editor
New to the WordPress block editor? In the WordPress.org articles listed below, you’ll learn the basics of using the block editor.
Enhance the core blocks
Twentig enhances the existing WordPress blocks by providing additional styles and block settings. They appear in the block settings sidebar when a block is selected. Click to open the settings sidebar.
- Selected block
- Twentig settings
- Additional CSS Classes
Inside the Styles panel, Twentig adds styles for the following blocks:
- Media & Text: shadow, overlap
- Cover: shadow, inner border
- Gallery: rounded corners, white frame
- Image: rounded corners, shadow, white frame, subtle border
- List: dash, checkmark, arrow, border, inner border, table, no bullet, inline
- Table: horizontal border, horizontal inner border
- Quote & Pullquote: additional styles depending on the theme
- Separator: short line
- Latest Posts: card, border
Twentig adds a Twentig settings panel for the following blocks:
- Group: decoration (shadow, border, shape)
- Columns: gutter width, columns stacking, columns style, text alignment, stretch link
- Media & Text: stack on medium screens, stack with media on bottom, stretch link
- Cover: stretch link, hover effect
- Gallery: fixed width columns, image aspect ratio, gutter width, stack on mobile
- Latest Posts: image aspect ratio, heading size, display “Continue reading”, stretch link
- Social Links: hover effect
Inside the Advanced panel, Twentig adds Margin Top and Margin Bottom settings for each block (with a few exceptions) 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.
Additional 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 the following blocks:
- Media & Text
- Latest Posts
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. Close the library. You can see that the classes are automatically added to the Additional CSS Class(es) field.
Build your pages with pre-designed layouts
Twentig brings hundreds of ready-to-use pre-designed layouts, making it easy to create stunning pages. There are 2 types of pre-designed layouts:
- Block pattern: a predefined arrangement of blocks that can be used standalone, or combined with other block patterns to create a page.
- Page layout: an entire pre-designed page.
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:
- Inside the block editor, place your cursor where you want to insert the block pattern.
- Click to open the block inserter.
- Click the Patterns tab.
- Browse the categories and click the block pattern you want to insert (you can also drag and drop the pattern into your content).
- Once inserted, you can edit the block pattern with your own content, customize, or rearrange the blocks.
Note: WordPress includes its own block patterns. If you wish to disable them, navigate to Twentig > Settings in your WordPress dashboard and uncheck the Core Block Patterns box.
How to insert a page layout
To insert a page layout, follow these steps:
- Inside the block editor, place your cursor where you want to insert the layout.
- Click to open the Twentig Page Layouts sidebar.
If you don’t see , click and click Twentig Page Layouts. You can pin to the top toolbar by clicking .
- Browse the categories and click the page layout you want to insert.
- Once inserted, you can edit the blocks with your own content, customize, or rearrange the blocks.
Change the page template
To let you control the look of your entire page, Twentig provides 4 custom page templates:
- Twentig – No title
This template removes the page title. Now you can start your page with any block or block pattern (e.g., pattern from the Hero category).
- Twentig – No header, no footer
This template removes the page title, header, and footer. Now you can create a landing page, a coming soon page, and a one-page website.
- Twentig – Transparent header
This template removes the page title and makes the header’s background transparent. You can use this template to start your page with a full-width colored Group.
- Twentig – Transparent header light
This template removes the page title and makes the header’s background transparent and the header’s text color white. You can use this template to start your page with a full-width Cover.
To change the template of a page, follow these steps:
- Inside the block editor, click to open the settings sidebar.
- Click the Page tab.
- Inside the Template panel, select the desired template.
- Click Update to apply the change.
Congratulations! Now you can enjoy true creative freedom.
Subscribe to our newsletter to receive exclusive content, tips and updates.