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

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

Rate this article about "How to Сustomize Your Site Elements"

User Rating: 4 / 5

    Popular in Our Blog

    Try SendPulse today for free