Skip to content

Page layouts

In every page that you create, whether it’s a real page, a post, or any other content type, the first thing you’re going to see it’s the top portion of the page, which we call Page header. Due to their preeminence, page headers are particularly important and require specific tools to give them the flexibility they need.

https://youtu.be/WembRhkJxak

Layout types

The editing area for page headers is located in a meta box called Page layout in the page/post editing screen, and consists of a set of controls and a preview area that’s entitled to give you a rough idea of how your page header is coming up.

Pressing the Change layout button on the top right hand corner of the preview area will allow you to select a page header layout and the Layout that’s used by the page. For more about Layouts and how they work, you can check their relative documentation page.

There are four types of Page header layouts, among which you can choose.

Elements

In Fenix, a page header is composed by different elements, all of which are optional:

  • A page title, or a big bold text that serves as slogan for the page,
  • a text that’s displayed before the page title,
  • a text that’s displayed after the page title,
  • call to action elements such as buttons,
  • a background media element, such as an image or video.

You can use the regular page/post title to be used as page title, or you can write your own title/slogan, so that the text won’t interfere with SEO elements such as the document <title>.

The content that goes before or after the page title/slogan is intended to be a sub-headline or provide additional information for the page/post: for example, since they can also fetch dynamic data, in the single post you could choose to automatically display the post’s categories or the author name, while in other cases you might want to write an entirely custom text.

The media element can either be an image or a video, and it supports different display properties, alignment and overlay controls and more.

The Page layout also gives you the option to create a slideshows using the aforementioned elements. Essentially the distinction here is that if you want a static header, you’ll create a slideshow that’s composed by a single slide, and as such with no transition/movement effects.

https://youtu.be/N5WIJgJ52L0

By clicking on the Slideshow control, on the top of the Page layout editing interface, you’ll unlock the possibility of creating more than one slide, rearranging them, and sort of link them using transition effects that involve both the texts and the media elements.

You can also choose to bypass the Fenix page header system completely and use your own external slider plugin: in order to do this, just click on the External control, on the top of the Page layout editing interface.

Lastly, a page header can also be completely disabled: pages that choose to disable the page header are essentially blank canvases, of which the first elements to be displayed is the page content itself. This is a particularly interesting use case, since creative pages can be easily composed, with complete freedom, using our Brix page builder.

Options

The main Page header options are available by clicking on the big arrow on the left side of the Page header editing interface.

Here you can edit all the elements that compose the Page header and their appearance, with controls such as text alignment, background color, skin and more.

Effects

For both the static and slideshow modes there is a button on the top right corner of the preview area called Effects options: in this panel you can control the effects for the text and the media layer and the timing and effects for the transitions between different slides when in slideshow mode.

Please note that having a slideshow with both texts and images will create two separate sliders that are moved in sync: this allows to have completely different effects between text and media.