Back to contents

How to display a website logo in the header built with Elementor

Find out how to add a website logo with the help of JetBlocks plugin. Enrich the header with a Site Logo widget for introducing your brand.

The website logo is an important part of your company’s brand. It describes the face of your company and makes a great impact on a public as well. Present your company’s logo in the header using JetBlocks Site Logo widget.

Let’s know how to add a website logo in the header built with Elementor.

Creating your own website logo

Step 1 – Go to Elementor editor and add the Site Logo widget to a certain section in a drag and drop way.

site-logo-widget

Step 2 – Now you can see the widget’s settings leftward.There are 3 tabs: Content, Style and Advanced, where you are able to set varied adjustments.

Step 3 – In the Content tab there are 2 sections, such as Content and Settings. In the Content section you should select an appropriate logo type (Text, Image or Both Text and Image).

  • If you choose the Text logo type, it is possible to use a site name or paste a custom one.
  • text-logo-type
  • In case you select the Image logo type, you need to add a logo image and a retina logo image.
  • image-logo-type
  • The one more option, Both Text and Image logo type, allows to display a logo image and a logo text.
  • both-text-and-image-logo-type

Step 4 – The Settings section includes such options, where you can enable linking a logo, removing a link on the front page. Also, you need to determine the order of a logo image and a logo text in case you chose the Both Text and Image logo type.

Step 5 – In the Style tab you can specify your logo alignment on different devices. Moreover, in the Text section you have an opportunity to pick color and apply typography settings to the text.

Step 6 – The Advanced tab presents different settings, where you can adjust margin, padding, background, etc. of the Site Logo widget.

advanced-settings-of-site-logo-widget

Step 7 – When everything is done, click the Update button at the bottom and view the result on the frontend.

logo-sample

That’s all you have to do to add a website logo in the header built with Elementor.