Introduction
Avada is a popular WordPress theme that allows users to create beautiful and modern websites with ease. It comes with a powerful Header, Footer, and Column Layout Builder that makes it easy to customize the look and feel of your website. In this guide, we will show you how to use the Avada Header, Footer, and Column Layout Builder to create a unique and professional website. We will cover how to add and customize headers, footers, and columns, as well as how to use the drag-and-drop interface to create a custom layout. By the end of this guide, you will have a better understanding of how to use the Avada Header, Footer, and Column Layout Builder to create a stunning website.
How to Use Avada Header, Footer, and Column Layout Builder
Avada is a popular WordPress theme that allows you to create beautiful websites with ease. It comes with a powerful header, footer, and column layout builder that makes it easy to customize your website’s design. In this article, we’ll show you how to use Avada’s header, footer, and column layout builder.
Step 1: Access the Header, Footer, and Column Layout Builder
To access the header, footer, and column layout builder, go to the Avada > Theme Options page in your WordPress dashboard. On the left side of the page, you’ll see a menu with several options. Click on the “Header, Footer, and Column Layout Builder” option.
Step 2: Choose a Header Layout
Once you’re on the Header, Footer, and Column Layout Builder page, you’ll see several options for creating your header. You can choose from a variety of pre-made header layouts, or you can create your own custom header. To choose a header layout, simply click on the “Choose Layout” button next to the header layout you want to use.
Step 3: Customize Your Header
Once you’ve chosen a header layout, you can customize it to fit your website’s design. You can add or remove elements, change the colors, and adjust the spacing. You can also add custom HTML and CSS code to further customize your header.
Step 4: Choose a Footer Layout
Once you’ve finished customizing your header, you can move on to the footer. On the Header, Footer, and Column Layout Builder page, you’ll see several options for creating your footer. You can choose from a variety of pre-made footer layouts, or you can create your own custom footer. To choose a footer layout, simply click on the “Choose Layout” button next to the footer layout you want to use.
Step 5: Customize Your Footer
Once you’ve chosen a footer layout, you can customize it to fit your website’s design. You can add or remove elements, change the colors, and adjust the spacing. You can also add custom HTML and CSS code to further customize your footer.
Step 6: Choose a Column Layout
Once you’ve finished customizing your header and footer, you can move on to the column layout. On the Header, Footer, and Column Layout Builder page, you’ll see several options for creating your column layout. You can choose from a variety of pre-made column layouts, or you can create your own custom column layout. To choose a column layout, simply click on the “Choose Layout” button next to the column layout you want to use.
Step 7: Customize Your Column Layout
Once you’ve chosen a column layout, you can customize it to fit your website’s design. You can add or remove elements, change the colors, and adjust the spacing. You can also add custom HTML and CSS code to further customize your column layout.
Step 8: Save Your Changes
Once you’ve finished customizing your header, footer, and column layout, you can save your changes. To do this, simply click on the “Save Changes” button at the bottom of the page. Your changes will be saved and you’ll be able to view them on your website.
Conclusion
Avada’s header, footer, and column layout builder makes it easy to customize your website’s design. With just a few clicks, you can create a unique and beautiful website that stands out from the crowd. We hope this article has helped you learn how to use Avada’s header, footer, and column layout builder.
How to use Avada Header, Footer, and column layout builder
Our very own page builder, the Avada Builder, is now available in two interfaces: Avada Builder, which is our back-end wireframe page builder, and Avada Live, which is our front-end builder, which was only recently introduced with Avada 6.0.
Using our straightforward system of Containers, Columns, and Elements, both versions of the Avada Builder allow you to design beautiful page layouts for your website easily. Avada Builder is a fantastic tool for modern web designers and site owners alike, as it gives them complete control over all aspects of page content and Layout. Both versions of the Avada Builder also generate the same code. They are completely interchangeable, allowing you to have the best of both worlds with Avada Builder, which is currently available.
The Layout Builder page is where you will find all of your Layouts and any Conditional Layouts that you may wish to build in addition to the Global Layout created by default. Also located here is the area where you assign Layout Sections to your Layouts and specify Conditions for your Conditional Layouts to take effect.
The Layout Builder may be accessed from the Avada Dashboard by selecting Layouts > Layout Builder from the drop-down menu. One of the most straightforward ways to describe Layouts is to say that they are Containers that house the four layout sections of a page – the Header Section, Page Title Bar Section, Content Section, and the Footer Section. You can learn more about the differences between Layout Sections and Layouts by reading this document: Understanding Layouts and Layout Sections (PDF). Continue reading to learn more about the things you may do on this page.
Two parts are located at the very top of the Layout Builder page. A technique for populating the Layout Sections in the Global Layout or generating Conditional Layouts is outlined in the first section (hint: you can close this with the X), and on the right-hand side of the screen is an area from which you can directly create new Layouts (see below). Type in a name for your new Layout and then click on Create New Layout to complete the process. A blank Layout is created when this method is used; no Layout Sections or conditions are specified.
As you build Layouts, they are automatically imported into the Layout Builder page. You can rename a Layout by clicking on the Rename button at the top of the page. You can also click on the cog icon to establish conditions for the Layout, and you can delete a Layout by clicking on the Bin icon at the top of the page. You may also see and assign criteria by clicking on the bottom of all Layouts, except the Global Layout.
Within each Layout, you can see the four Layout Sections assigned to a particular Layout, one for each of the four layouts. In each Layout Section, you’ll see a + icon, which will allow you to assign a Layout Section to that section of the Layout when you move your mouse over it. You have the option of assigning an existing Layout Section to this section or creating a brand new section from scratch.
Using section layout
As part of Avada Layouts, you can now create fully customizable footers for your website, taking advantage of the entire creative ability of Avada Builder to accomplish this.
A Footer Layout is a Layout Section added to a Layout. For example, a Custom Footer requires a Footer Layout Section, which may be added to either the Global or Custom Layout. We’ll look at constructing a Custom Footer Layout Section in the next section, but first, let’s look at Introducing Avada Layouts.
In the WordPress sidebar or the Avada Dashboard, select Avada > Layouts. Avada’s Layouts and Layout Sections are created and managed here. As shown below, the Global Layout is initially empty, with no associated Layout Sections.
Customizing A Layout
This section can be added to the Global Layout, or a Conditional Layout, only showing on certain custom post kinds or single pages. The Global Layout is already present, but we need to develop a Conditional Layout first.
On the Layouts page, add a name and click Create New Layout, as shown below.
Create a Footer Layout Section if you wish to add it to an existing Layout or the Global Layout.
On the Layout Section Builder screen, select the type of Layout Section, enter a name (in this example, Footer, possibly Global Footer) and click Create New Layout Section, as shown below.
The following image shows how to generate a Layout Section directly from the Layout. Your site’s Layout Sections must be added to a Layout. Initially, there is simply a Global Layout. So, to create a Global Custom Footer, add it to this Layout. Custom Footer Layout Section, then add conditions to the Custom Footer Layout Section to make the Layout appear according to the criteria.
Nothing wrong with it, but it is vital to consider the situation. If the Layout is currently active (i.e., has conditions or is the Global Layout), any new Layout Sections will be active immediately and empty. It makes more sense to add a Custom Footer to a Global Layout via the Layout Section Builder page first, then add it to the Global Layout.
Alternatively, we might add a footer, header, or column Layout Section to a Conditional Layout and then create it. Conditions are not used until conditions are added. As illustrated below, we can alter the Footer Layout Section by hovering over it and clicking the edit icon.
Custom Layout Editing
The default WordPress Editor appears when editing a new Layout Section; you can use Avada Builder or Avada Live from here. Custom Layout Sections are created here. For additional information, see Creating Layout Section Content, but in short, you can build anything here.
Your Custom Footer can contain anything you can construct in the Avada Builder. You can have numerous columns, photos, etc.; This allows immense flexibility. The Layout section is where the footer material will appear. The material comes from the Builder, and your creativity is the only constraint.
See the original Footer built for the Taxi Demo below; This was made by changing the theme options and footer widgets.
The Desktop version of this Custom Header is shown here, but to correctly grasp the scope of this Custom Header, you must visit the live site, which you may access here.
Conditional Layout Design
No Conditions in a Global Layout. Adding Layout Sections to it will be used on every page because it is global. If you only needed a Custom Footer on some pages of your site, like single blog articles, you’d need to use a Conditional Layout.
A Conditional Layout can only contain existing Layout Sections. Then, under the Layout’s Select Footer tab, scroll to Existing, where you may add the Layout Section, as seen below.
You must set the conditions for any Conditional Layout. The Layout is active as soon as the conditions are specified; therefore, if you do this before establishing the Layout Section, the pages that match the conditions will be empty.
To add a condition, select Add A Condition from the Layout’s bottom menu. A dialog box appears, as shown below. For more information on Conditional Layouts, see Understanding Conditional Layouts, but for this example, we would select All Posts in the Posts Conditions tab, as seen below.
Adding columns from Avada Layout builder
The Column Element, like the Container Element, is an essential structural component when designing an Avada site.
Adding columns is relatively easy with Avada Layout builder.
- Click the ‘+ Container‘ button to add a Container to the page. When inserting a Container, you’ll be asked to select a column or column layout. You can create an empty Container, but normally you add Columns at this step.
- To add new columns to an existing Container, hover over the Container and click the ‘+ Column‘ button. To add a new column, click here.
- In the upper left-hand corner of a column, click on the ‘Resize Column’ icon. It will be the same size as your Column now. For example, a 1/4 column will appear as ‘1/4‘ under the Resize Column option.
- Drag and drop columns to rearrange them. You can also drag and drop columns into Containers.
A Column can only be placed inside a container element with the same width; This is usually the Site Width you set for the site. Thus, if you set the site width to 1200px, a 1/2 column will be 600px wide. Preset Column sizes are shown below when added to a page.
In Avada, you may set column widths (and more) separately on large, medium, and tiny layouts how To Set The Display Order And Size Of Columns In Responsive Layouts explains how to use this excellent new feature with columns.
Custom Widths are under Columns > Design > Width. As shown below, utilizing a percentage number allows you to specify a Custom Width. Thus, positioning is unrestricted
Auto is a new width option. Instead of a fixed width, the Column will take up the space of the most significant Element inside it. So it only works in some cases. You can change the parent Column to Auto, and the Column will resize to the Element’s width.
Avada also adds Responsive Option Sets for Containers and Columns. In the back-end of the Builder, you can see the Responsive Icons on any Columns, as seen in the image below. The Front-End Builder shows the Responsive Icons on the options.
Only the new Flex Containers show Responsive Option Sets. Columns in Legacy Containers are not available.
Conclusion
Thanks to Avada Layouts, the ability to create a Custom Footer, Header, and adding columns is now a reality and an almost limitless option. Not only can you utilize the power of Avada Builder to construct practically any Footer or Header you can imagine, but you can also leverage the power of Conditional Layouts to show or hide them on any page, category, custom post type, or any combination of criteria you can think of using the Avada Builder.
When it comes to WordPress layouts, Avada Layouts is a game-changer in the most literal sense. The fact that it allows for such design freedom and deployment flexibility means that the process of creating Footers will never be the same.
