Layouts – Avada Website Builder

How To Create A Single Event Layout Section in Avada

Geoff — Wed, 11 Sep 2024 20:46:20 +0000

If you’re a user of The Events Calendar, with Avada 7.11.10 and up you can create Single Event Layout sections using Avada Layouts and a range of Events Calendar dynamic content items. Read on for more details of this, and watch the video below for a visual overview.

For privacy reasons YouTube needs your permission to be loaded.

Creating The Layout

A Layout section is just part of a Layout, so the first thing to do is to create a Layout for your Single Event Pages. You can assign any of the four possible layout sections to it, but generally, it’s only the Content Layout Section you need. For the Layout Conditions, just assign All Events to the Layout, as seen below.

Adding Dynamic Content To The Content Layout Section

For the Content Layout Section, you have all the freedom and flexibility you need. By utilising the Events Calendar Dynamic Content items to populate your Layout, you can design your Single Event pages any way you want. You could of course, also add Dynamic Content to a Page Title Bar Layout Section, but for this example, we are just looking at the Content Layout Section.

In the example below, from the Campaign EventSingle Page Layout, you can see every item of dynamic content in the Single Event Content Layout Section, coming from regular dynamic content items (Title), dynamic elements (Content Element & Post Card Element) and the Events Calendar dynamic content items.

Events Calendar Dynamic Content Items

Listed below are the standard Events Calendar Dynamic Content items you will find in Elements such as the Text Block Element. Below this, there are also a few extra ones that require specific plugins to be enabled.

Event Date
Event Cost
Event Status
Event Website
Event Subscribe Link
Event Venue Name
Event Venue URL
Event Venue Post Content
Event Venue Address
Event Venue City
Event Venue Country
Event Venue State / Province

Event Venue Postal Code
Event Venue Phone
Event Venue Website
Event Venue Google Maps Link
Event Venue Full Address
Event Organizer Name
Event Organizer URL
Event Organizer Post Content
Event Organizer Phone
Event Organizer Email
Event Organizer Website
Main Events Page URL

Event Series Name
Event Series URL
Event Venue Address Latitude
Event Venue Address Longitude
These require The Events Calendar Pro plugin

Event Ticket Capacity
Event Ticket Availability
These require Event Tickets plugin

Responsive Header Design With Avada

Geoff — Sun, 01 Sep 2024 22:20:54 +0000

Designing your headers for smaller screens, such as tablets and phones can be simple or challenging, depending on the header layout and the amount of content. But with Avada, there are many strategies you can employ to create successful headers for any screen size.

Read on to see some of the different strategies available, and watch the video below for a visual overview.

For privacy reasons YouTube needs your permission to be loaded.

Strategy #1 – Logo and Mobile Menu

Let’s start with what is the simplest strategy, that also uses minimal content in the header. This is simply to have a logo and a mobile menu on all screen sizes. The easiest setup for this is two one half columns, one with an Image Element displaying the logo, and the other with a minimized version of the Menu Element. Examples of this are the Barber prebuilt, the photography light prebuilt, and the music prebuilt.

If we look at the barber prebuilt, there is also a WooCommerce Cart icon next to the main hamburger menu icon, but there is ample room on all screen sizes for the content to stay as it is.

But even here, there are responsive options as play. In this prebuilt, the designer has in fact used different column sizes on all three different screen sizes, which has the effect of controlling the size of the logo, as it is an SVG logo and can scale without loss of quality.

Strategy #2 – Separate Containers for Desktop / Tablet and Mobile

A different approach is to make completely different headers for large screens and medium/small screens. The e-bike prebuilt for example, uses two containers for large screens and another one entirely for smaller screens, using conditional rendering to control which ones get used where.

This approach can also be seen on the Energy prebuilt. On this prebuilt, the header container that renders on desktop devices, via device type rendering logic, is completely different to the header container that renders on tablets and phones.

Strategy #3 – Collapsing Menu on Smaller Screens

One of the most common approaches to responsive header design however, is to simply have the main Menu Element collapsing to a mobile menu on either medium or small screens. This can be seen on many of the prebuilts, including the Classic, Restaurant, Taxi, Creative, and Wedding prebuilts, as well as many others. This is a solid strategy and works in almost all situations.

Here on the Wedding prebuilt, the header is in fact at the bottom of the screen, due to a full screen Avada Slider being added above it in the page options, but only on large screens.

With medium screens and below, the header is back at the top, and the menu has reduced to a mobile menu instead.

This approach can also be taken with side headers. Prebuilts like the Cafe, agency and Resume do this, with a side header on desktop, reverting to a top iconised header on smaller screens.

This is achieved by setting the Header Position to Left in the Layout Section options of the header layout section, and setting the Side header breakpoint to medium.

So on medium screens, the header reverts to the top, and via the menu element, the mobile breakpoint set on the mobile tab kicks in and the menu collapses to a mobile menu.

Strategy #4 – Items Progressively disappearing

A more complex strategy that generally also includes the above method is when items progressively disappear as the screen size gets smaller, and potentially also change size and order.

A couple of examples of this are the Financial Advisor, Pet Supplies and Retro Prebuilts. This is usally achieved with the visibility option on the column holding the element.

If we look at the Retro prebuilt as an example, on desktop there is only one header with five separate elements visible, but on medium screens, there are only three, and on small screens, just two.

Strategy #5 – Off Canvas for Navigation on smaller screens

Finally, another great strategy, which is also seen on the Retro prebuilt, as well as on quite a few of the more recent prebuilts, is the use of an Off Canvas to use as the primary navigation in responsive situations. This approach can be found on the Investment, Corporation, Business, and Magazine prebuilts just to name a few.

On the Magazine prebuilt for example, on large screens there is a main menu, and an icon triggering an off canvas as well. But when we view the site on a smaller screen, the main menu disappears, and the off canvas now also acts as the main navigation.

The content in your header will best determine which of these strategies to use for successful responsive design. Download the various prebuilts to explore more about how these strategies have been achieved. Then you can pick and choose amongst the various strategies to find something perfect for your site.

How To Create A Landing Page With Avada Layouts

Geoff — Mon, 06 Mar 2023 21:30:12 +0000

A landing page is essentially a page that you get to directly from a link. Landing pages are most commonly used to drive conversions in marketing and advertising campaigns, including email and Pay Per Click (PPC) campaigns.

Landing pages are designed with a clear focus or goal, and almost always have a singular Call To Action (CTA). Because of this, landing pages are typically without menus or other navigation, so as to help funnel the user to the CTA.

So how do you make a Landing page in Avada? It’s actually very simple. It’s really just a two step process of creating your content and turning your header (and potentially your footer) off. Let’s walk through it.

Read Our Blog Post On Landing Pages

Create Your Page Content

The first step in making a landing page is to create your page content. Remember the idea that there should be a singular Call To Action. You can build this manually of course, or there are also some Avada Studio page templates you could possibly use as a starting point, like the Black Friday and Cyber Week templates, or some Avada Studio Containers, such as the Halloween, Black Friday or Cyber Monday Containers.

For this example, I have created a landing page manually, designed to entice students to apply to Avada University.

Turn Your Header & Footer Off

With a landing page, you generally want to turn your header and footer off to reduce distractions. It’s all about the CTA, and you don’t want a menu to tempt people to head off to a different page. Remember, a landing page isn’t typically on your menu, and the user has only arrived at the page by clicking a link in an advertisement or an email campaign.

Removing your header and footer might be typical on a landing page, but it’s not a necessity though, and you might want to leave your header and footer on, or even have a different header and footer for just this page.

To remove the header and footer entirely, all you need to do is to create empty header and footer Layout Sections and assign them to a Conditional Layout (here called Landing Page), and use the conditions to set it to be used on just that particular page (or pages if you have multiple landing pages), as shown in the image below.

Alternatively, you could create different header and footer Layout Sections with just some elements, perhaps removing menus or other distracting content, and assign them instead to the Landing Page Layout.

Conclusion

So as you can see, landing pages are deceptively simple in Avada. Create your desired page content using the Avada Builder, and then determine whether you want any header and footer content and use one the above methods to control them. Then you will have a page URL you can add directly to mailouts or ads that take your users directly to your call to action.

How To Build A Side Header In Avada Layouts

Geoff — Fri, 04 Jun 2021 02:44:32 +0000

Building a Side Header in Avada Layouts is a very simple process. Effectively, it’s just a setting in the Layout Section Options for a Header Layout Section. Read on to find out all you need to know to build side headers using Avada Layouts.

Set Your Header Position

When building a Header Layout Section, there are Layout Section options, in the place you’d normally find Page Options. Here, you can generate your Dynamic Content Previews, and now, as can be seen in the screenshot above, you can set the Header position.

So to create a Side header, all you need to do is to set this position to the Left, or the Right, as you prefer. Then it’s simply a matter of building a Header in the same way as you normally would.

There is an option for the Header Background Color, and an option to set the width of the side header, and the Side Header breakpoint (the size screen it reverts to being a top header).

Build Your Header

Then it’s simply a matter of building your Header. You can use the same Elements, like an Image Element for the logo, and the Menu Element. That Element also has a Vertical Direction option that works with the side header.

As you can see in the screenshot below, our finished header looks great, and in this case, reverts to a Top Header on Medium Screens. Try it out live on the Resume Prebuilt Website.

The Layout Builder

Geoff — Fri, 08 Jan 2021 02:03:58 +0000

The Layout Builder page is home to your Layouts, and is where you create any Conditional Layouts, apart from the Global Layout that exists by default. It is also where you assign Layout Sections to your Layouts, and set Conditions on your Conditional Layouts.

The Layout Builder is accessed from Layouts > Layout Builder from the Avada Dashboard. The best way to explain Layouts, is that they are Containers that hold the four layout sections of a page – the Header section, the Page Title Bar section, the Content Section, and the Footer section. If you’re still not sure of the difference between Layouts and Layouts, please read the Understanding Layouts and Layout Sections doc. Read on to find out more about what you can do on this page…

Creating New Layouts

At the top of the Layout Builder page are two sections. The first outlines the process of populating the Layout Sections in the Global Layout or creating Conditional Layouts (Hint: you can close this with the X), and on the right hand side is an area, from where you can directly create new Layouts. Just enter a name for your new Layout, and then click on Create New Layout. Using this method simply creates a blank Layout, with no Layout Sections or conditions assigned.

Managing Your Layouts

As you create Layouts, they populate the Layout Builder page. At the top of each Layout, you can rename it, you can click on the cog icon to set conditions for the Layout, and you can delete the Layout by clicking on the Bin Icon. You can also click on the bottom of all Layouts except the Global Layout, to see and assign conditions.

Within each Layout, you can see the four Layout Section that can be assigned to each Layout. When you mouse over each Layout Section, you will see a plus icon which enables you to assign a Layout Section to that area of the Layout. You can either assign an already existing Layout Section here, or you can create a new section as well.

Moving Layouts

When you have multiple Layouts, you can also drag them around to change their position on the page. This is important, as Layouts further down the page take precedence over Layouts higher up. This is because it’s possible for conditions to apply to multiple pages.

For example, let’s say you have a Single Post Page Layout that has the Conditions of All Posts. But then you also have another Layout where just a few posts have been added to the conditions. These posts would be valid for both Layouts, and so in this situation, it would be important for the second Layout to be lower than the All Posts Layout.

Make sure to Save the Layout order with the save button at the bottom of the page.

How to Work With Header Transparency in Avada Layouts

Geoff — Mon, 10 Aug 2020 23:48:28 +0000

When creating Headers in Avada Layouts, one thing that might not appear obvious is how to make the Header transparent (or semi-transparent). It’s actually quite simple. Keep reading below to look at a few scenarios using the Online Tutor Prebuilt Website, and how to achieve them, and watch the video for a visual overview.

For privacy reasons YouTube needs your permission to be loaded.

Fully Transparent Header Container

In this scenario, we’re going to recreate the Header of the Online Tutor Prebuilt Website in Avada Layouts. As you can see below, the site header has two containers; the orange top bar, with contact information and social links, and the second container with the logo and the menu. It is this second container we want to be transparent, so that the background image of the top page content container moves up underneath the header.

OK, so I’ve started by creating the Header Layout Section. As you can see in the back-end builder view, there are two containers, with two Elements in each.

Step 1. In your Header Layouts Section, set the transparency of the second Header Layout Section Container to full transparency, by setting the alpha channel to zero in the Background > Color > Container Background Color option, as seen below.

Step 2. Go to the Extras tab of the second Header Layout Section Container, and turn the Position Absolute option to On, as seen below. That’s it. As the top Container in the page content has a background image, then this content will slide in under the now transparent header.

OK, here’s our site with the new Header Layout Section activated. Identical to the original site.

Transparent Sticky Header

You can also enable any level of transparency for sticky headers, either independently, or in conjunction with the above initial Header.

Step 1. In the Extras tab of the second Header Layout Section Container, set the Position Sticky option to On. Two options under this, you will see the Sticky Container Background Color option. Set this to be transparent (or semi-transparent). In our case we will make it White, at 90% – rgba(255,255,255,0.9). That’s it. Remember to save the Header Layout Section.

On the front end, as you scroll, the top bar disappears, but the second header container becomes sticky, and semi-transparent, with the content sliding in behind it as you scroll.

Semi Transparent Header With Gradient

You might also want something a bit more complex. You can also apply any level of transparency to your Header Container Background, or as in the example here, set a gradient background with varying levels of opacity.

Step 1. To start, set the Header Container Background to Gradient. In the example below, the top gradient has been set to white at 94% opacity, and the bottom gradient has been set to fully transparent, as seen below.
Step 2. Again, in the Extras tab, the Position Absolute option has been turned to On.

As a result, the second container in the header has an almost solid white at the top of the header, quickly graduating to fully transparent. You can adjust where the opacity starts and ends, and how smoothly it graduates, with the Gradient Start and End Position.

OK, that’s it. There are many ways you can use transparency in your Header Layouts, but this should give you the tools to achieve pretty much any header effect you are thinking of.

How To Add A Logo Into Your Header Layout

Geoff — Thu, 23 Jul 2020 00:52:51 +0000

With Avada Layouts, you can create custom Headers for your site using the full power of Avada Builder. One of the most commonly used Elements in a header is the Menu Element. But if you’re looking for a Logo Element, you won’t find one.

Because a logo is essentially just an image, and also because you would typically only use a Logo Element once to add it to a Header Layout, it was decided that the existing Image Element was more than good enough for the job. This document looks at exactly how to use the Image Element to add a logo to a Header Layout, using a variety of image formats directly in the header, or dynamic options, pulling the logo from Global options. Read on to find out all you need to know about logos in Header Layouts, and watch the video for a visual overview of the available methods.

For privacy reasons YouTube needs your permission to be loaded.

Adding The Logo As An Image

Once you add the Image Element to your Header Layout, have a look at the very first Element option – Image. As we have established, a logo is essentially just an image, and so you can just add the logo as an image from the Media Library, using the Upload Image button on the first option.

Typically, you add your logo in the size you want it to display. So if you wanted your logo to be 300px wide, you could just resize it to that before uploading, and then add it as an image via the Element. But as seen below, you could also upload a Retina sized logo (eg. 600px) and use the Image Max Width option, directly below the Image option, to set a size half of the retina version (300px), thereby setting a Retina ready logo site wide.

As long as other logos were not set in the global options, this logo would be used for all responsive views, as well as a sticky header, if that was enabled.

Adding The Logo As An SVG File

Adding an SVG file as your logo has numerous benefits. The primary one of course is that an svg file resizes dynamically, and as such, you can use one file for all circumstances. They are also small files, which is another smll benefit.

To use SVG images on your website, make sure the SVG Media Upload option, found under Performance in the Global Options, is enabled.

If you add your SVG logo during the Avada Setup Wizard, this will automatically allow for the upload of an SVG file.

Adding The Logo Dynamically

Alternatively, you can add the logo dynamically, which will pull the logo(s) uploaded through the Global Options. This can be advantageous in more complex headers, with the need for various logos and sizes, but there will be a small price to pay on page load. To get started with this method of adding your logo to a header layout, click the data icon next to the Option title, as seen directly below.

This will replace the Upload image button with a Select Dynamic Content dropdown. To see the full options for the Logo data type, click on Logo from the dropdown list.

This brings you to this screen, where you can choose exactly what data you’d like to pull into the Element.

You can choose from Default (Normal), Default (Retina), Sticky (Normal), Sticky (Retina), Mobile (Normal), Mobile (Retina), or All. What to choose here will depend on your Layout, and what you are trying to achieve.

Default (Normal) – This will pull the Default logo added to the Global Options. It will display at its original size throughout the site, including on sticky headers and on all responsive views.
Default (Retina) – This is the same as default, but pulls the Retina version. Using this with a combination of the Max Width option is an easy way to have a Retina Ready logo sitewide.
Sticky (Normal) – You’d probably only select this one if you were building multiple header layouts and using Visibility options to show a specific Sticky Logo. In most cases, it would be easier to just set the Data set to All, and upload a Sticky Logo there.
Sticky (Retina) – As above.
Mobile (Normal) – You might use this if you wanted to build a specific mobile header, and having it only show on mobile layouts.
Mobile (Retina) – As above.
All – This is a great option if you have uploaded multiple versions of the logo through the global options. It will pull the most relevant one in the situation; ie. it will pull the mobile logo when the mobile header is active, and the Sticky logo when a sticky header is active etc. To use All, you don’t have to upload all versions of the logo through the global options. This will just pull the ones that have been added.

So, as you can see, the Image Element is now a powerful tool to help set your logo throughout the theme when using a custom layout.

If you have just one header layout, the best option is either uploading a logo as an image (either normal or retina version as described above) or adding the image via dynamic content, using the ‘All’ dataset, and adding your desired logos in the global options.

If you have multiple headers in your layout, using visibility options to control when they are shown, then the single data set options will be the ones you want, to show the various versions of the logo when the visibility optioins kick in.

How To Set Up Different Headers / Logos For Mobile (And/Or Sticky)

Geoff — Wed, 22 Jul 2020 20:05:17 +0000

The incredible flexibility of the Header Builder means that not only can you design and create fully customized headers for your site, you can have also have special Mobile, or Sticky Headers that behave exactly as you want. Read on to explore a variety of situations with the Header Builder and small screen (mobile) and/or Sticky Layouts.

How To Set Up A Mobile Header

If you want a Header that just reverts to a Mobile Menu (Hamburger Menu) when the site is viewed on a small screen, then you only need to change one very simple setting. This is found in the Menu Element, in the Mobile tab. It is the Collapse to Mobile Breakpoint option. This is, of course, the breakpoint at which your navigation will collapse to mobile mode. There are five options – Never, Small Screen, Medium Screen, Large Screen, and Custom.

For a typical Mobile only menu, just set the Collapse to Mobile Breakpoint option to Small Screen. If you wish, you can customize the pixel value of that breakpoint in the Global Options, under Avada > Global Options > Responsive > Element Responsive Breakpoints, as you can see in the image below. You also have full control over what icons are used with the Mobile Menu with the Mobile Menu Trigger Expand Icon and Mobile Menu Trigger Collapse Icon options, which you will find on the Mobile tab of the Menu Element.

Logo Options In The Image Element

If you want to create a specific Mobile Only Container in your Header Layout, by using the Container Visibility options, there is also a useful option in the Image Element. This allows you to only pull a Mobile Logo into the Element via the Dynamic Source option. To do this, click on the Dynamic Data icon (next to the Element title), select Logo as the Dynamic Content, and then you can choose from Mobile (Normal) or Mobile (Retina). If selecting Retina, you can then also use the Image Max Width Option below to set the logo to half of its full size, thereby creating a Retina Ready Logo.

Icon Only Menu Visible On All Devices

You might also want to create a Mobile menu that’s visible on all devices. This is also easy to do with the combined forces of the Menu Element and the menu itself.

The first step is to add a Custom Home Link (#) as the top level menu item in your menu, and make all desired submenu pages as children of that top level item, as seen below. In this example, I have also added two more Icon Only menu items below the submenu items, both from the Avada Special Menu Items – a Search icon, and a WooCommerce Cart Icon.

It’s also important to change the top level menu item to Icon Only through the Avada Menu Options. Here, you can set the icon to a Hamburger menu, or whatever you prefer.

Then the Menu Element takes over. Here you select your Menu, and then you can customize it as you wish. You can control the Icon size, the item spacing and styling, the submenu mode, and many other things.

Here you can see an example of this method, using the Avada Food website. In this example, I set the Submenu Mode to Dropdown, and set the Space Between Main Menu and Submenu to be 50px.

This menu then looks the same at all screen sizes, from Desktop, through tablet to mobile.

Element Visibility / Element Sticky Visibility Options

Another couple of very helpful tools when designing Mobile and Sticky Header Layouts, are the Element Visibility Options, and the new Element Sticky Visibility Options. The Element Viability Options are found on all Elements and can be used, for example, to hide a Container until the Screen size is Small. In this way, you can easily have individual Containers for various screen sizes.

The new Element Sticky Visibility options are found on Columns and a selected range of other Elements, and can be used to hide Elements in certain states. For example, you can add Elements into a Column, which is then visible only when the Container is in Sticky mode. For more information on these two, very useful helper options, please see the Avada’s Visibility System and the How To Work With Sticky Containers docs.

How The Menu Element And Menu Work Together

Geoff — Tue, 07 Jul 2020 03:07:57 +0000

The Menu Element allows you to display and customize an existing Menu, and can be used anywhere in your content. But it will most typically be used in Custom Header Layouts. See the Menu Element documentation for a full rundown of the element and all of its many options, but in this document, we are going to explore how it works in concert with the actual WordPress menu, and review some common situations using the Menu Element.

Creating Your Menu In WordPress

The first step, before using the Menu Element, is to have an existing menu. Menus are core WordPress business, and are created under Appearance > Menus, from the WordPress dashboard. See our Setting Up A Menu doc, or the WordPress Menu User Guide on the WordPress Codex for detailed information on this step.

The Menu Element then controls how the menu displays, but there also some options to be aware of in the Menu itself, that affect the menu’s appearance.

Where The Menu Element Stops And The Menu Starts

When creating your menu in WordPress, there are several options with the menu and the menu items that will affect how the menu will display on the page, whether assigned via the WordPress Menu Options, or displayed using the Menu Element.

Please review the Menu Settings doc for a full rundown of what you can configure while building a menu, but these primarily include the Avada Menu Options, found in every menu item, and the Avada Special Menu Items, found at the bottom left of the menu area.

For example, with the Avada Menu Options, you can style a menu item as a button, add an icon or show the menu item only as an icon, add a Menu Highlight Label, or enable a Mega Menu on the item. All of these options would affect how the menu displayed when using the Menu Element, and as such, the styling for such aspects of the menu items would come from the Menu itself, and not the Menu Element.

And with the Avada Special Menu Items, this is where you would add things like WooCommerce iconized menus, Search bars and Sliding Bar Toggles, if wanting to use a menu with the Menu Element.

How To Add Avada’s Special Menu Items

To see details of each specific Special Menu Item, head to the Avada Special Menu Items doc. When assigning Menus via WordPress, these options are added via the Global Options, but when using the Menu Element, these special items need to be added to the menu itself for them to appear. These are the WooCommerce Cart, the WooCommerce My Account, Search functionality, and the Sliding Bar Toggle.

Each of these Special Items has their own Avada Menu Options panel, and can be added to menus by themselves or with other menu items.

How To Set Up A Click Mode Menu In The Best Way Using The Menu Element

Geoff — Mon, 06 Jul 2020 23:05:07 +0000

We are used to menus that open upon hover. But this is not necessarily the best method, either for navigation, or accessibility. With the Menu Element however, you can create menus that open their submenus only on click. This is done simply by choosing Click as the Expand Method in the Menu > Submenu options, as seen below in the image. But there a few things to be aware of when doing this. Read on…

One is the use of carets. If Click Mode is activated, and Dropdown Carets are enabled, then it is the Carets themselves that need to be clicked to activate the submenu, not the menu item.

This is related to the second issue; the top level menu items. These can be normal page or post links etc, but in this case, clicking on them would redirect the page to the link, and not open the submenu.

So, to avoid these issues when creating a Click Mode Menu, it is best to use custom links set to # as the top level menu item, when a submenu exists, so that if a user clicks on the actual menu item, the submenu will open.