The Theme Settings → Body classes field allows specifying additional (global) body classes:
Header:
body--site-header-dark-mobile— makes the header black on resolutions at and below 1024px.body--site-header-dark-desktop— makes the header black on resolutions above 1024px.body--site-header-sticky-mobile— makes the header sticky on resolutions at and below 1024px.body--site-header-sticky-desktop— makes the header sticky on resolutions above 1024px.
Blog:
body--blog-wide— makes the blog, archives and search entries wide and centered. This mode doesn't have the sidebar.body--blog-wide-540— limits the height of the featured images on the blog.body--blog-minimal— removes all meta data except the date from your blog.
Posts:
body--single-post-featured-image-overlay— alternative header version with full wide featured image.body--single-post-featured-image-overlay-540— restricts the height of the featured images to 540px (or taller if necessary).body--single-post-minimal— removes all meta data except the date from your posts in image overlay mode.
Product:
body--product-gallery-scroll— enables vertical product gallery.
Footer:
body--site-footer-left— the default footer is centered. This will make it left-aligned.body--site-footer-dark-desktop— makes the footer black on resolutiions above 1024px.body--site-footer-dark-mobile— makes the footer black on resolutions at and below 1024px.
Other:
has-sofia-pro— fonts may have slightly different parameters and if you're using "Sofia Pro" add this class. It will make a few small spacing adjustments in various places.
Benefits of body classes
- Sometimes the style of one element affects the style of other elements. For example by manipulating the header color it's also necessary to change the color of the breadcrumb bar. This can be achieved conveniently with a global body class.
- By using body classes we give you an option to specify the necessary classes only for selected pages.
- Body classes offer better performance because only one database request is made to load many style settings.
- The settings field also acts as a regular option. It allows you to add any arbitrary body classes to your website.