Quickstart guide

Learn the basics of using Twentig.

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.
Screenshot of the WordPress dashboard showing where to install the Twentig plugin.

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.

Screenshot of the Twentig Home showing how to take the guided tour.

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.

↑ Table of Contents

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.

Screenshot of the Customizer showing the Twentig Options panel for the Twenty Twenty-One theme.

Click around and explore, you won’t break anything. Then click Publish to make the changes live on your site.

↑ Table of Contents


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.

Screenshot of the Customizer showing the Twentig Options panel for the Twenty Twenty theme.

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.

↑ Table of Contents


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.

Screenshot of the Customizer featuring the starter websites importer.

To import a starter website, follow these steps:

  1. Inside the Customizer, open the Twentig Starters Websites panel.
  2. Select the site that you want to import in the Starter Website dropdown. You can preview the live demos to help you choose.
  3. 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.
  4. Click Load. Wait a few seconds until the Customizer reloads and displays the starter website.
  5. 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.

↑ Table of Contents

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.

↑ Table of Contents


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 the settings icon to open the settings sidebar.

Diagram of the block editor showing the locations of the Twentig features.
  1. Selected block
  2. Styles
  3. Twentig settings
  4. Margin
  5. Additional CSS Classes

Styles

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 settings

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

Margin

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.

Screenshot of the Advanced panel featuring the margin settings.

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:

  • Paragraph
  • Heading
  • List
  • Table
  • Group
  • Cover
  • Columns
  • Media & Text
  • Image
  • Gallery
  • Video
  • Spacer
  • Separator
  • Latest Posts

To add predefined CSS classes, follow these steps:

1. Inside the Advanced panel, click the plus icon to open the Twentig CSS Library.

Screenshot of the Advanced panel showing how to open the Twentig CSS Library.

2. Select the class(es) you want to apply to the block.

Screenshot of the Twentig CSS Library showing how to add a predefined class.

3. Close the library. You can see that the classes are automatically added to the Additional CSS Class(es) field.

Screenshot of a predefined class added to the Additional CSS Class(es) field.

↑ Table of Contents


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.

Screenshot of a block pattern featuring a team.
Example of a block pattern
Screenshot of a services page layout.
Example of a page layout

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 the block inserter icon 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.
Screenshot of the block editor showing how to insert a block pattern.

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:

  1. Inside the block editor, place your cursor where you want to insert the layout.
  2. Click the tw icon to open the Twentig Page Layouts sidebar.
    If you don’t see the tw icon, click the options icons and click Twentig Page Layouts. You can pin the tw icon to the top toolbar by clicking the star icon.
  3. Browse the categories and click the page layout you want to insert.
  4. Once inserted, you can edit the blocks with your own content, customize, or rearrange the blocks.
Screenshot of the block editor showing how to insert a page layout.

↑ Table of Contents


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.
Screenshot of a page using the "No title" template.
Example of “No title”
Screenshot of a page using the "No header, no footer" template.
Example of “No header, no footer”
Screenshot of a page using the "Transparent header" template.
Example of “Transparent header”
Screenshot of a page using the "Transparent header light" template.
Example of “Transparent header light”

To change the template of a page, follow these steps:

  1. Inside the block editor, click the settings icons to open the settings sidebar.
  2. Click the Page tab.
  3. Inside the Template panel, select the desired template.
  4. Click Update to apply the change.
Screenshot of the block editor showing where to change the page template.

Congratulations! Now you can enjoy true creative freedom.

↑ Table of Contents

Get more

Subscribe to our newsletter to receive exclusive content, tips and updates.