Inserting your website title or church logo is an important part of building your website, as it will be seen on all pages and will show site visitors the name and logo of your church. This tutorial shows you how to edit your logo and insert it into your website.

If you don’t have a logo, simply leave the logo link box blank (under SF Theme Options in your Church Website admin). Your Site Title will display as text in the header of your site. To change your Site Title, go Settings > General > type the name of your ministry in the Site Title field > click Save Changes.

Important: Your logo size should be 500px wide by 100px high and saved as a transparent PNG so that it will fit within the allowed logo size.

You may use any photo editing software to prepare or create your church logo. For this tutorial we will use a free online program called Pixlr.

In this tutorial we will work on a transparent PNG background. That way your logo will overlay perfectly on the website background. If you don’t use a transparent background, you will end up with an ugly-looking block that will ruin the professionalism of your site. If you follow our instructions carefully, you will end up with one amazing-looking logo and church website!

Prepare to Create Your Logo

  1. Go to http://pixlr.com/editor/.
  2. In the pop-up window click on Create A New Image:
  3. A new small window will pop-up:

    –Create a name for the image/file
    –Disregard the Presets option
    –Click in the Width box and type 500
    –Click in the height box and type 100
    –Select Transparent
    –Click OK
  4. Your new document will look like the one below with checkered white & gray boxes (signifying the document has a transparent background):

Import Your Logo/Icon

  1. Import your current church logo by clicking File from on the black menu (NOT YOUR BROWSER!).
  2. Click on Open Image from the drop down menu.
  3. Select your image from your computer. (Remember, don’t use a large photo. This should be the icon or logo your church already uses.):
  4. Activate the logo window (by clicking on it) and then select Edit from the top black menu and choose Select All:
  5. Again, click on Edit from the black menu and click on Copy.
  6. Activate THE new blank logo window select Edit from the black top menu and choose Paste.
  7. The logo is now inside your new logo window.
  8. If your logo has a white background around it, select the logo and click on the Magic Wand tool in the Tools palette.
  9. Click with the Magic Wand tool on the white space around the logo. It will selected it and you will see flashing striped lines. Press Delete on your keyboard. This will now erase the white background and you will end up with just the logo icon.

Add Text to the Logo

Next, we can add text, like the name of your church or ministry, to the right of the logo.

  1. Click on the letter “A” on the left side toolbar (2nd from the bottom right).
  2. Position your mouse cursor right next to the logo icon and click. Start typing the name of your church or ministry:
  3. You can change the font, size, and color of the text. Once done, move the text where you want it by clicking on the black “arrow” on the left side toolbar and then click again on your text.
  4. Choose a text color that contrasts the website background design. We highly recommend you use white all the time, unless the background is a very light color.
  5. When you are done and ready to save, simply change your font color to white (it will be hard to read, on the checkered boxes inside your logo box, but will appear fine on your actual website.
  6. To change the color, click on the “A” tool in the left toolbar, then select the text and then click on Color. Select your color by dragging the circles to your desired choice. In this example we used the recommended white. When done, click OK:
  7. Save your file by clicking on File from the black menu, and then selecting Save…
  8. Type in the name of the logo in the window that pops up.
  9. Under Format, select PNG (Transparent, full quality).
  10. Then click OK and choose the location where you want to save the file.

Upload Your Logo to the Website

  1. Log in to your website control panel.
  2. In your left menu bar click on Media > Media Libary > Add New:
  3. Click the Select Files button:
  4. Find the logo file you just created and click Open:
  5. Once uploaded copy the File URL:
  6. Click the Save All Changes button:
  7. On the left menu click on Appearance > SF Theme Options.
  8. Find the Church Logo Location field and paste your URL (link) you just copied:
  9. Scroll to the bottom and click the Save Changes button.
  10. Preview your website. You should now see your new logo: