Articles/Getting Started/Start Here

Modify Template | Change Template, Background, Titles, Logos

Veronica
posted this on March 04, 2010 09:57 AM

Site Designer | Change Template, Background, Titles, Logos

The template is the overall design of your web site. The template is applied to each of your pages and applications. We offer hundreds of different templates with various customizable features such as the logo & header, background, title & footer. If you are familiar with CSS you can even use the Advanced option to further customize your template.

SiteDesigner.jpg

Site Designer

SiteDesigner-ModifyTemplate.jpg

The Site Designer allows you to design your overall website template. Here you can:

  • Change Template
  • Change Background
  • Adjust the Header & Footer
  • Use advanced CSS 

SiteDesigner-Options.jpg

You can select from hundreds of pre-made templates for your web site. All of them are designed with specific areas for side bars, navigation, and your content.

Change Template

  1. Click  Modify Template
  2. In the Change Template section scroll through the available templates or,
  3. Search using the Search option above the template thumbnails
  4. Click a template to load it in the preview 
  5. Hover over a template thumbnail and select from the other color options to load a different motif
  6. Click Save to save a template on your published site

SiteDesigner-ChangeTemplate.jpg

Change Background

In the Site Designer you can change the default background for all of your pages at once. In the Change Background section of the Site Designer you can select background images from our background bank, upload your own images, or select a background color. With images, you have the option to repeat the image and set it to a fixed location. 

Note: It is possible to change the background for each of your site pages. To change the background of a specific page, load it into the Site Builder and go to Page Options to change or remove a background image.

SiteDesigner-ChangeBackground.jpg

How to Change your Background

  1. Click  Modify Template
  2. Select an option:
    Background Bank
    My Uploaded Images
    Background Color
  3. In Tiling Options you can select if the image should tile (filling the entire background with repeat images) and if the background image should be static (meaning, the template scrolls, but the background image stays static)
Tip: The background selected in the Template Editor will appear on all pages unless you have specified a background for a specific page in the Page Options section of the Site Builder for that page.

Header & Footer

In this section you can define your Site Title, Tagline, Footer and your Header & Logo. Additionally you can change the formatting (Size, Color, Font, and Spacing) of the title, tagline, and footer text.

Tip: You can move the location of the Site Title and Tagline by dragging the red dotted box around in the preview of your site.

SiteDesigner-HeaderFooter.jpg

  1. Click Modify Template
  2. Click Header & Footer
  3. Type your Site Title in the box provided and edit the font, size, spacing
  4. Click Site Tagline, type your Site Tagline (to appear below the title) in the box provided and edit font, size, spacing
  5. Click Site Footer, type your Site Footer (to appear at the foot, or bottom of your site) in the box provided, and edit font, size, spacing

Header & Logo

In the Header & Footer section of Header & Footer you can upload a logo, reset the logo, remove the logo and reset the header. This section allows you to interact directly with the template by resizing the header box or moving the location of the logo.

SiteDesigner-HeaderLogo.jpg

Advanced CSS

SiteDesigner-AdvancedCSS.jpg

The advanced editor in the Template picker allows you to use custom CSS to modify some of the basic elements of the template. We do not offer CSS assistance, but we have provided some helpful links to other Webs.com sites on the Advanced Template Editor that you can use to get assistance.

Tip: You can also visit the Support Forums for assistance from other experienced Webs users.

How to Edit the Advanced CSS

  1. Click Modify Template
  2. Click Advanced CSS
  3. Enter your custom CSS code or click on any of the links to the right to load the code for different aspects of the template
  4. If you do not like your changes, remove the code and the template will return to the default design

Ready to take your Advanced CSS to the next level? Check out this helpful resource!

http://webscom.zendesk.com/entries/491492-advanced-template-customization

 
Topic is closed for comments