How To Change The Background Color In Weebly
Here's a stride-by-step tutorial on how to customize your background in Weebly.
We'll go over:
- How to change the groundwork color
- How to alter the header and footer color
- How to add a background paradigm
You will be able to customize various background Weebly by the end of this tutorial.
Allow'due south dive right in.
How to change background color in Weebly
Notation: This department goes over how to change the background color on the main content area (a.chiliad.a the body) of your site.
If y'all desire to alter the colour of the header or the footer you have to customize the theme through the code editor (don't worry, it's not as hard every bit you call back).
First login to your Weebly account . Brand sure you select the correct website and click Edit Site.
In the main editor, click on the edges of a section to update its background color.
Yous should meet a pop up that prompts you to edit the background, select Edit Background.
Next, select Change Color.
You lot can then drag the color picker to modify the background colour of your option. Optionally you can edit the HEX code right under the color picker.
That'due south it!
You've now successfully changed the background color. You may echo this step for any section on the page.
First, head to your website Theme and select Edit HTML/CSS.
Important: Brand a note whether your website is currently using the light or dark theme, this will affect how yous update your header.
If your website is using a light theme, then click the variables_light.less file on the sidebar. If your site is using a nighttime theme instead, then click on variables_dark.less.
Since the website in this demo is using a calorie-free theme, nosotros'll select the variables_light.less file.
Next is to update the color code for for the header.
Await for the showtime line in the code editor which should consist @bg followed by a vi-digit color lawmaking.
The existing color code is #ffffff which is white. You tin can change information technology to whichever color you like.
If you take no idea which color to choose then simply use #fffa00 (yellow) for practice. Alternatively, head to this color picker website to identify the closest color to your preference.
The Weebly code editor will show a preview of the color modify on your header. Be sure to click Salvage to update the changes.
You've now successfully updated the header color!
You can also alter the Footer color background.
Just look for @footer on the last line in the code editor and update the colour code just similar you did with the header.
How to add a background image
Adding a background epitome (as well every bit removing it) is pretty easy in Weebly.
In the main editor, click on the edges of a department to add a background image.
You will see a pop up that allows you to add together or edit the background image.
If there'southward an existing background, the click Edit Background ➞ Supervene upon Paradigm.
Alternatively, if there isn't a groundwork, you lot can select Image ➞ Add Image.
Upload a background image from your computer.
If you lot're looking for free stock photos or royalty complimentary images then Pexels is a skillful identify to get-go.
Once uploaded, click Relieve.
You've at present added a background paradigm your site! Hit the publish button to update the changes.
Related articles:
- Wix vs Weebly vs Squarespace vs Wordpress (A detailed comparison)
- How to modify 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: davishatted.blogspot.com
0 Response to "How To Change The Background Color In Weebly"
Post a Comment