Tips for Customizing your Weebly Website

On the first day of the Website Development boot camp when you begin editing your brand new website, there is a lot of sample content on the pages. Rather than trying to modify the existing content (tempting as it is!), it is best to delete everything and make the website yours.

To delete an item, hover over it and click the "x" in the top right corner.

Cover Photos

Students often have difficulty with their cover photo which may not be proportioned correctly, or is not full width, or the image is just very granular.

Before uploading, consider the following:

  • Look at the properties of your cover photo, which will give you the width and height in pixels. To have good granularity, the width should be at least 800 pixels.
  • If the image is somewhat square, try to crop it to make it a horizontal rectangle and highlighting the part of the image you want.

After uploading, if your image is not full width, check the following:

  • You may need to go to the Theme menu, then select Theme Options. Check the button that indicates "full width".
  • You may have created a colored header background, then dragged the image onto the background. Click your header and select Edit Background, and this time make the background an image.

Completely removing your cover photo:

  • Under the Pages menu, select the page you want to change.
  • Under Header Type, select "No Header". Your header will magically disappear!

To add your cover photo to other pages:

  • Click on the home page cover photo, and select Edit Background.
  • Select Advanced, then "Save to More Pages" to select which pages will share the same header photo.

Keeping Track of your Photos!

When you drag the image icon onto your page and upload a new photo, it's very frustrating when later you want to use this image but have no idea where to find it! So here is what I suggest when you want to track your uploaded photos:

  • Select Theme from the top menu.
  • Scroll down on the left menu, and you will see "Edit HTML/CSS". Select this.
  • You will now see all the files stored on your website! Find the directory called Images.
  • Select the gear on the right of the Image directory. You will see an option to Upload Files. Select the file to upload.
  • Next time you want to use this file, go back to the Images directory, select and open the photo, then copy the URL using Copy Image Address. 
  • Now you can drag in the image icon, and instead of uploading the file again, just paste the URL!

Miscellaneous Styling

  • Under the Theme menu, select "Theme Options". You can click the "Fixed Navigation" on and off to change the scrolling of the navigation bar. Scroll down your page to test.
  • Under the Theme menu, you can select light or dark to change the background color of your site title area.
  • You can change the size of your site's title by going to the Theme menu, then "Change Font" and "Site Title". From there, just select the + to increase the size of the font.
  • Try to use the same color scheme and font styling throughout your entire website!