“Single Page Builder” Documentation by “Kubilay Bayraktar” v1.0


“Single Page Builder”

By: Kubilay Bayraktar

Thank you for purchasing my applicatiom.


Table of Contents

  1. About
  2. Navigation Type
  3. Preset Menu & Sections
  4. Custom Menu & Sections
  5. Font & Color Settings
  6. Change Layout
  7. Footer Type
  8. Added Controls
  9. Changing Image
  10. Changing Logo
  11. Download Index.html
  12. Used Libraries
  13. Source Code

About

This application lets you create web pages with many different variations by customizable tools. You don't need to know coding to create a web page with this application. Only thing you need to do is choosing the right control by clicking on it and then modify fields and controls to fulfill your needs.
Everything is in your hands. You can just prepare a single page application in just a few minutes.
Created web pages will have html,js,css and image files.

Since you will have all source code you can improve the application for better user experiences.

Page Builder has 2 buttons on the top of panel.


Here you can choose navigation menu style. Do you prefer menu to align left or align right? Do you want to put a logo on header or not?


There are plenty of menu & section choices here. You can add or remove any menu with their preset content.

Once you add a section from these items you will that a menu item is also added to the navigation bar. When you click on the item over navigation bar, it will scroll to added section.

  1. Add 'Home' Menu & Section
    With this option you can add Home menu and a preset home content. Home content is a slider with texts & images.
    You can change slider image. Click here to see how to change an image.
    You can update any text you see on the screen by clicking over it. It is just that simple.
    Same as text updates you can update button texts by clicking on buttons.

  2. Add 'Features' Menu & Section
    With this option you can add features of your product or service.
    You can change feature icons. Click here to see how to change an image.
    You can update feature titles and descriptions by clicking over it.
    Same as text updates you can update button texts by clicking on buttons.
    You can update button links by right clicking on the buttons as you can see from the image below
    Update Link

  3. Add 'Screenshots' Menu & Section
    With this option you can add screenshots of your product or service.
    Once you click on images here you will see that images will open in a lightbox.
    If you want to change images you can refer to here.
    Every screenshot has a title and description.You can update them all with your texts.
    Image with Lightbox

  4. Add 'How It Works' Menu & Section
    With this option you can add specify steps of how to run your product/service.
    If you want to change images you can refer to here.
    Every step has a title and description.You can update them all with your texts.

  5. Add 'Pricing' Menu & Section
    With this option you can add pricing page for your product/service.
    You can update all texts including button texts. Also you can update button redirect urls by right clicking on the buttons.

  6. Add 'Faq' Menu & Section
    With this option you can add FAQ your product/service.
    Update section names and descriptions with texts covering your product/service.

  7. Add 'Our Team' Menu & Section
    With this option you can add your team members to the page.
    You can update images and names and bios with your data.
    Also you can update social media links by right clicking over them.

  8. Add 'Contact' Menu & Section
    With this option you can add a contact from to the page.
    You can update description and button text.

  9. Add 'Testimonials' Menu & Section
    With this option you can add a testimonials section to the page.
    You can update image, description and names.

  10. Add 'Promo Box' Menu & Section
    With this option you can add a promo section to the page.
    Update all text with yours.


Custom Menu & Sections - top

In this section you can add these controls as much as you want. You can add same controls over and over again. So that, you have a great flexibility creating a page.

  1. Add Custom Menu
    With this option you can add a custom menu item into the navigation bar.
    But before adding a custom menu you may want to add sections in the page. So that, while you are adding a new menu item you can match that menu item with a page section.
    When you click "Add Custom Menu" a modal will open. You can enter menu name and then select a page control from the list. After you clicked ok, and then click new menu item from the navigation bar, you will that it will scroll to the selected control.
    Custom Menu

  2. Add Header 1
    If you want to add a big header you can choose this option. This is the bigeest header you can add.
    You can add this header as many as you want.
    After you have added this header you can edit text with yours.

  3. Add Header 2
    Header 2 is smaller than header 1.
    You can add this header as many as you want.

  4. Add Header 3
    Header 3 is smaller than header 2.
    You can add this header as many as you want.

  5. Add Header 4
    Header 4 is smaller than header 3.
    You can add this header as many as you want.

  6. Add Paragraph
    This will add a paragraph with dummy text.
    Add as many as paragraph whenever you want.

  7. Add 2 Columns Text
    This will add two columns with text. Add any time whenever is needed.

  8. Add 3 Columns Text
    This will add three columns with text. Add any time whenever is needed.

  9. Add 4 Columns Text
    This will add two columns with text. Add any time whenever is needed.

  10. Add 2 Columns Text & Image L
    This will add two columns. Left column will have an image. Right column will have a text. You can change image by clicking over it.

  11. Add 2 Columns Text & Image R
    This will add two columns. Right column will have an image. Left column will have a text. You can change image by clicking over it.

  12. Add 2 Columns Images
    This will add two columns with images.

  13. Add Spacing
    This will add a spacing between controls.

  14. Add Block Quote
    This will add a block quote in page.

  15. Add Ordered List
    This will add an ordered list, you can add/remove list items.

  16. Add UnOrdered List
    This will add a bullet list, you can add/remove list items.

  17. Add Tab Control
    This will add a tab control on the page. You can rename tabs and update tab contents.
    You can see that there is also a Tab Manager section just under the tab control. Here you can add or remove tabs.
    Tab Control

  18. Add Accordion Control
    This will add an accordion control on the page. You can rename tabs and update tab contents.
    You can see that there is also a Accordion Manager section just under the accordion control. Here you can add or remove tabs.
    Accordion Control

  19. Add Toggle Control
    This will add a toggle control on the page.Once you clicked on the menu name you will that content section will be shown or hidden.

  20. Add Image Gallery Control
    This will add an image gallery with 4 images. If you want to show more images the you can click more on this option.
    You can update images with the button below under images.
    If you click over the images you will see image in the lightbox.

  21. Add Table
    This will add a flexible table control on the page. Default 3 columns and 6 rows table will be added.
    But you will see a table manager just under the control. With this manager buttons you can add more rows and columns and also you can remove latest row or column.
    So that you can create a table which perfectly matches your needs.

  22. Add Form
    This will add a flexible form control on the page.
    But you will see a form manager just under the control.
    Form Manager lets you remove all form controls within the form.
    Form Manager lets you add as many as text input into the form.
    Form Manager lets you add email input into the form.
    Form Manager lets you add as many as textarea input into the form.
    Form Manager lets you update action url of the submit button.
    So that you can create a form which perfectly matches your needs.
    Form Control


Font & Color Settings - top

In this section you can update header,paragpah & body fonts. You can change button background images or heading font colors.

Once you click on an option you will see the reflection imeddiately on the page editor screen.


Change Layout - top

In this section you can switch layout between full width or boxed view.


In this section you can select footer style from standard or large bars.


Added Controls - top

In this section you can see the list of added controls on the page.

You will see the section name & ids.

You can remove any control from this list by clicking red delete icon.

Also you can scroll to any element on this list by clicking over it.


Changing Image - top

Changing image is very easy. First of all copy your image file.

Then paste this image into the this application images folder which is Html_Page_Builder\images folder.

Copy Image File

Then click on the image you want to change on the page builder screen.

Click on Image

After you click Change Image menu , a popup will be shown. You will see the path of current image in the input control. Since you have pasted you image in the images folder you just need to update image file name with extension in the input field. And then when you click OK button you image will be shown in the editor screen.

Update Image Path

You have now updated image with yours.


Changing logo is very simple.

In the application root folder click on images folder.

You will see there are two image files with the name logo.png and logo_white.png

All you need to do creating a colored and a white version of your logo.

Give you logo with the same name of these files.

Copy and paste your logo files into the images folder and you are all done.

Update Logo

Download Index.html - top

It is time to build your page.

First download index.html which you build by page builder.

Then copy this downloaded index.html into the root folder of PAge Builder application.

And you are all set. Double click on the index.html and you will see the page you have built.

You can upload all files to any server and your website can be published immediately.

Created Index

Used Libraries - top

There are plently of great javascript libraries.

Here are the ones I have used.


Source Code - top



Once again, thank you so much for purchasing this applciation. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Kubilay Bayraktar

Go To Table of Contents