How to Сustomize 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
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.
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.
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
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.
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.
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.
By default, the color palette 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 separately.
Go to the element background settings, and select a color or image.
A section is made up of columns, so to customize your section background, you need change it for each column in the section.
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.
Add scroll animation to your elements to make your page interactive and captivating.
You can add animation to the "Text," "Button," and "Picture" 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 elements, columns, sections, and blocks separately for mobile and desktop website versions.
By default, the page design is responsive, so any style settings you've applied to the desktop website version are synchronized and adapted to fit the mobile version size.
To manually adjust the mobile version appearance, turn off synchronization and switch to the mobile version tab.
Examine the layout of the mobile version and select individual alignments, padding, and background colors for each element.
You can also switch between mobile and desktop versions by toggling the switch on the right side of the website builder.
Last Updated: 28.08.2023