In the navigation menu list, select Design to access all the design options.
Add logo
Change the template
Add a banner or slider
Customise dimensions
Choose a font
Pick color scheme
Logo
To add a Logo, click Design > Change Design
Click the blue Upload File button and select the logo from your computer. The image must be a jpg, gif or png file. For best results, upload a transparent .gif
You can replace a logo by clicking the red Delete Logo button and then uploading a new file.
Click Save.
Change Design
Select Change Design, to change or preview a new template. Note: Changing templates will revert the color and font scheme to their default settings.
Banner / Slider Manager
1. With the blue tab, set your image(s) as a Banner or Slider. The banner or hero layout will be a single image. The slider or carousel will scroll through a series of images. There is no limit on the number of images composing the slider though 3 to 5 is recommended.
2. Using the file uploader, select an image from your computer. For an image to fit the full-screen width, it must be 1280 pixels wide. There is no maximum height.
3. Click the blue Upload button. Repeat to add all your slider images. Note: For optimum display, all slider images should be the same height and width - ideally 500px by 1280px.
Display, Sequence & Text
1. In the Image List, untick the blue box to remove an image from the carousel.
2. Rearrange the slider sequence using the blue arrows.
3. Click the Add Text button to include text on the image. In the pop-up window, enter the text and format it using the editor tools. Under Settings, choose the text position with the Text Alignment options. Click Save and Publish Now.
4. To delete an image, click the red Remove button.
Settings
The Settings section contains additional options. Once saved they will display as Published.
Type: Select image(s) to display as banner or slider.
Display: Decide where the homepages banner/slider will be present.
Image Alignment: Position of a non-full-width image.
Banner/ Slider Position: Place image element on top or bottom of the page.
Text Alignment: Choose the text placement on your banner/slider.
Dimension: Edit the image size.
Banner/ Slider CSS: For advanced users only
Template Settings
Display & Dimensions Tab
Display: Select yes or no to display the footer.
Height %: Customise the height of the header and footer.
Width %: Set the width of the side navigations. Note: There are more side navigation options in Display Option via Settings.
Click the Reset button to return to the default settings.
Font Tab
Select a Web Font from the font picker.
To import a Google font, tick Use Google Font.
- Go to: https://fonts.google.com/
- Click the red plus icon to the right of the desired font.
- Click on the Family Selected black bar at the bottom of the screen.
- In the pop-up, copy the font URL between the speech marks and paste in the Import Url field.
- Copy the font name and paste into the Font Family name field.
- Copy the font family and paste it into the Generic Font Family field.
- Click Save.
Color Scheme Tab
The Color Scheme tab enables you to customise the color of nearly all page elements.
Click on the color swatch and select a new color from the menu palette.
Click the More button to pick shades and tints of that color.
You can also enter the Hex color code of a specific color in the value field and click Choose to display that color.
General
These settings control the color for all the text options: links, titles, text, labels, headings and buttons.
Links: edit the color of links.
Links (Hover): edit the link color when hovered over.
Article Title: edit the color of the article title of the homepage, Featured Articles and content pages.
Recent Articles Title (Hover): edit the hover color of the article title of the homepage, Featured Articles and content pages.
Category Title: edit the color of the category title on the category page.
Content Text Color: edit the color of the article body text.
Form Labels: are the instructional text that accompanies form fields. Also, Form Labels controls the color of the Messages text.
Headings (1, 2, 3, 4 & 6): are found in the editor using the Formats icon.
Heading 5: edits the side navigation titles.
Button Background: and the call-to-action buttons on the public homepage.
Button Text: edit the color of buttons.
Button Background (Hover): edit the color of buttons when hovered.
Top Navigation
Background: edit the color of the header.
Navigation Links: edit the color of the top row of horizontal links.
Store
Background Button: edit the color of store buttons.
Button Text: edit the color of the button text.
Header: edit the color of the main and product titles.
Body Text: edit the color of the product description text.
Form Labels: edit the color of the form field instructions.
Links: edit the color of the product title and store links.
Product Price: edit the color of the product price.
Click More Options to reveal further edit settings.
Calendar
Title Banner: edit the banner color and the event date.
Hover/Highlight: edit the hover color of the event date.
Footer
Background: edit the background color of the main footer.
Main Menu Links Color: edit color of main navigation links.
Contact Links Color: edit the color of the contact links.
Useful Links Color: edit color of Logout and My Account links - displayed when a member is logged in.
Copyright Background: edit the background behind the copyright, T&C.
Copyright Links Color: edit the copyright links color
Homepage Sections
This section allows you to edit the color content of the public and member homepage blocks.
Text Blocks
Background: edit the color of the Text block’s background.
Body Text: edit the text color.
Blocks/ Showcase
Background: edit the color of the block’s background.
Main Title: edit the color of the title.
Block Title: edit the color of the block title.
Body Text: edit to color of the block text.
Features Articles
Background: edit the background color of Featured Articles block.
Date: edit the color of the article date in Featured Articles on the homepage.
Body Text: edit the color of the teaser text on Homepage and More Articles sections.
More Article Link: edit the color of the More Article link in the Recent Articles group.
Article Section Title: edit the color of the section title.