PortfolioLite Theme

Installing Theme

    • First, download the Portfoliolite theme zip file.
    • Login to WP admin.
    • Go to “Appearance > Theme”.
    • Click on “Add new” button and then click on “Upload theme” button. Here upload theme zip file.
    • Activate the theme.

theme-install-portfolilite
Note – For enabling FrontPage Section (Top Slider, Services, Portfolio, Team, Testimonial ribbon section, WooCommerce Blog post, etc.) in our theme, You have to download and Activate the Hunk Companion plugin and other recommended plugins in your dashboard.

Import Demo Data

    • Go to your WP dashboard. Navigate to Appearance > Portfoliolite Options.
    • Before importing demo make sure Hunk Companion, One click demo import & other recommended plugins are installed in your dashboard.

demo-import-portfoliolite

    • You’ll see a option of Import demo data in your appearance sidebar. Choose your desired Demo. Click on the button “Import“.

one-click-demo-import-portfoliolite

  • Wait for few minutes, Your demo will be imported successfully.

To get scrolling menu please follow these steps –

  • Go to “Appearance > Menus” and create a new custom menu.
  • Add a new link from “links” tab.
  • Here you need to add section id in “URL” field.
  • Please check id for all section, you can use them.

Top Slider = #page-top
Service Section = #services
Ribbon Section = #call-ribbon
Portfolio = #portfolio-mywork-section
Testimonial = #testimonials
Team = #team-info
WooCommerce Section = #th-woocommerce
News Letter = #new-letter
Latest Post = #latest-post
Contact = #contact-info

  • Now select “Front Menu” as a Theme Location for your Section Menus.
  • If you want to create menu that only shows on internal pages not on home page then create a custom menu and select them as a “Main Menu” as a Theme locations from Menu Settings.
  • You can also select Footer menu, if you want to show your menu items on Footer area.

menu settings portfoliolite

WordPress Default

Site Identity

  • To Add site information like Site title ,Tag line ,Logo upload and Site icon for your website open your dashboard. Go to Appearance > Customize > Site Identity.
  • Select your logo and site icon by clicking on “Select Image” button.
  • If you want to display a logo just Uncheck the “Display Site Tile & Tagline” checkbox.

Homepage Setting

  • To create Homepage on your site follow the below instructions –
  • Go to Wp Dashboard > Page > Add New > Create a Page.
  • In the right sidebar of your editor you will see Page attributes > Template. Click on the template and select the option Homepage template. Publish it.
  • Navigate to Customize panel > WordPress Default > Homepage Settings. In homepage settings. Select the radio button of “A static page” and choose your homepage which you have created as front page.

homepage-setting-portfoliolite

Header Setting

    • For Header Settings, Go to Appearance > Customize > Header Settings.
    • Sticky Header – It will stick your header with the site, whenever you’ll will scroll the site it will scroll down along with the site.
    • Static Header – It will fix your header on the top of your site.
    • Inline Menu Style – By choosing this option your Menu will be align on left side of your site.
    • Centered Menu Style – By choosing this option your Menu will be align in the Center.
    • Header Visibility – By using this option you can Toggle your header on the site. You can Enable or disable it anytime.

Frontpage Sections

Top Slider

  • Go to Appearance > Customize > Frontpage Sections > Top Slider. Here you can set images, text and links in your frontpage slider with their styling.
  • Setting – You can upload upto three background images. Add Image Overlay and Scroll down link.
  • Text – You can add Heading, Typewriter text, Button text & links for your sliders. You can also set typewriter speed.
  • Style – Pick desired color for Heading text, Typewriter text and Button.

top-slider-portfoliolite

Service Section

  • Go to Appearance > Customize > Frontpage Sections > Service. Add Heading and Sub heading with their Color styling. You can Showcase your site Services using Service Widget.
  • Service Widget – To display Services, From widget panel choose Service Widget. You can add Title, Description, Link, Upload Image or Add Font Awesome Icon and also pick desired color for them.

our-services-portfolilite

Ribbon Section

  • Go to Appearance > Customize > Frontpage Sections > Ribbon. Add Title, Button Text and Link with their Color.
  • Style – From Style, You can Upload Background Image or pick Background color for your Ribbon.

ribbon-section-portfolilite

Portfolio Section

  • To add portfolio go to the Dashboard > Portfolio Gallery > Add New. Add a Featured image that you upload in each portfolio will display at the home page.
  • Setting – In Setting you can add Heading & Subheading Option. You can Choose Portfolio Layout ( Four Grid No Gutter ), Set the No. of images to show on Homepage and check the Categories of portfolio.
  • Style – From Style you can pick Background color, Image Overlay Color and color for other elements.

Team Section

  • Go to Appearance > Customize > Frontpage Sections > Team. Add Heading and Sub heading with their Color styling. You can Showcase Team members using Team Widget.
  • Team Widget – To display Team, From widget panel choose Team Widget. You can Upload Team member’s image, Add Name, Designation and Social Media links.

team-section-portfoliolite

Testimonial Section

  • Go to Appearance > Customize > Frontpage Sections > Testimonial. Add Heading and Sub heading with their Color styling. Upload Background image and color. You can Showcase Client Testimonials using Testimonial Widget.
  • Testimonial Widget – To display Testimonial, From widget panel choose Testimonial Widget. You can Upload Client image, Add Name, Short bio, Company name and Link.

Testimonial-section-portfoliolite

WooCommerce Section

  • For WooCommerce Section, make sure you have installed and activated WooCommerce Plugin. After that Add Products with their categories.
  • Go to Appearance > Customize > Frontpage Sections > WooCommerce. . Add Main Heading and Sub heading. In the Enter WooCommerce Shortcode text are enter Shortcode to Display your Products on the homepage. Example – [products limit=”3″ columns=”3″]
  • Style – From Style you can pick color for Background, Heading and Sub heading.

woocommerce-portfoliolite

Newsletter Section

  • Go to Appearance > Customize > Frontpage Sections > Newsletter. . In Newsletter Section you can display sign up form or Newsletter form. For this you have to Install and Activate Lead Form Builder plugin in your Dashboard. Design a form and Put Shortcode in the Contact Us Shortcode text area.
  • You can Add NewsLetter Title, Button text and Pick Button Icon from the Font Awesome icon.
  • Style – From Style you can pick color for Background image or Color, Overlay Color for Images, Title, Button and Button Hover color.

Newsletter-section-Portfoliolite

Blog Section

  • Go to Appearance > Customize > Frontpage Sections > Blog. . Add section heading, subheading, post category (select category to display post category wise) and No. of post to show on homepage.
  • Style – From Style you can pick color for Background Color, Overlay Color for Images,Heading, sub heading and Columns color.

blog-section-portfoliolite

Section ON/OFF

  • Section ON/OFF : Disable or Enable home page sections according to your requirement by checking the box.
  • Animation on/off option : This option allow to disable or enable home page section item fly-in animation.

section-on-off-portfoliolite

Contact Section

  • Go to Appearance > Customize > Footer Settings .
  • Email Detail: Go to the (https://fontawesome.io/icons/), copy desired icon name and paste it in the FontAwesome icon field. After that add your mail ID which you want to display at home.
  • Address Detail: Go to the (https://fontawesome.io/icons/), copy desired icon name and paste it in the FontAwesome icon field. After that add your address which you want to display at home.
  • Contact Detail: Go to the (https://fontawesome.io/icons/), copy desired icon name and paste it in the FontAwesome icon field. After that add your contact number which you want to display at home.
  • Footer Logo – To display any heading in the footer use this option. By default site title will display.
  • Copyright Text – Use this option to add copyright text in the footer bottom.

Color Options

  • Here you can change the color of overall footer area and its elements. You can pick color for footer background, Footer Copyright Background Color, footer text color and footer anchor color.

Typography

  • Go to Appearance > Customize > Typography. .
  • You can add typography on your site. Here multiple Google font families are available.
  • Font subsets – You can use multiple font subsets for your site.
  • Body – Choose Font family for body of site. Adjust the font size, line height and letter spacing.
  • Content – You can typography for headings.
  • Heading (H1) – This will be applicable for all h1 heading like page title, product title in single page. Choose font family and adjust the font size, line height & letter spacing.
  • Heading (H2) – This will be applicable for all h2 heading like slider heading, section heading. Choose font family and adjust the font size, line height & letter spacing.
  • Heading (H3) – This will be applicable for all h3 heading like product title, blog title. Choose font family and adjust the font size, line height & letter spacing.
  • Heading 4 (H4) – This will be applicable for all h4 heading like footer widget title, sidebar widget title. Choose font family and adjust the font size, line height & letter spacing.
  • Heading 5 (H5) – This will be applicable for all h5 heading. Choose font family and adjust the font size, line height & letter spacing.
  • Heading 6 (H6) – This will be applicable for all h6 heading. Choose font family and adjust the font size, line height & letter spacing.

typography-portfoliolite

Global Color

  • Go to Appearance > Customize > Global Color. .
  • You can pick the Background color and theme color for overall site.

global-color-portfoliolite

For more information you can contact our support team at support forum.