SUPAR ver 1.0

Multipurpose Landing Page Template

Created March 2017

Latest Updated March 2017

By Works of Wisnu and Slari Studio


1. Structure

All files and folders are well organized..

File structure

2. Header and Nav menu

Header and Nav

2.1 Logo

Above is the screenshot of the header section, your logo will be placed inside a link with .logo-link class. Basically you just need to adjust the image source into your logo files path. There's an attribute called srcset, this used to call the retina size of your logo. Further info about this attribute here.

2.2 Nav Menu

Currently supar has one type of navigation menu, it's a fixed top menu. In .navbar-nav list, if you want to have a "scrolling-to-any" link menu, you need to include the link containing section id and don't forget to add scroll-to class to the link. That will scroll to the id of your element/section when you clicked. Otherwise, if you want to have external page link, just create a link without scroll-to class.

3. Backgrounds

By default Supar has white (#fff) body background color. But there are two custom backgrounds you could use for your section.

3.1 Special Classes for Background

Sky Color and No Background

Apply sky-bg to your section class to change the background color into sky blue. And apply no-bg class to get rid of any background image.

3.2 Color Overlay Background

Color Overlay

These classes uses to create overlay above your background/section. To Use it, apply the class on a div right under your section/elements you want. See the screen shot below for example:

Color Overlay Example

3.3 Parallax Background

Supar use Simple Parallax Scrolling js by PixelCog Inc.

To easily add a parallax effect behind an element, add data-parallax="scroll" to the element you want to use, and specify an image with data-image-src="/path/to/image.jpg". See the screen shot below for example:

Parallax Background

4. Column and Content

4.1 Full Width (Full Block) Column

To create a full width column section, change the div class container into container-fluid. And don't forget to add class no-padding to your section. See the screen shot below for example:

Full Width (Full Block) Column

4.2 Vertical Align Content

To make vertically aligned content like Hero section you need to add display-table class to your column div and then create/add div class display-table-cell to wrap your content. See the screen shot below for example:

Vertical Align Content

5. Forms

5.1 MailChimp Subscribe

Supar has integrated with MailChimp service subscribe form using jQuery Ajaxchimp. From Supar existing layout, you can see the example of this form on the Software layout.

5.1.1 How to connect to my mailchimp list?

Open main.js file and find the 7. AJAXCHIMP section, replace the URL with your own mailchimp post URL

Ajax Chimp
5.1.2 How to find my mailchimp post URL?

Just login to your Mailchimp account, go to your list or create a new one, head to the Signup Forms menu, select Embedded Form. There you will find "Copy/paste onto your site" section, find the URL inside form action="".

Mailchimp URL

5.2 Sign Up Form

Another subscribe-like form but this one uses custom PHP function to send user's data to your email. From Supar existing layout, you can see the example of this form on the default layout at Sign Up section.

To adjust the recipient email address (your email) please open signup.php file inside PHP folder. Change the value into your valid email address.

Sign Up Form Code

5.3 Contact Form

Supar has separated-page contact form, that is in the Contact Page layout. The form use contact.php to send the message to your email, to adjust the recipient email address (your email) please change the value into your valid email address.

Contact Form Email Address
5.3.1 How to adjust the form and Recaptcha plugin

To adjust the form to meet what you need, you can edit the name, and placeholder of an input. Below is a screenshot of the existing contact form:

Contact Form Code

From the screenshot above, you can see the highlighted code is the site key that you need to run Google Recaptcha V2 plugin on your site. Replace the data-sitekey to your own key, you can generate it from Google reCaptcha website here.

5.3.2 Contact Form Validation

Before the contact message sent, it needs to be validated to check whether all required fields have been filled correctly. To adjust the validation process, please open the main.js file and head to section number 5, Contact Form Validation. You will find some validation code like this:

Contact Form Validation

Variables inside the rules are the value of name attribute of your contact form's input.

6. PayPal Integration

Please take a look at the current PayPal form code below along with the variables description (taken from E-Course layout):

PayPal Form Code
  1. business variable: your PayPal ID or an email address associated with your PayPal account.
  2. cmd variable: a cmd with _xclick value indicates that the button was a Buy Now button.
  3. lc variable: the locale of the checkout login or sign-up page. Learn more.
  4. item_name variable: description of item. If this variable is omitted, buyers enter their own name during checkout
  5. amount variable: the price or amount of the product.
  6. no_note variable: do not prompt buyers to include a note with their payments. The value of 1 is hide the text box and the prompt.
  7. currency_code variable: the currency of the payment. The default is USD.
  8. bn variable: an identifier of the source that built the code for the button that the buyer clicked, sometimes known as the build notation. Specify a value using the following format: Company_Service_Product_Country
  9. return variable: the URL to which PayPal redirects buyers' browser after they complete their payments.

For further information about the variable, please visit the PayPal official documentation here.

6.1 Setup PayPal notification emails

7. JavaScripts

Below is the list of jQuery plugins used in Supar template. Visit their website to find more documentation:

  • jQuery
  • Slick - Carousel plugin, used in testimonial slider.
  • Waypoints - trigger a function when you scroll to an element, used in counter up element
  • countTo - jQuery plugin that will count up (or down) to a target number at a specified speed, used in counter up element
  • Swipebox - lightbox plugin, used in Video embed lightbox
  • Validation Plugin - makes simple clientside form validation, used in sign up and contact form.
  • Ajaxchimp - Mailchimp integration plugin, used in subscribe form.
  • Parallax - create parallax background image

8. Credits

I've used the following images, icons or other files as listed. *for demo only

That's all! Please let me know if I missed something here :)

Thanks for reading. I'd be glad to help you if you have any questions relating to this template. No guarantees, but I'll do my best to assist. You can send me a message from my ThemeForest Profile to get in touch and discuss about this template or maybe possibility to work with you. If you have a more general question relating to the item on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.