Insights

Sitecore SXA Component Layout Settings Explained

Sitecore SXA Content Authoring

Sitecore Experience Accelerator (SXA) offers content authors an elevated experience with an intuitive drag-and-drop WYSIWYG. Authors can also apply customized component layouts to create highly-visual pages. SXA uses grid systems that give the ability to section pages into columns and rows in varying widths.

Web Grid Systems

A grid system is a library of structured HTML/CSS components that allow webpages to be created easily. Grid systems allow content authors to create responsive sites that ensure designs are maintained across different browsers and devices.

Which Grid Systems Are Available In Sitecore SXA?

When setting up a new SXA site, there are three grid options available: Bootstrap, Foundation, and Grid 360. The Bootstrap grid is applied by default if a grid isn’t selected when creating a new SXA site.

Bootstrap

Bootstrap is a responsive, mobile-first grid system with a 12-column layout that has predefined classes. Its configured to support:

  • Phones
  • Tablets
  • Desktops
  • Large Desktops

Foundation

Foundation is a responsive, mobile-first grid system with a 12-column flexible grid that can scale to any size. The default sizes are:

  • Small
  • Medium
  • Large

Grid 960

Grid 960 is a 12-column grid system that’s based on a 960 pixels width. The default settings are:

  • Size
  • Prefix
  • Suffix

Sitecore SXA Grid Options

Default Component Layouts

Basic Layout

The Basic component layout tab shows the different rendering options for the grid system of the enabled SXA instance. The example below shows rendering options for different devices (compact phones, phones, tablets, laptops, and desktops) using a Bootstrap grid.

In this instance, a content author can select the grid width (1-12) for a Bootstrap-configured grid.

Sitecore SXA Basic Component Layout Options

Bootstrap Brush Up

Bootstrap is the most popular CSS Framework for developing responsive and mobile-first websites. The Bootstrap grid is made up of 12 columns that are easily divided into, twelves, sixths, thirds, quarters, and halves. To learn more about Bootstrap, click here.

Bootstrap Grid Breakdown

Advanced Layout

The Advanced component layout tab has additional configuration options to further customize the layouts of different renderings. A content author can apply the following layout options to a Bootstrap-configured grid:

Order

Use Order when there are multiple components across a single grid system and the components are to appear in different orders on different devices.

Sitecore SXA Advanced Component Layout Order Options

Offset

Use Offset when a component needs to move a number of columns to the right. An example would be if you want to centre a Rich Text component that’s 6 columns wide. In Basic, the width is set to 6. In Advanced, Offset would be set to 3. This put 3 columns on each side of the 6-column width component to total 12 (3 [offset] + 6 [component] + 3 [empty]= 12 columns).

Sitecore SXA Advanced Component Layout Offset Options

Float

Use Float when a component needs to be on the far left or right side of its grid, allowing text and inline components to wrap around it.

Sitecore SXA Advanced Component Layout Float Options

Visibility

Use Visibility to determine when and how that component appears on different devices. For example:

  • None - Doesn’t show at all for that device
  • Inline - Appears within the row/column of components
  • Inline-block - Appears in a new row/column, but shares the row/column with content that follows
  • Block - Appears in its own row/column.
  • Table - Lets the element behave like an element

Sitecore SXA Advanced Component Layout Visibility Options

Final Thoughts

It’s best practice to change the grid settings of a component over using additional column or row splitter components to change the layout of a page.

This limits the number of components on the page, making your page more responsive, and can improve the speed of the Experience Editor.

Happy Content Authoring!

Sitecore SXA FAQ

What is Sitecore SXA?

Sitecore Experience Accelerator (SXA) is a module you can add to your Sitecore stack. It comes with ready-made templates and renderings you can use to build your site.

What are the main features of Sitecore SXA?

Sitecore SXA's main features include:

  • Over 80 components
  • Drag-and-drop content authoring
  • Ready-made templates
  • Creative Exchange
  • Sitemap XML
  • Partial Designs
  • Page Designs
  • Rendering Variants
  • JSON Data Support

Why use Sitecore SXA?

Sitecore SXA moves the focus away from building basic components and offers content authors more customization options with an easy-to-use WYSIWYG. SXA comes with ready-made components that are easy to use in the Experience Editor.

SXA gives Sitecore marketers more time to concentrate on their clients' unique problems/challenges.

How do I get started with Sitecore SXA?

Fishtank is a Sitecore SXA expert. Send us a message to [email protected] to learn more about Sitecore SXA and how you can unlock the full potential of Sitecore.

Watch Our Webinar!

Learn everything you need to know about Customer Data Platforms (CDPs).

Explore how you can use a CDP to drive revenue through unforgettable customer experiences and unparalleled omni-channel data collection in our engaging and comprehensive webinar.

Meet Kayla Forgett

Digital Marketer

🐱☕️🏔

Kayla is a Sitecore Digital Marketing Optimization Certified Digital Marketer who focuses on everything from SEO to content strategy to social media to create impactful user experiences and brand growth. She's worked coast to coast in Canada in industries from NATO defense technology to collaborating with A-list celebrities and influencers for brand campaigns. She's a self-described 'marketing chameleon' that's able to take on any project. Kayla's a big fan of her two cats and strong cups of coffee. You can find her on the ski hill in one of her many retro ski jackets in the winter and travelling abroad in the summer months.

Connect with Kayla