The Block element in website builder

A block is an element where all other same-style elements can be added. You can use it to organize content by its purpose. For example, you can place a menu in one block and add some information about your company in another.

Add a block

To add a new block, hover over the top or bottom border of the block, and click + (Add block).

On the left, you can select ready-made blocks from the gallery organized by categories, including website header, footer, first screen, and more. Browse through categories, and select a block that fits your design.

Footer and Header are sitewide blocks that appear consistently across all pages and synchronize all changes made to them.

To add an empty block, click Empty block at the bottom of the category list.

Customize your block

You can customize the following block settings:

Background color Changes the block’s background color on the page. Click the icon and select a color.
Top and bottom margin Adds space between a block and other elements on the page. The larger the value, the more space there will be between the block and other elements. Enter a value in pixels.
Background image Sets a background image instead of a color. Turn on the toggle and select an image.
Contour Adds a border around the block to highlight its edges. Turn on the toggle, set a contour thickness in pixels, and select a line type, color, and rounding.
Full-screen width Stretches content to full-screen width. Turn on this toggle to make the content fit from one edge of the screen to the other.
Full-screen height Stretch content to full-screen height. Turn on this toggle to make the content fill the screen height.
Hide block on Hide the block on mobile or desktop devices.

You can also space out blocks using dividers. Turn on the Top divider or Bottom divider toggle in block settings, and customize it:

Appearance Select a divider shape.
Color Select a divider color.
Height Select a divider height.
Repeat Select how many times to repeat the divider shape.
Flip Select how to flip the divider shape:
  • do not flip (use default settings);
  • horizontally;
  • vertically;
  • both horizontally and vertically.

Pin blocks

You can pin the first block to your website header so that it stays on top even when you scroll. To do this, go to the block settings, and turn on the Pin to the top of the site toggle.

If you have added the Footer block, you can only pin it to your website bottom.

Hide blocks

You can hide a block on mobile devices to optimize content display, improve your page load speed, and improve user experience on smaller screens.

Hover over the upper right corner of your block, and click Block settings.

In the Hide block on field, select a device type on which you want to hide your block (desktop or mobile).

Rate this article about "The Block element in website builder"

User Rating: 5 / 5 (9)

Previous

Work with site elements

Next

The Section element in website builder

Popular in Our Blog

Try SendPulse today for free