Skip to content

Layouts

Check out our video Layouts tutorial.

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 Options 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.

Orientation and header behavior

Generally, Layouts are better defined by their orientation, and can thus be divided into two main categories: horizontal or vertical. When we talk about the orientation of a layout, we’re actually referring to the arrangement of the logo and navigation combination.

When the logo and the navigation are placed side by side, or generally when they are set to occupy the screen using its width, we’re using an horizontal layout, while when the two of them are stacked one on top of the other and placed on a side of the viewport, we’re using a vertical layout.

Apart from choosing its orientation, a Layout can also be defined by its width, which is the amount of horizontal space being used by the content area of the pages that use the Layout. Concerning the content width, you have two options: you can make the content extend to the browser viewport’s edges (extended layout), or you can make it stay at the center of the browser viewport (boxed layout, using a maximum width of 1104 pixels).

You can set a layout to be automatically used across the entire website by setting it as Master using the Set as master layout toggle. If you only have one Layout, it’ll be automatically set as the Master layout for the website.

Keep in mind that individual posts/pages/post types/archives can override the Master layout, and choose to use a different one for their display.

The Header section of the Layout editing screen is used to define the behavior of the header element. What this means is that you can choose between having:

  1. a static header, that goes away as you scroll down in the page, only to appear again if you go back up,
  2. an absolute header, that is similar to the static variant, with the difference that the header can appear again when you’re scrolled deep down the page,
  3. a fixed header, which is always visible, regardless of the scroll.

The absolute behavior is useful when you need to overlap the header to a page header image that’s placed in the top portion of the page and stretches wide in both directions. There are two types of absolute scrolling behaviors: when a visitor scrolls down or up in the page, you can choose to display a compact version of the header, without the top and bottom bar (if you have any).

If you select any between the absolute or fixed behavioral options, an extra styling setting will be available called Shadow, which will add a soft shadow on the header in its scrolled or regular state.

Header layout

Headers in Fenix are composed by three parts:

  1. The Header layout, which is where the logo and navigation components are,
  2. Top bar, which is a wildcard area that’s placed on top of the Header layout,
  3. Bottom bar, which is identical to the Top bar, but placed below the Header layout.

You can edit each area by clicking on the corresponding button that’s placed in the middle of each section, in the Layout editing screen.

The Top and Bottom bars are structured in columns and their content is powered by widgets: for each area, you’ll need to choose the number of columns you want to use (one or two), and which widget area to display in each column. For more about Widget areas, go check the appropriate section in the documentation.

The Header layout part is the most important one, since it gives you the ability to select a logo for your website, and decide the navigation structure. You can pick a particular Header appearance by selecting one of the available presets that will be displayed to you after clicking on the Choose a header layout button.

The number of presets available for you to choose from depends on the Layout orientation you’ve chosen.

Each preset may have a specific set of options that will appear after you’ve selected it, but generally speaking all the presets share the same logic: for each preset, you can choose whether to display the logo tagline or not, enable extra elements such as a search icon before or after the navigation component, or a cart icon, if you’re using the the WooCommerce plugin.

Appearance

In the Appearance section, displayed when clicking on the Edit appearance button in the top left corner of the Header layout interface, you can style each component of your Header.

Under the Logo section, you’ll be able to upload a logo that’s going to be used when your website is accessed from a desktop or mobile device. When left empty, the Site name will be used in place of the logo; if you only upload a desktop logo, that logo will be used on mobile as well.

Skins

The Header layout features a special skin system that allows you to define three main appearance states for your header:

  1. Dark skin (default), used with dark texts on light backgrounds,
  2. Light skin, used with light texts on dark backgrounds,
  3. Scrolled, used when the header is scrolled in page.

The scrolled version is automatically applied when the header behavior is set to absolute.

The dark skin inherits the theme default colors defined in the main stylesheet or your customizations made with the WordPress Customizer.

The light skin is intended to be used with page headers that have a big image and an header that’s absolutely or fixed positioned, especially if you are using a slideshow.

To learn more about selecting and changing the header skin, check the Page layout section.

Footer layout

Similarly to the Header layout, the Footer layout is composed by two main areas:

  1. the Footer layout,
  2. the Bottom bar layout.

The Footer layout is intended to be used as a classic column based footer sidebar, while the bottom bar layout instead is intended to be used as a section useful to display secondary information, such as copyrights.

Both the areas are structured in columns, and each column can be populated with a widget area. For more about Widget areas, go check the appropriate section in the documentation.

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.

Categorized: Using the theme
Design Nominees