Skip to content

https://youtu.be/kI2qED7VYHQ

Generally speaking, a page anatomy is composed by an header, a content area, and, optionally, a footer. To manage the complexity of having the same headers and footers applied consistently across the website, or to give you the possibility of changing the default behavior for a particular context, we’ve introduced the concept of Layouts.

Layouts are groups of presets defining the visual presentation of your pages, allowing you to precisely control its details such as navigation orientation, and header and footer areas.

Basically, whenever a page or a post is published, two things happen:

  1. A certain Layout is applied to it (e.g. horizontal navigation, with a hamburger menu on the left and a three columns footer),
  2. The page is rendered according to its content.

The great thing is that, since most (if not all) pages and posts in the website will have the same overall consistent visual presentation, Layouts can be shared across the entire website, so that when you set one as Master, all the pages and posts will automatically use that preset as their Layout.

You can create multiple Layouts. Say you want a couple of pages or posts to stand out from the rest, and you want to apply a vertical navigation to them, or use a particular footer layout: you can create an entirely different Layout, this time not marked as Master, and apply that layout to those pages/posts only.

Also, regardless of its Master status, a Layout can automatically be associated to a specific post type or archive page. More on this in the Layouts page of this documentation.

You can create your first layout by clicking on the Fenix → Layouts page in the WordPress admin area: in this page you’ll be presented with a list of all the layouts that you have created. Just click on the Create New button near the Layouts heading to create a brand new one.

A Layout is composed by three main areas:

  1. Orientation and header behavior,
  2. Header layout,
  3. Footer layout.

Responsiveness

Desktop and mobile devices are profoundly different, and, generally speaking, a visual layout should adapt itself to the context in order to display information in the best possible way.

Layouts are built to adapt themselves depending on the context: after you’ve set a particular layout preset for its desktop representation, the Header layout can be changed completely when switching to mobile, allowing you to choose not only a different layout preset, but also which navigation menu to load, since in many cases it’s best to have a navigation that’s tailored for mobile use.

So, for example, the following situation is possible: you can use a wide header layout with a centered logo and a navigation menu on each side of it when viewing the page on a desktop device, and a left aligned logo with an hamburger menu on mobile devices.

For the Header top bar and bottom bar, and for the Footer layout and Footer bottom bar, the content you choose for their desktop view will be kept when going mobile, but you’ll have the option to alter its layout, changing the number of columns, or choosing to entirely hide a portion of them.

In the top right corner of the Header layout and Footer layout editing panels, you’ll find a couple of toggles that will allow you to switch between the desktop and mobile view.

By default, if you don’t specify any change, the mobile view will follow the desktop’s defaults.