CHANGING THE DESIGN OF A BLOCK

YOUR WEB DESIGN STUDIO BUILDER YOUR WEB DESIGN STUDIO BUILDER / EDITOR SETTINGS Last updated on Updated  Oct 27, 2019

As soon as you add a block, you can start editing it to adjust the layout and match to the overall design of the site.


To open the settings, hover over the block and click on the “gear” in top right corner:

R7rRY67pM6fWoxG37bhn6kFTkmAbnuXG1M1zkSJq.png

In the new window you’ll find four tabs - Layout, Background, Animation, Info.

Layout

Depending on the type of the block, you can add and remove elements from it, adjust block alignment and paddings. In some blocks you can swap text with image. Example of the settings available in this tab:

Cj2s6aMVvROpkfpufTRQX2i6ILSNnLI3My5V7rhm.png


Background

Here you can change the background of the block to a color, image or video.

z6zFZ7JI6SRLgiT7d0tYFXc7HCiTn0o3Q4vkaHzK.png


Color - allows you to add a solid color or gradient. To choose a color, hover over and click on the Custom color icon. Adjust the opacity with the toggle to the right of the palette:

EMiMDeuKcjazGI0oLJHcMBmsWAcf69XBIrIsPzjy.png

Image - here you can upload your own image or choose one of the existing ones by clicking on the Gallery:

mh1MUV7D0eD2Y0dCV1GxdDiiayFTYzJSOEXQlgcs.png

By clicking on Gallery, you’ll have an option to add one of the images already on the site, or a free photo:

MCvjBuZwjYt3ulsspABokNV37eDu0TcGTU7Z4Qbz.png

When you add an image, additional settings will become available to you - scroll effects, color overlay, filters, color behind image:

ivY62Og6kh6nob9lnV8j1ORG5QkQzwZJE8aqfSvr.png


In the Video section you can add a link to a video from Youtube or Vimeo:

57khHhoB71axJoLCXTN66We4Z4CFd59uyEJyvqEE.png

After the video is added, you can go ahead and adjust the color overlay to match it to the site colors:

iCy9uNYtyKGUpiHtodajchiBcHWymKfXJAalzubd.png

Animation

This is the place where you can set how the elements appear on scroll. To enable animation, first enable the dynamic appearance here:

F5T4OhXsWRIHoW2LIcaJl1wNjL5Hu4Bro73aoXBY.png

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

q8pDUwB4ETLLIS9Krgxb6oLadV9i6Tve4882y4NV.png

Info

In the informational tab you can change the block anchor name to a unique one. This is a great way to identify several blocks of the same type within a single page, especially for linking purposes:

L8nVidxLtfqKo7qMBTWPNL6bM7PqqrVetCQccc0w.png

If you encounter any issues with the blocks, send us the block name and ID from the info tab:

whn2ahMMnEU3L498cvyNvk4HX8Duz1lkOubQKr0g.png

Important: if you are working with a custom block, more editing options are available to you. Find out how to customize a custom block in the article here: Custom block.