How To Add A Logo Into Your Header Layout

Last Update: May 21, 2024

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.

Custom Header Layout Section
For privacy reasons YouTube needs your permission to be loaded.
I Accept

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.

Image Element > Adding A Logo As An Image

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.

Image Element > Image Option

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.

Image Element > Dynamic Options

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

Image Element > Dynamic Logo Options

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.