Setup your site title or logo

Setting up the site title with tagline is generally easy as these two items are already done by default when you perform a clean installation of this theme. However, when it comes to adding a logo, you will need to venture into the Customizer to perform this task. Currently, you have the following options available:

  1. Site Title with Tagline (site description)
  2. Logo
  3. Logo with Site Title
  4. Logo with Site Title and Tagline

How you decide is going to be up to you, but I would recommend when using a logo, try not to make it too large.

Change the Site Title and Tagline

  1. Go to Appearance >> Customize >> Site Identity
  2. In the “Site Title” field, change this to your own
  3. In the “Tagline” field, change this to your own
  4. Click “Save & Publish“
  5. This is what the above will look like:

Add a Logo

For this tutorial, we will use the logo I have in the live demo for this theme as an example. When you upload your own logo, make sure it’s not too big, optimized, and either a jpg or png file format for best results. This is the result we will get once uploaded and configured the settings to disable the site title and the tagline:

  1. Go to Appearance >> Customize >> Site Identity
  2. Look for the Site Logo setting and click on the “Select Image” button to upload your logo:
  3. Once done, choose whether to include the “Site Title” and/or the “Tagline” with it by checking the boxes to to show, or unchecking to disable either one:
  4. If you are happy, click on the “Save & Publish” button at the top of the customizer.

Adjusting your Logo Spacing

Emotions gives you the ability to adjust the margins (surrounding space) of your logo if you need more. By default, it’s zero (0) pixels at the top, right, bottom, and left (in that order). Make sure when you customize the margins, that you use px as the value. Example:

10px 0 10px 0

The above represents 10px at the top, 0 on the right, 10px on the bottom, and then 0 on the left. If you have the same dimension on all sides, then you just need to enter in a single pixel value like:

10px

A single dimension respresents all 4 sides equally. So 10px is like saying 10px 10px 10px 10px.

Change Your Spacing

  1. Go to Appearance >> Customize >> Site Identity
  2. Look for the “Logo Spacing” setting and make your changes. You can see your results in the preview window in the customizer.
  3. Click “Save & Publish“