7. Page Templates

Page templates offer different layout options that can be used to create pages. Within these layouts you can add all kinds of content into the editor or even use a page builder plugin to further enhance layout options.

 

This theme offers 9 different page templates: Grid Template, Default Template, Food Menu Template, Food Menu List Template, Food Menu Classic Template, Testimonial Template, Page with Sidebar, Page Builder Template and WooCommerce Shop Template.

 

7.1 Grid Template

This page displays all child pages of this page with featured images in a max 3 column grid. It's perfect for Projects, Team, or Services type pages. We used this template for creating About Us, Our Story and Our Values pages.

• Create or edit a page, and assign it to the Grid Template in Page Attributes. Upload your featured image as a page title background.
• The Grid Page Template displays all child pages of the page in a grid. Learn more about creating sub-pages (or child pages).
• The featured image, the title, and content from each sub-page create a grid item.

 

Grid page layout can have max 3 column grid, that means if the page has 4 child pages, fourth child page will go to the next row and will fill the whole width. If the page has just two child pages it will made a 2 column grid and etc.

Child page can also have her own child pages and this way you can create differtent layouts like we did in our demo. For example our About Us page consist of 4 child pages so that means, three child pages will create 3 column grid and than fourth child page ("Our Story") fill the next row. This fourth child page has 3 child pages that will again create 3 column grid ("Our Team" part)

 

7.1.2 CSS Styles

To style your pages individually, you can use extra CSS styles in your page text/HTML editor.

Button:

<a class="button" href="">Read More</a>

 

Opening Hours

    <div class="opening-hours">
    <h3>Opening Hours</h3>
    <ul>
    <li>Mon-Thu <span class="hours">11:00-23:00</span></li>
    <li>Fri-Sun <span class="hours">11:00-23:00</span></li>
    <li>Wednesday <span class="hours">CLOSED</span></li>
    </ul>
    </div>
    

 

Content Box

    <div class="box">
    <h4>Visit Us</h4>
    <h2>Our Story</h2>
    <p>Cras sodales luctus arcu, ac placerat nunc sagittis a. In at turpis ac nibh luctus sagittis in ut est. 
    Proin sed mi vitae velit convallis gravida imperdiet eu mauris. Cras sodales luctus arcu, ac placerat nunc sagittis a. 
    In at turpis ac nibh luctus sagittis in ut est.<br>
    <a class="button" href="#">Tell me more</a></p>
    </div>
    

 

Team Info

    <ul class="team">
    <li class="mail">lelatim@liber.org</li>
    <li class="twitter"><a href="twitter.com">@lelatim</a></li>
    <li class="tel">08992 7248297</li>
    </ul>
    

 

Special Offer

    <div class="special-offer">
    <p>Cras sodales luctus arcu, ac placerat nunc sagittis a. In at turpis ac nibh luctus sagittis in ut est. 
    Proin sed mi vitae velit convallis gravida imperdiet eu mauris. 
    Maecenas vehicula quam vel urna pulvinar, quis faucibus quam pellentesque.</p>
    <p style="text-align: center;"><a class="button" href="#">Get to know us</a></p>
    </div>
    

 

7.2 Default Template

This is the default look for pages, it removes the sidebar, giving your content plenty of space to spread out!

To make use of this template create or edit a page, and assign to it the Default Template in Page Attributes.

 

7.3 Page with Sidebar

This page template displays with the content on the left and a sidebar on the right.

To make use of this template create or edit a page, and assign to it the Page with Sidebar template in Page Attributes.

 

7.4 Food Menu Templates

Food Menu Template, Food Menu List Template, Food Menu Classic Template are displaying your food custom posts.

To make use of this template create or edit a page, and assign to it the Food Menu Template or Food Menu List Template or Food Menu Classic Template template in Page Attributes. Upload your featured image as a page title background.

To be able to show food menu custom posts, navigate to the Food Menus and add your food menu posts (please be sure to install and activate our custom post type plugin required with this theme). Add content inside the page editor, upload your featured image, add price and category for each food menu post.

 

7.4.1 Food Menu Category Image Above the Category Title

Navigate to the Food Menus » Menu Categories and inside the "Description" add your image like this:

<img src="http://www.anarieldesign.com/themedemos/liber/wp-content/uploads/2017/01/menu-cat.jpg" alt="alt text">

 

 

7.5 Testimonial Template

This template shows your testimonial custom posts.

To make use of this template create or edit a page, and assign to it the Testimonial Template template in Page Attributes.

To be able to show testimonial custom posts, navigate to the Testimonials and add your posts (please be sure to install and activate our custom post type plugin required with this theme). Add content inside the page editor and upload your featured image.

 

7.6 Page Builder Template

This template is created for the pages that will be using Elementor Page builder.

Before you start, you need to install Elementor plugin: https://wordpress.org/plugins/elementor/.

To make use of this template create or edit a page, and assign to it the Page Builder Template template in Page Attributes and click on the "Edit with Elementor" button.

Now you are ready to create page using a drag and drop page builder. You can find few examples of the pages created with Elementor in Liber theme demo inside the Features menu item.

If you want to start your website from our demo, you can use our one-click demo import. It will import also Elementor pages from our demo to yours and you can start from there. For more info read here