Pin Me

How to Make Your Website Background Change Colors with Web Builder

written by: Amanda Presley•edited by: Michele McDonough•updated: 5/11/2012

In this tutorial, I will show you how to change the background color of your website in Web Builder. You can choose a lot of different colors for your background to turn. The background will rotate.

  • slide 1 of 1

    This tutorial will show you how to make your website background change colors. You can make your website background change colors using the WYSIWYG Web Builder program. You can make the background change colors in other programs but code is required to do it. In Web Builder, you can apply this effect with a couple clicks of the mouse. This tutorial will walk you, step by step, through the process of changing the background color of your website.

    Open your WYSIWYG Web Builder program and open a webpage that you are working on. Expand the Extra panel in the left side of your program. In the Extra panel, you will see the Ready To Use Java Scripts button. Click that button and draw a box on your page using your mouse. The size of the box will not matter, you are just drawing a place holder.

    After you draw the box, the Java Scripts box will pop up. In the left side of the box, you will see all of the scripts available. Look for the Random Background Color Script. This is the script you will need to use. Once you find it, click it.

    On the right side of the box, you will see three panels. The first panel is the preview panel, the second panel is the color panels, and the third panel is where you select the colors you want to use. In the second panel, you will see Color 1, Color 2, and so on. Click on Color 1 and the box panel will display the color for color 1. Drop the box down and select the color you want to assign to color 1. Then click color 2 and drop the box down and select the color for color 2. Continue doing this until you have all of your colors chosen. You cannot delete colors from the panel. You will have to choose colors for every color option.

    After you have chosen all of your colors, click the OK button in the bottom of the panel to apply it. Then click File > Save to save your page. You can preview your background color page by clicking File > Preview in Browser > and select the browser you want to preview it in. To make changes to the color options, double click the box on your page. This is the box you drew to begin with. When you double click it, the general properties box will open. From there, you can make any changes necessary.