Layout transformations

PREREQUISITES: You have at least one layout widget on your page or template, on which to apply the layout transformation rules. For more information about layouts, see Apply a template to a page.

Sitefinity CMS includes “drag & drop” layouts that can be quickly placed onto any page or template. These layouts are DIV-based, not TABLE-based, and fully aligned with HTML best practices. Once you place a layout, Sitefinity CMS becomes aware of the layout structure applied to your webpages, and through adaptive rule-sets, can optimize these layouts for the mobile web. Thus, you can take advantage of layout transformations for all Sitefinity CMS built-in layout widgets.

You transform your page layout doing one or both of the following:

  • Custom CSS file
  • Modify the transformations of the default layout elements

CSS transformation file

To apply a layout transformation, you can choose a CSS file that is loaded upon transformation. The CSS is loaded only after the device conditions and requirements you set with the media query are met. This custom CSS file overwrites the generic CSS of your site and makes transformation possible, for example you can override the page wrapper width (set it to 100%), change the layout of the page which is not based on Sitefinity CMS built-in layout widgets, enlarge font sizes for better readability, and so on.

For example, you want to hide the sidebar of a page when the page is viewed on mobile phones. To do so, you use a custom .facet_sidebar class in your custom CSS class:

Modify default layout elements

The modifications you make to the default layout elements naturally are applied to the layout only, unlike the custom CSS you can choose to load.

You simply choose how the default layouts are transformed once device conditions and requirements you set with the media query are met.

For example, if you have a 5 columns layout element, the columns will look too narrow and difficult to read on a smartphone. You can choose to display the columns as rows by clicking 5 rows element.

Increase your Sitefinity skills by signing up for our free trainings. Get Sitefinity-certified at Progress Education Community to boost your credentials.

Get started with Integration Hub | Sitefinity Cloud | Sitefinity SaaS

This free lesson teaches administrators, marketers, and other business professionals how to use the Integration hub service to create automated workflows between Sitefinity and other business systems.

Web Security for Sitefinity Administrators

This free lesson teaches administrators the basics about protecting yor Sitefinity instance and its sites from external threats. Configure HTTPS, SSL, allow lists for trusted sites, and cookie security, among others.

Foundations of Sitefinity ASP.NET Core Development

The free on-demand video course teaches developers how to use Sitefinity .NET Core and leverage its decoupled architecture and new way of coding against the platform.

Was this article helpful?