Sitecore Experience Accelerator

Change the layout of a rendering

Abstract

Change the grid settings of a rendering in the Experience Editor.

By default, when you add a rendering to a page, it takes the full width of the column. In the Experience Editor, you can change this in the grid settings of the rendering. To change the default settings permanently, you must change the grid settings in the Content Editor.

Note

To see the grid columns, on the ribbon, on the View tab, select Grid.

To change the layout of a rendering:

  1. In the toolbar of the rendering, click Edit style and layout586AA71710AB4A69914D478263FA86C4.png.

    3D69E53AA41C4FF88F9CE44EEBD92872.png
  2. In the Grid section, on the Basic tab, change the width of the rendering. Depending on the grid system you use, you can set the column width for different devices. For example, for different devices, you can specify over how many columns an advertisement will display.

    C527D9B473B949E78EEFCD2BE442C3CE.png
  3. You can add another rendering to the page by placing it above a rendering that is already on the page.

    06C236263AF5414CAC3B59DD0443BADC.png

    Note

    The new rendering takes the grid settings of the existing rendering. This can be convenient if you want to add multiple renderings of the same size. For example, three advertisements of the same size.

    D0B0403C37394020BEA2DC05207C750B.png
  4. You can change the more complex settings of a rendering on the Advanced tab. For example, to hide a wide advertisement from displaying on mobile phones, on the Advanced tab, in the Visibility option for the Large Desktops field, select Show only for large desktops.

    01EF3AF787D84DE99D8C7A9A9B16E83A.png

    Note

    For details on more complex changes to the grid, for example, the Push, Pull, and Offset options, refer to the documentation of the grid system that you use.

    C4EF68B8E1894776B47A7C820772903E.png

    When you resize to a phone layout, the wide advertisement is not displayed.

Note

To display renderings that are hidden on specific devices because of grid settings, on the View tab, select Hidden components.

CB403E0589504131B70C8F43B8576ABB.png