Xidipity Blog Brand Logo
February 10, 2022
Branding WordPress

Building and maintaining a brand is a very important investment. Branding efforts can be as simple as a clever name, an engaging logo, or as complex as developing a complete business strategy. Xidipity offers several branding options to ensure your look is everything you want it to be. 

Xidipity WordPress Post 195 Content Image 0

 

What is a brand? Your brand defines who you are and the association can be positive or negative. WordPress is a communication tool and a conduit for branding. Even before visitors read a single word, the title and style of your blog sends a message to those who visit. Xidipity supports four levels of branding.

 

  1. Title & Tagline
  2. Brand Fonts
  3. Colors & Wallpaper
  4. Logos

 

Title & Tagline

 

A configuration you should perform soon after installing your new WordPress site is to enter the site title and tagline. The site title is the name of your site. The tagline is a concise description of the purpose. Site titles should be unique. Why? There are at least three reasons.

 

  1. Legal – the brand may belong to someone else
  2. Technical – domains not available / display issues
  3. Logistics – brand confusion (I thought you were someone else)

 

I always perform a Google search to validate a suggested title. Then I do a domain search for potential registered domains.

 

Trouble shooting display issues is tricky. Xidipity uses the fantasy font family to display the site title. The Google font assigned to this family is ” Dosis ” and the size is “3rem/48px”. We use ” Poppins ” as the font for the tagline with character spacing set to “0.5rem/8px”.

 

The best way to mock up the design is to use a graphical design tool. There are many free ones available; Canva, Google Draw, and PicMonkey, to name a few. Another choice is trial and error. By that, I mean try it and see how it looks. I am using Google Draw and PicMonkey for this purpose.

 

For demonstration, let’s create a blog about blogging titled “The Practical Blogger”. The tagline will be “No nonsense blogging tips”.

 

From the dashboard admin menu ( ​ ​ ), click settings. The general settings page will load and the first input is site title, the second tagline. Enter the above data.

 

The following is a mockup of how that might look.

 

Xidipity WordPress Post 195 Content Image 1

 

I would say this is not the desired result. One option to is to shorten the title and tagline. Let’s see how changing the title to “Practical Blogger” and tagline to “Blogging Tips” looks.

 

Xidipity WordPress Post 195 Content Image 1

 

This is better, but why is the ruler set to 320px? The least common denominator in mobile is the iPhone 5s, and it has a display width of 320 pixels. Should we care about the iPhone 5s? That depends on your target audience, but social media experts estimate 37% of the global iPhone user base uses an iPhone 5S or older. For the sake of argument, we are going to say we care.

 

Style

 

Styling the site title in this scenario means to select a font which has the desired look. Use the ” Config sys parms ” page template and assign a new font to the fantasy font family. It is important to note as of December 2021, the Google Library has 1,321 font families to choose from. What if your brand uses a font not available in the Google font library? You have two choices. Use a similar font or create a logo. For this discussion, I am going to use the Google font ” Dancing Script “.

 

Xidipity WordPress Post 195 Content Image 1

 

Header background / Wallpaper

 

Xidipity supports a header background, which can be an image or CSS. It is important to note you can use the header background with the title tagline and logo option. To implement, use the “Config sys parms” page template.

 

Background Image

 

When you use an image for the background, we center and then scale it to the available space. It is best not to use an image which includes details that are location sensitive, as the position will change among devices. Be careful the background does not take away from the focus of the site title tagline or logo.

 

Steps

 

  1. create 2560x500px png / jpeg image
  2. upload to WordPress media library
  3. copy image URL to clipboard
  4. open “Config sys parms” page template
  5. paste URL into wallpaper input
  6. save changes

 

Xidipity WordPress Post 195 Content Image 2

 

​Click image to zoom.

 

Solid Color

 

If the desire is to paint the background with a solid color, you can accomplish this with an image or CSS attribute.

 

Color:  ​ square

 

Attribute:

background-color: #f9b4a3;

 

Xidipity WordPress Post 195 Content Image 5

 

​Click image to zoom.

 

Gradient

 

Another choice is to paint the background with a gradient. Although you can accomplish this by creating a gradient image, CSS will also work. The nice thing about this approach is there are many online sites available to assist with the effort.

 

Attribute:

background: rgb(249,180,163);
background: linear-gradient(0deg, rgba(249,180,163,1) 0%, rgba(250,249,248,1) 100%);

 

Xidipity WordPress Post 195 Content Image 6

 

​Click image to zoom.

 

Logo

 

The advanced, and most times the best, solution to branding is to create a logo. You can reference the image as a URL, or image tag. In either case, the image will suppress the display of the site title and tagline. Updating the system logo parameter by using the “Config sys parms” page template. Make the graphic image background transparent to blend with the header background.

 

Xidipity WordPress Post 195 Content Image 6

 

​Click image to zoom.

 

Hyper link URL

 

The hyper link must be a fully qualified URL. The location can be your media library or another site like a CDN. I recommend testing the URL to ensure the image will load. The image can be any dimension; but as a reference, we recommend a size that looks good on a desktop or laptop and then test it for fit on other devices. There are several sites which will display your page as it would look on a wide assortment of devices. 

 

https://blog/wp-content/uploads/2022/02/image_503x103.png

 

Image tag

 

This is where it gets really exciting.

 

Tag Template

<img
    src=" URL "
    alt=" Description "
    width=" pixels "
    height=" pixels "
    class=" attributes "
    style=" attributes "
/>

 

src

A fully qualified URL. The same rules apply as the hyper link option.

 

alt

Image description. Important for SEO.

 

width

Optional image width in pixels.

 

height

Optional image height in pixels.

 

class

Optional class attributes from wpX.

 

style

Optional inline style attributes.

 

This is my preferred method of implementing a logo as a larger image produces the best result. In this scenario, I used an image sized to 1007×205 pixels, and added the following classes to manage the size across different devices.

 

pad:vrt+1

Add 1 rem of padding to the top and bottom

 

wd:75%

Set the width to 75% of 1007 pixels on mobile

 

sm)wd:50%

Set the width to 35% of 1007 pixels on small tablets – regular desktops

 

xl)wd:60%

Set the width to 60% of 1007 pixels on large screen desktops

 

Here is the result.

 

<img
  class="pad:vrt+1 wd:75% sm)wd:50% xl)wd:60%"
  src="http://server/image_1007x205.png"
  alt="Practical Blogger Site Brand Logo"
  width="1007"
  height="205"
/>

 

Wrap Up

 

Xidipity WordPress Post 195 Content Image 9

 

​Click image to zoom.

 

One item missing from this conversation is site title and tagline font color. Although configurable, you make those updates using the WordPress theme editor. The file to edit is theme-var.css beginning at line 158.

 

question_answer

Comment / Discuss

 

August 9, 2022