How to customize your site elements
You can edit the style of your entire site and blocks that consist of sections and columns and customize each column and widget separately.
In the Introducing Website Elements section of one of our previous articles, we talked about site page elements. In this article, we will explain how to customize each element and the entire page.
Design setting guidelines
You can customize the entire page or each element separately.
| Website style | Sets the color scheme and text and button styles that will apply to all of your website page elements by default. With this option, you can customize your site to match your brand's style. Read more: How to customize your overall page style. |
| Block settings | Set the style of your selected block and its sections and columns. |
| Column settings | Set the style of your selected column in its section. You can copy a column along with all its settings to new columns. For example, when you add information about your service features or product benefits, you can create one column, duplicate and add it to a new column, and use it as a template. |
| Widget customization | Your overall website style is applied to all its widgets by default. However, you can customize some of your widgets once you add them. |
Learn more: Adding widgets.
Your site will have an elastic layout, which allows your site elements to automatically adjust to screens of various sizes. You cannot set a fixed width or height for your elements, but you can change their padding.
To edit elements, hover over the upper right corner of a block or column or the upper left corner of a widget, then click the edit icon.
You can also go back to the top-level settings of an element (for example, by clicking Style > Block > Column) in its editing panel.
Customizing element style
Let’s go over the settings you can use to customize elements. To learn more about specific settings, refer to the Element parameters section.
Block
You can customize the following block settings:
| Background color | Changes the block’s background color on the page. Click the icon and select a color. |
| Top and bottom margin | Adds space between a block and other elements on the page. The larger the value, the more space there will be between the block and other elements. Enter a value in pixels. |
| Background image | Sets a background image instead of a color. Turn on the toggle and select an image. |
| Full-screen width | Stretches content to full-screen width. Turn on this toggle to make the content fit from one edge of the screen to the other. |
| Full-screen height | Stretch content to full-screen height. Turn on this toggle to make the content fill the screen height. |
| Hide block on | Hide the block on mobile or desktop devices. |
Column
You can customize the following column settings:
| Flexible content ratio | When you activate this setting, you can manually adjust your column’s width. If you increase the width of one column, the others will shrink proportionally along with their content. |
| Spacing between columns | Adds external spacing between columns. |
| Content alignment | Aligns widget content vertically within a column. You can pin it at the top, middle, or bottom. |
| Background color | Changes a column’s background color. Click the icon and select a color.
To avoid covering the block’s background color, you can set the value to Transparent. |
| Rounding | Rounds column corners. The higher the value, the rounder the corners.
To see the rounding effect, select a column background color. |
| Inner padding | Adds padding between the column’s edge and the widget. Select preset values, or enter your own for the top, bottom, left, and right padding. |
| Background image | Sets a background image instead of a background color. Turn on the toggle and select an image. |
| Contour | Adds a border around the column to highlight its edges. Turn on the toggle, set a border thickness in pixels, and select a line type and color. |
| Shadow | Adds a shadow around the column to make it stand out. |
| Animation | Adds animation to column elements. Turn on the toggle, and select an animation type, direction, and speed. |
Widget
Style settings vary based on the widget type. You can learn more about every widget in their dedicated articles.
Read more: Website Widgets.
Element parameters
Alignment
Alignment positions an element and its internal padding relative to the parent element's edge. For example, with the Button widget, you can align it horizontally to the center, left, or right. You can align a column vertically to place its content at the top, middle, or bottom.
Width
Spacing
Your content width is affected by the padding and margins you set when editing a block, column, or widget.
For blocks, in the Top and bottom margin setting, you can add external margins at the top and bottom. You can set the value from 0 to 240 px.
For columns, you can set horizontal external margins in the Spacing between columns setting and internal margins in the Inner padding setting.
For some widgets, in the Inner padding setting, you can add internal padding between elements on the right, left, top, and bottom.
You can also separate website elements by adding the Spacer widget or the Divider line. For example, you can use these to separate your main screen from the section that highlights your product or service benefits.
Column ratio
As you add elements to your page, column widths will become evenly spaced across the section. You can also adjust column widths to create your preferred content layout.
Turn on the Flexible column ratio toggle. Then, move the column divider.
This setting adjusts all column widths in a section. Increasing one column’s width will proportionally reduce the others. You can change the width in sections with two, three, or four columns. However, if you add five or six columns, you won't be able to adjust their widths.
Widget width
You can stretch your content to full-screen width using the Full-width block option. This will not change the overall width of your page.
For some widgets, such as Text, the Width setting allows you to specify a percentage to control how much of the element's width will be filled with content.
Height
Element height depends on the size of images, fonts, videos, and element padding in the section. For example, if you have several columns with different element heights, the section will use the height of the tallest element.
In Content alignment, you can adjust your element alignment within the column and manage the extra space.
Position
In Position, you can move widgets left, right, up, or down.
Enter values in the fields:
| X | Moves the element on the X-axis (horizontally). Enter a negative number to move your content to the left and a positive number to move it to the right*. |
| Y | Moves the element on the Y-axis (vertically). Enter a negative number to move your content up and a positive number to move it down*. |
| Z-index | Moves the element on the Z-axis (in front of or behind other elements). Set a number from 1 to 9.
Elements with a higher Z index will cover elements with a lower number. |
| Rot.° | Rotates the element up to 360 degrees. Enter a negative number to rotate it to the right and a positive number to rotate it to the left*. |
* When entering values, keep your block size in mind. If the value exceeds your block size, the element will move outside of the screen and will not be visible.
Manually positioned elements won't adjust to various screen sizes automatically, so it's best to set up your mobile version separately from the desktop version.
Background
By default, the color scheme you select in the Overall style section is applied to your page background. You cannot set a custom background for the entire page at once — you can only set it for every block and column individually.
Go to the element background settings, and in Background color, select a color or image. If you need to fill space, set the top and bottom margins of your block in pixels in the Top and bottom margin setting.
You can also select an image as your block background. Turn on the Background image toggle, and select or upload an image.
To set an image style, you can select from the following options:
| Size | Adjust your image size and placement within the block.
The following options are available:
|
| Position |
Set an image placement within the block. This setting is applicable only if you have selected Default or Fit for the Size option. |
| Repeat |
Repeat an image within the block. This setting is applicable only if you have selected Default or Fit for the Size option. Options available: Do not repeat, Horizontally, Vertically, and Both. |
| Filters | Apply one of the 8 filters to your image. |
| Color overlay | Add an image overlay color, and adjust its saturation. |
| Scroll effects | Add an image scroll effect.
The following options are available:
|
Rounding
By default, the edges of sections (columns or certain widgets) are rectangular. You can round the edges by adjusting the rounding value. The higher the value, the rounder the sections. We recommend increasing the inner padding so that important information is not cut off.
Pinning a Block
You can pin the first block to your website header so that it stays on top even when you scroll. To do this, go to the block settings, and turn on the Pin to the top of the site toggle.
Animation
Add scroll animation to your elements to make your page more interactive and captivating.
You can add animation to the Text, Buttons, and Image widgets and the Column element. If you add animation to the Column element, all its elements will appear with the selected animation type.
Go to your element settings, turn on the Animation on scroll toggle, and configure the settings:
| Animation type | Select an entrance effect. | |
| Fade | This option allows you to gradually fade in or fade out an element when users scroll down or up. Use this effect to draw attention to a certain element, such as a headline or a call-to-action button. | |
| Scale | This option allows you to gradually increase or decrease the size of an element when users scroll down or up. Use this effect to draw attention to a certain element or create a sense of depth. | |
| Slide | This option allows you to move an element from one position to another when users scroll your page. Use this effect to create a dynamic and exciting user experience. | |
| Scrolling ticker | This option adds an effect that continuously scrolls your horizontal text across the screen. This effect helps highlight important information.
You can apply this effect only to the Text widget. It will appear on your published website or in the preview mode. |
|
| Animation position | Select the direction from which your element should appear (left, right, top, or bottom). | |
| Animation speed | Select the speed at which your element should appear (slow, medium, or fast). | |
How to edit elements in the mobile version
You can edit individual elements, columns, and sections, customize fonts, and hide blocks on mobile or desktop devices separately.
Read more: How to adjust your mobile website version.
Last Updated: 28.10.2024
or