Elementor Tutorial

How To Add a Logo To Elementor

Whether it is your company logo or a series of logos for a testimonial section, adding them to Elementor is quite easy.

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

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.

add logo to elementor page

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.

add logo to wordpress elementor

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. 

resize logo in elementor

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.

showcasing client logos elementor
testimonial logos in elementor

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). 


change logo in elementor

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’

 

elementor logo 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).

site identity logo elementor

Stuck With Elementor?

Get tailored help to your website and don’t waste money on agencies. Learn to build and manage your own site.

Get In Touch

Questions and Conversations

Submit Your Project Info

Questions, comments or feedback on anything you’ve seen here. I’ll get back to you as soon as possible.