Advanced styles, update template colors and editable regions

Each template has styles and editable regions. Editable regions are places where you can edit the content in it -- which is separate to the actual page content that you put into your pages. Depending on the template, you can edit background colors, fonts, hovered colors, pictures, border colors, background images and more. What we mean by "depending" is that each template is designed differently than another, also, different designers use different style names. If the template was built with the intention of changing a color or font, then you will be able to edit that part of the template.

This example below is using template number vg010 from our template Library.

 

  1. First, we will change the background color in the top banner area. Click Styles button in the toolbar.

  1. Select in left window pane area the style called bannerbackground

Note: styles have different names depending on how the designer built the template. In this case it is called bannerbackground.

 

  1. Change the Background Color selection to a color you like. You can also enter a hex number that you like. I will choose the orange color as an example. You will also see a Preview of it in the lower window pane. Click OK.

Note: RGB and CMYK numbers cannot be used here -- only hex which is a 6 digit alpha number

 

  1. You will see the top banner change color on your template.

  2. Go back into Styles button and change other colors. In this example I will change the left side to green and my page content to light yellow.

  3. For the left side I will choose the style called nav2container and change the Background Color to green.

  4. For the page content I will choose the style called contentbackground and change the Background Color to light yellow.

Note: On some templates you can choose the style called Template Body to update your background color around the outside of your template.

  1. You can play around with the colors, fonts, etc. If you have made a complete mess or made a mistake you can't figure out, you can start over by resetting the template.

  2. You can reset the template by going back into Styles button and click the Reset button and you can start it over again.

There are some more advanced styles available if you want to get really deep into your template changes.

You can do this by going into Styles  button and clicking the Advanced button at the bottom of the screen.

At the top of the screen will see some additional tabs showing. These tabs include Type, Background and Border options.

 

See also Edit content in an editable region