Editor
      Back to home
      1. Knowledge Base
      2. Editor

      Sections

      Divide pages into meaningful segments of content

      In Nyla, a Section is a container for content. Sections are the basis of all page building in Nyla. Sections have design settings, allowing you to change the size, layout, and look and feel of the Section and the contents within it. Sections also have a content block, allowing you to add content items within the Section.
      Once you have built a Section and want to reuse it across your site, you can save it as a Section Template. Find out more about Section Templates here.

      Global Sections

      There are 3 Global Sections in Nyla:
      1. Header
      2. Footer
      3. Cart
       
      Global Sections are always present on your site, unless hidden from specific pages. Currently, Nyla only supports a single Global Section for each of these key design blocks.

      Add a Section

      You can add a Section to your page on the Sections panel of your page. You can choose from Section Templates or to add a blank Section.
      By default, a new Section is added at the end of the page.
      You can also use the “+” icon within the Preview above or beneath any Section to add a new one.
      Add section.png

      Reorder Sections

      You can reorder sections on a page by dragging them in the left bar or by clicking on the up and down arrows in the live preview. 

      Anatomy of a Section

      All content within a Section is added within a Content block. This inner container can be modified in its size and position within the Section.
      Section.png
      By default, Sections will take the maximum width set in  Spacing styles, while the Content Block will take the width of site width - site margins. This allows you to easily add content that respects a vertical rhythm in your designs.
      Full width.png

      Section

      To set your section to be full width, you can toggle the ‘full width’ setting in Design. This will allow you to add background images or colors that go edge-to-edge on your site.

      Content Block

      The Content Block can also be set to be full width, allowing you to break out of the site grid and build creative full-width.

      Style a section

      Spacing

      Use settings under Spacing to change the margin and padding of your section. See Spacing
      NOTE: Sections have the unique ability to change the padding on both the margin and padding on the Section as well as the Content Block.

      Backgrounds

      Add a background color, image, or overlay. See Backgrounds
      In a section, backgrounds

      Borders

      Add a border around your Section. See Borders