GoByte Documentation: Home Page

Thank you for downloading Apperle Template

Please find the full documentation of the template

I would be very grateful if you could rate my item at this link with 5 stars and leave your feedback, this is very important for me, Thanks! :-)

If you have any questions, feel free to email me via my user page with the contact form Here
I try to answer as soon as possible!
During your customization, I advise you to be connected to Internet for the correct running of jQuery
All the lines of style written in this document are the lines of the CSS files. The line numbers for the SASS users are almost the same, thanks for your comprehension.


Getting Started

How To Start :

Step 1 - Unzip The Template File.

Step 2 - Install Code Editor Like Brackets Or Sublime Text.

Step 3 - Open The Project In The Code Editor.

Step 4 - Open Index.html on your web browser to see your website

Installation

How To Install PURE Via FTP :

Step 1 - For faster load times it is recommended to minify your files after you customize them.
You can minify your css files Here
Minify html file Here
Minify Javascript files Here
Optimize Your images Here

Step 2 - Log into your hosting space via an FTP software (Filezilla for example).

Step 3 - Unzip your Download Pack file and open the extracted PURE template folder.

Step 4 - Upload the HTML file corresponding to the variant of your choice along with all directories (css,js,php,img) in the structure that they appear in your download package. Then, the HTML file should reside in the root directory, and all other files should reside inside their associated folder.

Fonts

This template uses google fonts, you can change the fonts for the paragraph or the headings

Step 1 - Go to google fonts Here and find a font you like.

Step 2 - Change lines 38 for paragraphs and line 48 for the headers in the styles.css OR styles.scss files

Icons

This template uses Font Awesome Icons, you can change any of the icons.

Step 1 - Go to Font Awesome Here and find an icon you like but make sure to leave any extra classes you find in the Index.html file.

Step 2 - Change the icon in the Index.html file

Colors

Step 1 - Go to style#.css in css/color folder where # is the number of the style color you like and copy the styles as shown in image 1

Step 2 - Go to styles.css and styles-animated.css files you are using and find these lines and replace them with the ones you copied as shown in image 2

Step 2 - Change the icon in the Index.html file

Nav Bar

There are two navbars in this template the top navbar and side navbar
You will need to change both of them in Index.html file

Logo And Name

To Change website Logo and Name

Step 1 - Open Index.html file and change the main nav bar logo and name

Step 2 - Change the Side nav logo and name

Links

To Change website top Links Names

Step 1 - Open Index.html file and change the main nav bar Links

Step 2 - Change the Side nav Links

Dropdown Links

To Change Dropdown Links

Step 1 for Top navbar - Open Index.html file and change the menu name as shown in first image

Step 2 for Top navbar - Change the dropdown links you will find them at the end of the ul tag

Step 3 for side navbar - Change the links names for the sidenav as highlighted in the image

Social Icons

To Change the Social Icons

Step 1 for Top navbar - In Index.html file Change the Icon class using Font Awesome and change the href link to point to your website

Make Sure Don't remove any extra classes you find in the Index.html file

Step 3 for side navbar

Header

App Name

We are using an image as the app name

Step 1 for Top navbar - In Index.html file Change the Image, the Paragraph and the slogan

Mobile Image

This slider is handled by owl carousel in main.js file
There is three slides for the header section, you add more by adding extra img element

Step 1 - In Index.html file Change the Image src as highlighted - Recommended size is 300 x 609

Count Down

To use the Count Down in your demo first change the time to your dead line in main.js file as shown in firts image

To use the count down in any other demo just copy the code in second image from index-cd.html file to the index file you want to use

Features

Features has 6 slides, it is not recommended to add more slides.

This is handled by Owl Carousel in the main.js file

Slides Mobile Image

There is 3 slides change the mobile image for each

Step 1 - In Index.html file Change the Image src as highlighted - Recommended size is 717 x 1319 OR same ratio

Slides Text & Icons

Change Title, Text and Icon for 6 of them.

Step 1 - In Index.html file Change as highlighted

Showcase

Showcase has 3 sections.

Step 1 - In Index.html file Change the Text, Icon and Image src as highlighted - Recommended size is 470 x 470

Screenshots

Screenshots slideshow is controlled by materialize js library in main.js file

In main.js file you can change the perspective of images by changing dest
Or change the padding between the images by changing the padding
Or change the speed by changing the 3000ms on line 74 to any speed you like
Or stop the images from moving automatically by removing lines 72, 73, 74.

Step 1 - In Index.html file Change the Image src as highlighted - Recommended size is 717 x 1319 OR same ratio

There is two images path for the image and when user clicks on it it opens in full screen So be sure to change both paths

Testimonials, Teams & News

Testimonials, Teams & News are both controlled by owl carousal in main.js file

Please refer to the Owl website Here For more information

Download

Download has two sections the download links and the image
There is 3 slides change the mobile image for each

Step 1 - In Index.html file Change the Image src as highlighted - Recommended size is 717 x 1319 OR same ratio

Step 2 - In Index.html file Change the Text and the Link as highlighted

Video

Upload your video to youtube, and Change the link for the video as highlighted.

FAQs

Step 1 - In Index.html file Change the Image src as highlighted - Recommended size is 717 x 1319 OR same ratio

Step 2 - In Index.html file Change the Questions and Answers for FAQs and add more as you like.

Forms

There is two forms on the website, subscribe form and contact form

Both are handled in contact-form.js and contact.php

Subscribe Form

Subscription Form is handled by MailChimp, Please sign up Here There is a free plan

Step 1 - Create a free plan and get an API key and create a list and get List ID

Step 2 - Change the API key and List ID in contact.php file.

Contact Form

Contact Form is handled by contact.php and contact.js

Step 1 - Change Your email and the message you want to be sent to yourself in contact.php file

Step 2 - You can change the custom error messages that appears to the user while filling the form in contact.php file.

Footer

Map

The Map is handled by google maps in maps.js file

Step 1 - Replace your Google Maps API key index.html with the word 'YOUR API KEY' as highlighted.

Step 2 - Change your company's area longitude and latitude in maps.js file in line 14.

Step 3 - Change your company's exact position longitude and latitude in maps.js file in line 186 for the pin position on map.

Step 4 - Change your company's Address in maps.js file in line 193.

Contact Address

Step 1 - Change Your email, phone and address in Index.html file as highlighted

Instagram Feed

Instagram feed is handled by a plugin called spectragram find it Here

Step 1 - Sign up in Instagram apps and get an access token and client id for yourself Here is a good article to learn how.

Step 2 - Change the client id and access token in main.js as highlighted

Other Demos

Particles

Step 1 - To change how the particles look and behave go to Particles Website

Step 2 - Choose what you like for the particles, for its speed and shape and download the json file

Step 3 - Use the json file and replace the code in animated-main.js file from line 44

Parallax

Step 1 - To change the background go to index file and change the svg image as shown in first Image

Step 2 - To change how the background react and behave go to Parallax Website

Step 3 - Replace the code in animated-main.js file from line 35 as shown in second image

Snow

The particles is controlled by snow-bg-min.js file, don't change it yourself
instead ask a developer to un minify it and change particles color and behaviour

Video

Step 1 - To change the video on the background or unmute it or change its settings in animated-main.js file as highlighted

Interactive

Step 1 - This demo uses Marvel App Demos to display the interactive mobile

Step 2 - Head over to their website here and create your own slides and animations, using their documentation

Step 3 - Change the code in the index file as shown in the image and you can choose any smart phone other than iPhone X

Shiny Particles

The particles is controlled by animated1.js file, don't change it yourself
instead ask a developer to un minify it and change particles color and behaviour

Glee

The particles is controlled by animated2.js file, don't change it yourself
instead ask a developer to un minify it and change particles color and behaviour

Resources

Used Javascript and CSS Plugins

- jQuery V-3.2.1
- Materialize
- Animate On Scroll
- Animate.css
- Counter Up
- Owl Carousel
- Lity JS
- Scroll it
- Spectragram
- Match Height JS

Fonts and Icons

- Google Fonts
- Font Awesome
- UI Surf

Images

- Pexels