Online Store

Customizing block elements

Sitebuilder blocks consist of various pre-designed elements: texts, images, icons, buttons, columns, and many more. All of these elements are highly customizable. You can add, edit, and remove most elements inside your block.

Each block type has its own set of elements. Still, they also have some standard customization options, such as element duplication, swapping, and deleting, as well as image and icon editing and text link creation. 

Let’s take a look at these options in detail. 

Duplicating block elements

In the blocks with grid layouts (Services, Products, Team, News, Pricing, Testimonials, Schedule, FAQ, Logo wall, Columns, and Counters block) you can add more similar block elements by duplicating the existing ones. 

To do this: 

  1. Hover over the element you want to duplicate to activate its control pane.
  2. Click Duplicate to create a copy of the element

    customizing-elements-01.png

Note: The elements will shift automatically while maintaining the margins between the elements. This helps preserve the visually appealing look and feel of your website.

Swapping block layout and elements

For the block with two-column layouts  (image on one side and other elements on the other side of the screen), you can inverse the layout in the Block settings. 

Here’s how to do this: 

  1. Hover over the block you want to inverse to enable the control pane. 
  2. Click the Settings icon and then go to the Appearance tab.
  3. Scroll down to the Media content location section and switch the radio button to the left or right, depending on your layout.
  4. Click Save to submit.

View the video of the process below. 




Read more about the Block settings menu options in our Block settings guide. 

You can also switch similar block element places in the layout by dragging and dropping them like in the video below. 

Hiding block elements

Almost all block elements are removable: texts, buttons, images, icons, containers, maps, etc. The easiest way to remove an element is through its control pane. 

Сlick the element to enable its control pane and click the Hide button to remove it. You’ll be taken to the Layout tab of the Block settings, with your block element unticked.

If you want it back, just tick the relevant checkbox. Here, you also can manage other elements. Click Save when you’re done.

This feature can also help you remove a group of elements, as shown in the video below.

 

To delete only one element from the group, hover over the element and click the trash bin icon.

customizing-elements-02.png

After you delete an element, ​​other block elements will automatically rearrange. 

The other option of removing the element from the canvas is through the Block settings

  1. Hover over the block and click the gear icon on the control pane to access the Block settings.
  2. In the Layout tab, find the Block elements section and untick the checkbox near the element you want to remove.

    customizing-elements-03.png
  3. Click Save.

Tip: If you accidentally deleted an element and want to add it back, you can do this in the Block settings by ticking the respective checkmark. You can also click Undo on the Topbar to reverse the change.

Editing images

You can perform a set of actions to make your images look appealing: replacing, cropping, resizing, and changing position. Read our dedicated tutorial on image editing.

Editing icons

Some blocks contain icons that can also be edited and replaced. To replace an icon, click it to enable its control pane, and then click the smiley icon to access the Icon libraries. Read our Editing icons tutorial to learn more about icons.

Creating text links

Block elements like buttons and texts can contain links. The links can perform various actions, for example, lead to another block or page, initiate a downloading of a file or sending an email. 

You can add and customize links in the Link settings menu. To enable it, click the button or select the text you want to add a link to. Then click the chain icon in the element’s control pane. 

customizing-elements-04.png

Read the Creating text links tutorial to learn more about editing links.

We hope this guide helped you. If you have any questions left, please contact our Support Team

Ready to use your new knowledge? – Edit your site!

Was this article helpful?
1 out of 1 found this helpful