In this article we will take you through the steps to customize your Website Theme.
- On the Dashboard click on the Design Your Website button.
- The Theme Editor will be displayed. Customize the theme by changing any of the theme items you want.
The following is a description of what each of the items mean:
- THEME TITLE: This is the title(name) of your theme, for example: Rustic Chic.
- WEBSITE LAYOUT: This refers to the display of your website.
- The choice of website layout also affects the arrangement of the menu items. Below is an example of a Parallax design, where the menu items are at the top of the screen.
- BACKGROUND PATTERNS: The background pattern will be added to your website's background. Click on the dropdown arrow and you should see a screen similar to the one below. Background patterns can be displayed on top of a background color or image.
- **Note: These are built-in patterns and cannot be edited nor customized.
- BUILT-IN BACKGROUND IMAGES: The background image will be added to your website's background. Click on the dropdown menu in order to choose a background you like.
- CUSTOM BACKGROUND IMAGE: You also have the option of uploading your own background image instead of choosing an existing one. Simply click on the Choose button, to pick an image from your computer.
- You can even upload a GIF animation as a background.
- BACKGROUND-IMAGE POSITION: Here you can specify the positioning of your background image.
- Center: This will align the image to a position of center.
- Fill: This will stretch the image to occupy the whole space of your screen.
- Fit Width: This fits the image into a container.
- Tile: This will repeat the image.
- HEADER AND FOOTER PATTERNS: These are applied to your headers and footers. Click on the dropdown item and the options will be displayed.
- HEADER ICON: The header icon will be added to your website. This will be added in the middle of your header section. Click on the dropdown and a list of different built-in header icons will be displayed.
- DISPLAY MENU ITEM ICONS: This tick box will determine if the menu icons are shown or not.
- FOREGROUND BORDERS: Click on the dropdown to add a border to your website.
- CONTENT POSITION: Choose whether the information on the page should be aligned left, right or center.
- THEME ANIMATIONS: Click on the dropdown menu in order to choose which animation to use for your website.
- **Note: This animation does not show on a mobile.
- FOREGROUND OPACITY: This option changes the opacity of the foreground - 0% means the foreground won't display while 100% means it will be a solid color.
Under the Fonts tab you can change the size and font type of headings and content on your website.
- CONTENT FONT: Here you can specify the type of font to be used for your content. Click on the dropdown arrow and a list of fonts will be displayed. Whichever font option is selected will be used throughout your site.
- HEADING FONT: This is used to specify the type of font for the header.
- SUB HEADING FONT: This is used to specify the type of font for the sub-header.
- EVENT DATE FONT: This is used to specify the type of font for the event date.
- Under the color tab you can change the colors of the website, from your heading colors to your background colors.
- When you click on a color, the following window will show, where you can add the RGB or Hex(#) color value.