Section Gutenberg Block

Getwid Blocks: Section Gutenberg Block

The Section Gutenberg Block by Getwid is a top-level (parent) Gutenberg block. You can use it as a container for organizing multiple (child) blocks inside it: feel free to utilize the Getwid, core Gutenberg, and third-party blocks.

Since Section has been designed to provide you with a huge number of configuration settings, you want to start with this block for any deeply custom content! You can control it as one block.

Moreover, you can even insert another Section block inside Section if you want to create custom background and behavior for each or selected elements inside the Section block.

To start using it, insert the Section block and then click the ‘+’ icon from the right to add any suitable blocks.

section main block

Purpose of the Section Gutenberg Block:

  • Use this block to build custom-styled reusable sections and pages.
  • Create custom full-width website sections; works great for no-sidebar pages.
  • Build wide-width website sections.
  • Apply fancy backgrounds (gradient, image, slider, video, etc.).
  • Build rich landing pages.

Watch the Section Block video tutorial

To dive into a more hands-on experience, watch the Section block guide!

Section Block Features

You can use a boxed or full-width layout no matter the theme; it’s also possible to set custom parameters for the default width. You are even allowed to adjust responsive layouts of the Section block based on a type of device (desktop, tablet, mobile).

section layouts

So let’s go through some other settings:

  • Although there are default settings, you can set custom margins, padding and alignments for the container for different devices.

Section Gutenberg Block allignment settings

  • Create a custom background by applying colors with optional gradient:

Section Gutenberg Block background colors

You can also set an image, slider or add a self-hosted (uploaded directly to your WordPress website) to use in the background. The plugins even allow to combine several backgrounds that will overlap each other, so you should be especially careful with them.

Section Gutenberg Block background image gutenberg getwid

  • Tweak foregrounds by using a rich panel of settings: select colors, apply opacity, set an image, etc.

Section Gutenberg Block getwid foreground colors

  • Go with stylish and fanciful shapes to separate content into groups by using top and bottom dividers that come in different flavors:

Section Gutenberg Block dividers getwid

  • If you want to add a bit of motion to specific sections, you have a good selection of the entrance animation effects with customizable duration and delays.

animation effects gutenberg

To see how animation works, make sure to check it on the frontend of your website.

Section Gutenberg Block entrance animation getwid-min

  • Optionally add HTML anchors or CSS classes.

 Design Best Practices

  • Stick to brand theme colors to maintain design consistency sitewide.

Section Gutenberg Block theme colors

  • Apply foreground layer opacity for images to reduce text distraction.
  • If you use custom section width, designate it via Settings > Writing > Getwid > Content Section Width and stick to it (otherwise, you risk to create messy layouts across the website).
  • Use Gutenberg columns to place several blocks one by one inside the Section container.

columns getwid gutenberg

  • Play with the Section inside Section (in the example below, the blue piece is a multi-element Section inside another full-width Section with a custom image background).

section inside section

Download a Free Starter Theme for Getwid

Did you know that we have a custom-crafted theme specifically for Getwid?

You need it to get the most out of the Getwid blocks! The thought-out, professional system of colors, typography, iconography, buttons and other essential design elements of this theme will help you create and communicate a unified, meaningful design. It’s free, by the way!

Check out Getwid Demo

Install Getwid Base Starter Theme for Gutenberg

Leave a Reply

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