Blocks are the building elements of your website. This article explains what you can do with blocks on your page.
What is a block?
A block is the foundation of your website. Like bricks, blocks form the construction of your website, starting with the Header block to the main content area, and down to the Footer block.
Each block type has been purpose-built to help you reach your website goals. Gallery blocks showcase your portfolio, Text block allows you to add pieces of textual content, while Contact blocks help your website visitors to get in touch with you.
Adding a new block
To add a new block, navigate to the area on the page where you want to insert a new block. Click the round + Add block button.
You will be taken to the Block Library where you can choose a new block. Click on the block that fits your website building plans and it will be automatically added to the specified area.
After you have added a block, you can edit its settings, move it, duplicate or delete it.
Customizing block settings
To access the Block settings menu, click on any area of the block and then click the "cog" Block settings icon:
Depending on the type of block you will have several editing options. Hover over any icon to see what it does:
- Move: click the up and down arrows to move the block to another location on the page.
You will see the yellow guideline which indicates the location where the block can be moved.
- Edit image: depending on the block type, you can edit the background image. Check out this article to understand how to replace the background image.
- Duplicate: click on the “stack” Duplicate icon to create an exact copy of any block. This is useful if you want to add multiple blocks with similar content or if you want to experiment with the block layout without affecting the original block.
- Block settings: click on the “gear” Settings icon to access the Block settings menu. This article explains how to customize various Block settings.
- Delete: click on the “trash can” Delete icon to delete the block. This action can be undone.
- More: Under the ellipsis icon, you can find additional options to copy and paste the block:
Some blocks contain icons that can also be edited and replaced with another icon. To replace an icon, click or hover over the original icon, then click on the “smiley” link to access the Icon library with over 3000 icons. Read this tutorial to learn more about icons: Editing icons.
Some block elements contain links and buttons which can also be modified. To access the link editing menu, hover over or tap the link. Read this tutorial to learn more about editing links: Creating text links
To replace the link, click on the “chain” Edit link icon.
Some block elements, for example, sections in Products, Services, Logo Wall, and Team, contain images. Here’s how you can replace images.
Customizing block elements
You can add or remove most of the elements inside your block. To remove one of the elements, hover over it to activate the menu and then click the "trash" Delete icon. For this example, we will delete one of the customer testimonials:
Click the Delete icon.
Block elements will automatically re-arrange.
Changing the block layout
You can completely change the block layout in Block settings. In the tab Layout, simply click Change block layout and you will see the available options:
Note: To preserve the professionally designed look and feel of your website, the block and block element design will update automatically when you move, duplicate, or delete the block or any of its elements.
Use blocks in hundreds of combinations to create your unique beautiful website. No need to worry about spacing, margins, or compatibility. All blocks in your particular template have been designed to mix and match while preserving the professional polished look of your website.
Note: Whichever block you choose, it's guaranteed to match the rest of your template and look great on all devices, including smartphones, tablets, and desktops.
Copying and pasting blocks
If you have customized a block and want to create multiple copies of it on the website, you can copy and paste the block at as many pages as you like. To do this:
1. Click on the block which you want to copy and then click the ellipsis icon to reveal More options:
2. Depending on your needs, copy the block. All customizations and content will be copied.
3. You can now paste the block in the new location on the same page or paste it to another page:
This is a convenient way to move content between pages on your website.
To move the block to another location on the page, follow these steps:
1. Click anywhere on the block to activate the menu.
2. Click on the arrows to move the block up and down on the page:
3. When you click up, the block will move one position (above the preceding block) on the page. When you click down, the block will move down beneath the block that's under it.
4. Make use of the yellow guideline which shows where the block will appear when you move it on the page. The layout of the page will be adjusted automatically.
Note: the blue guideline shows the current location of the block.
5. Once you are done editing your block, click Save to apply the changes. On mobile, click the floppy disk icon in the top right corner.
Alternatively, you can navigate to the More... drop-down menu, then cut the block and paste it in another location on the page:
Duplicating a block
Duplicating is a great way to use an existing block as a starting point for new content without having to create it from scratch! When you duplicate a block, the copy will have the same text, layout, images, and settings as the original.
1. Navigate to the top of the block and hover over any area to trigger the dialog box. Click Duplicate:
2. The identical block will appear at the bottom of your original block.
3. You can modify the content and change the settings as you would with any other block.
You can also duplicate elements in blocks. For example, you may want to add more testimonials to your page or to increase the number of team members.
Duplicating block elements
1. Hover over the element you want to duplicate to activate the editing pane.
2. Click Duplicate to create a copy of the element.
3. Note that elements will shift automatically while maintaining the margins between the elements. This helps preserve the visually appealing look and feel of your website.
4. If you have created too many copies of the element, trigger the dialog box and click on the Trash icon to delete any unwanted items. You can also click Undo to reverse the change.
Deleting a block
You can remove any block from your page. In this article, you will learn how to delete any block on your page and what happens once it’s deleted.
- Click on the block to trigger the control pane.
- Click on the “trash can” Delete icon:
- The block will be deleted.
Note: you can reverse this action by clicking the Undo button or typing Ctrl-Z on your keyboard.
After you have deleted the block, the page layout will adjust automatically. You can delete any number of blocks and your page layout will remain attractive on all devices.
How do I benefit from pre-designed blocks?
Each template in the Template Gallery has 100+ professionally designed blocks that perfectly complement each other. This eliminates the risk of mistakes when building your website. No matter what your technical skills are, you are guaranteed to get an agency-quality design that looks great on any device and screen size.
Can I resize a block?
When you rearrange elements inside the blocks, they are resized automatically. This helps preserve the professionally polished look and feel of your site.
For example, when you delete one of the elements in the block, the rest will rearrange automatically, preserving the margins and spaces between them.
When you Duplicate one block element (or make more than one duplicate), the result would be proportionally laid out:
That's how you can resize your blocks.
Note: You can instantly change the layout of your blocks by going to Block Settings and previewing block variations in the Layout tab.
Can I create two columns of blocks?
You cannot build columns of blocks, as the Sitebuilder automatically adds blocks to the top or the bottom of each block.