In this guide, you will learn how to change the layout of a template. Generally, you cannot change the selected template itself, but most parts can be adjusted to meet your design requirements. Essentially, the chosen template can be transformed to resemble any other template, which can be useful for updating the design without creating a new page from scratch. This guide explains how to adjust the appearance of individual template parts.
1. Click on Settings in the editor.
2. In the Design tab, select Change layout in the Website layout row.
3. Here you can choose one of the Layout Styles.
Layout Style
Here you can set one of the template layout styles, which determines the general appearance of the website and its header.
Classic style is available in most templates by default (for example, Law Office Template). The page content stretches across the full width, and the menu is placed at the top.
Narrow style displays content in a centered column that forms a long strip. The background behind the column can be set. The menu is at the top of the page. An example default template is Fashion Boutique.
Boxed style also has content in a centered column, but individual sections are separated by space. The menu is at the top, and the background behind the column can be customized. An example default template is Hair Salon.
Sidebar Style places the menu on the left side. The page content stretches across the full width. An example default template is Town.
4. You can also adjust the Advanced settings.
Section content width
This setting adjusts the left and right edges of content in individual sections. Changing the edges affects, for example, the width of texts on pages.
Section spacing
This setting adjusts the top and bottom edges of individual sections, controlling how close section content is to each other.
Decoration
This option is available only in Basic Style and allows you to add a decorative element to the page header. You can add a Frame around the header image or Waves displayed at the bottom of the header image.
Background
In Narrow and Boxed styles, you can set a “back” background that appears behind the content column. A standard background can be set following the guide How to Change the Background of a Section.
After selecting a background, you can also set Effects, Color filter, Position, or Background animation.
5. Don’t forget to save changes using the button in the top right corner.
TIP: In addition to basic template properties, you can also customize the appearance of buttons, images, forms and product listings. For more information, see the related guides How to change design of buttons, How to change design of images, and How to change design of forms.
