Vision Theme Documentation

1. To create a child theme, go to Marketing > Files and Templates >  Design Tools
2. In Design Tools open @marketplace in sidebar
3. Find the Vision theme folder, right-click on it, and select Create child theme from the dropdown. 
   
   
   
   
4. Just change the Child theme name from the dialog (e.g Vision-child) and click Create child theme button. 
5. You should see a success message “Your child theme is ready to go!” by informing that a stylesheet (child.css) and JavaScript file (child.js) has been created which will only work for the child theme.  Click Close button. 
6. On completion you will see a new child theme created for you with child.css, child.js and theme.json files. You can add your custom CSS and JS in these files.
   
   
   
   
7. You can access all the templates and modules of original parent theme in newly created child theme. Read more about the child themes here.

All of the colors listed in the theme settings can be selected in several Vision modules.

Primary color: The primary color of your theme refers to the main color that is used throughout your website. This color is typically used for headings, buttons, links, and other important elements on your site. Setting a primary color for your theme can help to create a consistent and professional look and feel.

Secondary color: The secondary color of your theme refers to an additional color that complements the primary color and is used in buttons and other design elements.

Text color: The text color of your theme refers to the color of the text on your website. This color is important to consider as it affects the readability of your content and can impact the overall design and user experience.

Body background color: The body background color in theme settings refers to the color of the background of your website.

Black color: You can adjust the default black color i.e #000000 used in theme.

White color: You can adjust the default white color i.e #FFFFFF used in theme.

Dark gray color: Select a particular dark gray color (#808080) that is associated with your specific desgin.

Light gray color: Select a particular light gray color (#E8E8E8) that is associated with your specific desgin.

Custom color 1 & 2: These are additional colors that are not currently used by default in the theme. However, these colors can be selected for text or other design elements in various custom modules.

Primary font: The primary font is used by default for headings and body text on theme templates.

Secondary font: The secondary font is used for subheadings, captions, and other secondary text elements.

Note: For adding contents in Website Header, please follow the instruction bellow in Website Header (Global) section. 

There are several style options available for Website Header in Vision theme.

Overlay Header (Transparent): The overlay headers can be applied as per specific background at page level. To use this option select the "Contents" tab in the page editor, then navigate to "Page Settings" under the hidden modules. This option allows you to switch the header from its default setting to a transparent or overlay style that better suits your Hero background.

Default Header: Adjust the style of the default header. If you have a page with a transparent or overlay header, you can revert it back to the default style in the page editor by selecting "Select Header Type" in the "Contents" tab under the hidden modules.

Header Height - Desktop: Adjust the height of header for the desktop view.

Header Height - Mobile: Adjust the height of header for the mobile view.

Sticky Header: Enable or disable the toggle to control sticky header.

Sticky Header Height - Desktop: This setting allows you to set the height of the sticky header for the desktop view. Please note that the height of the sticky header must be less than the height of the normal header.

Sticky Header Height - Mobile: Similarly, this setting allows you to set the height of the sticky header for the mobile view. Please ensure that the height of the sticky header for mobile is also less than the height of the default header for mobile.

Navigation

Menu Position: Select the menu position, right or left, from the dropdown. Selecting left will position the menu close to logo and you will see a new field to adjust spacing from logo.

Font: Select the font family, font size, and font type from the dropdowns.

Text Transform: Select the text transform from the dropdown menu, e.g. Capitalize, Uppercase, etc.

Child Toggle Icon (Top-Level): Select the toggle icon from the dropdown for the first level of the menu.

Child Toggle Icon on Hover (Top-Level): Select the toggle icon transition on hover from the dropdown.

Display Underline on Hover (Top-Level): Enable the underline on hover by selecting the checkbox, or remove the underline on hover by unselecting the checkbox of main menu links.

You can also apply styling to the Dropdown (Submenu), Mega Menu, and Mobile Menu in a similar manner.

Using the Theme Editor, you can customize various other styles of your pages based on your design and brand's identity, including:

Spacing

Typography

Buttons

Forms

Tables

Website Footer

Accordions are commonly used on websites for FAQs, product features, and other content that can be organized into sections. In Vision theme you will have several options to style your accordions.

You can style the accordion when clicked or expanded:

Background Style module allows you to style section background, however it will not work if that specific section has already a background set using section settings.

1. Place the "Background Style" module bellow the contents of the target section.
   
   
   
   
   
2. Select Background type Color, Gradient or Image.
3. You can also add the Divider at bottom of the section and control its setting in Divider Style tab. 
   

Note: The wave animation can only be enabled when the Divider Style is set to Custom.

The Blog Listings custom module allows you to choose between various layout options for your blog post listings. Additionally, there are several other options available to customize the appearance of the blog listing page.

The Blog Pagination module displays pagination buttons at the bottom of the blog listing page, enabling users to navigate between pages of blog posts. There are several customization options available to style the pagination links.

The "Blog Post Settings" is a global custom module that allows you to style all your blog posts.

Here are the steps:

1. Create or edit a blog post, select Contents tab from left sidebar.
2. Click "Blog Post Settings" module.
   
   
   
3. Click "Open in global content editor" in dialog
   
   
   
4. In the global content editor, you will find various style options that can be applied to the blog posts. 
   There are currently 3 styles:
   
   
   
   

    

   Style 1: Featured image side by side: (Header Text Align = Left)

   

   Style 2: Featured image in background: (Header Text Align = Center)

   

   Style 3: Simple Layout: (Header Text Align = Center)

   

There are two separate custom modules for buttons, however buttons are also available in several other custom modules like Hero Section, Custom Text, Image Text, and more.

The Button module can be used for a single button, whereas the Button Group module is more appropriate for multiple buttons.

Button style field contains a list of presets Simple, Arrow, Primary Solid, Primary Outline, Secondary Solid, Secondary Outline.

By selecting the Override Style checkbox, you can choose from a list of theme colors to customize the button colors.

Note: Other styles such as font, spacing, border etc can be updated in theme settings.

Pillar contents module covers broad topics related to the business's niche and are optimized for search engines to attract organic traffic.

Examples of pillar contents include ultimate guides or documentation, case studies, product reviews, and thought leadership articles.

In this module you can add sections and and their corresponding subsections.

The Title field in section/subsection is dynamically added to the Table of contents.

The position of Table Of Contents can be set by selecting Left or Right in Style -> Table of Contents -> Position.

You can add index/order number to the title in section content by enabling field  Style -> Section Title -> Title Order Number.

You can also add index number to the Links in Table of Contents by enabling field Style -> Table Of Contents -> Links -> Title Order Number.

Example:

Here is the list of some other custom modules in Vision Theme.

1. Content Cards
2. Custom Form
3. Custom Image
4. Custom Text
5. Features or Services
6. Hero Section
7. Image Text
8. Icon Text
9. Logo Scroller
10. Pricing
11. Section Header
12. Team Cards
13. Testimonials

In the global header Menu Tab, there are two menu types, default Hubspot Menu and the Mega Menu.

Hubspot Menu: Edit your HubSpot menu in Setting > Website > Navigation, and then select it in the Header Global Module.

Mega Menu: Mega Menu can be customized within the module itself, it provides a way to display a large amount of information and options within a single dropdown menu.

Label (Top-level): It is the top-level link that will always be visible in the header.

Link Type: It contains options Link only, Dropdown and Dropdown with sidepanel.

Link only: A normal link without dropdown.

Dropdown: It contains dropdown title and items.

Dropdown with sidepanel: This selection displays a new tab “Side panel” bellow the Dropdown Items.

Side panel: In this tab you can choose content types Simple menu or Blog posts to be displayed in the Mega menu sidebar.

Simple menu: Click edit menu content button to add links.

Blog Posts: It displays Blog field, Post Type (Recent or Popular), and number of posts to be displayed in sidebar.