Enfold Theme Dashboard and Logo Resizing

iCandy Academy  explains the Enfold theme dashboard, and teaches you how to re-size your logo for placement on your website.6

Enfold Theme Dashboard and Logo Resizing

When we activated the Enfold Theme it brought us to this page with the Enfold Theme options. If you need to get back to this page at a later time click on Enfold in the left hand side bar, over here. There are a ton of options built into the Enfold Theme. This is what makes Enfold one of our favorite themes to use. It is a flexible and powerful theme that is intuitive for anyone to use. The only downside to having such a robust theme is that it can be a little difficult to locate things due to the sheer number of options. We’re going to go over some very basic Enfold settings in this video, but before we get started let’s take a look to see what the front end of the website looks like now that we have changed the theme. The site still looks like it did before because we haven’t refreshed the page yet. I’m going to do that now. You can see now that the layout colors and overall design have changed. Instead of the iCandy Garden Centers site title the Enfold logo has been used as a placeholder. This area here is the header area of this theme. Over here on the right is the navigation area, also known as the menu. The area over here on the left is the main content area; right now it’s showing our sample blog post or blog roll. On the right is the sidebar content, also a search widget and if you scroll down you can see the footer area which also just has some placeholder widgets and way down at the bottom the copyright information is called the socket area with this particular theme. We’ll take a look at all of those different areas in later videos.

To start customizing your Enfold theme you’re going to need your logo and some basic color swatches. I already have a logo here for my iCandy Garden Center that I’m going to be using for this video. One of the most important things when working on your website is to make sure you’re not uploading huge photos that are not optimized for a website. You can tell the size of an image if you’re in Windows Explorer by just hovering over the image and you’ll see now where you can see the dimensions which say 250  by 155. Those dimensions are measured in pixels. On the right side of my Windows Explorer you can see the logo at its full size; this is the actual size of the image. This is probably a little bit large for our website so we’re going to use an online picture resizer to make it a little bit smaller. I’m going to go to my chrome browser, click on a new tab and type in picresize.com. This is a great tool for resizing your photos for the web. Here I’m going to click “Browse” and find my logo, and click open. Then I’m going to click “Continue.” You can see here this says the preview below is the actual size of your image so again this is just a little bit large for what we want for our website so I’m going to resize it. There are a lot of other options over on the left here that you can use if you’re researching different types of images; you can add frames, flip the rotation of the canvas and many other options. For right now, I’m going to scroll down and under this drop-down menu you can make it 25% smaller 50% smaller  75% smaller or a custom size. You’ll notice that you don’t have an option to make a photo bigger because in general if you try to make a photo bigger than it actually is you’re going to get pixelation and reduced quality. I’m going to click “custom size” from here and this will give me an opportunity to put in a pixel width. Right now we have a logo that’s 250 pixels. I’m going to just type in 175. The height is optional; typically if you don’t put in a height it will just automatically reduce the size in proportion, so you generally don’t want to put in a height. There are some other options again we don’t need to do those now, I’m going to just click on “I’m done resize my picture.” Ok now on this screen we’ve got a few different options, we can view the image that we just created by clicking there, and you can see it popped up in the left-hand corner, that looks like a pretty good size. I’m just going to X out of that and I’m going to save this to disk. This is going to give me an option to save the file, so I’m just going to save it in here. I’ll change the file name to iCandy Gard – small, just so I can tell which one it is. Now it’s downloaded. I can leave this website but we’ll be coming back to this later.

Now that we’ve got our logo ready to go, let’s go ahead and upload it into the Enfold Theme. Back here in the WordPress dashboard, simply click in here and click Upload. This is going to show us the WordPress media library uploader. There are a couple different places you’re going to see this screen and it’s good to notice that right now we’re on the upload files tab. There’s also a media library tab. We haven’t uploaded anything right now so there’s nothing in our media library, but as we upload images they will populate in this screen. So back on the uploads files tab, I’m going to click “select files,” please note that you can also drag and drop their files into this screen. I’m going to choose my iCandy Gardens – small logo and click open and then over here on the right it’s good to know that we have some size options. Right now we only have a thumbnail size that’s 80 pixels by 80 pixels or the full size that we uploaded. Because we uploaded such a small image there aren’t very many options. If you upload a large image you’ll see a lot of different options here and will be going over that later. I’m going to click “use image as logo.” There you can see it’s populated in the Enfold Theme options. I’m going to go ahead and save all changes, and it gives us a notification that we’ve saved our changes. Let’s go back over to the front end of this site, click refresh and see what happened. So now you can see we’ve already customized our logo in the Enfold Theme and there’s different options that we can do with the header, which we’ll be going over later, but it’s already starting to look pretty great. If you don’t have a logo for your business don’t worry. In the next video we’re going to show you how to make a very simple logo using Microsoft Paint.