Articles on: Site editing
This article is also available in:

Changing the design of a block

As soon as you add a block, you can start editing it to adjust the layout and match it to the overall design of your site. Most of our blocks are easily customizable, so you can change the settings of each particular element in them — for example, columns, images, lists, etc. However, there are general settings of the block that allow you to set up its background, animation, and many more.

In this article we will cover such topics as:

changing the blocks's layout;
changing the block's background;
adding the animation to your block;
changing the block anchor name.

Changing the layout of your block

Firstly, you need to access the settings of your block. For that, hover over the block and click on the "gear" at the top right corner:

Navigate to the Layout tab of the settings. There you can stretch your block to full height or adjust its top and bottom paddings:

If you want to enrich the look of your block, you can add new elements to it — for example, lists, dividers, images, buttons, etc. Besides, you can manage the existing elements in your block — by moving them within the block, duplicating or deleting each of them. For more details, check the Managing elements article.

As every ready-made block on our platform contains a set of certain elements, they usually are gathered in columns for easier editing. If you hover over a particular element, you can access the settings of the column by clicking on the "gear" at the top right corner:

Once you've accessed the settings of the column, you can adjust the alignment of the elements in it, change the gaps between columns in the block, and many more. Make sure to check the Managing elements article to see how you can add and manage the columns in the block.

Some blocks on our platform can contain the collection items — a set of elements assembled in one place, which are regulated by the same settings and are interdependent on each other. For more detailed information on how you can edit or manage your collection items in the block, see the Collection items settings article.

Important: If you have different elements of the block listed in the Layout tab, or you don't have a possibility to add new elements to the block, it means that you are using an outdated version of the block. You can still proceed with using it on your site. However, we highly recommend changing it to the new one to avoid unexpected issues with display or functionality.

Changing the background of your block

For that, navigate to the Background tab in the Settings of your block to add color, image or video as a background to your block:

When you set a photo as a background, you will see more customization options — e.g., applying filter or color correction:

If you want to set a video as a background to your block, the supported links are those from YouTube and Vimeo. You can also go ahead and adjust the color overlay to match your video to the site colors:

Tip: The background video will remain static in the editor to increase the loading speed. The video will be shown as usual on published site.

Your block can contain the columns with their specific settings. Thus, you can also change the background for that specific column. For that, access the column settings, navigate to the Background tab and choose the color or the image:

Note: Check the Adding site's background article for more information regarding the customization of your block.

Adding the animation to your block

You can set how the elements will appear on the page while the visitors are scrolling through it. The animation is a good way to attract the attention of your users and provide a greater deal of interactivity.

To enable animation, navigate to the Animation tab in the Settings of the block and toggle on the option Dynamic appearance of elements on scroll:

Then, choose the animation type, the mode of elements appearance and the speed of the animation:

Here's how your animation will look on a published site:

Changing the block anchor name

To see the block's name, navigate to the Info tab in the Settings:

Tip: Block ID can be used to modify the block using the custom code. If you're familiar with coding, see the Adding your own code to the site article.

You can also set up the special anchor name for your block — this is a great way to identify several blocks of the same type within a single page, especially for linking purposes. For more detailed information, view the Adding an anchor menu article.

If you encounter any problems with the block on a published site, make sure to follow the steps in the Block not displaying on the live site article.

Updated on: 05/10/2024

Was this article helpful?

Share your feedback


Thank you!