Editing Layout

After creating your initial website, you can begin to customize your site's appearance in greater detail. Moogo comes with an easy-to-use Layout Editor, allowing you to make your website look exactly as you choose. For advanced users, we also offer the option of editing the layout with CSS (Cascading Style Sheets).

Accessing the Layout Editor

Access the Layout Editor by clicking on the "Layout Editor" link on the "Site Management" tab in the maintenance page header. You can also open the Layout Editor by moving the mouse over the header and clicking on the icon in the top left corner.

The Layout Editor toolbar will appear on the left-hand side of the screen. This bar allows you to choose which layout element to edit.

Text Styles

Editing text styles

You can edit the text styles on your site by using the "Text Styles" tool. First, choose the text style you would like to edit, for example, the "Main Menu" or the "Content Area Titles". The Font Type menu allows you to choose your font. You can also edit the font size and color.

Please keep in mind that special fonts are not often used in online applications since the person viewing your site must have the same font installed on his or her computer. This is why it is best to use default fonts.

Changes made to your site's layout can be viewed in real time.

The "Additional Settings" link allows you to use more dramatic styles that are not as commonly used as the default fonts, including bold fonts and text highlighting.

Note! The changes are saved only after you have clicked on the "Save" button. If the changes are not immediately visible, press the F5 key after exiting the Layout Editor in order to refresh the site.

Header

Choose your header photo from the Moogo Photo Library. See instantly what your website will look like with the new header!

You can change the header using the "Header" tool. You can completely remove the header photo or choose another photo from the Header library. You can also upload a photo of your own for use as a header.

Header photo repetition

If the header you have selected is not the same width as your page, you can duplicate the photo, or cause the photo to appear in repetition. This means that the header photo is repeated either vertically, horizontally or in both directions for the entire width and height of the header. Choosing the right photos allows the Repetition function to create extremely stylish headers.

You can also set the header height, which automatically adjusts a header photo that is too large. If you choose, you may also completely hide the header.

Choosing a header from the Photo Library

Moogo offers a great variety of headers in different themes. You can choose a header of your choice from the Photo Library by clicking on the "Choose photo from Library" link. You can immediately preview how the header will appear on your site. Once you have chosen your header, save the selection by clicking the button at the bottom of the page.

Adding a header of your own

You can also add your own header to the site by clicking on the "Add Own Header" link. The Moogo file browser will appear and you can use it to upload photos from your own computer. Read more about using the File Browser in the File Browser instructions.

When you want to add a header photo of your own, please remember the following:

• The picture should be in .jpg, .gif or .png format. Avoid pictures that are in .bmp format.
• The file or folder name should not contain characters that cannot be used in online applications; this includes commas or spaces.
• Please pay attention to the size of the header photo file. If the file size is large it will take a long time to upload. If the header photo exceeds 100KB in size, it is considered a large file.
• Usually, header photos are low in height and wide in width. The header photos in the Moogo Library are 780x200 pixels in size (i.e., width 780 and height 200). This is not the only size option, however. If your photo is not the same width as the website, you must use the "Repetition" function, which will duplicate the photo either horizontally or vertically.

How can I make my company name and logo appear above the header?

If you want to add information (a company name, for example) above the header, you must edit the photo with image editing software. At this time, it is not possible to add text or photos above the header photo with Moogo. If you want to have a header photo with the company name and logo, you must upload it with the Moogo File Browser and add it to the site.

Note! The changes are saved only after you click on the "Save" button. If your changes are not immediately visible, press the F5 key after exiting the Layout Editor to refresh the site.

Background Image

Changing the background image

You can replace the background image using the "Background Image and Color" tool. The background image consists of background color, a background image, or both.

You can choose a background image from the Photo Library by clicking on the "Choose photo from Library" link. The Moogo Background Image Library will appear and you can choose the image or pattern you want. You can use the Preview function to instantly see how the background image or pattern affects the layout of your website.

If you selected a background pattern, you must select the "Repetition" setting. It is possible to repeat the pattern horizontally or vertically, or in both directions. The most convenient way, in fact, is to repeat the pattern in both directions, which copies the pattern to cover the entire background of the site with a uniform pattern.

You may also set the background to a single color. You can set the color using the "Switch" button on the "Background Color," and selecting the shade you like from the color chart. Changes can be instantly viewed on your website.

You can also upload your own background image or pattern from your computer by clicking on the "Add Own Background Image" link and selecting the file in the File Browser.

When adding a background image of your own, please remember the following:

• The picture should be in .jpg, .gif or .png format. Avoid pictures that are in .bmp format.
• The file or folder name should not contain characters that cannot be used in online applications; this includes commas or spaces.
• Please pay attention to the size of the background image file. If the file size is large it will take a long time to upload. If the header photo exceeds 100KB in size, it is considered a large file.

• Usually, header photos are low and wide. The header photos in the Moogo Library are 780x200 pixels in size (i.e., width 780 and height 200). This is not the only size option, however. If your photo is not the same width as the website, you must use the "Repetition" function, which will duplicate the photo either horizontally or vertically.

Page Settings

You can edit the Miscellaneous Site settings using the "Page Settings" tool. With this tool, you can define the site positioning (central or left) and the background coloring for the site content area. The width and margins of the page can also be defined by accessing the additional features.

Note! The changes are saved only after you have clicked on the "Save" button. If your changes are not immediately visible, press the F5 key after exiting the Layout Editor to refresh the site.

» Back to the Instructions main page