Adding a Custom Block

Adding a Custom Block


SiteCliq editor allows you to create your site with the help of pre-designed blocks that contain a set of elements. If none of our ready-made options in the gallery meets your needs, you can select an empty custom block to build your layout from scratch.

Adding a custom block to your site

1. For that, hover over the page in the editor and click the "plus" icon:

2. Navigate to the Custom block tab in our gallery and choose custom-block:


Adding elements to a custom block

Once you've added the custom block to your site, you need to fill it with elements. Elements are the basic building components of each block — for example, gallery, heading, accordion, list, etc.


1. Firstly, hover over the custom block, click on the "plus" sign and choose the needed element from the pop-up window:

Tip: to learn how you can further manage the elements in the block, view the article Managing elements in a block.

Adding columns to a custom block

If you're planning to add several elements to the block — for example, image, text and buttons — it will be more convenient for you to place them in separate columns. This way, you can adjust the position of each element or change the size of its placeholder.

1. Firstly, hover over a particular column and add a new one by clicking on the "plus" sign near it:

2. You can adjust the width of the columns using the dividers that are placed next to them. To do this, hover over the empty space between the columns, click on the divider and drag it to the needed direction:
3. You can also delete or duplicate each column by clicking on the three dots in the top right corner:

Changing the layout of a column

1. To access the settings of a column, hover over it and click on the "gear" in the top right corner:

2. In the Layout tab you can change the gap between the columns in the block, the alignment of the elements in this column, set the paddings between the edges of the column and the element in it, or change its style — define whether rounded corners will be applied to the column:
Important: the paddings or style parameters can be applied only if a background is applied.

Changing the background of a column

1. To access the settings of a column, hover over it and click on the "gear" in the top right corner:

2. Navigate to the Background tab in the settings and add color or image background to the column:
3. When you set a photo as a background of the column, you will see more customization options — e.g., applying filter or color correction:
Tip: to proceed with customizing your block, check the article Changing the design of a block.


    • Related Articles

    • 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, ...

    • Adding Elements

      Most blocks in our editor are fully customizable. Therefore, you can enrich the look of your blocks by adding new elements to them — for example, icons, dividers, lists, etc. Tip: see the article Adding a custom block to create your block from ...

    • Adding A logo

      Logotype is a text or graphic representation of a company name, trademark, abbreviation, etc. Adding a logo to the header or footer helps you create an authentic design for your website and become more recognizable among others. In this article, you ...

    • Adding Your Own CSS to the Site

      At SiteCliq you can add your own styling to the elements with the help of a custom CSS script. With the help of our tools you can place your code either to a particular page or to the whole site. Important: this feature is available for Pro sites ...

    • Adding Your Own Code to the Site

      You can add your own code to the site to integrate a third-party service — for example, a typeform, booking system, calendar, etc. With the help of our tools you can integrate your code either to the whole website or to a specific page. Important: ...