Customizing Template with Visual Designer

Introduction

With Visual Designer, you can edit your existing template visually, as and when required. That means you can view instantly what changes you have made. You don’t need to type any code to modify your template. Simply click on a specific section of your template (i.e. Header, Footer, Menu, Featured Section, Logo) to change its colour (Background/Foreground), layout, style etc. After making all the changes, you need to save and publish the template.

Note: Currently, Visual Designer feature is available only in Revo template.

How to Edit Template with Visual Designer

First, you need to change your existing template to “Revo” template and then,

• Go to “Website” -->”Templates” -->”Manage Template” in your CMS
• Click on “Visual Designer”
• The template will open in another tab of your browser for editing
• On the right bottom corner of your screen, you can see different options, including “Main Body”, “Show Controls”, “Show Options”, “Reset”, “Synchronize”, “Save” and “Publish”
• If you click on “Main Body”, a window will popup. You can change the background colour of the main body; change the text size, text colour and link colour
• Click on “Show Controls” to view different editable section of the template. The menu will appear on the bottom left corner of your screen. If you click on a specific section, (i.e. “Main Body”, “Header”, “Logo”) a popup widow will open where you can change the “Design” and “Layout” of that section
• If you click on “Show Options”, then different editable sections of the template will be highlighted, and you can see the Edit Icon in each section. You can go to each section and edit it by clicking on the Edit Icon.
• Click on “Reset” button to reset the changes to default
• By clicking on “Synchronize” button, you can go back to your last saved changes
• Click on the “Save” button to save the changes you have made to your template
• By clicking on “Publish” button you can publish the template with all the changes you have made

Note: "Reset" & "Synchronization" only supports style related changes. Metadata and other changes are not supported currently. 

Editing Different Sections of the Template

You can edit different sections of the template with Visual Designer including,

• Design & Layout of the Top Bar
• Logo
• Main Menu Design
• Banner Style
• Featured Content Area
• Featured Section Layout & Metadata Style
• Footer Design
• Content Listing Page
• Content Details Page

Design & Layout of the Top Bar

• Hover your mouse on the Top Bar and click on Edit
• A window will popup. Click on Layout
• Click on a layout style. You can view the style on the template. Select a style for your template
• Click on Design. Select the background colour, padding, border, margin
• Click on “Save” on the bottom right corner of your screen to save the changes
• Then click on “Publish” to make it live on your website

Logo

• Hover your mouse on the Logo and click on Edit
• Click on “Design” to change the logo’s height, width, background colour, padding and margin
• Click on “Save” on the bottom right corner of your screen to save the changes
• Then click on “Publish” to make it live on your website
• Click on “File” to upload a logo from your computer (Once you upload the logo image, it will automatically reflect on your website. You don't need to click on "Save" and "Publish" to reflect the logo on your website).

Main Menu Design

• Hover your mouse on the Main Menu and click on Edit
• Click on “Design” to change background colour, menu item background colour, text colour, text size, padding, margin, item padding and item margin
• Click on “Save” on the bottom right corner of your screen to save the changes
• Then click on “Publish” to make it live on your website

Banner Style

• Hover your mouse on the Banner and click on Edit
• Click on a banner layout style. You can view the style on the template. Select a style for your template
• Click on “Save” on the bottom right corner of your screen to save the changes
• Then click on “Publish” to make it live on your website

Featured Content Area

• Hover your mouse on the Featured Content Area and click on Edit
• Select a loading process from the available options
• Click on “Save” on the bottom right corner of your screen to save the changes
• Then click on “Publish” to make it live on your website

Featured Section Layout & Metadata Style

• Hover your mouse on Featured Content and click on Edit
• Click on “Layout”.
• Under Layout, select ‘Simple Grid”, ‘Grid with Slide” or “Single Item with Slider” (You can view the changes on your screen. So, you can easily select the style as per your requirement)
• Select the “Column Count” i.e. 2, 4 or 6
• Click on “Metadata”
• Select the metadata Type from the drop-down. Change its Colour, Size, Style, Width, Alignment and Line (Single/ Multiple)
• You can delete a metadata field by clicking on the Trashcan icon or add a new field by clicking on “Add New” button
• You can also add and edit custom metadata fields
• Click on “Save” on the bottom right corner of your screen to save the changes
• Then click on “Publish” to make it live on your website

Footer Design

• Hover your mouse on Footer section and click on Edit
• Click on Design. Change the Background Colour, Text Colour, Text Hover Colour, Padding, Margin, Border
• Click on “Save” on the bottom right corner of your screen to save the changes
• Then click on “Publish” to make it live on your website

Content Listing Page

• Go to the Content Listing Page
• Click on “Edit”
• Select the metadata Type from the drop-down. Change its Colour, Size, Style, Width, Alignment and Line (Single/ Multiple)
• You can delete a metadata field by clicking on the Trashcan icon or add a new field by clicking on “Add New” button
• You can also add and edit custom metadata fields
• Click on “Save” on the bottom right corner of your screen to save the changes
• Then click on “Publish” to make it live on your website

Content Details Page

• Click on a content and go to the Content Details Page.
• Select the metadata Type from the drop-down. Change its Colour, Size, Style, Width, Alignment and Line (Single/ Multiple)
• You can delete a metadata field by clicking on the Trashcan icon or add a new field by clicking on “Add New” button
• You can also add and edit custom metadata fields