Introduction

Thank you for choosing Heavico! This documentation page will make it easy for you to set it up. Simply follow the quick installation guide step by step, as well as check the theme's features, so you are comfortable using them.

Heavico was made very simple to install and use, but if you happen to face any problems with setting up your website, kindly use the Support system and we'll assist you shortly!

1. Installation Guide

Heavico is a WordPress theme, that means you need a WordPress Content Magement System (CMS) installed. If you are new to this - don't worry! Here is a famous 5 minute WordPress Install to get you started:


https://www.youtube.com/watch?v=ell0SiTZyX8


https://codex.wordpress.org/Installing_WordPress#Famous_5-Minute_Install


You can download WordPress from: Official WordPress Website


Here is what the theme installation process looks like:

  1. Install WordPress CMS (if you don't have it already)
  2. Install “Heavico” Theme
  3. Install Required Plugins
  4. Import Demo Content
  5. Customize!

1.1. Installing the Theme

Regular install

Go to Appearance -> Themes -> Add New -> Upload Theme, upload the tc-heavico.zip file and click Install Now.

Then, find the Heavico theme in Appearance -> Themes and click Activate. Great! Next step is install the required plugins.


Child theme

If you plan to make changes to core theme files, it is best to use a child theme. It will keep you safe from losing your updates after updating the core theme files when the new version is released. The child theme is included in the download package as child theme.zip. Upload it using the same method as for the main theme and it will appear in the Appearance -> Themes section.


Install using the Envato Market plugin

If you would like to get updates regularly and be able to update the theme via the WordPress admin panel, you need to install the Envato Market plugin. It can be downloaded directly from here:


Download Envato Toolkit Plugin


Then, you have to follow their instructions:

  1. Download the envato-market.zip and unpack the archive.
  2. Upload envato-market to the /wp-content/plugins/ directory.
  3. Activate the plugin through the 'Plugins' menu in WordPress.
  4. Click the 'Envato Market' menu in WordPress and connect to the API.

Check their website for detailed description.


1.2. Plugins

You have to install the plugins right after the “Heavico” WordPress theme is activated and before importing the demo content.

For the main functionality, we are using these plugins:

  • Themicart Shortcodes
  • Themicart Services
  • Themicart Testimonials
  • Themicart Positions
  • Advanced Custom Fields Pro
  • Portfolio Post Type
  • Page Builder by SiteOrigin
  • SiteOrigin Widgets Bundle
  • Black Studio TinyMCE Widget
  • Contact Form 7
  • Breadcrumb NavXT
  • WooCommerce
  • WP Featherlight - lightbox for images
  • Customizer Export/Import - used for exporting and importing demo color presets. Deactivate this plugin after you are finished with the customizer import.
  • Customizer Reset - used for resetting the customizer before importing new settings. Deactivate this plugin after you are finished with the customizer import.

Here are some optional recommended plugins, which add useful functionality:

  • WP Featherlight - lightbox for images
  • All in One SEO - for SEO optimization purporses
  • Simple Page Sidebars - allows to use custom sidebars for desired pages

After activatig the theme, You will see a notice with the required plugins to be installed, simply tick them all, install and activate. Below are quick instructions on how to do so.


Install Plugins:

  1. Tick all plugins
  2. Bulk actions -> Install
  3. Apply

Activate Plugins:

  1. Tick all plugins
  2. Bulk actions -> Activate
  3. Apply

1.3. Import Demo Content

Once the plugins are installed, now you can import the demo data. Go to Appearance -> Import Demo Data. Click Import Demo Data and wait until it's finished!

1.4. Import Demo Customizer Settings

After installing the demo content, the theme will have default Heavico styling, which you can use with all 12 front page demo layouts. If you wish to use other demo settings, go to the Import/Export tab and upload the desired demo settings. You can find the settings for all of the demos in your download package folder Demos customizer import. You can try as many options are you wish, simply click on Reset on the top before importing the new settings.

1.5. Plugin Settings

After importing the content, there are a few settings you need to make in order the site to function properly.


1. Activate SiteOrigin Page Builder on custom post types.

Go to Settings -> Page Builder and tick the Projects, Positions, Services, Testimonials and click Save Settings. This will allow you to use the page builder on these pages.


2. BreadcrumbNavXT settings

Go to Settings -> BreadcrumbNavXT -> Post Types. Then, select the correct root pages for each post type: Projects, Services, Positions, Testimonials.


3. Set menu locations in widgets (only if you see 2 out of 4 columns in the footer)

Go to Appearance -> Widgets and set the correct menu locations in the widgets as in the image below. 1 - select correct menu, 2 - Click Save. Do the same for the menus that are in the 3, 4 and 5 widget areas.


4. Run WooCommerce Setup Guide (optional)


1.5. Optional Plugin: WP Featherlight

This ultralight plugin allows to easily add a simple and beautiful lightbox for your images. Using it is very quick: when adding images to your page, make sure they link to Media file. Click on an image and open the Edit options:

Then, set the link option to Media file as shown below:

You can also create a gallery with the lightbox, here is a detailed guide:

  • 1. Install the plugin ‘WP Featherlight – A Simple jQuery Lightbox’ via your WordPress admin and activate it
  • 2. Navigate to the page where you want to add your gallery
  • 3. Add new widget -> Visual Editor
  • 4. Click ‘Add Media’ -> ‘Create gallery’ (on the left)
  • 5. Select or upload the images, click ‘Create Gallery’
  • 6. On the right, select the ‘Link to’ value to ‘Media file’ from the dropdown menu (important), you can also set up the columns and thumbnail sizes there.
  • 7. Click ‘Insert Gallery’ and you will see it on your page, images opening in a nice light box.

1.6. Optional Plugin: Simple Page Sidebars

If you wish to display custom sidebar on a certain page, this plugin will help you do just that. Here are the steps in order to get different sidebars for your services pages:

  • 1. Install the plugin ‘Simple Page Sidebars’ via your WordPress admin and activate it
  • 2. Then, go to Settings -> Reading -> Select the Default sidebar, which will be replaced with your new sidebar. If you need a custom sidebar for some of your service pages, then select ‘Sidebar on Service Pages’. If it's other page, select the ‘Sidebar on About us page’.

  • 3. Go to the desired page Edit screen and find the Simple Page Sidebars options. Create a new sidebar and give it a custom name.

  • 4. Finally, go to Appearance -> Widgets, there you will find the sidebar with your given name. Insert the desired widgets and they will appear on the page.
  • 2. Customize

    In the theme customizer, click on Heavico Options, it will bring a new set of sections:

    • General Styling
    • Logo
    • Top Subnav
    • Header
    • Page Title Area
    • Social Media
    • Widgets Styling
    • Footer CTA
    • Footer
    • Shop
    • Settings

    2.1. Customize: General Settings

    In this General Settings tab, you can modify settings that are applied for general website styles, such as headings font weight, color, body text color, accent color, button radius, padding and border thickness settings and more.

    2.1. Customize: Logo

    In the Theme Customizer -> Heavico Options -> Logo, you can upload your own logo. You need two images: one in normal resolution, recommended height: 90px. The second one is double the size, which is used for mobile devices to avoid pixelation appearing on the high DPI screens.

    2.2. Customize: Top Subnav

    In the Theme Customizer -> Heavico Options -> Subnav, you can control the visibility, colors and content. Use the options to navigate between light and dark color schemes, as well as change the contact information to yours.

    2.3. Customize: Header

    In the Theme Customizer -> Heavico Options -> Header, you can select light or dark color scheme, sticky options, change header shadow style, and change color for header background and text colors for each item individually.

    2.4. Customize: Page Title Area

    In the Theme Customizer -> Heavico Options -> Page Title Area, you can change page title text and background color, as well as fullwidth background image, as shown in the image below.

    To set the content in the page title area, you need to Edit that page and find the fields below.

    As shown in the above settings, you can upload a different background image for each of the inner page. If no image is uploaded, then the page will use the image uploaded from the customizer.

    2.5. Customize Page Title Area: Video background

    Setting up the video for the background is easy: simply upload the video file to your YouTube or Vimeo account and insert the link as below:

    2.5. Customize: Social Media

    Apply hover colors for the social media icons, as well as place correct links, which open in a new tab:

    2.5. Customize: Widgets Styling

    Change the colors and visibility settings for the widgets:

    2.5. Customize: Footer CTA

    In the Footer CTA tab, you can change the text, colors and visibility options:

    2.5. Customize: Footer

    In the Theme Customizer -> Heavico Options -> Footer, you can change the width of the footer columns. The maximum width of all footer columns cannot be more than 100% or 12/12 columns.

    The footer will display as many columns as there are widgets, which you can control at Appearance -> Widgets. If a footer column has no widget, it will not be displayed then, this way you can reduce the column count.

    Next, you can modify footer colors, logo, copyright text and other settings.

    2.5. Customize: Shop

    Change the number of columns and items per page:

    2.5. Customize: Settings

    Change the 'Read More' text for service and blog item boxes, custom post type link slugs:

    2.5. Permalinks

    In the Theme Customizer -> Heavico Options -> Settings, you can change the slug for the projects and services. For example, if you wish to rename the Projects page to Portfolio, then you would have to change the slug projects into portfolio. You can do the same if you wish to edit the slug for the services. If you need to rename the labels, open the file in the theme folder /inc/extras.php and rename the labels as you like.

    After you change slugs, you must then go to Settings -> Permalinks -> Save Changes. It will update your links with the new ones.

    3. Site Structure

    In order to have everything organized nicely and quickly in your website, it is best if you know your site's structure beforehand. Take a few minutes and think what pages you want in the navigation and in what hierarchy.

    Then, the rest is easy, just follow the instructions for each page.

    3.1. Pages & Header Navigation

    In order to create pages, simply navigate to Pages -> Add new:

    Then, you will want to add the pages to the header main menu. Go to Appearance -> Menus. Edit the existing menu, or create your own, just don't forget to check the Primary Menu option, located under Menu Settings below.

    Drag & drop the pages in your desired hierarchy, save it and it will appearn on the top header!

    • 1. Tick the desired items to add to the menu. You can choose from Pages, Services, Posts, etc.
    • 2. Click Add to Menu, and the items will appear on the rigth side.
    • 3. Drag and drop the items in the hierarchy that you like.
    • 4. Save the menu.

    3.2. Front page with FullWidth Slider

    1. Navigate to Pages -> Add new:

    2. On the right-hand side, choose page template: Fullwidth Slider Page

    3. Sroll down and you will see the Slider options. Click on Add Slide, and the following options will show up:

    Slide fields explained:

    • 1. Slide main heading.
    • 2. Secondary text.
    • 3. Add buttons using shortcodes.
    • 4. Select background type: Image or video.
    • 5. Upload full size image, recommended size: 1920 x 625 pixels
    • 6. Upload same image in 470 x 625 dimensions. It is used for better crop on mobile phones. If not uploaded, it will automatically crop the main image
    • 7. Enable overlay over the background image.
    • 8. Select overlay color.
    • 9. Select overlay opacity.

    If chosen video in field 4, the background options are as below:

    Finally, choose overall slider settings:

    • 1. Turn on/off auto cycle
    • 2. Set slider interval in miliseconds (1s = 1000ms)
    • 3. Choose the animation used for slide elements
    • 4. Choose slide headline font weight from slim (200) to bold (700)
    • 5. Choose to display all headline characters in uppercase.
    • 6. Choose slide transition animation between fade and slide.

    3.3. Projects Page

    Choose page template: Projects page. This page will contain all of your projects.

    To add a Project, go to Projects -> Add New Project. This will create a single project item.

    Populating your project is very simple:

    • 1. Select a category for the project. This will be work as a filter in the Projects page.
    • 2. Allows to create new category.
    • 3. Featured Image will show as your project thumbnail on the Projects page.

    3.4. Add Service Items

    Add Services as shown below:

    Inside the service page, set the Featured image, it will show as the service image on the Services page. Set your own excerpt to be displayed in the service box as well.

    • 1. Featured Image
    • 2. Page title
    • 3. Excerpt (or trimmed content, if excerpt is not set).

    3.5. Services Page

    Choose page template: Services. This page will contain the same sidebar that is used on the single service pages.

    By using the Page Builder by SiteOrigin, create a new row with 3 columns, click on Add Widget and select Heavico: Services. To learn more on how to use the Page builder, scroll down to section 5.

    Below you can see how the services page layout looks using the Page Builder.

    3.6. Open Positions

    Add Positions as shown below:

    In order to create a page containing all positions, create a page using template: Default. By using a Page Builder by SiteOrigin, create a new row with 1 column, click on Add Widget and select Heavico: Open Positions. This will display all positions automatically. If you wish to add positions manually, then use the widget Heavico: Open Position Box. To learn more on how to use the Page builder, scroll down to section 5.

    3.7. Testimonials

    Add Testimonials as shown below:

    In the page edidor, set the Featured image, it will show as the service image on the Services page. Set your own excerpt to be displayed in the service box as well.

    • 1. Testimonial Content
    • 2. Featured Image
    • 3. Position or company name (optional)

    To display the testimonial on a page, use Page builder and select the widget Heavico: Testimonial Box. Your single testimonial item will look like this:

    4. Page Builder

    Building pages is very simple using the Page Builder plugin by SiteOrigin. Open page editing screen, and click on Page Builder on the right. Below is a screenshot of a single service page layout.

    • 1. Add Widget - lets you insert a widget to build the page content.
    • 2. Add Row - create a row with columns, in which you can place the widgets.
    • 3. Layouts - copy a layout from existing pages on your website.
    • 4. Live Editor - create content and see the changes on the same screen.
    • 5. Edit Row - modify the row's parameters, such as background color, margin, column count inside the row, etc.
    • 6. Order rows by drag & drop.

    In order to start building content, firstly click on Add Row, and you will see a similar screen:

    • 1. Set number of columns in a row.
    • 2. Select width of columns
    • 3. Set width manually by dragging the line.
    • 4. Set bottom margin if you want to push down the content below the row. Default is 30px.
    • 5. Select Fullwidth Stretched only if you want to use the following widgets: Heavico: Blog Posts, Heavico: Triple CTA, Heavico: Testimonials, Heavico: Gray Border Line. These widgets are used on the home page of our demo site.

    4.1. Page Builder: Import & Export template

    Import already built templates from any of the demos and edit them based on your needs. You can find all of the templates in the download package, Page builder templates folder.

    Click on Layouts:

    Then, select the Import/Export tab and upload the desired template. Once uploaded, you can easily remove, add or change the order of the rows. It also allows to download the existing page layout.

    4.2. Page Builder: Copy page

    Instead of importing from a file, you can import an existing page. Click on Layouts, choose the appropriate tab for cloning pages, services or other. Select the desired item and click Insert.

    5. Widgets

    Heavico has 12 widgets that will help you build page layouts. Some of them allow inserting links, so remember that all links used in the widgets or shortcodes must start with http://. Below is a list of widgets available:

    5.1. Heavico: Blog Posts

    Add a recent posts slider (used on the demo home page).

    Use Page Builder to create a row. In order to display a fullwidth row, select Fullwidth Stretched. Set a background you like (demo color: #333333) and use padding for the row, we are using 80px.

    The widget has the following settings:

    • 1. Set title
    • 2. Button text
    • 3. Button link
    • 4. Color scheme - choose between light and dark color schemes for white, dark or colored background.

    5.2. Heavico: CTA Box

    Set a CTA title, small link text and link destination and you'll get a box like this. You can use this widget in a sidebar as well. The links must start with http://

    The widget has the following settings:

    • 1. CTA title
    • 2. Cta body text (Optional)
    • 3. Link (Optional)
    • 4. Link Text

    5.3. Heavico: Feature Box

    Set a feature title, icon, text and link (optional). To find the icons, visit this website: http://fontawesome.io/icons

    5.4. Heavico: Gray Border Line

    Add a fullwidth gray border line as we are using in our demo home page to divide sections.

    Alternative method is to use a class for the row in the page builder, as we are doing in the demo content for projects, blog posts widgets, testimonials, triple cta and other widgets. Hover on a row, click Edit row.

    Then, click on the Attributes tab on the right and find the Row Class field:

    Add gray border to top and bottom:

    gray-border

    Add gray border to top:

    gray-border-top

    Add gray border to bottom:

    gray-border-bottom

    5.5. Heavico: Open Positions & 5.6. Heavico: Open Positions Box

    Using the Open Positions widget you can add a block, which will automatically load the open positions as soon as you add them via admin panel Positions -> Add New

    Alternatively, you can use the Open Positions Box widget to add each position manually and control the order.

    5.7. Heavico: Projects Gallery

    Display recent projects on your home page. Use FullWidth Stretched row layout in the page builder. You can customize the colors by using the Theme Customizer.

    The widget has the following settings:

    • 1. Set title
    • 2. Show gallery filters - show or hide the filters
    • 3. Number of columns (2, 3, 4 or 6)
    • 4. Number of rows
    • 5. Button text
    • 6. Button link

    You can customize the colors of this widget in Appearance -> Customizer.

    You can also modify the number of columns for the actual projects page. Enter the edit screen of the projects page and find the options below:

    5.8. Heavico: Projects Gallery Single Category

    Display recent projects of one single category. FullWidth Stretched row layout in the page builder. You can customize the colors by using the Theme Customizer.

    The widget has the following settings:

    • 1. Set title (Optional)
    • 2. Select Projects Category to Display
    • 3. Number of columns (2, 3, 4 or 6)
    • 4. Number of rows
    • 5. Gallery Button Text (Leave empty to hide)
    • 6. Gallery Button link

    5.7. Heavico: Service Box

    Display a single service box. You can use this widget to build a page to display all of your services. Below is a screenshot of a row with 3 equal width columns, each containing a single service widget.

    5.8. Heavico: Team Member

    A widget to display a team member.

    The widget has the following settings:

    • 1. Heading
    • 2. Link to bio page
    • 3. Position
    • 4. Phone
    • 5. Biography
    • 6. Image

    To display the image, you need to insert the image URL as in the example below. Click on Select Image, then upload or select the desired image and click the File URL to get the image URL and then click Insert into Post.

    5.10. Heavico: Testimonial Box

    Display a single testimonial.

    5.11. Heavico: Testimonials

    Add a testimonials slider as on our home page. Use FullWidth Stretched row layout in the page builder.

    The widget has the following settings:

    • 1. Set title
    • 2. Button text
    • 3. Button link
    • 4. Color scheme - choose between light and dark color schemes for white, dark or colored background.

    5.12. Heavico: Triple CTA

    Add a Triple CTA section as on our demo site home page. Use FullWidth Stretched row layout in the page builder. You can customize the colors for the widget in the Theme Customizer.

    Right below this widget you see a Gray Border Line widget. Our Triple CTA widget has its bottom margin set to 0.

    Alternatively, simple add the gray-border-bottom class to the row, as shown in the example above for the projects gallery widget, you will then need to set the bottom margin to around 100px to push the content below it.

    The widget has the following settings:

    • 1. CTA title
    • 2. Cta body text (Optional)
    • 3. Link (Optional)
    • 4. Link Text

    6. Shortcodes

    Use the following shortcodes to generate content. Replace content with yours and you'll be good to go!

    6.1. Dividers

    This is a simple divider to separate headings from content

    [divider]

    The second divider shorcode is used to insert a read more link, such as 'All Services' as in the example below:

    It accepts these parameters:

    Style (to use on light or dark background):

    style = "light"

    style = "dark"

    Link (must start with http://):

    link = "YourURL"

    [dividerbot style="light" link="YourURL"]All Services[dividerbot]

    6.2. Buttons

    Button shortcode accepts these parameters:

    Style:

    style = "primary"

    style = "regular"

    Link (must start with http://):

    link = "YourURL"

    Target. Use this if you want the link to open in a new browser tab.

    target = "_blank"

    Primary Button

    [button style="primary" link="YourURL"]Primary Button[/button]

    Regular Button

    [button style="regular" link="YourURL" target="_blank"]Regular Button[/button]

    6.3. Accordion

    [collapsibles]
    	[collapse title="Collapse 1" state="active"]
    		Your Content 1
    	[/collapse]
    	[collapse title="Copllapse 2"]
    		Your Content 2
    	[/collapse]
    	[collapse title="Copllapse 3"]
    		Your Content 3
    	[/collapse]
    [/collapsibles]
    

    6.4. Tabs

    [tabs]
    	[tab title="Title 1"]
    		Tab Content 1
    	[/tab]
    	[tab title="Title 2"]
    		Tab Content 2
    	[/tab]
    	[tab title="Title 3"]
    		Tab Content 3
    	[/tab]
    [/tabs]

    6.5. Table

    Service Time Support Price
    Architecture Project 1h Yes $1920
    Machine Rent 2h Yes $1299
    Training 40h No $6299
    Consultation 1h Yes $199
    Renovation Project 6h Yes $1920
    [table cols="Service, Time, Support, Price" data="Architecture Project, 1h,  Yes,  $1920, Machine Rent, 2h,  Yes,  $1299, Training, 40h,  No,  $6299, Consultation, 1h,  Yes,  $199, Renovation Project, 6h,  Yes,  $1920"]

    6.6. Google Map

    The old Google map shortcode was replaced with widget: SiteOrigin Google Maps for more flexible options.

    On the contact page in the demo content, you will find the SiteOrigin Google Maps widget. There are a few options that need to be entered, such as the API key, custom marker, location, and map height if needed.

    In order to get the API key from the Official Google website, follow this link:


    Get API key

    If you have the default demo imported, the map will already have everything set up. If you are starting from scratch, the map will have default styling. To apply the style our theme uses, simply find the tab called Styles -> Predefined Styles and add the following code in the Raw JSON styles:

    [{"featureType":"administrative","elementType":"all","stylers":[{"saturation":"-100"}]},{"featureType":"administrative.province","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"landscape","elementType":"all","stylers":[{"saturation":-100},{"lightness":65},{"visibility":"on"}]},{"featureType":"poi","elementType":"all","stylers":[{"saturation":-100},{"lightness":"50"},{"visibility":"simplified"}]},{"featureType":"road","elementType":"all","stylers":[{"saturation":"-100"}]},{"featureType":"road.highway","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"road.arterial","elementType":"all","stylers":[{"lightness":"30"}]},{"featureType":"road.local","elementType":"all","stylers":[{"lightness":"40"}]},{"featureType":"transit","elementType":"all","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"water","elementType":"geometry","stylers":[{"hue":"#ffff00"},{"lightness":-25},{"saturation":-97}]},{"featureType":"water","elementType":"labels","stylers":[{"lightness":-25},{"saturation":-100}]}]

    6.7. Contact Form

    Go to Contact -> Contact forms, create your form and copy the shortcode to use it with the page builder when building the content.

    Your form will then look like this:

    Next, you can use some classes for the widget to make it look even better. Click on the form widget and open the Attributes tab. In the Widget Class field, you can enter the following classes:

    Puts form in a nice box:

    form-box

    Makes the submit button fullwidth:

    btn-fullwidth

    Your contact form now looks like this. With some centered heading entered above the shortcode, it can serve as an effective call-to-action:

    6.8. Animation on scroll

    Adding animation on scroll is made simple. It is possible to add it on a row or for an individual widget. Open the Attributes tab in the row or widget settings and add the following class:

    animated

    That's it! Your element will now fade in while scrolling.

    7. Support

    Heavico was made very simple to install and use, but if you happen to face any problems with setting up your website, kindly use the Support system and we'll assist you shortly!


    Contact Support


Enjoy using Heavico WordPress theme? Click Here to rate it