Working with your Site Title, Logo and Tagline in Crio | BoldGrid Crio
Last updated on

When working with BoldGrid Crio, our WordPress theme for business, the options used to edit the Site Title, Tagline, Logo, and Icon (Favicon) are found in the WordPress Customizer.

Before starting, you will need to create a header design that includes each desired element. Be sure to check each one you want to show, even if nothing immediately shows in the Live Preview. You will add the content next.

Changing Your Site Title

This is the main title for your website, and generally it’s the company name. On the homepage this will be your Heading 1 element, which is important for SEO.

  • In the Dashboard navigate to AppearanceCustomize
  • In the Customizer menu navigate to Design → Header → Site Title

In this section, you have the ability to change the Site Title color, font family, font weight variant if available, font size, and more. If you want to use a different color than what is shown, you will need to change your color palette.

Update WordPress Site Title and Tagline

Changing Your Tagline

A Tagline is often also known as the “call to action” within WordPress themes. It’s typically the second line of text after the Site Title. The Tagline is always a Heading 3 element.

  • In the Dashboard navigate to AppearanceCustomize
  • In the Customizer menu navigate to Design → Header→ Tagline

The same options available for the Site Title are available here – you have the ability to change the color, fonts, and more. If you wish to remove the Tagline, you can select the text and delete it. It is not required for your website. Remember, if you have entered a Tagline but do not see it in the live preview, you will need to add it to your header layout.

Changing Your Site Logo

The site Logo can appear in your header or footer design. The suggested image dimensions are 400 by 100 pixels, and you can crop the image when selected if needed.

  • In the Customizer menu navigate to Design → Header→ Logo & Icon

Update WordPress Site Logo and Icon

Changing Your Site Icon / Favicon

Your site Icon, or Favicon, is what you see in browser tabs, bookmark bars, and within the WordPress mobile apps. The aspect ratio should be 1:1, and at least 512 x 512 pixels to ensure it is clear on high definition devices.

  • In the Dashboard navigate to AppearanceCustomize
  • In the Customizer menu navigate to Design → Header → Logo & Icon

Congratulations! You now know how to edit your Site Title, Tagline, Logo, and Icon (Favicon). Next, you may want to change the header background.

 

 

SIGNUP FOR

BOLDGRID CENTRAL  

   200+ Design Templates + 1 Kick-ass SuperTheme
   6 WordPress Plugins + 2 Essential Services

Everything you need to build and manage WordPress websites in one Central place.

10 thoughts on “Working with Your Site Title, Logo and Tagline in BoldGrid Crio

  1. Hi. I uploaded and inserted a logo image but in the page does not show the logo, it just shows the Site Title. Is there a way to fix this?

    • Hi Fran-
      It’s possible that you might not have the logo option checked in your site branding section. Navigate to Customize > Design > Header > Layout and check your branding section for the Logo checkbox:
      Enable Logo display in Crio

  2. Hello, I am using the Crio theme. I have 2 menus in my header – social, then primary underneath. When I insert my logo (size 200 x 100 pixels) it pushes down the primary menu leaving a gap between the two menus, which I do not want. Is there a way to fix this?

    • Hi Dale-
      You can fix this with a little bit of custom CSS. Navigate to Customize > CSS/JS Editor and paste the following code into the CSS Code field:

      @media only screen and (min-width : 992px) { 
      	#social-wrap { margin-top: -50px; }
      }
      @media only screen and (max-width : 767px) {
      	#social-wrap { margin-top: -50px; }
      }

      I tested this out with a logo 200×100 pixels, if you change the height of your image you may need to adjust the -50px value.

      • Thank you Jesse! I inserted the code and the social menu is pushed up to the top of the screen in line with the logo, which is great. But the primary menu is still placed below the level of the logo. What code could I use to position the primary menu more specifically in line with the logo, underneath the social menu.

  3. Hello,
    My logo is sized at the full width of the header and there seems to be no way to reduce the logo size. Can you please advise? There is a slider bar to choose the logo size in the regular BoldGrid program. This should be implemented into Crio.

    Also, I would like my header to look like this all on the same line:
    Primary Menu – Logo – Social Menu

    How do I move the elements so that they appear in this order?

    • Hello Megan,
      Thank you for this idea. I think the ability to resize the logo was a very useful feature in older BoldGrid Themes, so I created a feature request for our developers to include this in a future update.

      In the meantime, you can scale down the size of your logo in your WordPress Media Library. Navigate to Media -> Library, locate your logo, and click on the Edit Image button below the image. From there, you’ll see the Scale Image section to the right side of the screen.
      The Scale Image menu in the WordPress Media Library

      In order to arrange your header with three columns, you can accomplish this by adding your Primary Menu, Site Branding, and Social Menu widgets as seen in this screenshot. Note the location of the Full Width option:
      Three Column Full-Width Header

  4. Hi. I’m using the Resolve theme. I deleted my Site Title and put in a logo image. The problem is there is a “white bar” still on the screen near my logo. Is there a way to delete or remove this white bar, which was just above the site title?
    Thanks, eager to move forward.

    • Hi Roberto-
      The white line above your site title or logo can be removed using your Customize -> Advanced -> Custom JS & CSS in a couple of different ways. If you want to get rid of the line, along with the space that it provides, you can use this CSS rule:
      .line-lg { display: none; }
      If you only want to get rid of the line, but keep the space, you can use this:
      .line-lg { border: none !important; }

Leave a Reply

Your email address will not be published. Required fields are marked *