This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision Next revision Both sides next revision | ||
uploading_your_logo [2018/05/02 18:07] brittany |
uploading_your_logo [2019/06/07 23:13] brittany [Adding Logo to Footer] |
||
---|---|---|---|
Line 1: | Line 1: | ||
+ | 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. | ||
+ | |||
+ | =====Resizing Image with Pixlr X===== | ||
+ | |||
+ | Navigate to https://pixlr.com/x/ to use this free tool. | ||
+ | |||
+ | |||
+ | Click **Open Image** on the far left. | ||
+ | |||
+ | {{:undefined:pxlrx1.jpg?900|}} | ||
+ | |||
+ | 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 **Cross Arrowed** button at the top of the toolbar. | ||
+ | |||
+ | |||
+ | {{::pxlrx2.jpg?700|}} | ||
+ | |||
+ | |||
+ | This will open a variety of functions you can use to edit your image. Select the **Resize Image** button. | ||
+ | |||
+ | |||
+ | {{::pxlrx3.jpg?700|}} | ||
+ | |||
+ | {{::pxlrx4.jpg?400|}} | ||
+ | |||
+ | |||
+ | |||
+ | =====Cropping Your Image===== | ||
+ | |||
+ | To crop your image, select the square cropping symbol and change the height to a smaller number. Then click Apply. | ||
+ | |||
+ | |||
+ | {{::pxlrx5.jpg?700|}} | ||
+ | |||
+ | When you are done editing your logo, click **Save**. | ||
+ | |||
+ | {{::pixler6.jpg?700|}} | ||
+ | |||
+ | |||
+ | Select the JPG option and click **Download**. You will then find the logo in your downloads folder. | ||
+ | |||
+ | =====Uploading to Your Website===== | ||
+ | |||
+ | ====Adding Logo to Top of Site==== | ||
+ | |||
+ | To add your logo to the top left of your site, go to your site backend and scroll down to **Site Settings**. | ||
+ | |||
+ | {{::logorar1.jpg?500|}} | ||
+ | |||
+ | Go to the **Template Options** tab and scroll down to **Header Logo**. Click **Pick Image**. | ||
+ | |||
+ | {{::logorar2.jpg?700|}} | ||
+ | |||
+ | |||
+ | Find your logo and click **Insert**. | ||
+ | |||
+ | {{::logorar3.jpg?500|}} | ||
+ | |||
+ | ====Adding Logo to Footer==== | ||
+ | |||
+ | 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?600|}} | ||
+ | |||
+ | |||
+ | Then click **Default Footer**. | ||
+ | |||
+ | |||
+ | {{::15.png?250|}} | ||
+ | |||
+ | |||
+ | 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. | ||
+ | |||
+ | |||
+ | {{::16.png?700|}} | ||
+ | |||
+ | |||
+ | Once the new box opens, click the blue box with the folder and magnifying glass. | ||
+ | |||
+ | |||
+ | {{::17.png?600|}} | ||
+ | |||
+ | |||
+ | In the new box that opens, click the green Upload button at the top right-hand corner. | ||
+ | |||
+ | |||
+ | {{::18.png?500|}} | ||
+ | |||
+ | |||
+ | Click the blue **Select Files** button in the center. | ||
+ | |||
+ | |||
+ | {{::19.png?500|}} | ||
+ | |||
+ | |||
+ | Navigate to your logo saved on your computer. Click the image you want to upload and then click **OK**. | ||
+ | |||
+ | Your logo should now appear in your list of images. | ||
+ | |||
+ | |||
+ | {{::20.png?500|}} | ||
+ | |||
+ | |||
+ | To upload your image into the footer, click the green **Insert** button to the right of your logo. | ||
+ | |||
+ | |||
+ | {{::21.png?500|}} | ||
+ | |||
+ | |||
+ | Click the blue **Ok** button. | ||
+ | |||
+ | |||
+ | {{::22.png?500|}} | ||
+ | |||
+ | |||
+ | Your image will now appear in the footer where you placed your cursor. | ||
+ | |||
+ | |||
+ | {{::23.png?500|}} | ||
+ | |||
+ | |||
+ | You can also adjust the size of your logo using the white boxes around your logo. | ||
+ | |||
+ | |||
+ | {{::24.png?500|}} | ||
+ | |||
+ | |||
+ | An example of a resized logo below. | ||
+ | |||
+ | |||
+ | {{::25.png?500|}} | ||
+ | |||
+ | |||
+ | When you’re finished resizing or moving your logo, click the blue **Save** button at the bottom right-hand corner. | ||
+ | |||
+ | |||
+ | {{::26.png?500|}} | ||
+ | |||
+ | |||
+ | Congratulations! You’ve successfully edited and uploaded your logo to your website. | ||