Car Service Documentation

Current Version: 3.0

Getting Started

Thank you very much for purchasing my template. I have prepared an user-friendly documentation to help you quickly customize Car Service.

If you have any questions that aren’t covered in this documentation, look online documentation or please create ticket here https://numberone.ticksy.com/ i can provide more detailed support. You can wright on english and russian language!

Thanks so much!


Requirements

For installing this template you need to make sure that you have the following extensions on your webserver. You will need to contact your webhost if the following requirements are missing:

  • PHP 5.2+;
  • Apache webserver (For the Page Builder Windows servers will probably work, but are not supported)
  • PHP Mail support;
  • Enabling JavaScript in the web browser.

To be able to edit and upload the theme you need also:


Installation

Unzip the downloaded files to the local disk on your computer. Inside the extracted folder there will be a folder with documentation, a folder with the html templates and a folder with the builder. Choose pages which you will use in project and copy all the content related to the layout that interests you to your server via FTP client.

Note. In this archive the images that you can see in demo pages were replaced by a placeholder.

Page Builder

HTML Builder is a Javascript script which allows users to customise HTML templates in a quick and easy way. HTML Builder allows basic content editing, allowing users to changes link text, headers and other written content.

HTML Builder runs (almost) entirely in the browser. The only server side code is in the form of a single PHP file used for exporting HTML markup.

HTML Builder is NOT a CMS (content management system). It does not provide a way for end-users to work on live websites and make changes to such websites.

Installation

Installing the HTML Builder is simply a matter uploading the script files to a local server/hosting account. Once uploaded, point your browser to builder's directory and the builder will work.
For example: www.yoursite.com/builder/ or localhost:8888/builder/ (if you run it locally on your local server environment).

Don't upload the .zip file you downloaded from themeforest directly to your server, first unzip it, then upload the folder "Builder" which is inside it.

Builder Features

Drag and drop

HTML Builder allows users to drag HTML elements onto a canvas and drop them where they'd like them to appear. Once dropped onto the canvas, the position can be changed by dragging and dropping as well. Elements can be delete individually or all elements on the current page can be deleted in one go.

Look guade how worko with page builder and creat landing page in 5 minues
Content Editing

The HTML Builder script can also be used to edit written content inside each element . HTML Builder uses a rich text editor, allowing to make changes to the written content. Depending on what type of element you're editing, certain options will be disabled in the editor. Editable text elements will need to be configured through "/js/builder.js", and depending on the exact configuration, certain text elements might not be editable.

Style/detail editing

The HTML Builder script also allows for basic CSS editing and link editing. Using the built-in CSS editor, end-users can customise whatever CSS attributes the script's admin has configured. When editing a link, the end-user can point the link to either an internal page or an (external) URL.

Image editing

The HTML Builder script allows user to edit images as well. To edit images on the canvas, firstly select the Details building mode, this will allow you to select images. When selected, a "image" tab will be visible in the left panel, allowing you to either upload an image or enter a URL manually.
- To change the image, input new image url inside url(), for example: url(yourdomain.com/image.png)

Cloning Items

Items which have been setup in the "editableItems" array in /js/builder.js can be cloned. Switch to "Details" building mode, select the item which you want to clone and finally click the clone button from the left panel. Please note that cloned items will be inserted into the canvas right next to the original item.


Export HTML - Video Manual

Whenever the user is happy with the final result, the created markup can be exported by click the blue export button. The export feature will grab all the used HTML elements for each created page. Once all pages are completed, all the HTML files are bundled into a ZIP archive together with the other external resources like stylesheets, Javascript files and images which will be downloaded by the end user.


Pages

The HTML Builder script allows users to create multiple pages at once. To add a new page, simply click the green button labeled "+ Add" just below the current pages list. You can alter the page names as well (please use names without the .html extension, these are added automatically during the export). When exporting the markup, the pages will use the same names. To delete a page, simply click the little delete icon next to the page you'd like to delete.


Contact Form

After exporting the site to change the e-mail address to which the application comes, you need to open the files

php/contact-attachment.php php/contact-full-function.php php/contact-lite-function.php php/contact.php

and change $to_email = "you-email" you-email


or in order for the export to be initial with the desired email open builder/elements/php

contact-attachment.php contact-full-function.php contact-lite-function.php contact.php

and change $to_email = "you-email" you-email


if you use HTML version open

contact-attachment.php contact-full-function.php contact-lite-function.php contact.php

and change $to_email = "you-email" you-email


Elements

Icons Pack

Car Service uses a FontAwesome Icons. Using these icon packs is a simple matter of knowing the correct class to use.

Icons use the 'i' element and each have their own unique class which dictates which glyph is shown. For a full list of available classes, see the links provided above.

                                    
<i class="icon-rocket"></i>
                                    
                                

This code would result in the Rocket icon.


Colour Schemes

Using HTML Builder, you can change the colour scheme simply by clicking on Background or on the Button and selecting your desired scheme from the swatches on the sidebar.


Credits

Images used in the demo are from:


Support

We truly appreciate that you've chosen Car Service. Customer satisfaction is our priority and we understand that sometimes you need help. We provide friendly and helpful support so don't hesitate to ask!