Site Logo

Site Logo

A logo is a symbol made up of text and images that identifies a business. A good logo shows what a company does and what the brand values.

Logo design is all about creating the perfect visual brand mark for a company. Depending on the type a logo usually consists of a symbol or brandmark and a logotype, along with a tagline.

Pro tip
Describe your product, target audience and industry.

How to use the Site Logo Block of The Plus Addons For Gutenberg

The Site Logo block comes with multiple functions. Let’s understand how to use this block in the tutorial below.

Table Of Contents

Setting Up

Gutenberg gives multiple ways to add Site Logo into the content building area or we say playground. Check for the “+” icon in the top toolbar or click the “+” icon in the content area or start typing Site Logo after “/” sign, eg.“/ Site Logo”, in the content area. Gutenberg also provides drag & drop after opening the list of blocks panel.

After placing the block you’ll see three tabs on the right editing panel containing “Layout”, “Style” and “Advanced”. Go and start with the Layout tab.

1. Layout

Site Logo

Logo Normal/Dual

Select your preferred logo from the dropdown. It can be either Normal or Double.

Logo Type

Choose Your logo type from the dropdown. It can be either Image or SVG.

Upload Image

This option appears when you choose an Image in Logo Type.
From here you can upload your logo.

Image Size

This option appears when you choose an Image in Logo Type.
Select image size from slandered size dropdown provided by the plus.

Upload SVG

This option appears when you choose an SVG in Logo Type.
From here you can upload your logo.

Logo Max Width

A maximum horizontal expansion or normal width can be set from here. Height will be set accordingly.

Extra Options

Logo URL Type

Select your preferred URL from the dropdown. You can select Home URL or your Custom URL.


Alignment of the logo into left, center or right direction.

Sticky Logo

Visibility option to display Sticky Logo. Sticky Logo options are the same as the above options.

2. Advanced

Advanced Tab Options are common across all the blocks. So, we have written a detailed tutorial explaining how to use these options.

View The Advanced Tab Tutorial

4. Error 404 (Dynamic CSS)

In this tutorial, we have explained when this option will be needed.

View The Server Error Tutorial

Was this article helpful?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Please submit the reason for your vote so that we can improve the article.