With the addition of the Header Layout to the Avada Layouts, you can now create custom Headers using the full power of Avada Builder. To assist with the creation of headers, the new Menu Element was added in Avada 7.0. 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. Read on to discover more, or watch the video for a visual overview.
Adding The Logo As An ImageOnce 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 DynamicallyAlternatively, 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 Theme 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 theme 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 theme 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 theme 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.