Exploring the Avada Taxi Website Design Layouts

In this post we will explore the Avada Taxi prebuilt site to highlight the flexibility and power of the Avada Website Builder. Designing and building unique page content and layouts has never been easier, or as fast. The only limit is your imagination when creating your perfect Avada driven website.

Before we examine the Taxi Demo Layouts, we would like to explain the difference between Layouts and Layout Sections. Think of Layouts as the framework for a webpage. Layout Sections are the four constituent parts that that output the content, namely the Header, Page Title Bar, Content, and the Footer.

You can create as many Layouts and Layout Sections as you like, and you can use the same Layout Sections in multiple Layouts. See the Understanding Layouts & Layout Sections help file for more information.

The main difference between the Global Layout and a Layout is as follows:

The default is a Global Layout. To this, you can add a Header, Page Title Bar, Content, and or a Footer Layout Section, which will display across the entire website.

Besides the Global Layout, you can create Layouts (not assigned globally), and then determine with conditional logic which pages or posts will use the Layouts. You can also create as many Layouts as you need. For example, you can have a unique layout for each page on your site, or have a unique website footer for each page. The possibilities are endless.

Layout Conditions make it possible to choose, for example, a particular page or post that a Layout should be applied to or not. The combination of a Global Layout, Layouts, and Conditions allows you to be super flexible and create a fantastic array of unique web pages for your Avada website.

As illustrated below, you can click to edit to apply the conditions to your Custom Layouts.

In the open Layout Conditions window, you will see three columns. The middle column contains all possible conditions for pages and post types. You can choose to enable or disable a condition or a series of conditions. Once a condition is enabled or disabled, it will be listed in the right-side column.

Let’s start by examining the Avada Taxi demo’s custom footer. As illustrated below, a custom Footer Layout Section is set up to display globally across the entire site for all pages and posts.

Upon editing the Custom Footer Layout, you will notice a four-column layout applying various Design Elements and settings to make up the design of the footer. The number of columns you decide to use is up to you. Anything from one to six columns will work.

With Custom Layouts, being constrained by WordPress widgets and the Theme Options in the traditional sense is a thing of the past. You can design and build your layouts using the full power of the Avada Website Builder.

And here, you can see what the custom footer looks like on the front end. The only limit will be your imagination.

We have a custom single post layout called “News Articles,” which consists of a Page Title Bar Layout and a Content Layout Section. There is no Footer Layout Section applied to this custom single post layout and will, therefore, use the Global Footer Layout as predefined.

The Page Title Bar set up is relatively straight forward. We start with the main container with a background image applied in the container settings, followed by a full-width column with a Title Element (using dynamic content as an option) and a Breadcrumbs Design Element.

For more information about how to use dynamic content options with Avada, please see this help file and video.

The image below shows what the Single Post Page Title Bar looks like on the front end.

The Content Layout section for the Single Post has a lot more added to it than the Page Title Bar. The layout uses a combination of Layout Elements and Design Elements. The image below clearly shows all of the various facets that make up this custom layout in the Fusion Builder. For more insight into how this built, please watch the How To Build A Custom Single Post Layout video.

When editing the Layout, you will see a multi Container, multi Column layout—with a combination of Design Elements, Layout Elements, and nested columns, acting as sidebars. It also has a Global Container at the bottom, working as a Call to Action.

The image below shows what the Single Post Content Layout looks like on the front end.

We have a custom 404 page layout called “404 Page”, which consists of a Page Title Bar Layout and a Content Layout Section. There is no Footer Layout Section applied to this custom page layout and will, therefore, use the Global Footer Layout as predefined.

The Page Title Bar set up is relatively straight forward, but is different from the PTB created for single posts (explained above). We start with the main container with a background image and gradient applied in the container settings, followed by two full-width columns. The first column has a Title Element, followed by a second column that has a Text Block Element and then a call to action Button Element.

Feel free to check out this page that showcases all of the available Avada Design Elements.

The image below shows what the Custom 404 Page Title Bar looks like on the front end.

The Content Layout section for the 404 Page has a lot more added to it than the Page Title Bar. The layout uses a combination of Layout Elements and Design Elements. The image below clearly shows all of the various facets that make up this custom layout in the Fusion Builder. For more insight into how this built, please watch the How To Build a Custom 404 Layout Video.

When editing the Layout, you will see a multi Container, multi Column layout, with Design Elements and nested columns making up the bulk of the content. It also has a Global Container at the bottom, working as a Call to Action.

The image below shows what the Custom 404 Page Content looks like on the front end.

The information in this post should give you a good idea of a fraction that is possible with the Avada Website Builder. You can create unique layouts for your any page of your Avada website, fast and intuitively.