Blocks, Block Patterns, Twenty Twenty Customizer – Twentig Website Builder

Description

A new WordPress website builder. Simple. Powerful.

Twentig helps you build your pages more easily with the WordPress block editor. With our plugin, quickly customize the design of your Twenty Twenty theme to make your website stand out.

From enhanced blocks to pre-designed block patterns to page templates to advanced Twenty Twenty theme customization, you’ve got what you need to build a beautiful website with WordPress.

The Twenty Twenty theme like you’ve never seen.

Twentig offers powerful features to customize Twenty Twenty, the most popular WordPress theme — making it the perfect combination to build your website.

Advanced Customizer options. From blog grids to sticky header to footer layout, our plugin provides endless ways to enhance Twenty Twenty. Change the look and feel of your website by customizing the fonts (Google Fonts), colors, global styles, 404 page, and more.

Custom page templates. Control the look of your entire page with our page templates. Easily remove the page title, header, footer, or set a transparent header. Now you can use the WordPress block editor to create a custom hero, landing page, coming soon page, and more.

Tailored design. Twentig brings design improvements to the Twenty Twenty theme. Our additional block settings, pre-designed block patterns, and page layouts are built specifically for Twenty Twenty — so it’s easier than ever to make beautiful pages with blocks.

Do more with WordPress blocks.

Twentig enhances the existing WordPress blocks — taking the block editor to a new level of design and creativity.

Block customization made easy. We added the right amount of features to the WordPress core blocks. So you can easily customize your blocks to fit your needs with just a few clicks. Enjoy a seamless and familiar experience.

Powerful block features. Twentig provides alternative styles, advanced block settings, margin controls, and CSS classes. From columns style to group shape divider to typography settings, you have the best tools to customize your blocks and build pages that stand out.

Build your website in no time with block patterns and page layouts.

Twentig brings hundreds of pre-designed block patterns and page layouts — making it easier and faster than ever to create stunning pages.

Flexible block patterns. Choose from a variety of versatile block patterns and page layouts that you can mix and match to fit your project. Our block patterns library is designed to enable a wide range of uses and endless design possibilities.

Professional design. Crafted by award-winning designers, our block patterns and page layouts are responsive and give your pages a professional look right from the start — no coding and design skills needed.

Twentig features overview

Check out the screenshots to see what you can do with Twentig.

ADDITIONAL TWENTY TWENTY THEME OPTIONS

Header

  • Multiple header layouts
  • Sticky header
  • Header width
  • Header decoration
  • Menu link style
  • Custom logo for transparent header
  • Social icons locations
  • Button in header menu (menu-button CSS class)
  • Show/hide tagline
  • Mobile logo width
  • Custom hamburger icon
  • Show/hide the label of menu and search toggle buttons

Footer

  • Multiple footer layouts
  • Footer widgets layout
  • Footer width
  • Custom copyright and remove “Powered by WordPress”
  • Social icons locations
  • Footer custom colors
  • Footer text scale

Site Layout

  • Text width

Blog Posts Page

  • Blog layout: stack, grid, grid card
  • Blog columns for grid layouts
  • Featured image options
  • Blog content options
  • Blog meta options

Single Blog Post

  • Featured image layout
  • Single post meta options
  • Post navigation layout
  • Hide comments section

Typography & Colors

  • Google Fonts options (curated collection and custom Google Fonts)
  • Google Fonts pairings and presets
  • Font settings
  • Custom hexadecimal color for primary color
  • Page title section background color

Pages

  • Custom page templates: remove the page title, header, and footer, or set a transparent header
  • Featured image layout
  • Cover page template options
  • Page subtitle
  • Alternative search results layout

404 Page

  • Option to assign any page as the 404 page

Additional Settings

  • Separator style
  • Button style
  • Social icons style

ADDITIONAL BLOCK SETTINGS

  • WordPress core blocks: top and bottom margins
  • Group block: shadow, border, shape divider, full height
  • Columns block: gutter, responsive layout, columns style (card, border), text alignment, stretched link
  • Media & Text block: shadow and overlap styles, responsive layout, reverse stack order, stretched link, full height
  • Cover block: shadow and inner border styles, full height, stretched link, hover effect
  • Heading block: font size preset, wide width, typography options, decoration, link underline
  • Paragraph block: wide width, typography options, link underline
  • List block: list style (dash, checkmark, arrow, border, no bullet, inline), typography options, spacing, link underline
  • Image block: rounded, shadow, frame and border styles, filter
  • Gallery block: stack variation, rounded and frame styles, fixed width columns, image aspect ratio, gutter, responsive layout, caption size, border, filter
  • Youtube, Vimeo, Soundcloud, and Video blocks: frame style
  • Latest Posts block: card and border styles, image aspect ratio, heading size, stretched link, text alignment
  • Social Icons block: color, size, hover effect
  • Quote block: icon, large icon, and minimal styles
  • Pullquote block: minimal style
  • Table block: border and inner border styles, vertical alignment
  • Buttons block: full width
  • Search block: alignment, full width
  • Separator block: short line style, responsive visibility
  • Spacer block: responsive visibility

BLOCK PATTERNS LIBRARY

Hundreds of block patterns grouped by following categories:

  • Columns
  • Text Columns
  • Text & Image
  • Text
  • Hero, Page Title
  • Cover
  • Call To Action
  • List
  • Numbers, Stats
  • Gallery
  • Video, Audio
  • Latest Posts
  • Contact
  • Team
  • Testimonials
  • Logos, Clients
  • Pricing
  • FAQ
  • Events, Schedule

Get more

Enjoying Twentig?

Screenshots

  • Create a beautiful blog. Change the layout, the elements you want to display, and more.
  • Customize your header. Change the layout and style. Add social icons, button, and more.
  • Customize your footer. Change the layout and style, edit the copyright, and more.
  • Google Fonts. Easily change your website's fonts by using our font pairings or by picking the Google Fonts of your choice.
  • Sticky Header. Keep the navigation visible when the user scrolls the page.
  • Text width option. Change the default width throughout your website.
  • Custom Color. Customize the primary color with the hexadecimal color value of your choice.
  • Design freedom. Build the entire page the way you want by removing the title. Start your page with any block.
  • Transparent header. Start your page with a transparent header and a custom hero built with blocks.
  • Custom 404. Build a stunning 404 page.

Installation

Install Twentig

To install and activate Twentig:

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

Once the installation has finished, click on Activate.

Install Twenty Twenty

To take full advantage of Twentig, we strongly recommend that you use Twenty Twenty, the default WordPress theme.

To install and activate Twenty Twenty:

  1. Log in to your WordPress Dashboard.
  2. Click Appearance > Themes.
  3. Search for the Twenty Twenty theme and click on Activate.

After installation

Twentig features appear inside the WordPress block editor and the Customizer.

  • Inside the Customizer (Appearance > Customize), you can locate our additional options for Twenty Twenty in the Site Identity, Colors, Cover Template, and Twentig Theme Options panels.
  • Inside the block editor, you can locate the [tw] icon at the top-right corner. It opens the Twentig block patterns library.
  • Inside the block editor, you can find our additional block settings inside the block settings sidebar (Style, Twentig settings, and Advanced panels) and the top toolbar — depending on the selected block.
  • Inside the block editor, you can find our custom page templates (Settings sidebar > Document panel > Page Attributes).

FAQ

What are the requirements for using Twentig?

We recommend that you use the latest version of WordPress (5.5) to take full advantage of Twentig and the block editor.

Is Twentig easy to use?

With Twentig, no coding or design skills are needed. You can customize the Twenty Twenty theme and WordPress blocks in a few clicks. Our responsive pre-designed block patterns and layouts make it even easier to build professional-looking pages.

Which themes work best with Twentig?

Twentig works perfectly with Twenty Twenty. Our Customizer options are exclusive for Twenty Twenty, and our block patterns are built specifically for it. Twentig block options should work with any theme, but it may require some styling for themes that modify the WordPress blocks. We strongly recommend that you use Twenty Twenty.

Is Twenty Twenty a great theme?

Absolutely! Twenty Twenty, the most popular WordPress theme, is a modern theme designed for every purpose, from personal to business websites. Twenty Twenty is accessible, responsive, and RTL ready. Paired with Twentig, it takes full advantage of the creative freedom enabled by the block editor.

How to customize Twenty Twenty with Twentig?

To customize your theme, launch the Customizer (Appearance > Customize). Here you can easily make and preview changes to your website before publishing them. Find our additional options in the Site Identity, Colors, Cover Template, and Twentig Theme Options panels.

How to insert a block pattern?

  1. Inside the block editor, place your cursor where you want to insert the layout.
  2. In the top-right corner, click the [tw] icon to open the Twentig Library.
  3. Browse the categories and click on the block pattern you want to insert.
  4. Now you can add your content, customize, or rearrange the blocks as needed.

How to remove the page title, header and footer or set a transparent header?

To let you control the look of your entire page, Twentig provides 4 custom page templates. To change the template of a page:

  1. Open the page you want to edit.
  2. In the Settings sidebar, open the Document panel.
  3. Under Page Attributes, select the desired template.
  4. Update the page to apply the change.

How to replace the default page title with a custom hero?

Twentig allows you to replace the hero of the Twenty Twenty theme. You can build it from scratch, or you can insert one of our pre-designed block patterns.

  1. Open the page you want to edit and set the page title as usual.
  2. Select one of the Twentig page templates (see previous question).
  3. Place your cursor at the top of the editor, just below the page title.
  4. In the top-right corner, click the [tw] icon to open the Twentig Library.
  5. Browse the “Hero, Page title” category and click on the layout you want to insert.

How to select a block?

Simply click on the block to select it. If it isn’t the block you intended to select, use the block breadcrumb navigation at the bottom of the editor to select the desired block. For better workflow, we recommend that you use the block breadcrumb navigation when you build your pages.

Is Twentig RTL ready?

Yes! Twentig supports RTL (Right to Left) languages.

Reviews

August 5, 2020
The 2020 theme is beautifully minimal, but was always a bit too lacking in the configuration department to use on real world projects. This plugin changes everything and I absolutely recommend it.
August 3, 2020
Your plugin is the best of its kind. You have added everything needfuls. Thanks for your work.
July 30, 2020
Love it, I was pleasantly surprised, nothing else to say.
July 11, 2020
Donated $10 after using this for ten minutes. Very sensible customization options that feel like they should be built into the core theme. Exactly what I was looking for.
Read all 26 reviews

Contributors & Developers

“Blocks, Block Patterns, Twenty Twenty Customizer – Twentig Website Builder” is open source software. The following people have contributed to this plugin.

Contributors

“Blocks, Block Patterns, Twenty Twenty Customizer – Twentig Website Builder” has been translated into 2 locales. Thank you to the translators for their contributions.

Translate “Blocks, Block Patterns, Twenty Twenty Customizer – Twentig Website Builder” into your language.

Interested in development?

Browse the code, check out the SVN repository, or subscribe to the development log by RSS.

Changelog

1.1

Release date: August 14, 2020

Twentig 1.1 brings new powerful features to the block editor, making it easier than ever to build beautiful pages. We recommend that you use WordPress 5.5 to take full advantage of Twentig and the block editor.

  • New: Additional block options (alternative styles, advanced block settings, margin controls, and CSS classes) to customize the WordPress core blocks.
  • New: Layout library with hundreds of ready-to-use block patterns.
  • New: Twentig overview page and options to disable default WordPress block patterns and WordPress Block Directory.
  • New: Enhanced Twenty Twenty block style for front-end and block editor.
  • New: Added vh unit option to the Cover block for Twenty Twenty.

1.0.7

Release date: August 4, 2020

  • Fix: Change Customizer Javascript to display the right options when using Google Fonts.

1.0.6

Release date: August 3, 2020

  • New: Custom Google fonts. Add the Google Fonts of your choice.
  • Enhancement: Load minified CSS stylesheet.
  • Code quality: Refactor PHP and CSS code following the WordPress Coding Standards.
  • Fix: Change header z-index for better compatibility with third-party plugins.

1.0.5

Release date: June 25, 2020

  • Fix: Apply selected blog layout to custom taxonomies pages attached to the post type.
  • Fix: Properly align the More block “Continue reading” link for grid and stack blog layouts.
  • Fix: Apply the primary custom hexadecimal color to the faux-button class inside the Customizer live-preview.

1.0.4

Release date: June 11, 2020

  • Fix: Adjust first-child Cover block margin for Twenty Twenty 1.4
  • Fix: Adjust decoration for active menu links.

1.0.3

Release date: June 9, 2020

  • New: Added Google Font pairings and presets.
  • New: Added curated Google Fonts (Inria Sans, Jost, Manrope, Yanone Kaffeesatz, Zilla Slab).

1.0.2

Release date: May 27, 2020

  • New: Added font family and font weight options for site title.
  • Fix: Change sticky transparent header to opaque when AMP active.
  • Fix: Change sanitize function for site title letter-spacing.
  • Fix: Prevent improperly formatted URL for Google Fonts by specifying default menu font weight.
  • Fix: Prevent PHP error when setting hexadecimal color for primary color if no value was previously set.

1.0.1

Release date: May 24, 2020

  • Fix: Skip enqueueing JavaScript for AMP.
  • Fix: Update footer layout PHP logic.

1.0

Release date: May 23, 2020

  • New: Header layouts (Left, Stack Center).
  • New: Sticky header.
  • New: Header decoration (Shadow, Border).
  • New: Button in header menu. Added menu-button CSS class to transform a menu item into a button.
  • New: Social icons locations (Desktop Horizontal Menu, Expanded Menu Panel, Footer).
  • New: Bottom footer layout (Inline Left, Inline Center, Inline Right, Stack).
  • New: Blog layouts (Grid, Grid Card).
  • New: Blog columns (2, 3) for grid layouts.
  • New: Option to hide the post content on blog archives.
  • New: Featured image aspect ratio on blog archives.
  • New: Featured image layout on single post (Narrow Image, Wide Image, Full Width Image, No Image).
  • New: Single post navigation with featured images.
  • New: Featured image layout on page (Narrow Image, Wide Image, Full Width Image, No Image).
  • New: Custom 404 page.
  • New: Custom hexadecimal color for primary color.
  • New: Updated Google Fonts API to v2.
  • New: Updated font weights for variable fonts.
  • New: Added RTL support.
  • CSS Fix: Remove underline for hover/active menu links when the Color option is selected.

0.9.2

Release date: May 21, 2020

  • Update readme.txt file to change the plugin display name.

0.9.1

Release date: April 23, 2020

  • CSS Fix: Adjust top padding for Transparent header page templates.
  • CSS Fix: Adjust first block margin for No title page template on Safari.

0.9

Release date: April 3, 2020

  • New: Added text width option to set a wider text (applies to heading, paragraph, and default width blocks).
  • New: Added 2 page templates for transparent header. Make it possible to start a page with a transparent header and a custom hero built with blocks (cover, group, image, etc.).
  • Theme Fix: Adjust CSS margin and padding for several blocks to improve design and browser compatibility.

0.8

Release date: March 22, 2020

Make Twentig compatible with the upcoming WordPress 5.4 version.

0.7

Release date: March 16, 2020

  • New: Added curated Google Fonts (Arya, B612, Big Shoulders Display, DM Sans, Inria Serif, Kalam, Red Hat Display, Red Hat Text, Rufina, Signika, Ubuntu Mono).
  • New: Added color option for Menu Hover/Active Link.

0.6

Release date: March 2, 2020

  • New: Option to hide the bottom footer.
  • New: Widgets layout (display the widgets in 1, 2, 3, 4, or 5 columns).
  • New: Footer width.
  • New: Footer text scale.

0.5

Release date: February 24, 2020

  • New: Google Fonts and typography settings for Body, Headings, Menu, and Site Title.
  • New: Mobile logo width.
  • New: Page title section background color.
  • New: Footer custom background color.
  • New: Footer links color.
  • New: Space between primary menu items.
  • New: Hover/active menu links decoration.
  • New: Option to hide the label of menu and search toggle buttons.
  • New: Option to hide post meta icons.
  • New: Option to hide the navigation on single post.
  • New: Option to hide the comments section on single post.
  • New: Button shape (square, rounded, pill).

0.4

Release date: January 20, 2020

  • New: Add custom copyright option
  • New: Add blog featured image option
  • New: Add excerpt length option
  • New: Add hamburger menu icon option

0.3

Release date: January 13, 2020

  • New: Custom page templates (remove title, header & footer).
  • New: Remove the top margin for the first full-width block of a page. Remove the bottom margin for the last full-width block of a page.
  • New: Enable excerpt on pages to display a subtitle.
  • New: Convert blocks inside widgets.
  • Theme Fix: Reset outer margin for first and last block inside entry-content, group, and cover.
  • Theme Fix: Fixed background image on touch devices.
  • Theme Fix: Author and meta side margins for the cover template.

0.2

Release date: January 7, 2020

  • New: Customizer option to remove “Powered by WordPress” credit.

0.1

Release date: December 3, 2019

  • Additional Customizer settings for the Twenty Twenty theme.

0.0.1

Initial Beta Release