TEMPLATE DOCUMENTATION

One of the key features that HubSpot offers is the ability to revert our changes back to the previous state. If you are familiar with Wordpress' post/page revision, then HubSpot's will be easier for you to work with. We'll cover on how to 'change back' your changes. Start learning this feature to save you time instead of re-edit the template/page. In this article How to revert a template to the older version How to revert changes that we have made in the page editor How to revert a template to the older version 1. Open the template from design manager 2. You'll see a button called 'Actions' button, click it then choose 'View revisions' 3. After you click 'View revisions', a popup will appear. At the left sidebar there will be a list of dates with time and your the editor's email address. Dates indicate when you made changes were made and published. You can click any version and you can see the content differences in the live preview. 4. Click 'Restore' button at the bottom left of the popup. That's it, now you have the template version that you need. Cheers! How to revert changes that we have made in the page editor 1. Open the the page editor. There are two options to access page editor: a. Open the page in your browser. you'll find a black button with the HubSpot logo at the top right of the screen. Click that button and choose 'Edit page' b. The second option is by navigating to Content > Website Pages OR Content > Landing Pages, then click 'Edit' on the page you are going to edit. 2. When you are in the page editor. You will find 3 buttons in the right navigation ('Save', 'List Icon' and 'Update'). Please click the second button (List icon). 3. A popup will show up after you click the button. And the next steps are exactly the same as discussed in the 1st method. 4. Click 'Choose' after you click a version that you want. Then Save and update the page. Cheers!

To duplicate an existing section, you'll need to create modules, groups exactly the same with the existing section. And also you'll need to readd the css classes to each modules/groups. There is no automatic method to do this, everything should be done manually. If you have any questions, feel free to reach us at support@giantfocal.com Cheers!

Most of templates utilise icons to beautify the page. Many are using FontAwesome, and some are images (PNG files). In this documentation, we are going to show you how to swap the default FontAwesome icons. In this article List of icons that available How to use FontAwesome List of Icons that Available You can find the completelist of icons here: http://fontawesome.io/icons How to use FontAwesome: 1. Choose an icon in the icons listing page 2. After choosing/clicking the icon it will load a new page, copy the code as shown in the live screenshot below: 3. Navigate back to the template. Find the icon module you are going to edit, and click 'edit options'. 4. A popup will appear and you can paste the code into the module. 5. Click Save and Publish the template then preview the page 6. If you don't like the icons styling (size and color). You will need to add a new class and edit it from the CSS file. Note: styling the icons will require knowledge in CSS.

Our templates come with pre-defined text alignment CSS classes that you can use easily. Instead of adding inline CSS to each module, it's recommended to use the classes listed below. In this article List of Classes How to use the CSS class List of Classes Type of Alignment CSS Class Left Alignment text-alignleft Center Alignment text-aligncenter Right Alignment text-aligncenter Justify Alignment text-alignjustify Left Alignment (on mobile) mb-text-alignleft Center Alignment(on mobile) mb-text-aligncenter Right Alignment(on mobile) mb-text-aligncenter Justify Alignment(on mobile) mb-text-alignjustify Note: You'll just need to add 'mb-' at the beginning of each CSS class to set the alignment on mobile devices, below 768px. How to use the CSS class: 1. Open the template from design manager, and open the template you want to edit. 2. Scroll to the module you want to edit 3. Click Settings > Edit CSS 4. A popup will appear and you can add the CSS class in the 'Custom CSS Class' input field 5. Click Save and Publish the template

We have a feature to add margin or padding by adding class/classes to your preferred module/section. In this article List of Classes How to use the CSS class List of Classes Type of MARGIN AND PADDING CSS Class Margin 70px Top and Bottom margin-70 Margin 70px Top margin-top-70 Margin 70px Bottom margin-bottom-70 Padding 70px Top and Bottom padding-70 Padding 70px Top padding-top-70 Padding 70px Bottom padding-bottom-70 Basically, this classes are consist of 3 parts (Margin/Padding)-(Top/Bottom/Nill)-Number. If you need margin top 50px, then the class is 'margin-top-50', if you need both top and bottom you can write it as 'margin-50' (So, no top nor bottom if you need both). The Number/value of the margin/padding is starting from 10px to 120px, always incremented by 10. If you need to adjust the margin/padding on mobile devices (below 768px) you can add 'mb-' at the beginning of the class. For example 'mb-margin-top-50'. How to use the CSS class: 1. Open the template from design manager 2. Scroll to the section you want to edit 3. Click Settings > Edit CSS 4. A popup appear then you can add the CSS class in the 'Custom CSS Class' input field 5. Click Save and Publish the template

Main navigation usually called only as "nav" or "top nav" is one of the most essential user experience elements. There are 2 types of menu modules that Hubspot provides. The first one is called 'Advance Menu' and the second one is 'Simple Menu'. But in this tutorial we will cover only Advanced Menu. Note: Advanced Menu will always be locked (locked modules are shown in darker background) The advantage using advance menu is that you will be able to edit the link/menu from content settings and changes can be applied on all pages that specify the module. Let's start learning how to update an advance menu. In this article How to create an advance menu How to edit an advance menu How to add the advance menu into a page/template How to create an advance menu 1. Navigate to Content > Content Settings 2. Click 'Advanced Menus' on the left sidebar. 3. Under the 'Edit a Menu Tree' section, click the button that says "Add another menu" 4. Enter the menu name you want to create, and click "OK". How to edit an advance menu 1. Navigate to Content > Content Settings 2. Click 'Advanced Menus' on the left sidebar. 3. Under the 'Edit a Menu Tree' section. Click the dropdown option, and choose the menu you are editing. 4. HubSpot will then update the Menu Tree right underneath the dropdown you chose. You can add/edit/remove each menu item. How to add/change the advance menu into a page/template 1. Open the template in Design Manager 2. Search for a module named 'Advanced Menu', see the screenshot below: Note that the "Advanced Menu" label is editable. If it's already changed and you want to make sure that you are editing an Advanced Menu, you can check sub-label text; it should always say "Advanced Menu". Here is an example: 3. Click the 'gear' icon and choose 'Edit Options' 4. A popup will appear and what you need to do is to scroll down to the bottom part of the popup. 5. Scroll down to the "Menu" section. And find the menu you want to add in the dropdown. 6. Click "Done" Note: The way to add a menu and to edit the menu are the same.

Let's talk about background image, on our template we don't add background image from CSS file, all of them are editable from page editor. Which will be much easier to do rather than changing from CSS file. In this article How to change background image How to change background image 1. Open your page editor 2. Click the 'cube' icon on the left side of the screen, and you'll see an image module that usually we give a label 'Background Image(resolution X resolution)'. 3. Click that particular module to change the background image, then change the image 4. View on the preview screen and you will see that the background image already added. 5. Click Save and Publish the template

All stylings are coded inside a CSS file, and we provide several options that will help you to change the basic stylings of your website fast. Let's get started! In this article How to edit css file How to edit css file 1. Open the template's CSS file. The CSS file is named after the template pack you purchased or downloaded. Exquisite template pack uses Exquisite.css, Attract template uses Attract.css, and so on. 2. Scroll to a section calles 'variables', it will look similar to the screenshot below: You can edit the basic styles of the websites by editing the variables listed. Some examples include: baseColor, accent/primary color, background colors, font family for both base and header, basic font size, line height, page center/container, and also buttons. Note: Change the value inside the double quote, and if you have any issue/do not understand, please feel free to contact us anytime! Cheers!

Hi, thank you for purchasing our template! In this tutorial we'll teach you the recommended way to use the template. Just for the starting point. What we recommend is to clone the template first before you make any edits, the purpose of this step is to preserve the original template if you happen to need the original version. But, if you are sure that you don't need to preserve the original version, you can skip this tutorial. In this article How to clone a template How to clone a template after purchase 1. Open the template from design manager, usually it's located inside GiantFocal folder 2. Click 'Actions' > 'Clone' 3. Create a new folder then rename the template name Note: if you already have a folder, you can clone the template there 4. Click 'Clone' button 5. Click Save and Publish the template

One of the most important features that HubSpot offers is global groups. It's always a good idea to create your website's sections that stay the same throughout the pages. Some good examples can be: header, footer, sidebar, and CTA bar. The main benefit of creating these sections as global groups is that you will only need to edit it once and the changes will be applied to all pages. In this article How to create a global group How to create a global group (2 methods) 1st Method 1. Open the template from design manager 2. Click 'Group...' button at the menu bar 3. Click the "group" of modules that you will turn into a global group. For example in the live screenshot below, we are turning the Footer section into a global group. 4. After we click a group, it will be highlighted in green, it indicates that we can group that section. But if it turns red, it means that we cannot group the chosen modules. Click the 'Create Group' blue button at the menu bar. 2nd Method 1. Navigate to the "group" of modules you want to turn into a global group. 2. Click the "gear" icon on the top right of the group. 3. Click "Make Group Global" 4. The group will turn green. This indicates that the process is done. Note: global group and global modules are 2 different entities.