Home / Designing Your Website

Page Layout Settings

Tech Writers Team @ Ucraft

Last updated on May 31, 2024

The Page Layout Settings panel provides you with the necessary tools to create and modify the layout structure of your pages. The Page Layout Settings panel allows you to create an organized and visually appealing structure for your web pages for a better user experience. By making adjustments in this panel, you can visualize the design of your page through the Layout Preview feature.

Accessing Page Layout Settings

To access the page structure configuration options, navigate to the Visual Editor and access the Page Layout Settings on the right panel.

Configuring the Page Layout Settings

You can edit the Page Layout Settings using the following options:

  • Layout - allows you to configure the headers and footers, and include a sidebar to your webpage. Any changes made in this section will be reflected in the Layout Preview.
    • Navigation Mode (Header, Footer) - serves as a prominent feature of your website, providing links to essential pages that potential customers often visit.
    • Sidebar - determines the presence or positioning of the sidebar within the layout: left or right.
      • Use Full Height - allows the sidebar to be displayed at its full height without considering the header and footer positioning.
    • Layout Preview - provides a visual representation of the structure of your page, showcasing the effects of your layout modifications.
    • Layout Preset - allows you to choose the preset created via the Design System to configure further.
  • Background - enables you to define the background parameters according to your specific design requirements.
    • + icon - allows you to add up to five background layers (colors and/or images) to enhance the visual appeal of your page.
    • Eye icon - allows you to display or hide existing backgrounds as needed. This option provides control over the visibility of backgrounds and allows you to apply different types of backgrounds to the layout, including solid colors, gradients, and images (see Global Styles):
      • Solid Color - apply a single solid color as the background for your layout. Solid colors created in the Design System are available while choosing a background color.
      • Gradient Color - create a gradient effect as the background of your layout. You can customize the gradient by specifying the colors and direction. Gradient colors created in the Design System are also available while choosing a background color.
      • Image - apply an image as the background for your layout. You can upload your own image or choose from a selection of preloaded images from the Media App.
    • Bin icon - allows to remove unwanted background color/image from the list, unless it is not the only option.

💡 If you have questions or concerns, contact us directly via the Live Chat box in the lower right corner. Our Support Team will provide you with top-notch quality support 24/7.