Completely Free Course

Connect with Facebook

or

Forgot my password

Reset Your Password

Enter your email address below. We'll look for your account and send you a password reset email.

Don't Have An Account? Sign Up Free

Completely Free Course

Connect with Facebook

or

By signing up to create an account I accept LaunchParty’s Terms of Use and Privacy Policy.

Already Registered? Log In Here

Module 2: Designing Your Website

How To Design Your Own Website Logo

Action Plan

Step 1: Create Your Logo Using The Free Logo Creator Ucraft


Visit Ucraft

Ucraft is our favorite free logo creator. This easy-to-use online tool makes creating a logo super easy, even for complete beginners that have never designed a logo before.

Watch Our Video Tutorial For This Step

This video will walk you through how to design a simple logo using Ucraft and then download your finished logo in transparent PNG format.

Video Summary

  • Visit Ucraft
  • Click “Create A Free Logo” (0:12)
  • Add text and enter your company name (0:20)
  • Resize the text (0:30)
  • How change your font and add Google Fonts to the menu (0:53)
  • Search for icons to get ideas (1:50)
  • Click any icon to add it to your logo (2:38)
  • Click and drag over the icon and font box to align them horizontally or vertically (2:50)
  • Click the “Preview” button to view your logo on different mockups (3:20)
  • Click the “background” toggle to make the background dark (3:50)
  • Change the icon and font colors (4:00)
  • v

  • In your WordPress dashboard go to Elementor > My Templates and search for “settings” and view the “LP-SETTINGS-colors” template (4:38)
  • Select a color from your color scheme (5:00)
  • Paste in the 6-digit hexidecimal color code in Ucraft to change the color (5:20)
  • Create a centered logo (5:40)
  • Add another text box if your company name has multiple words (5:55)
  • Center icon and text (6:48)
  • Use shapes to add a background to your icons (7:16)
  • Move layers to the front or back (7:38)
  • Sign up for a free account and download your icon (8:40)
  • Choose the free PNG with transparent background download option (9:18)

(I designed and downloaded my new logo)

Step 2: Resize And Upload Your Logo To Your Website


Why This Step Is Important

The logo we downloaded in the previous step has a width of around 600 pixels. This is too large of a file size to use in your website’s header. We need to decide on a smaller width for your specific logo so that it fits correctly on desktop, tablet, and mobile and doesn’t slow down your website.

Visit BeFunky

Watch Our Video Tutorial For This Step

This video will walk you through how to choose the correct width (in pixels) for your logo, how to resize your logo with BeFunky, and how to upload your logo to your website’s header using Elementor.

Video Summary

  • In your WordPress dashboard go to Elementor > Header (0:16)
  • Use the “Instances” column to find the header template you are using and click “Edit with Elementor” (0:30)
  • Add an Image widget and upload your logo (0:57)
  • Drag the column in your header to decide what size you want your logo to be (1:28)
  • Select “Custom” from the “Image Size” drop-down list (2:07)
  • Change the width to find the exact pixels you want to use (2:20)
  • Visit BeFunky (3:17)
  • Open your logo file in BeFunky (3:32)
  • Click “Resize” to change the logo width and height (3:47)
  • Save as a “PNG” file (4:07)
  • Keep your original logo file somewhere safe since we will use it again in future tutorials (4:32)
  • You can use TinyPNG for compressing PNG files (4:50)
  • Add your newly resized logo to your website header (5:34)
  • Left-justify the logo and check it on tablet and mobile (6:12)
  • Click “Update” to save your header and have it updated on your website (6:30)

(I uploaded my logo to my website)

Continue To The Next Tutorial Below

Module 2

Designing Your Website

Module 2 Progress
0

Your Achievements

You have earned 0 badges

How Can This Course Be Free?

Our course is 100% free forever because of our special partnerships with SiteGround Hosting and Elementor Pro.