1. Home
  2. Tutorials
  3. Pages
  4. Personalize the page styles
 
Page custom

Personalize the page styles

Add styles to your columns and blocks on your website. Thanks to the page builder tool, it is easy to add lines or highlight content boxes. The design element colors are defined according to your theme but it is possible to easily change them via your design form.

This option works only for sites with a responsive theme. If you have not yet updated your theme to a responsive theme, we encourage you to do so!

 

Personalise styles to create flawless pages

Create web pages easily !

How to add styles to your pages and columns

Personalize page styles

Add a separating line between columns

You already know how to divide your page into columns. If you would like to create a line of separation between the two columns this is a simple style choice. This vertical line allows you to create clean aesthetic separations between columns and use the entire space on your page.

For instance, this block has separated columns, with a clear orange line in the middle.

To create this separated column you will click on the Design button find within each block within the visual editor. Select the separated column style using the drop down menu displayed just below the Design button. Save the changes.

If you have a column of text and a column containing an image, the principle is the same. You select separated column from the Style options of your block.

Add a separation line between blocks

We have applied the separated block to illustrate its use, and it is an oft-used tool by most webmasters. In the same way as separate columns, the separated block makes it possible to organize content clearly.

To apply this style to your lines: Click the Design button at the bottom of the visual editor and then select the Separated block style via the drop down menu below the Design button. Do not forget to save changes.

Add highlight to columns or blocks

It is also possible to choose the highlighted column style, ie apply a background color for the contents of your columns. Your content, widgets, photos, and texts will, therefore, be highlighted and stand-out clearly from other content. You can add a more personal style to the highlighted columns form the design layout.

At the bottom of the line of your visual editor, click the Design button and select the Highlighted Columns style. Then save.

This is also possible with blocks, you can choose to highlight directly from the visual editor. In order to separate your content, widgets, photos, and texts to stand-out clearly from other content.

At the bottom of the line of your visual editor, click the Design button and select the Highlighted Block style. Then save.

Please note that you can only have one highlight style by default. If you want to apply different styles to your highlighted columns you will need to create the CSS in the additional CSS part of the Design form for advanced webmasters.

Apply the style Highlighted column or block on hover

The hover feature highlights the content of your columns with a colored background when the mouse hovers over it (hover over the column opposite to see the result).

This allows you to highlight some of your content without weighing down the page with different designs.

This style can be applied to the bottom of the block from the visual editor when clicked on the Design button. Select the Highlight on hover style. And then save.

Test the hover effect!

Glide your mouse over this block to see the hover style

Put your content forward or mute the content

Apply the style Leaderboard

In order to put forward your content and make it stand out from the rest, apply the Leaderboard style. The content in the block will take more importance on the page. The text will be bold and larger and you can define the settings from the Design form.

  • The style can be applied to the bottom of the block from the visual editor when clicked on the Design button. Select the Leaderboard style and then save.

Apply the style muted block

In order to mask content so that it doesn't distract site visitors from whats important by applying the Muted block style. The content in the block will change size, but it will be muted and you can define the settings for this style from the Design form.

  • The style can be applied to the bottom of the block from the visual editor when clicked on the Design button. Select the Muted block style and then save.

Personalize the design

The colors and appearance are automatically defined by the colors of the theme you are using. It is possible to modify them via the Design portion of your manager.

As you edit items for your entire site, these changes may also result in a change in the background colors and borders of your blog posts, or in the fields of your contact forms.

To do this, go to Design> Settings> Personalize to personalize the styles and the colors of your theme.