iPageMaker Builder - Help Documentation

Overview

Builder is JavaScript utility tool which allow to customize HTML template quick and easy. Builder gives freedom to basic content editing, basic styling options, image changes, section base HTML code editing and many other editing options.

What it's not (!) 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.


Features


Drag and drop

HTML Builder allow 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.



Content editing

The HTML Builder script can also be used to edit written content inside each element (simply by setting the "building mode" to "content"). 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.

image



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.



Link editing

The HTML Builder script allows user to edit links as well. To be able to edit links. To edit links on the canvas, firstly select the Details building mode, this will allow you to select links. When selected, a "link" tab will be visible in the left panel, allowing you to either choose a page to link to or enter a URL manually.

Linking within a single page

When building a one-page website, you might want to link to sections within a single page rather then to a separate page. To do this, simply edit the link and use the second dropdown to choose the block you'd like to link to. The ID's to which can be linked, have to be configured within the block HTML files, and the ID attribute should be assigned to the first child element of the main container (for an example, please have a look at any of the bundled block files).

image



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.

image



Video editing

HTML Builder allows users to edit Youtube and Vimeo videos as well. To edit a video, switch to "Details Mode" and click the video you'd want to edit. This will open the left sidebar panel where you can enter a Youtube video ID or a Vimeo video ID. You can alter between these as you please, the application will detect which platform you're using and update the video accordingly.

image



Icon editing

The HTML Builder script allows user to edit icons as well. To edit icons on the canvas, firstly select the Details building mode, this will allow you to select icons. When selected, a "icon" tab will be visible in the left panel, allowing you to choose any item from the icon collection.

image



Cloning items

All editable items 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.

image



Export HTML

Whenever the user is happy with the final result, the created markup can be exported by click the export button. When you click on export button meta info pop up open that allow user to add meta information for page than export feature will grab all the used HTML elements for each created page and inserts these elements into a copy of the HTML skeleton file. 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 can be downloaded by the end user for a value fee of $19.99 / per ipage(s).

image

image



Pages

The HTML Builder script allows users to create multiple pages at once. To add a new page, simply click the button labeled "+ Add" just below the current pages list. You can alter the page names as well (please use names with 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.

image

Customization #back to top

Landing pages have many tricky option to customize it very quickly with few tricky codes. Refer below help to get overview of all customization options included with package.

Background

Set data-bg="images/bg1.jpg" attribute to apply background image on any section. Below is example of code.

1
2
3
4
5
<!-- Intro -->
<section class="intro-section intro-section-1" data-bg="images/bg10.png">
...
</section>

Main CSS file include few utility classes to manage background images.

  • bg-fixed : Apply background position fixed on container with no repeat
  • bg-cover : Apply background size cover with no repeat
  • bg-contain : Apply background size contain with no repeat
  • bg-cc : Apply background alignment center center
  • bg-ct : Apply background alignment center top
  • bg-cb : Apply background alignment center bottom
  • bg-lt : Apply background alignment left top
  • bg-lc : Apply background alignment left center
  • bg-lb : Apply background alignment left bottom
  • bg-rt : Apply background alignment right top
  • bg-rc : Apply background alignment right center
  • bg-rb : Apply background alignment right bottom
  • bg-gray & bg-gray1 : Apply gray background on section


Navigation

Change container class to container-fluid to make full width navigation instead of boxed

1
2
3
4
<nav class="nav-wrp nav-1">
    <div class="container-fluid"> ... </div>
</nav>

Apply data-glass="y" attribute for transparent navigation. Main CSS file include CSS classes to set navigation transparent color. Use CSS class glass-01 to glass-09 along with "nav-wrp" in below code.

1
2
3
4
<nav class="nav-wrp nav-1" data-glass="y">
    <div class="container"> ... </div>
</nav>

Apply data-above="y" attribute to display navigation above intro but not to set as sticky with page scroll

1
2
3
4
<nav class="nav-wrp nav-1" data-above="y">
    <div class="container"> ... </div>
</nav>

Apply data-sticky="y" to make navigation sticky on page scroll. Sticky navigation will not work with data-above="y"

1
2
3
4
<nav class="nav-wrp nav-1" data-sticky="y">
    <div class="container"> ... </div>
</nav>

Apply data-hide="y" to hide navigation by default and only display on page scroll. this option require data-sticky="y" otherwise it will not work properly.

1
2
3
4
<nav class="nav-wrp nav-1" data-sticky="y" data-hide="y">
    <div class="container"> ... </div>
</nav>


CSS helper classes

  • full-wh : Class apply full width and height of any absolute block
  • txt-upper : Class make all text in uppercase
  • txt-lower : Class make all text in lowercase
  • txt-capi : Class make all text in capitalize
  • cm-item : Class make object center middle using transform CSS3 property
  • vm-item : Class make object vertical middle using transform CSS3 property
  • align-r : Class apply text align right
  • align-c : Class apply text align center
  • pd-tb-10 class apply top and bottom padding with 10px. Same as you can apply padding range 10 to 100. Example : pd-tb-20, pd-tb-30, pd-tb-40 ...
  • mr-tb-10 class apply top and bottom margin with 10px. Same as you can apply margin range 10 to 100. Example : mr-tb-20, mr-tb-30, mr-tb-40 ...
  • mr-t-10 class apply only top margin with 10px. Same as you can apply margin range 10 to 100. Example : mr-t-20, mr-t-30, mr-t-40 ...
  • mr-b-10 class apply only bottom margin with 10px. Same as you can apply margin range 10 to 100. Example : mr-b-20, mr-b-30, mr-b-40 ...
  • w-100 Class apply full 100% of width, w-75 Class apply 75% of width and w-50 apply 50% of width.


Slider structure

Below is basic overview of slider structure with available slider options which is used in landing pages.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="carousel-widget ctrl-1" data-items="1" data-itemrange="false" data-tdrag="false" data-mdrag="false" data-pdrag="false" data-autoplay="true" data-loop="true" data-nav="true">
    <div class="owl-carousel">
         
        <!-- Slider item -->
        <div class="item">
            ADD SLIDER CONTENT HERE ...
        </div>
         
        <!-- Slider item -->
        <div class="item">
            ...
        </div>
 
    </div>
</div>
  • data-center="false" : Default value false, Display item center align.
  • data-stpd="0" : Default value 0, Padding around slider wrapper.
  • data-items="5" : Default value 5, Number of items to display in row.
  • data-margin="0" : Default value 0, Space between items.
  • data-nav="false" : Default value false, Navigation arrows.
  • data-pager="false" : Default value false, Pagination dots.
  • data-itemrange="0,1|420,2|600,3|768,3|980,4" : Items display in responsive screens.
  • data-out="fadeOut" : Default value 'fadeOut', Set false to apply slide default animation, Animate CSS class value
  • data-in="fadeIn" : Default value 'fadeIn', Set false to apply slide default animation, Animate CSS class value
  • data-autoplay="false": Default value false, Auto play slider.
  • data-timeout="3000": Default value 3000, Slier interval.
  • data-hstop="true": Default value true, Stop auto play slider on mouse hover.
  • data-loop="false": Default value false


Video pop up

Use below code to open video in pop up using link. Add video URL in href="..YOUTUBE VIDEO URL.."

1
2
3
4
<a href="https://www.youtube.com/watch?v=hpeYWdkUtcE" class="video-popup">
    <i class="fa fa-play-circle-o"></i> Button name
</a>


Video background

Video background gives option to display youtube video as in background of section. Refer code below to get more overview of settings.

1
2
3
4
5
6
<div class="bg-section bg-cover bg-cc full-wh" id="videobg1" data-bg="images/bg7.jpg">
    <b class="full-wh"></b>
    <!-- BACKGROUND VIDEO -->
    <div class="videobg" data-property="{videoURL:'dorZ3vag5PI',containment:'#videobg1',showControls:true, autoPlay:true, loop:true, vol:50, mute:true, startAt:10, realfullscreen:false, opacity:1, addRaster:true, quality:'default', optimizeDisplay:true}"></div>
</div>

Apply ID to section on which video background needs to display, Set data-bg="images/bg7.jpg" background image which display as placeholder of video.

Set youtube video ID in videoURL:'dorZ3vag5PI' as display in above code. Apply section ID in containment:'#videobg1' as display in above highlighted code. Make sure your section ID properly set on containment.



Blur background

Apply data-blurimg="images/bg4.jpg" to set blur background on section. overflow: hidden; CSS property require on parent of blur background

1
2
3
4
5
<section class="other-section other-section-1">
    ...
    <div class="full-wh bg-section bg-cover" data-blurimg="images/bg4.jpg"></div>
</section>


Background slider

Set slider images in data-bgslider="images/1.jpg|images/2.jpg...." attribute as display in below example code. Do not put blank space between image path string.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<section class="intro-section">
    <div class="container">
        ...
    </div>
     
    <!-- Background slider -->
    <div class="bg-section full-wh">
        <div class="bgslider" data-bgslider="images/medical_01.jpg|images/medical_02.jpg|images/medical_03.jpg|images/medical_04.jpg|images/medical_05.jpg"></div>
    </div>
    <!-- Background slider -->
 
    <b class="full-wh overlay"></b>
</section>


Accordion

Below is example of accordion section which is used in some of sections in landing pages.

image

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<div class="panel-group" id="accordion" role="tablist">
     
    <!-- panel -->
    <div class="panel">
        <div class="panel-hd">
            <a role="tab" data-toggle="collapse" data-parent="#accordion" href="#collapse-1" aria-expanded="true">
                TITLE OF PANEL
                <i class="panel-open fa fa-plus-circle"></i><i class="panel-close fa fa-minus-circle"></i>
            </a>
        </div>
        <div id="collapse-1" class="panel-collapse collapse in" role="tabpanel">
            <div class="panel-body">
                ... COTNENT OF PANEL ...
            </div>
        </div>
    </div><!-- /.panel -->
     
    <!-- panel -->
    <div class="panel">
        <div class="panel-hd">
            <a role="tab" class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse-2" aria-expanded="true">
                ....
                <i class="panel-open fa fa-plus-circle"></i><i class="panel-close fa fa-minus-circle"></i>
            </a>
        </div>
        <div id="collapse-2" class="panel-collapse collapse" role="tabpanel">
            <div class="panel-body">
                ...
            </div>
        </div>
    </div><!-- /.panel -->
     
</div>

Apply ID on main parent element as display in line no.1.

Use that parent element ID in data-parent="#accordion" attribute as display in above code line no.6

Apply ID on all panels as display in above code line no.11. Use that ID in href="#collapse-1" as display on line no.6



Portfolio pop up gallery

Below is portfolio pop up gallery code example. Apply popgallery-widget class as display in below code example highlighted line no. 5. It is javascript hook to apply pop up on thumb images.

image

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!-- Portfolio section -->
<section class="portfolio-section portfolio-section-2">
    <div class="container">
        ...
        <ul class="rw eq3 mb10 gt10 popgallery-widget">
 
            <li class="cl">
                <div class="portfolio-box portfolio-box1">
                    <div class="overlay">
                        <a href="images/800x800_1.jpg" title="This is title of image" class="pop-img"><i class="fa fa-search"></i></a>
                        <div class="caption">
                            <h3 class="hd">Consetetur sadipscing</h3>
                            <p class="txt">Lorem ipsum dolor sit amet</p>
                        </div>
                    </div><!-- /.overlay -->
                    <img src="images/800x800_1.jpg" alt="image" >
                </div><!-- /.portfolio-box -->
            </li><!-- /.cl -->
             
            <li class="cl">
            ...
            </li><!-- /.cl -->
             
        </ul><!-- /.rw -->
    </div>
</section>
<!-- / Portfolio section -->

Set large pop up image path on href="images/800x800_1.jpg" and title="..." as display on line no. 10

Add caption details which display on hover of thumb image as display on line no. 12 & 13

Set thumb image as display on line no. 16



Other section gallery

Below is example of other section gallery code.

image

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!-- Other section -->
<section class="other-section other-section-1">
    <div class="container">
         
        <div class="row eqh">
            <div class="col-md-5 l">
                <ol>
                    <li class="active" data-img="images/medical_800x800_01.jpg">
                        <div class="icon-wrp"><i class="fa fa-object-group"></i></div>
                        <div class="info">
                            <h4 class="hd">TITLE TEXT</h4>
                            ... DESCRIPTION ...
                        </div>
                    </li>
                    <li data-img="images/medical_800x800_02.jpg">
                        ...
                    </li>
                    <li data-img="images/medical_800x800_02.jpg">
                        ...
                    </li>
                </ol>
            </div><!-- /.col-md-5 -->
            <div class="col-md-7 r">
                <img src="images/medical_800x800_01.jpg" alt="Image" class="img-responsive vm-item">
            </div><!-- /.col-md-6 -->
 
        </div>
    </div><!-- /.container -->
    <div class="full-wh bg-section bg-cover" data-blurimg="images/bg11.jpg"><b class="full-wh"></b></div>
</section><!-- /.other-section -->

Set data-img="images/01.jpg" attribute as display on above code line no.8

Apply icon class on i as display on above code line no.9

Add TITLE and DESCRIPTION text as display on above code line no. 11 & 12

Set default active image as on line.24 of above code



Other section tabs

Below is example of other section steps code.

image

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!-- Other section -->
<section class="other-section other-section-2">
    <div class="container">
        <div id="step1-1" class="tab-pn">
            <h2 class="title">Step 1 : Title...</h2>
            <p class="title-sub">
                ... DESCRIPTION TEXT ...
            </p>
        </div>
 
        <div id="step1-2" class="tab-pn">
            <h2 class="title">Step 1 : Title...</h2>
            <p class="title-sub">
                ... DESCRIPTION TEXT ...
            </p>
        </div>
 
        <div id="step1-3" class="tab-pn">
            ...
        </div>
         
        <hr class="mr-tb-50">
         
        <ul class="tab-widget">
            <li><a href="#" data-tb="#step1-1" class="active"><i>1</i></a></li>
            <li><hr></li>
            <li><a href="#" data-tb="#step1-2"><i>2</i></a></li>
            <li><hr></li>
            <li><a href="#" data-tb="#step1-3"><i>3</i></a></li>
        </ul>
 
    </div><!-- /.container -->
</section><!-- /.other-section -->

Apply ID on all tab-pn as display in line no.4, 11 and 18

Than use all ID in data-tb="#step1-1" attribute for each tabs as display on line no.25, 27 and 29

Add TITLE and DESCRIPTION text as display on above code example line no.5 and 7