1. Knowledge Base
  2. >
  3. Change Template Color Theme (VIDEO)

Change Template Color Theme (VIDEO)

Looking for help for the GATOR Builder by HostGator Website Builder product? Please see GATOR's Knowledge Base.
This content only applies to those using GATOR Builder by HostGator.

Since each Gator is entirely customizable, that means you can change the color theme of your entire website quickly and easily. You can also easily alter individual sections colors and backgrounds so that you do not affect the other areas of your site. Every theme has a color scheme and a "palette" of colors that you can change, which will affect every similar element, using that color palette. 

In this article, we will cover How to Change Theme Colors and Background, as well as How to Change Individual Sections Colors. For the best results, you may want to know already which color scheme your site should follow (such as the color from your logo) and have the color codes (RGB or HEX#) available if possible.


Changing Theme Background Color:

To start with changing the theme background colors, click the Design button on your website builder's left-hand menu:

  1. A pop-up will appear where you will select Background; then, a second menu will appear:

    User-added image

    From this second menu, you can:

    - Preview the current background from the monitor simulation.
    - Customize the background image. Colors, opacity, orientation, and alignment.
    - Change the Theme Background Color by clicking the circular color options.
    - Replace the background with one of the textures built into the designer.
    - Add stock image to the background.
     

Changing Theme Colors: AKA color palette:

Our team of expert designers has included a collection of color presets that look and work beautifully together. These presets are organized into color palettes under the Presets Collection.  You can color your site automatically by selecting one of these presets, which will work to change the backgrounds, fonts, sections, and links throughout your whole website. Continue reading to learn how to access and edit these presets.

To access the color palettes and edit them:

  1.  Continue working from the Design section of the left-hand menu, then select Colors:

    User-added image

  2. In the secondary menu that appears, you will see a series of available color palettes that all will give your site a different feel.

    User-added image

  3. If you select a color option, the colors of the site will automatically change simultaneously with the preview above. 

  4. Click the Revert option to go back to original colors or Apply to save this palette selection.

    If you only want to change one of the palette colors, you can do so by selecting Edit Colors.
    User-added image

  5. From the site colors menu, select the color you want to change, and a Color Picker menu will appear.

    User-added image

  6. Here you can select the color manually or enter in the RGB or HEX values for the color you want.


Changing Individual Sections Colors:

You can also change individual colors of an Element or Section relative to how you make other changes with the designer:

  1. To begin changing select colors of a section (or element) click on the section itself or the background of the section and nothing else.

    See the red target in the image below. There are no elements here, so clicking here will lead to the next step.

    User-added image

  2. Clicking the background literally means, click the background section of your website where no elements are.

    Which is important to learn because doing otherwise means you will receive different results and may not be editing the right section.

  3. Once you Click the Background, the website builder will display two separate menus as seen above:

- The ORANGE sections menu

- The Main Settings Menu

 
Pro Tip: The Main Settings pop-up menus always have a heading of WHAT that pop-up is. In the example image above, you will see both the orange button menu and the right-hand pop-up say: Section A indicating that you are making changes to this section.