Skip to main content

Creating Layouts

Layouts are a powerful tool that offers flexibility in designing the structure of your pages. Layouts allow you to create visually appealing and well-structured pages efficiently, ensuring consistency and ease of use across your site.

You can either create new components and add them to a layout component, or you can design a new layout in the layout editor and add the sections you want using the page editor. When working in the page editor, you can combine newly-created components with existing components for a customized layout.

Step 1 - Create a New Layout Component​

To add a new layout component:

  1. Go to Design.

  2. Select Sections.

  3. Select +New Section.

  4. Complete the details as follows:

    OptionDescription
    NameProvide a descriptive name for your layout.
    SlugProvide a unique slug for your layout.
    CategoryFrom the list, select Layout.

  5. Configure your HTMl and CSS.

  6. Select Publish. Once the component is published, it is available to use in the Layouts Editor.

Step 2 - Create a New Layout​

To create a new layout:

  1. From Studio, select Design.
  2. Select Layouts.
  3. Select + Add layout. The New layout panel is displayed.
  4. Specify a name for your layout. This should be something easy to understand, indicating the layout's purpose or function. For example, Featured products or Sales countdown.
  5. In Layout component, select the layout component you want from the list.
  6. Select Create layout. The new layout is displayed.
  7. Select Header. A list of available sections is displayed.
  8. Navigate to Layout to see a list of available headers.
  9. Select the header that you want to use.
  10. Select Footer. A list of available sections is displayed.
  11. Select the footer that you want to use.
    note

    For more information about how to format your headers and footers, see Headers & Footers

  12. When you are happy with your layout, select Publish.

Step 3 - Apply a Layout to a Page​

Once a layout is published, when you create a new page, your new page automatically uses the new layout.

For the page defaults, you can go to the Layouts Editor and change the layouts that the pages are using.

Alternatively, manually change the layout for individual pages by going into the page settings and selecting a different layout.

  1. Select Options next to the page that you want to add a page layout. The Page settings are displayed.
  2. In Layout, select the layout you want to apply from the list.
  3. Select Save only.
  4. Preview the page to check that the layout is working correctly.
  5. When you are happy with your page, you can publish your page.