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.



FONTS:




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.


COLORS


  • 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.