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.
How to edit your elements
Block
Hover over the upper right corner of a block, and click Block settings.
You can set your block’s color, select a background image, add margins, and stretch the content horizontally and/or vertically.
You can also hide your block on mobile or desktop devices.
Column
Hover over the top right corner of a column, and click Column Settings.
You can set your background color, add a drop shadow and outline, round the corners, adjust the padding, add padding between columns, and align your content top, bottom, or center.
Widget
Hover over the top left corner of a widget, and click Widget Settings.
You can also go back to your top-level element settings (your style, block, or column).
Element parameters you can edit
Alignment
You can align widgets within each column horizontally: left, right, or center. You can adjust the alignment for the following widgets: Button, Image, Line, Social, Accordion, and Timer. You can set the alignment of the Text element using the text formatting toolbar.
Go to your element's editor, and select its alignment.
Width
As you add elements to the page, your column width is distributed evenly over the entire section width. However, you can change your column width by moving the slider.
You can change the width for two, three, and four columns. If you add five or six columns, you will not be able to change their width.
Your content width is affected by the padding and margins you set when editing a block, column, and widget. You can also adjust your content to fit the full screen width using the Full-screen width option. The site width will not change.
Your image width is set in pixels.
Height
Your element height depends on the size of your image, font, video, and indents of the elements in the section. For example, if you have multiple columns with different element heights, the section will be set to the maximum element height.
You can also adjust your element alignment.
Indentation and spacing
You can add padding at the top and bottom to your block. You can set it from 0 to 240 px.
You can add right, left, top, and bottom padding to your column.
You can also add spasing between columns when editing them.
You can also separate your site elements by adding the Spacer or Divider widgets. For example, you can separate the main screen from your service or product benefits.
Background
By default, the color scheme you selected 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 each element individually.
Go to the element background settings, and select a color or image.
You can also select an image as your block background. Turn on the Background image toggle, and select or upload an image.
To edit your selected image, click the leftmost icon.
Next, you can customize your image.
| 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:
|
Pinning a Block
You can pin any block to your site 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 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 be displayed with the selected animation type.
To do it, go to the element settings, and turn on the Animation on scroll toggle.
Select an animation type.
| 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. |
Select your animation position, which is the side your element will appear from (left, right, top, or bottom).
Select your animation speed, which is how fast your element will 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: 13.03.2024
or