This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision | ||
uploading_your_logo [2019/06/06 21:43] brittany |
uploading_your_logo [2020/05/28 19:26] michaels |
||
---|---|---|---|
Line 1: | Line 1: | ||
+ | #redirect https://support.realgeeks.com/hc/en-us/articles/360043670073 | ||
This doc details how to upload your logo to your website from the backend as well as how to crop or resize your image using Pixlr Express. | This doc details how to upload your logo to your website from the backend as well as how to crop or resize your image using Pixlr Express. | ||
- | =====Using Pixlr X===== | + | =====Resizing Image with Pixlr X===== |
Navigate to https://pixlr.com/x/ to use this free tool. | Navigate to https://pixlr.com/x/ to use this free tool. | ||
- | {{:undefined:pxlrx1.jpg?600|}} | ||
- | Click **Open Image** on the far left. This will open your local drive from which you can select your logo to upload. Click your logo and then click **Open**. | + | Click **Open Image** on the far left. |
- | You should then see your logo uploaded into the Pixlr Express tool as seen below. | + | {{:undefined:pxlrx1.jpg?900|}} |
- | {{::2_1_.png?400|}} | + | This will open your local drive from which you can select your logo to upload. Click your logo and then click **Open**. |
- | To change the size of your image, first click the **Adjustment** button on the far left of the bottom toolbar. | + | To change the size of your image, first click the **Cross Arrowed** button at the top of the toolbar. |
- | {{::3_-_do.png?400|}} | ||
- | This will open a variety of functions you can use to edit your image. You’ll see the **Crop** and **Resize** buttons on the far left of the opened toolbar. You can use these to change the size of your image. | + | {{::pxlrx2.jpg?700|}} |
- | {{:4_-_do.png?300|}} | ||
- | If you’d like to crop out part of your image, scroll past this section and navigate to **Cropping** Your Image. | + | This will open a variety of functions you can use to edit your image. Select the **Resize Image** button. |
- | =====Resizing your image===== | ||
- | To resize your image, go back to "Adjustment". | + | {{::pxlrx3.jpg?700|}} |
- | {{::3_-_do.png?400|}} | + | {{::pxlrx4.jpg?400|}} |
- | Click **Resize**. | ||
- | This will open a box with dimensions you can edit to fit your Real Geeks site. Please keep your image within the following dimensions for best display on your website: | ||
+ | =====Cropping Your Image===== | ||
- | Width: 200 x Height: 43 | + | To crop your image, select the square cropping symbol and change the height to a smaller number. Then click Apply. |
- | Or | + | |
- | Width: 400 x Height: 86 | + | |
- | {{::5_-_do.png?400|}} | ||
- | Change the numbers to adjust the size of your logo and click **Apply**. | + | {{::pxlrx5.jpg?700|}} |
- | Once you click **Apply**, your image will become smaller. | + | When you are done editing your logo, click **Save**. |
- | {{::6_-_do.png?400|}} | + | {{::pixler6.jpg?700|}} |
- | Make sure to click **Save** in the top left-hand corner to save the image and download to your computer. | ||
- | {{::7.png?400|}} | + | Select the JPG option and click **Download**. You will then find the logo in your downloads folder. |
- | After you click **Save**, type in the name you want for your new file and select Save again. | + | =====Uploading to Your Website===== |
- | {{::8.png?300|}} | + | ====Adding Logo to Top of Site==== |
- | Select where you want to save your new logo on your computer and click **Save**. | + | To add your logo to the top left of your site, go to your site backend and scroll down to **Site Settings**. |
- | + | ||
- | If you want to use this resized logo on your website, scroll past this next section about cropping and go straight to **Uploading** to your website. | + | |
- | =====Cropping Your Image===== | + | {{::logorar1.jpg?500|}} |
- | To crop your image, go back to **Adjustment** and select **Crop**. | + | Go to the **Template Options** tab and scroll down to **Header Logo**. Click **Pick Image**. |
- | {{::3_-_do.png?400|}} | + | {{::logorar2.jpg?700|}} |
- | This will open the cropping tool over your image as seen below. | + | Find your logo and click **Insert**. |
- | {{::9.png?400|}} | + | {{::logorar3.jpg?500|}} |
- | Use the cropping tool to crop the parts of the image you want removed. You can see the example below of cropping out the Real Geeks professor. | + | ====Adding Logo to Footer==== |
- | {{::10.png?400|}} | + | Navigate to the backend of your website to get started. You'll see the site administration backend menu as seen below. Go to the **Content** subsection on this page and click **Footers**. |
- | Once you’ve selected the area you want to remove, click the **Apply** button on the bottom toolbar. This will successfully crop your logo. | ||
+ | {{::13.png?600|}} | ||
- | After cropping your image, select **Save** in the top left-hand corner to save the image and download to your computer. | ||
- | {{::11.png?700|}} | + | Then click **Default Footer**. |
- | After you click **Save**, type in the name you want for your new file and select **Save** again. | ||
- | {{::12.png?300|}} | + | {{::15.png?250|}} |
- | Select where you want to save your new logo on your computer and click **Save**. | ||
- | =====Uploading to Your Website===== | + | To upload your image, first place your cursor in the text box where you want your logo to be. |
- | Navigate to the backend of your website to get started. You'll see the site administration backend menu as seen below. Go to the **Content** subsection on this page and click **Footers**. | + | |
- | {{::13.png?400|}} | + | Next, upload your image. To upload your image, click the small box with the mountain and the sun in your text box toolbar. |
- | Then click **Default Footer**. | ||
- | {{::15.png?200|}} | + | {{::16.png?700|}} |
- | To upload your image, first place your cursor in the text box where you want your logo to be. | ||
- | Next, upload your image. To upload your image, click the small box with the mountain and the sun in your text box toolbar. | + | Once the new box opens, click the blue box with the folder and magnifying glass. |
- | {{::16.png?400|}} | ||
- | Once the new box opens, click the blue box with the folder and magnifying glass. | + | {{::17.png?600|}} |
- | {{::17.png?400|}} | ||
In the new box that opens, click the green Upload button at the top right-hand corner. | In the new box that opens, click the green Upload button at the top right-hand corner. | ||
- | {{::18.png?400|}} | + | |
+ | {{::18.png?700|}} | ||
Click the blue **Select Files** button in the center. | Click the blue **Select Files** button in the center. | ||
- | {{::19.png?400|}} | + | |
+ | {{::19.png?500|}} | ||
Navigate to your logo saved on your computer. Click the image you want to upload and then click **OK**. | Navigate to your logo saved on your computer. Click the image you want to upload and then click **OK**. | ||
Line 118: | Line 104: | ||
Your logo should now appear in your list of images. | Your logo should now appear in your list of images. | ||
- | {{::20.png?400|}} | + | |
+ | {{::20.png?700|}} | ||
To upload your image into the footer, click the green **Insert** button to the right of your logo. | To upload your image into the footer, click the green **Insert** button to the right of your logo. | ||
- | {{::21.png?400|}} | + | |
+ | {{::21.png?700|}} | ||
Click the blue **Ok** button. | Click the blue **Ok** button. | ||
- | {{::22.png?400|}} | + | |
+ | {{::22.png?500|}} | ||
Your image will now appear in the footer where you placed your cursor. | Your image will now appear in the footer where you placed your cursor. | ||
- | {{::23.png?400|}} | + | |
+ | {{::23.png?700|}} | ||
You can also adjust the size of your logo using the white boxes around your logo. | You can also adjust the size of your logo using the white boxes around your logo. | ||
- | {{::24.png?400|}} | + | |
+ | {{::24.png?700|}} | ||
An example of a resized logo below. | An example of a resized logo below. | ||
- | {{::25.png?400|}} | + | |
+ | {{::25.png?700|}} | ||
When you’re finished resizing or moving your logo, click the blue **Save** button at the bottom right-hand corner. | When you’re finished resizing or moving your logo, click the blue **Save** button at the bottom right-hand corner. | ||
- | {{::26.png?400|}} | + | |
+ | {{::26.png?700|}} | ||
Congratulations! You’ve successfully edited and uploaded your logo to your website. | Congratulations! You’ve successfully edited and uploaded your logo to your website. | ||