The explanation is as simple as possible: the layout.xhtml is our template. As long as you name each section (in our case its header, content, and footer), whatever JSF page that uses it will inherit its layout.

Any page using this layout and wanting to customize some of those defined sections, should just describe the desired section like we did in the user.xhtml file:

<ui:composition template="/template/layout.xhtml">
    <ui:define name="content">
        <h1><font color="red">User content. Timestamp: #
            {userBean.timestamp}
        </font></h1>
    </ui:define>
</ui:composition>