getwid wordpress blocks gutenberg

Meet Getwid: WordPress Gutenberg Blocks by MotoPress

Probably the fiercest Gutenberg block competition is in full swing. We are observing the rise of Gutenberg add-on plugins that are quickly growing in popularity.

However, I believe this time there is one important thing that unites all the block providers – and it’s the Gutenberg editor itself. The editing environment of Gutenberg made it much easier to combine different blocks from different companies and use them together with the core blocks, literally on one page. The matter of styling, performance and development approaches in general still differ, of course, but at least you as a WordPress user can benefit from this freedom of choice and flexibility.

Now the most interesting part! With years of crafting WordPress content building tools under the belt, MotoPress has also made its contribution!

Today we are introducing Getwid – a free Gutenberg blocks plugin that ships with the bundle of extra complex and simple blocks for all types of websites.

Before we list the blocks, let’s try to take a closer look at the plugin from different angles.

Major concepts of Getwid WordPress blocks

When it comes to choosing a Gutenberg blocks add-on, it’s not only the number of blocks that matters. So what have we done differently? What best practices have we followed? Here are some basic principles underlying Getwid:

  • A great number of useful custom blocks (24+ blocks so far). Of course, we’ve tried to include maximum blocks in order to make the plugin a one-stop solution for many website building purposes. However, if you lack any block, Getwid can be easily used with other third-party Gutenberg plugins and core Gutenberg WordPress blocks.
  • Multiple little tricks to handle the styling better: minified CSS in the effort to keep your website fast-loading.
  • An awesome interplay with your current WordPress theme styles.
  • Smart and flexible block configuration settings in accordance with the block purpose: more necessary configuration settings for advanced blocks, fewer settings for simple blocks.
  • Easy inline editing with tons of settings within each block.

Since there are lots of blocks in the plugin, we’ll try to present them in the organized way so you can easily see what blocks exactly are offered, how to make use of them and get an idea of the customization system of each block.

To illustrate block examples, I’ve used the Getwid Base free Gutenberg theme, which was completely designed with Getwid (make sure to give it a try!)

Getwid Base Theme Demo

Section Block

getwid section block featured

Section block is one of the most advanced and important Gutenberg blocks by Getwid. Its main purpose is to help you create a multi-element section that can be controlled as a single block.

This block is highly flexible! Apart from custom Getwid blocks, you are free to add any content into the Getwid section block, including core Gutenberg blocks and even third-party Gutenberg blocks you may use.

We bundled this particular block with loads of settings that will open up great customization opportunities for designers as well as non-tech WordPress users.

getwid section block wordpress

The UI of the block is quite straightforward: to add content into the section block instead of the default Gutenberg editor area, you hit the “+” icon to the right.

getwid add section block

Use:

  • Full-width website sections (perfect for no-sidebar pages)
  • Wide-width website sections
  • Splitting a regular theme width into multiple hierarchical parts
  • Custom-styled reusable sections and pages
  • Professional and diverse landing pages.

Main settings:

  • Different section width settings, including custom width (customizable for different devices).

section block width

You can change that in clicks right in the editor:

getwid section width

  • Diverse background options: apply colors or optionally set an image, slider or video as a background.

section block background options

By default, the color system of this block supports theme brand colors to help you keep visual consistency and distinction between content elements sitewide. So you should be pretty fine with the default palette! If you switch the theme, the block will use brand colors of your new theme to ensure you don’t need to go manually about changing each and every design piece.

Alternatively, you can go with a color picker to create some fancy color schemes for specific sections.

Since images are very often used for backgrounds, the customization attributes for them are holistic (you have pretty much the same list of options for many Getwid image-related blocks).

getwid background image settings

  • Handle foreground using a rich panel of settings: select colors, apply opacity, set an image, etc.

getwid foreground colors

  • Customizable margins, paddings, and alignments. To display section blocks uniformly on different screen sizes, you can leave default values for all spacing methods. To create different experiences, you can manually fine-tune spacing for desktops, mobiles and tablets.

getwid spacing section block

  • Awesome dividers to separate content into groups using variety of classic and fanciful shapes. Top and bottom divider styles come in different flavors:

getwid section dividers

  • Different entrance animation effects.

getwid section animation

The system of colors, typography, media, buttons and more elements within one unified Section block will help you communicate visual content hierarchy letting you create meaningful designs. Since it’s a multifunctional and multidimensional reusable block, you can create eye-catching sections and embed them on other pages with a click.

Icon Block

getwid icon block featured

The icon block is a perfect tool to create simple and expressive interfaces using a collection of Font Awesome icons.

Use:

  • Different types of product and system icons (that generally don’t require extra explanation).

Settings:

  • You can apply different shapes to icons to draw attention to specific sections: you are free to choose from a plain icon, with background or outlined one.

getwid icon block

For example, you can use similarly-shaped set of icons for presenting different sets of services or skills.

  • Set up colors (default theme colors are available).
  • Designate the icons size and spacing between icons or other content blocks on a page.

icon blocks

  • Play with the radius and border width to create square or round-cornered icons. You can also set something in between with the custom border radius.

getwid icon radius

  • Link icons to external URLs.
  • Apply animation effects.

Icon Box Block

getwid icon box block featured

Think of it as an advanced version of the icon block. In addition to the icon itself, it comes with extra heading and text containers.

Use:

  • Icons to support content (services, offerings, experiences, amenities, etc.)

Settings:

  • All icon block settings, including icon styles, spaces and animation (see the previous block).

icon box block settings

  • Default heading and text settings, including a choice of heading types for headings and customizable font size for text.

Image Box Block

getwid image box block featured

Image box is basically an organized block that encompasses an image, heading and text containers. Image boxes are an awesome way to balance text and visual content.

Use:

  • Services and portfolio pages.

Settings:

  • You can select a proper image size in order to fit into your website layout and create consistency for multiple image box blocks (medium, large, full size, etc.).
  • Optionally set up image animation on hover.
  • Select a preferable layout and alignment for mobile devices.

getwid gutenberg image box block

  • Play with margins (margin properties can have negative values).
  • Link images.
  • Separately edit headings and texts within the image box (e.g. change alignments, background colors, add anchors to headings and more.)

image box block

Social Links Block

getwid social links block featured

Using this block you can list all social icons on any post or page – in either simplified or advanced format to mimic your theme brand design.

Use:

  • Links to your social accounts.

Settings:

  • Link social icon to the appropriate social networks.

getwid social links gutenberg block

  • Customize an icon layout (with or without a border and background).
  • Alter sizes and spacing.

social links block settings

  • Adjust alignment for different devices.

Banner Block

getwid banner block featured

With a perfect image and a catchy text line you can create awesome, fully tunable animated banners for different purposes.

Use:

  • Effective banner advertising
  • Related content suggestions in posts (manually curated)
  • All types of calls-to-action.

getwid banner examples

Settings:

  • Image size and content width.
  • Block height and block animation.
  • Text options: text and overlay colors, animation, horizontal and vertical text alignments.

getwid banner block gutenberg settings

Image Slider Block

getwid image slider block featured

The image slider block by Getwid offers much more flexibility and settings in comparison with the core Gutenberg slider block. This block allows for creating beautiful lightweight sliders with both normal (automatic) and click states.

Use:

  • Website introduction sliders
  • Image slider inside a post
  • WooCommerce product sliders.

Settings:

  • Top, bottom and middle image alignment.
  • An option to set different number of slides for different devices.
  • Slideshow speed and animation.
  • Variable slider width.
  • Spacing between slides.

getwid image slider settings

  • Optional arrow and dots slider controls (inside or outside).

Button Group Block

button group featured

The main purpose of this block is to speed up your workflow with adding different types of call-to-action buttons throughout the website.

Use:

  • Any action button or a group of buttons.

Settings:

  • Different button styles: outlined, rounded and squared.
  • Background and text color for each button individually.

getwid gutenberg buttons

  • Spacing between buttons.
  • Custom alignment, direction and width of buttons.

getwid button group settings

Image Stack Gallery Block

image stack gallery featured

This Gutenberg block by Getwid was designed to enable you to create unique image galleries with creative layouts, without any design skills.

Use:

  • Portfolios, creative projects
  • Photo galleries
  • Post galleries.

Settings:

  • Several awesome gallery layout styles.

getwid image stack gallery

  • Image size settings.
  • Image linking options.

Advanced Spacer Block

getwid advanced spacer block

This block provides an easier way to add spaces between content elements – so that you can stick to the visual consistency without a need to go about spacing manually.

Use:

  • Optimization block for content manipulation.

Settings:

  • Custom height for different viewports.

Media and Text Slider Block

media and text slider featured

This is a has-its-all type of slider you can use to create instant calls-to-action and highlight brand messages.

Use:

  • Hero front page sliders
  • Promo sliders.

Settings:

  • Slider height and custom content width.
  • Vertical and horizontal alignment.
  • Text and overlay colors.
  • Adjustable paddings.

text and media slider gutenberg block

  • “Slide” and “Fade” slider animation effects.
  • Multiple types of text animation.

Google Maps Block

google maps block gutenberg

This is a standard Google Maps block to help you feature different location markers.

Use:

  • Display your locations using interactive Google Maps.

Settings:

  • Set up zoom and plan interaction.
  • Enable or disable street views, full-screen enlargement, etc.
  • Map center and zoom options.

google maps styling

  • Map styles.

google maps styles

  • Using your Google Maps API key, you can add unlimited custom map markers.

Advanced Heading Block

advanced heading block featured

This block gives you access to a rich heading configuration panel, where you can tweak all major typography settings of specific headings.

Use:

  • Diverse page headings.

Settings:

  • Heading preferences.
  • Font configuration: font family (Google fonts), weight, size and style.
  • One-click text case conversion.
  • Line height and letter spacing customization.
  • Color selector (background and text colors).
  • Adjustable margins and paddings.

advanced heading getwid

Accordion Block

getwid accordion block

This is a perfect content block for a question-answer format.

Use:

  • FAQ sections.

Settings:

  • Icons for active and inactive tabs.
  • Icon position.
  • Default active tabs.
  • Heading type.

Tabs Block

tabs block getwid

To create effective FAQ pages and other categorized sections, you can also use tabs and organize them in different layouts.

Use:

  • Different sections of news, categories (e.g. genres of literature), different archives, etc.

Settings:

  • Title heading type.
  • Horizontal and vertical layout types.
  • Default active tabs.

Toggle Block

toggle block featured

This block is very similar to the tabs block at the functionality perspective, so you can go with one that provides you with the suitable set of settings.

Use:

  • Categorized sections.

Settings:

  • Icons for active and inactive tabs.
  • Icon position.
  • Default active tabs + an ability to make all tabs active by default.
  • Heading type.

Recent Posts Block

recent post block getwid guteberg plugins

As its name suggests, you can display recent posts from your blog dynamically anywhere on the website.

Use:

  • Showcase blog articles.

Settings:

  • Grid and list layouts.
  • Customizable number of columns for a grid layout.
  • Heading types for article headlines.
  • Customizable size of a featured image.
  • Show or hide a featured image and a post meta data.
  • A post ordering settings.

Person Block

person block featured

This is a no-frills Gutenberg block for showcasing team members. It comes with a pre-designed structure so you can pretty quickly change the photos, description and links to social media accounts of your team, without a need to handle styles and alignments manually.

Use:

  • Team showcase
  • Author bio.

Settings:

  • You can edit the block content inline (right in the Gutenberg editor).

getwid team showcase gutenberg block

  • Change the image size.

Testimonial Block

Testimonials block gutenberg

With this Gutenberg block you can feature client testimonials anywhere on your website.

Use:

  • Admin-added testimonials.

Settings:

  • Edit avatar, title and testimonials inline.

Counter Block

counter block featured

 

This block lets you add animated counters to visualize data.

Use:

  • Showcasing your expertise or any data in numbers.

Settings:

  • Digit preferences.
  • Advanced animation settings.
  • Color settings.

counter block settings

 

Price Box Block

Price box block

Although there are different WordPress plugins for adding pricing tables, you might not need any of them since the block for this purpose is already bundled with Getwid for free. You can use Gutenberg columns block to present different pricing tables side by side.

Use:

  • Different pricing tables (e.g. pricing plans)
  • Comparison tables.

Settings:

  • Edit table information inline (prices, features, buttons).
  • Adjust pricing table headlines.
  • Alter text and background colors.

Progress Bar Block

progress bar featured

This is a nice block to add animated progress bars for any purposes.

Use:

  • To show the percentage of progress in any activity or event.

Settings:

  • Optional animation.
  • Progress bar and background color settings.

Circular Progress Bar Block

circular progress bar

If you’d like to go with a different design for a progress bar, this one would be just awesome. The bar can be animated or static.

Use:

  • Give impression of any activity.

Settings:

  • Customizable values, size and thickness of the bar.
  • Optional animation.
  • Adjustable background and bar colors.

Instagram Block

getwid instagram block

This block allows you to feed images from your Instagram account in real time – you just need to generate an access token with your Instagram credentials.

Use:

  • Connect your Instagram to your WordPress website.

Settings:

  • The number of gallery columns and the number of items to show.
  • Show or hide Instagram like and comments.

instagram block settings getwid

  • Define the spacing (small, normal, medium, large).

Download Getwid Free WordPress Blocks

If you feel like this suite of blocks is going to satisfy your website building purposes, download Getwid for free on WordPress.org and start playing with the blocks (you’ll enjoy the process!).

For the complementary system of blocks, out-of-the-box styles and a lightweight design, you can go with our Getwid Base free Gutenberg theme designed with Getwid. It’s packed with the demo data package, which will save you hours on creating professional pages and blocks (this is an optional tool).

To sum up, these first versions of Getwid are just the beginning of a huge work. We plan to constantly improve the existing blocks, build new ones and enhance overall editing experiences to make Getwid your major foothold in the Gutenberg era. And at this stage, your feedback is significant, so feel free to share it!

Keep an eye out for upcoming news and releases.

Leave a Reply

Your email address will not be published. Required fields are marked *