Online Store

Custom block

If you cannot find a suitable block from our Blocks library or are just feeling creative, opt for a Custom block and fill it in with your own content. 

You can use the Custom block to create a unique block layout by arranging the block elements (widgets) in your own way. By using corresponding widgets, you can have a picture located next to a form, a video next to a button, and so on. 

Adding a custom block

The Custom block is located at the top of the Blocks library.

Custom-block-1.png

After adding the block to the canvas, you need to add widgets corresponding to your needs. Click the yellow Add widget button to do this.

Custom-block-2.png

What widgets are available?

Our widgets are divided into sections so that it is comfortable for you to navigate through them. You can also look up the needed widget by entering your query into the search bar at the top of the Widget library.

Custom-block-3.png

Note: We are constantly improving our Custom block, so if you feel like some widget you could use is missing from our list, please submit a feature request

Below is the list of sections with the respective widgets.

Grid & Columns

Grid & Columns help you shape the layout of your Custom block. They serve as dividers with containers to which you then add another widget. 

You should use one of the Grid & Columns widgets to divide your block into vertical sections. In case you want to add widgets one on top of another (not side by side), you may skip this section.

Yet, if you want to arrange your widgets side by side, opt for one of the widgets below:

  • 2 columns widget: Use this one when you want to divide your Custom block vertically into two columns. You will be able to add separate widgets to both columns.
  • 3 columns widget: Use this one if you want to divide your Custom block vertically into three columns. You will be able to add separate widgets to all three columns.
  • 4 columns widget: Use this one if you want to divide your Custom block vertically into four columns. You will be able to add separate widgets to all four columns.
  • Media on the right/left widget: Those replicate the layout of the About us block. The gap between columns is bigger than the one in 2 columns widget. This helps increase the readability of content when a large media element is inserted aside from the text. 

You can change the number of columns in one row, switch the element layout, and choose the content alignment in the block settings


Note:
You can only add one of the Grid & Columns widgets to a single Custom block. For example, it is not possible to add a 2 columns widget on top of a 3 columns widget or within it. However, you can add two custom blocks and use a 2-column widget for one and a 3-column widget for another.

Basic

These widgets are the basic elements of any site: buttons, text containers, icons, images, and more.

Custom-block-4.png

Here’s the full list of the Basic widgets:

  • Text: Here you can add any text pieces to your block, including links. Use this tutorial to learn how to edit text.
  • Image: With the help of this widget, you can add an image to your block.
  • Button: this one adds a button to your block, which you can then hyperlink.
  • 2 Buttons: Adds two buttons at once. You can edit them separately.
  • Spacer: Allows you to add extra space between two other widgets, like image and text, and adjust its height.
  • Form: Use this one to add a contact form to your Custom block.
  • Quote: It consists of different elements: a text element, a small image element (if you want to add a photo), and another text element where you can add a name. 
  • Icon: Helps you can add a social media icon or any other icon from our collection. A nice little media element to make your website look more professional.
  • List with icons: Combines icon elements with text elements. Perfect if you want to provide a list of services you offer. This widget's elements can be duplicated.
  • HTML: Add this widget if you want to add a custom code to your block.

Media

If you want to add a photo to your site or embed an audio composition, choose one of the Media widgets:

  • Image: With the help of this widget, you can add an image to your block.
  • Video: Use this one to add a video to your Custom block.
  • Music: You can embed audio here, for example, a composition from a sound hosting platform.
  • Embed: Besides being able to add video or audio through this widget, you can also embed any other third-party solution that works through an iframe code. This can be a Google document, Google calendar, Elfsight widget, or anything like that. If a code you want to embed is non-iframe, you can add it through the HTML widget.

Custom-block-5.png

Social

By using Social widgets, you can add social media icons and link them to your social media accounts.

Custom-block-6.png

  • Social icons: Four of the most popular social media icons in one place. You can change them to your taste or delete any if you do not need it.
  • Follow us: Same as the Social icons widget, yet it also contains the "Follow us" text element. You can change this wording, too.

Customizing block settings

As with any other block, you can customize the Custom block with the help of its control pane.  To activate it, click the block and then click the Block settings icon. 

Custom-block-7.png

The Layout tab is not active for the Custom block since you set your layout using Grid & Columns in the Widget library

In the Appearance tab, you can make the following changes:

  • Block style: Change the color scheme of the block.
  • Block spacing: Change the whitespaces on the top and bottom of the block.
  • Vertical alignment: Align your content to the top, center, or bottom of the block.
  • Columns layout: Choose the number of items in a row.
  • Background settings: Add a background image to this block.

Once you are done customizing block settings, click Save to confirm the changes.
Here's the video of the process.

 

Read about block customization options in detail in our Block settings article.  

Duplicating widgets

Any widget within the Custom block can be duplicated. To duplicate a widget, hover over it to activate its control pane and then click the Duplicate button.

Custom-block-9.png

The elements of the List with icons widget can also be duplicated within the widget itself. Hover over the list item and click Duplicate.

Custom-block-8.png

Note: When you duplicate a column, all the widgets in it also get duplicated.

Resizing widgets

You can resize the widgets that contain media: Image, Video, and Music widgets. To resize any of them, click on the widget and drag the Resize control located at the bottom of the media. 

Custom-block-10.png

The Text widget can be resized by dragging the controls on the sides of the widget.


Moving a widget

All widgets can be moved within a Custom block. To move a widget, hover over it and then click the Move button and drag it to the new location. Here’s the video of the process.

Note: When you move a column, all the widgets contained in it also get moved.

Deleting a widget

To delete a widget, hover over it and then click on the Delete button.

Custom-block-11.png

Note: When you delete a column, all the widgets contained in it also get deleted.

Editing text in the widgets

To edit the demo content, click the text piece and start typing your new text. Or you can copy and paste your existing content from the text editor you are using.

For more information, visit this tutorial: Text editing and formatting.

Editing images

You can replace demo images in the Custom block with your own photos. Read our Customizing your images tutorial for detailed instructions. Also, take a look at Recommended image sizes.

Editing buttons

You can edit buttons in your Custom block to lead to different pages on your website or to an external URL. To edit links in buttons, follow the steps outlined in these tutorials:

We hope you find this article helpful. If you have any questions left, please contact our Support Team

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

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