Connect to the marketplace from your dashboard and install the package
Version 8 Demo:
Version 9 Demo:
Motif comes with 2 headers: a full height header that fits the height of the browser window, and a fixed height header that is 400px tall by default (this can be overridden in the customizer).
The nav bar is displayed above the fixed height header, and it sticks to the top of the page in a fixed position.
Both headers have the same background colors, text colors, and background image (optional - set in the customizer).
The intent of having 2 headers is to let you choose which one to use on any given page. It was not intended for you to use both, though that is possible with this theme. There is a "Top Section" area above the "Main" area that you can use in conjunction with the header you choose. This is the recommended approach.
There are 3 custom Autonav block templates: "Motif Navbar", "Motif Navbar Right" and “Motif Megamenu”. The starting point uses " Motif Navbar" by default. These templates are for use in the nav bar and apply the necessary classes to display the nav properly in the nav bar.
This template displays the nav left aligned in the nav bar, so it sits up against the logo.
This template displays the nav right aligned in the nav bar.
This template comes with a mega menu for an easier multi-level navigation.
Motif has a custom template for the Feature block called "Motif Feature" that displays the feature block in the style you see in the Motif demo. This is set as the default template for this block type.
Motif comes with a custom template for the Image Slider block called "Motif Image Slider". This is what is used in the Motif demo in the full height header on the home page.
This template sets the slide image as a background image on the slide positioned in the center of the slide and set to cover the whole slide. It then adds the title and caption to the slide centered both horizontally and vertically. If a link is added, the link is rendered as an overlay on the slide, so clicking anywhere on the slide takes you to the link's location.
Note: In order for this template to render properly, there must be a height set on the container of the image slider.
Motif comes with a custom block template for the Next Previous block. This template displays the next and previous links side-by-side, with the up link displayed as a button beneath them. In the Motif demo, you can see this template in action on a blog entry page.
Motif comes with 2 custom templates for the Page List block: "Motif Grid Four Column" and "Motif Grid Three Column". Each one uses Bootstrap markup to display the page list items in a 4-column or 3-column grid respectively. The 4-column template is used on the home page in the Motif demo.
The blog page in the demo uses the standard Page List view, though you could use one of the grid templates.
Motif comes with the following page templates for you to choose from:
Motif has several areas that you can use on each page in order from top to bottom:
By default, there is a message in the footer that says "Designed by Xanweb. Built with Concrete5." Each link has a 'rel="nofollow"' tag so that it doesn't affect your site's SEO.
While I would love for you to keep this message, I understand that this isn't desirable for everyone. To remove this message, all you need to do is publish a block in the global "Footer Bottom Right" area.