How To Upload A Background To Weebly
Here's a step-past-pace tutorial on how to customize your groundwork in Weebly.
We'll get over:
- How to change the background color
- How to change the header and footer color
- How to add a groundwork paradigm
Y'all volition be able to customize various groundwork Weebly by the end of this tutorial.
Permit's swoop right in.
How to alter groundwork color in Weebly
Notation: This section goes over how to change the background color on the principal content surface area (a.k.a the body) of your site.
If you desire to change the color of the header or the footer you have to customize the theme through the code editor (don't worry, information technology's not as hard as you recall).
First login to your Weebly business relationship . Brand certain you select the right website and click Edit Site.
![Select the right Weebly site to edit](https://makingthatwebsite.com/content/images/2022/03/weebly-dashboard-edit-site.png)
In the main editor, click on the edges of a section to update its background colour.
![Click on the edges to bring up the edit background setting](https://makingthatwebsite.com/content/images/2022/03/weebly-select-background.png)
You should see a popular upwards that prompts you to edit the background, select Edit Groundwork.
![Select Edit Background to change color](https://makingthatwebsite.com/content/images/2022/03/weebly-edit-background.png)
Next, select Change Colour.
![Change color setting in Weebly background](https://makingthatwebsite.com/content/images/2022/03/weebly-change-background-color.png)
Y'all can and so drag the color picker to change the background color of your choice. Optionally y'all tin can edit the HEX code right under the color picker.
![Drag the color picker to choose your color preference](https://makingthatwebsite.com/content/images/2022/03/weebly-change-color-picker.png)
That's it!
You've now successfully changed the background color. You may repeat this pace for any section on the page.
![Updated background color](https://makingthatwebsite.com/content/images/2022/03/weebly-updated-background-color.png)
First, head to your website Theme and select Edit HTML/CSS.
![Head over to the code editor](https://makingthatwebsite.com/content/images/2022/03/weebly-edit-html-css.png)
Important: Make a notation whether your website is currently using the light or dark theme, this will bear on how you update your header.
![Check if your website is using the light or dark theme](https://makingthatwebsite.com/content/images/2022/03/weebly-check-light-or-dark-theme.png)
If your website is using a light theme, then click the variables_light.less file on the sidebar. If your site is using a dark theme instead, and so click on variables_dark.less.
Since the website in this demo is using a light theme, we'll select the variables_light.less file.
![Editing the light theme css file](https://makingthatwebsite.com/content/images/2022/03/weebly-edit-background-css-file.png)
Next is to update the color code for for the header.
Look for the commencement line in the code editor which should consist @bg followed by a 6-digit color code.
![Update the background color setting](https://makingthatwebsite.com/content/images/2022/03/weebly-background-css-code.png)
The existing color code is #ffffff which is white. You can change it to whichever color yous like.
If you accept no idea which color to choose then just use #fffa00 (yellow) for do. Alternatively, head to this color picker website to identify the closest color to your preference.
![Update the color code for the header](https://makingthatwebsite.com/content/images/2022/03/weebly-update-background-css.gif)
The Weebly lawmaking editor will prove a preview of the colour change on your header. Be sure to click SAVE to update the changes.
![Save your header color change](https://makingthatwebsite.com/content/images/2022/03/weebly-preview-header-color-change.png)
You've now successfully updated the header color!
You tin can as well change the Footer color background.
Just look for @footer on the last line in the code editor and update the color code merely similar you did with the header.
![You can also edit the footer color in the same file](https://makingthatwebsite.com/content/images/2022/03/weebly-update-footer-color.png)
How to add a groundwork image
Adding a groundwork prototype (equally well equally removing it) is pretty easy in Weebly.
In the main editor, click on the edges of a section to add together a background epitome.
![Click in the edge to edit the background image](https://makingthatwebsite.com/content/images/2022/03/weebly-select-background2.png)
Yous will run across a pop up that allows you to add or edit the groundwork image.
![Edit background to update background image](https://makingthatwebsite.com/content/images/2022/03/weebly-edit-background-image.png)
If there's an existing background, the click Edit Background ➞ Supervene upon Image.
![Replace existing background image](https://makingthatwebsite.com/content/images/2022/03/weebly-replace-background-image.png)
Alternatively, if there isn't a background, you can select Epitome ➞ Add Image.
Upload a background image from your reckoner.
![Upload a background image from your computer](https://makingthatwebsite.com/content/images/2022/03/weebly-upload-background-image.png)
If you're looking for free stock photos or royalty free images then Pexels is a skillful place to start.
Once uploaded, click Save.
![Save the background image changes](https://makingthatwebsite.com/content/images/2022/03/weebly-save-background-image.png)
You've now added a groundwork image your site! Hitting the publish button to update the changes.
![Publish and live the background change](https://makingthatwebsite.com/content/images/2022/03/weebly-publish-background-image.png)
Related articles:
- Wix vs Weebly vs Squarespace vs Wordpress (A detailed comparison)
- How to change font in Weebly
- How to delete a Weebly site
- How to create a sub page in Weebly
- How to add Google Analytics to Weebly
Source: https://makingthatwebsite.com/how-to-change-weebly-background/
Posted by: knighttasootoor.blogspot.com
0 Response to "How To Upload A Background To Weebly"
Post a Comment