If you’re looking for further Elementor instructions and tutorials feel free to browse the lessons either above or below on this page or get in touch using one of the contact buttons.
Adding a Logo To Your Page
- Adding Logos To Page
- Resizing Logos
- Adding For Clients or Testimonials
- Changing Your Sitewide Logo
Let’s say you want to add your logo to an Elementor page, it could be in the header of the page or perhaps halfway down underneath some written content. The fastest way to do this is going to be to add your logo as an image element. Once this is added in you’ll be able to change the size of your logo and rearrange as needed.
1. Adding Logo As an Image
First, let’s select an image block from the elementor list of ‘elements.’ If you’re not sure what this is, I might recommend starting with a free elementor lesson as it would be best to start with a basic foundation.
Once you’ve added in your image element onto the page and location of your choice (it can always be changed later) you’ll see just a grey block like this.
If you hover over this newly inserted image element, you’ll notice a blue pencil icon (circled in red in the screenshot here). Click on this pencil icon or feel free to just click on the greyed out image element – either way will pop up the settings shown in the next section.
2. Choose Your Logo and Upload
If you’re not already familiar with the ‘media library’ section of your WordPress site, don’t worry!
From here, click on the ‘choose image’ grey photo that appears along the left hand column settings (screenshot attached). A new window will open and you’ll be able to either upload your logo or navigate to the image files that you’ve already uploaded to your computer.
The new popup will say Insert Media, the options then are upload files or media library. Navigate to your logo (either from your computer files or within the media library).
Lastly, click the ‘insert media’ button at the bottom left of your screen, once navigating to the logo. of choice.
Resize Logo In Elementor
Now, what if you’ve inserted your logo to the page or section within Elementor but it’s just too large? Easy fix. Let’s resize it and align it to be with the rest of your content.
1. Click on The Image Element (Logo)
Start by clicking on the logo (image element) that you’ve created from the previous section above.
This will show the settings for the image element to the left.
By default, the image element, and most other Elementor elements (text boxes, headings, forms, etc.) will start with the content section by default. You might have noticed that there are different tabs within each series of settings.
Almost all Elementor tabs will be labeled either content, style or advanced.
Click on the ‘style’ tab (middle tab by default). From here you’ll notice a dropdown with the title ‘width.’ Play with this slider until your image or logo is at the ideal size for your page.
Adding Client Logos To Elementor
What if you want to embed and showcase some past client logos or projects that you’ve created? To do this we’ll use the various column layouts within Elementor and then it’s just a matter of what size you want the logos to display as (see section above).
1. Insert Multiple Columns
To start, we will add in new columns so that each new client logo will have its own dedicated space and we can resize appropriately (we don’t want one logo overpowering the others).
Find the ‘red plus button’ – most likely found at the bottom of your current working section. There are a few ways to add in a new section with columns but we’ll focus on this one for now.
Click on the red + button and a new popup will appear within your working area. This is where you can choose the number of columns. Best practices will state that each logo should have it’s own column (i.e. if you have four logos to showcase, choose the four column layout) – screenshots attached here.
2. Resize Your Testimonial Logos To Fit
Follow the section-steps above to resize your logos or play with the settings to apply shadow, hover over effects and more advanced settings found in the style and advanced tabs.
Changing Your Site Logo
What if you want to change your sitewide logo in Elementor? Here’s how…
1. Click on Top Left Menu Icon
Wherever you are on the page, or even whichever element you are working with, navigate to the top left of your page and click on the hamburger menu (it’s the three stacked bars at the top left).
2. Navigate To 'Site Settings'
After clicking on the top left 3-bar stacked icon, click on site settings from the newly shown list of items. You’ll see it here in the attached screenshot, along with theme builder and user preferences.
Click on ‘site settings’
3. Click on Site Identity
From the new screen that display in the left side of your screen, you’ll see a variety of options. Navigate down the screen until you see ‘site identity.’
Click on ‘identity’
You’ll see a new section appear with only a few options. If you have previously uploaded a logo to your site you’ll most likely see it here. Click on this image and swap it out by either uploading a new image or choosing a different image from the media library (similar to the adding a logo to your page at the top of this post).
