You are here: Blog » Tutorials » How to use a company logo as a text divider

How to use a company logo as a text divider

If you are looking at using your company logo, or any image for that matter, in a divider, this walk-through will show you how.  Note that you will have to be using the Visual Artist add-on for Spacer in order to follow along with this tutorial.

Before we dive in to the guide, here is a look at what we are working towards…

bna

 

Step 1. Locate company logo image

s1

In my example, this is the logo image that I used to start off with. For the purpose of this tutorial, you can consider me Allie Spencer – Photographer Extraordinaire

Step 2. Decorate the image to your desired look

s2

Using photoshop or your photo editor of choice, edit the image to so that it looks nice as a divider. You could also skip this step if you don’t want to make any changes. In my case, I added a divider line around the logo at a slight slant.

Step 3. Set up the divider using Visual Artist

s3

In your WordPress admin, go to Settings > Spacer > Add Spacers (top tab) > New Spacer. I named mine “Allie Spencer” and gave it a height of 87 pixels because I thought that looked nice, but you can play around with the height to see what works best for you.

I expanded the Visual Artist section and uploaded the image created in Step 2. Then I set the Image Position field to Proportional Stretch. This allows the divider to be centered and the divider image to scale to the full height of the Spacer.

I set the bottom margin to 27 and finally I entered margin-top:-11px; to the Style field because I wanted the divider to get nudged upwards a little.

Step 4. Add it to posts/pages

s4

While writing my post, I added the divider where it was appropriate to break up the text. I did this by clicking the Spacer icon and then selecting the “Allie Spencer” option (remember this is the name we gave it in step 3).

Step 5. Admire your work!

bna

After getting everything up and running, you deserve a big pat on the back for your efforts. Your site is now organized and looking great. Good for you!

Thanks for taking the time to follow this tutorial. Hope you find it helpful. Please let me know if you have any questions or other feedback in the comments.

The step headers (Step 1, Step 2, etc...) and dividers on this post were proudly made with Visual Artist
This entry was posted in Tutorials and tagged by .

Author: justin saad

Justin Saad is first and foremost a husband and a father of four. He is also a web developer and designer who has been making websites for over twenty years. His company is called The Motech Network and his website is ClevelandWebDeveloper.com. In addition to building websites, Justin makes WordPress plugins and likes writing tutorials to help others learn about various aspects of web development.

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">