The Image Element: In this video, we are looking at How To Use The Image Element To Add A Logo Into A Header Layout.
Purchase your next copy of Avada – http://bit.ly/2TSPV9y
Avada Documentation – http://bit.ly/2TyzQof
Useful Links: Avada Layouts – https://bit.ly/32KRRYf
Avada Quick Start Guide – http://bit.ly/2DHIgql
Avada Builder Documentation – http://bit.ly/2wLS24S
Need support? – http://bit.ly/2njyfVo
How To Use The Image Element To Add A Logo Into A Header Layout – Transcribed
Hi everyone, in this video we’re looking at how to use the image element to add a logo into a header layer.
When using about a layout and creating a header layout section, you might wonder how to add a logo.
To do this you can use the image element.
You can add an image as usual or you can use dynamic content options to add logos already added to the global options. Let’s see how this works.
I have a header layout section here on the Avada Landscaper website and I’m ready to add my logo to this column.
I’ll just add the image element as usual.
And now I need to add my logo. I can send a static image if I want. For example, I could add the retina version of this logo here. Now that looks fine in this instance, but I’ve added it to a 1/4 column so it’s not showing in its native size.
So, what I could do here and in other situations is to add a value to the image Max width. Here at half the retina sized logo, which would be 323 pixels. This would make the logo display nice and crisp.
But as this is a custom header layer, this single logo would then be used on all instances of the header, so both on medium screen layouts and small screen layouts as well.
This is not necessarily ideal and there are better options.
So, let’s delete that image and start again.
This time I’m going to add the logo via the dynamic content option.
So instead of adding an image from the media library, I’ll click on the dynamic content icon at the top here and choose site logo.
This dynamically pulls the logo or logos added to the global options depending on our choices here.
As you can see, there are seven choices.
We can pull all logos, or we can pull a specific one. So, in this way we could do the same thing as we did before and choose the default retina logo and set the image Max width.
Or if we were adding a specific sticky container or a container only for small screen view in our layer, we could add either the sticky or sticky retina or the mobile or mobile retina logo.
So, what you will add here will depend on how you are building your header layout section.
In this case I’m using just one container for all screen views. It is a sticky container and I’ve set the menu to display as a mobile menu on medium and small screen views.
So, he is the best choice for me is all.
What this does is choose the appropriate logo from the global options. Depending on the situation.
OK, so at this point let’s go and see what logos have been uploaded in this website.
I’ll just head to the global options panel.
And as I Scroll down, we can see there are four of the six logos uploaded with no sticky logos added.
So, what that means for our layout and our choice of all for the logo is that when the site is viewed on large screens, the default logos will be used.
And when using the mobile menu, the mobile logos will be used.
And when the header is in sticky mode, as there are no specific sticky logos uploaded, it will continue to use the default logo.
So here I could do one of two things I could go and upload some sticky logos at a specific size to the global options. Or Alternatively I can just use the image sticky Max width option.
So here I will just set that to 200 pixels and now when I scroll we can see the logo resizes when the container becomes sticky.
There’s also a relevant option, a bit further down.
As we know, it’s a convention that the logo links to the homepage. So, with the picture link URL we can again add some dynamic content and this time choose site URL.
So that way our logo will now always link to the homepage.
You can of course use any other of the image element options on your logo in your header as well.
So, depending on how you are building your header layer, there are various options, both static and dynamic, that you can use to display your logo on your website using the image element.
OK, this concludes our video on how to use the image element to add a logo into a header layer.