How to use documentation

We have been using our builder software for our business, charging clients between USD $295 - $1500

Members can create Landing pages, Facebook Shops, Google Adwords Landing Pages, One Page Websites and more. We decided promote and let anyone make money anywhere in the world using our simply drop & drag online website creator. Create unlimited websites and host your self or upload to your clients website hosting or sub domains.

PHB offers  a professional drop and drag html builder to create unlimited web variations from one page websites, google Adword landing pages, facebook stores, payment landing pages and more.

 

HTML Page Builder

HTML Builder is a nifty little Javascript application which allows end-users to easily compose custom HTML designs using pre-defined HTML elements. The HTML Builder script comes with several sample HTML elements (the ones as displayed in the live demo), however the script really shines when used with your own custom HTML elements!

NOTE: 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.


Builder Features

  • HTML drag & drop page builder included in the template package
  • Very easy and quick to update content, images, videos, etc…
  • Change font, size, color, weight of your content for all the sections or elements used in the page
  • Change link options like internal page, section on the same page with smooth scrolling and external page / url
  • Reset, clone and remove any section or element
  • Drag & drop any section vertically to order them as per your need
  • Source feature for every element where source code can be changed to do deep customization which cannot be done using page builder settings or some code which works using JS as per the documentation
  • Create multiple pages in one session in case if you want to build normal content pages or others like 404 not found, sign-up, coming soon, etc… to have full website also
  • Preview your page to see how it looks with your changes
  • Integrate twitter real-time feed of your own profile
  • Export your project as JSON file and that can be imported again to continue working in the same project without loosing your previously completed changes
  • Export your landing page to have the full working package which can be uploaded to your hosting server to make your landing page live
  • Add SEO meta data like title, keywords, author and description details
  • Integrate the form with your desired email marketing tools like AWeber, Mailchimp, Active Campaign, Campaign Monitor, Get Response, Mailer Lite and custom form to email

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.

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.

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, firstly the link selectors will need to be added to the "editableItems" array in the /js/builder.js file. 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, please follow below steps.

Step 1: Select building mode “Details” and click on element like button or link.
Step 2: Select a block ID to link from “Choose a block” drop down. The Block 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 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, You can either add directlly full image path like http://www.yourdomain.com/image.png in "Enter Image Path" textbox or you can upload image directlly from your local computer.

Background Image

HTML Builder allows users to edit background image as well. To edit a background image, switch to "Details" building mode and click the image you'd want to edit. This will open the left sidebar panel where you can enter image path or upload image using Image tab. You can also change background image using Style tab - background-image text option, you can also change linear-gradient here.

Video Editing

HTML Builder allows users to edit Youtube and Vimeo videos as well. To edit a video, switch to "Details" building 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.

HTML5 Video

To change section's background video, open the source code of the section and input the video url in the src attribute of the source tag, also input an alternative (poster) image that show in mobile devices instead of the video in the poster attribute in the video tag.

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.

SEO Setting

Search engine optimization (SEO) is the process of affecting the visibility of a website or a web page in a search engine’s “natural” or un-paid (“organic”) search results.
Simply click on SEO button at top, you can set Page Title, Page Meta Description, Page Meta Keywords and Page Author for current open page, you can apply same thing for other pages one by one.

Export HTML

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, fonts, Javascript files and images which will be downloaded by the end user. Now you can simply extract ZIP file and upload it to your hosting server.

Export/Import Project

You can save any time a copy of your landing page project that you are working on as ".json" files which you can import it later to the builder and continue editing. Simply go to left sidebar and click on the button "Export & Import" in the bottom of the sidebar.

Note:  After the import process current landing pages will be removed, so save your current work by exporting it from the save file button. Exported ".zip" file can not be imported. You can only import file to LeadGen builder which are exported as .JSON file from "Export/Import" option from left sidebar.

Preview HTML

To preview a page, click on the preview button in the top bar, you can only preview a single page; links to other pages won't work. When you make changes to your page, reloading the preview won't work, instead you'll have to use the "Preview" button again.

Note:  Sticky header will not work in Preview but that will work fine in your final exported package.

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 Page" 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.

Sticky Header

In addition to a choice of header layouts, PHB also has a sticky header option. For improved usability, as the user scrolls down a page, the sticky header activates ensuring the website’s main menu is always accessible. Simply add any navigation block to page and switch to "Block Mode" and click on source button for navigation block and add CSS class as per below information, there are different CSS class for different navigation header to activate Sticky Header, if it is already sticky then no needs to add this class.

Note : Sticky header will not work in Preview but that will work fine in your final exported package.


<nav class="navbar bg-white tz-header-bg no-margin alt-font light-header">
    <div class="container">
        <div class="row">
            ...
        </div>
    </div>
</nav>

Note: If you want to make sticky header then you can add shrink-header class in nav tag. Please refer below HTML code for example.

<nav class="navbar bg-white tz-header-bg no-margin alt-font light-header shrink-header">
    <div class="container">
        <div class="row">
            ...
        </div>
    </div>
</nav>


Sticky Transparent Header with Dark Background

<nav class="navbar bg-black tz-header-bg no-margin alt-font dark-header">
    <div class="container">
        <div class="row">
            ...
        </div>
    </div>
</nav>

Note: If you want to make sticky transparent header with dark background then you can add shrink-transparent-header-dark, header-border-light classes in nav tag and remove bg-black class in nav tag. Please refer below HTML code for example.

<nav class="navbar tz-header-bg no-margin alt-font shrink-transparent-header-dark header-border-light dark-header">
    <div class="container">
        <div class="row">
            ...
        </div>
    </div>
</nav>

Note: If you use our pre-defined demo then you can remove bg-black or bg-white class in nav tag after export.

<nav class="navbar bg-white white-header tz-header-bg no-margin alt-font light-header">
    <div class="container">
        <div class="row">
            ...
        </div>
    </div>
</nav>

Note: If you want to make sticky transparent header with light background then you can add shrink-transparent-header-light, header-border-dark classes in nav tag and remove bg-white class in nav tag. Please refer below HTML code for example.

<nav class="navbar tz-header-bg alt-font no-margin shrink-transparent-header-light header-border-dark light-header">
    <div class="container">
        <div class="row">
            ...
        </div>
    </div>
</nav>

Note: If you use our pre-defined demo then you can remove bg-black or bg-white class in nav tag after export.

<nav class="navbar bg-white white-header alt-font no-margin no-padding light-header">
    <div class="header-top bg-light-gray tz-header-bg">
        <div class="container">
            ...
        </div>
    </div>
</nav>

Note: If you want to make sticky header with top bar then you can add shrink-medium-header class in nav tag. Please refer below HTML code for example.

<nav class="navbar bg-white white-header alt-font no-margin no-padding shrink-medium-header light-header">
    <div class="header-top bg-light-gray tz-header-bg">
        <div class="container">
            ...
        </div>
    </div>
</nav>

Columns & Grid

Basic grid layouts to get you familiar with building within the Bootstrap grid system.

Three equal columns

Get three equal-width columns starting at desktops and scaling to large desktops. On mobile devices, tablets and below, the columns will automatically stack.

.col-md-4
.col-md-4
.col-md-4

Three unequal columns

Get three columns starting at desktops and scaling to large desktops of various widths. Remember, grid columns should add up to twelve for a single horizontal block. More than that, and columns start stacking no matter the viewport.

.col-md-3
.col-md-6
.col-md-3

Two columns

Get two columns starting at desktops and scaling to large desktops.

.col-md-8
.col-md-4

Full width, single column

.col-md-12

Two columns with two nested columns

Per the documentation, nesting is easy—just put a row of columns within an existing column. This gives you two columns starting at desktops and scaling to large desktops, with another two (equal widths) within the larger column.

At mobile device sizes, tablets and down, these columns and their nested columns will stack.

.col-md-8

.col-md-6
.col-md-6
.col-md-4

Mixed: mobile and desktop

The Bootstrap 3 grid system has four tiers of classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops). You can use nearly any combination of these classes to create more dynamic and flexible layouts.

Each tier of classes scales up, meaning if you plan on setting the same widths for xs and sm, you only need to specify xs.

.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6

Mixed: mobile, tablet, and desktop

.col-xs-12 .col-sm-6 .col-lg-8
.col-xs-6 .col-lg-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4

Column clearing

Clear floats at specific breakpoints to prevent awkward wrapping with uneven content.

.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3

Offset, push, and pull resets

Reset offsets, pushes, and pulls at specific breakpoints.

.col-sm-5 .col-md-6
.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0
.col-sm-6 .col-md-5 .col-lg-6
.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0

Grid Structure

 

.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-3
.col-md-3
.col-md-3
.col-md-3
.col-md-4
.col-md-4
.col-md-4
.col-md-5
.col-md-5
.col-md-5
.col-md-6
.col-md-6
.col-md-1
.col-md-11
.col-md-2
.col-md-10
.col-md-3
.col-md-9
.col-md-4
.col-md-8
.col-md-5
.col-md-7

Add Google and Custom Fonts

If you want to add Google Font then please follow below information:

  1. Go to Google Fonts for Google Fonts.
  2. Select font which one you want to add and Click right side corner on "+" icon, see below image for more inforamtion.
  3. After addition of fonts you can see "Family Selected" box, simply open that box and Click on "@IMPORT" tab.
  4. Copy import url and go to "Builder/elements/css" folder, Open "base.css" and paste import url after line(30).
  5. Suppose if you want to use "'Roboto', sans-serif" instead of "'Open Sans', sans-serif" then find "'Open Sans', sans-serif" in base.css and replace it to "'Roboto', sans-serif".

 

Font Awesome Icon

We use excellent Fontawesome service. Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS. Over 500 new icons.

Icon Size

<!-- Extra Big Icon -->
<i class="fa fa-anchor icon-extra-big"></i>
<!-- End Extra Big Icon -->

<!-- Icon Big -->
<i class="fa fa-reply icon-big"></i>
<!-- End Icon Big -->

<!-- Extra Large Icon -->
<i class="fa fa-mail-reply-all icon-extra-large"></i>
<!-- End Extra Large Icon -->

<!-- Large Icon -->
<i class="fa fa-navicon icon-large"></i>
<!-- End Large Icon -->

<!-- Medium Icon -->
<i class="fa fa-check icon-medium"></i>
<!-- End Medium Icon -->

<!-- Small Icon -->
<i class="fa fa-copy icon-small"></i>
<!-- End Small Icon -->

<!-- Extra Small Icon -->
<i class="fa fa-reply icon-extra-small"></i>
<!-- End Extra Small Icon -->

Icon Class

NoteFont Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.

Check the cheatsheet.

 fa-500px
 fa-address-book
 fa-address-book-o
 fa-address-card
 fa-address-card-o
 fa-adjust
 fa-adn
 fa-align-center
 fa-align-justify
 fa-align-left
 fa-align-right
 fa-amazon
 fa-ambulance
 fa-american-sign-language-interpreting
 fa-anchor
 fa-android
 fa-angellist
 fa-angle-double-down
 fa-angle-double-left
 fa-angle-double-right
 fa-angle-double-up
 fa-angle-down
 fa-angle-left
 fa-angle-right
 fa-angle-up
 fa-apple
 fa-archive
 fa-area-chart
 fa-arrow-circle-down
 fa-arrow-circle-left
 fa-arrow-circle-o-down
 fa-arrow-circle-o-left
 fa-arrow-circle-o-right
 fa-arrow-circle-o-up
 fa-arrow-circle-right
 fa-arrow-circle-up
 fa-arrow-down
 fa-arrow-left
 fa-arrow-right
 fa-arrow-up
 fa-arrows
 fa-arrows-alt
 fa-arrows-h
 fa-arrows-v
 fa-asl-interpreting
 fa-assistive-listening-systems
 fa-asterisk
 fa-at
 fa-audio-description
 fa-automobile
 fa-backward
 fa-balance-scale
 fa-ban
 fa-bandcamp
 fa-bank
 fa-bar-chart
 fa-bar-chart-o
 fa-barcode
 fa-bars
 fa-bath
 fa-bathtub
 fa-battery
 fa-battery-0
 fa-battery-1
 fa-battery-2
 fa-battery-3
 fa-battery-4
 fa-battery-empty
 fa-battery-full
 fa-battery-half
 fa-battery-quarter
 fa-battery-three-quarters
 fa-bed
 fa-beer
 fa-behance
 fa-behance-square
 fa-bell
 fa-bell-o
 fa-bell-slash
 fa-bell-slash-o
 fa-bicycle
 fa-binoculars
 fa-birthday-cake
 fa-bitbucket
 fa-bitbucket-square
 fa-bitcoin
 fa-black-tie
 fa-blind
 fa-bluetooth
 fa-bluetooth-b
 fa-bold
 fa-bolt
 fa-bomb
 fa-book
 fa-bookmark
 fa-bookmark-o
 fa-braille
 fa-briefcase
 fa-btc
 fa-bug
 fa-building
 fa-building-o
 fa-bullhorn
 fa-bullseye
 fa-bus
 fa-buysellads
 fa-cab
 fa-calculator
 fa-calendar
 fa-calendar-check-o
 fa-calendar-minus-o
 fa-calendar-o
 fa-calendar-plus-o
 fa-calendar-times-o
 fa-camera
 fa-camera-retro
 fa-car
 fa-caret-down
 fa-caret-left
 fa-caret-right
 fa-caret-square-o-down
 fa-caret-square-o-left
 fa-caret-square-o-right
 fa-caret-square-o-up
 fa-caret-up
 fa-cart-arrow-down
 fa-cart-plus
 fa-cc
 fa-cc-amex
 fa-cc-diners-club
 fa-cc-discover
 fa-cc-jcb
 fa-cc-mastercard
 fa-cc-paypal
 fa-cc-stripe
 fa-cc-visa
 fa-certificate
 fa-chain
 fa-chain-broken
 fa-check
 fa-check-circle
 fa-check-circle-o
 fa-check-square
 fa-check-square-o
 fa-chevron-circle-down
 fa-chevron-circle-left
 fa-chevron-circle-right
 fa-chevron-circle-up
 fa-chevron-down
 fa-chevron-left
 fa-chevron-right
 fa-chevron-up
 fa-child
 fa-chrome
 fa-circle
 fa-circle-o
 fa-circle-o-notch
 fa-circle-thin
 fa-clipboard
 fa-clock-o
 fa-clone
 fa-close
 fa-cloud
 fa-cloud-download
 fa-cloud-upload
 fa-cny
 fa-code
 fa-code-fork
 fa-codepen
 fa-codiepie
 fa-coffee
 fa-cog
 fa-cogs
 fa-columns
 fa-comment
 fa-comment-o
 fa-commenting
 fa-commenting-o
 fa-comments
 fa-comments-o
 fa-compass
 fa-compress
 fa-connectdevelop
 fa-contao
 fa-copy
 fa-copyright
 fa-creative-commons
 fa-credit-card
 fa-credit-card-alt
 fa-crop
 fa-crosshairs
 fa-css3
 fa-cube
 fa-cubes
 fa-cut
 fa-cutlery
 fa-dashboard
 fa-dashcube
 fa-database
 fa-deaf
 fa-deafness
 fa-dedent
 fa-delicious
 fa-desktop
 fa-deviantart
 fa-diamond
 fa-digg
 fa-dollar
 fa-dot-circle-o
 fa-download
 fa-dribbble
 fa-drivers-license
 fa-drivers-license-o
 fa-dropbox
 fa-drupal
 fa-edge
 fa-edit
 fa-eercast
 fa-eject
 fa-ellipsis-h
 fa-ellipsis-v
 fa-empire
 fa-envelope
 fa-envelope-o
 fa-envelope-open
 fa-envelope-open-o
 fa-envelope-square
 fa-envira
 fa-eraser
 fa-etsy
 fa-eur
 fa-euro
 fa-exchange
 fa-exclamation
 fa-exclamation-circle
 fa-exclamation-triangle
 fa-expand
 fa-expeditedssl
 fa-external-link
 fa-external-link-square
 fa-eye
 fa-eye-slash
 fa-eyedropper
 fa-fa
 fa-facebook
 fa-facebook-f
 fa-facebook-official
 fa-facebook-square
 fa-fast-backward
 fa-fast-forward
 fa-fax
 fa-feed
 fa-female
 fa-fighter-jet
 fa-file
 fa-file-archive-o
 fa-file-audio-o
 fa-file-code-o
 fa-file-excel-o
 fa-file-image-o
 fa-file-movie-o
 fa-file-o
 fa-file-pdf-o
 fa-file-photo-o
 fa-file-picture-o
 fa-file-powerpoint-o
 fa-file-sound-o
 fa-file-text
 fa-file-text-o
 fa-file-video-o
 fa-file-word-o
 fa-file-zip-o
 fa-files-o
 fa-film
 fa-filter
 fa-fire
 fa-fire-extinguisher
 fa-firefox
 fa-first-order
 fa-flag
 fa-flag-checkered
 fa-flag-o
 fa-flash
 fa-flask
 fa-flickr
 fa-floppy-o
 fa-folder
 fa-folder-o
 fa-folder-open
 fa-folder-open-o
 fa-font
 fa-font-awesome
 fa-fonticons
 fa-fort-awesome
 fa-forumbee
 fa-forward
 fa-foursquare
 fa-free-code-camp
 fa-frown-o
 fa-futbol-o
 fa-gamepad
 fa-gavel
 fa-gbp
 fa-ge
 fa-gear
 fa-gears
 fa-genderless
 fa-get-pocket
 fa-gg
 fa-gg-circle
 fa-gift
 fa-git
 fa-git-square
 fa-github
 fa-github-alt
 fa-github-square
 fa-gitlab
 fa-gittip
 fa-glass
 fa-glide
 fa-glide-g
 fa-globe
 fa-google
 fa-google-plus
 fa-google-plus-circle
 fa-google-plus-official
 fa-google-plus-square
 fa-google-wallet
 fa-graduation-cap
 fa-gratipay
 fa-grav
 fa-group
 fa-h-square
 fa-hacker-news
 fa-hand-grab-o
 fa-hand-lizard-o
 fa-hand-o-down
 fa-hand-o-left
 fa-hand-o-right
 fa-hand-o-up
 fa-hand-paper-o
 fa-hand-peace-o
 fa-hand-pointer-o
 fa-hand-rock-o
 fa-hand-scissors-o
 fa-hand-spock-o
 fa-hand-stop-o
 fa-handshake-o
 fa-hard-of-hearing
 fa-hashtag
 fa-hdd-o
 fa-header
 fa-headphones
 fa-heart
 fa-heart-o
 fa-heartbeat
 fa-history
 fa-home
 fa-hospital-o
 fa-hotel
 fa-hourglass
 fa-hourglass-1
 fa-hourglass-2
 fa-hourglass-3
 fa-hourglass-end
 fa-hourglass-half
 fa-hourglass-o
 fa-hourglass-start
 fa-houzz
 fa-html5
 fa-i-cursor
 fa-id-badge
 fa-id-card
 fa-id-card-o
 fa-ils
 fa-image
 fa-imdb
 fa-inbox
 fa-indent
 fa-industry
 fa-info
 fa-info-circle
 fa-inr
 fa-instagram
 fa-institution
 fa-internet-explorer
 fa-intersex
 fa-ioxhost
 fa-italic
 fa-joomla
 fa-jpy
 fa-jsfiddle
 fa-key
 fa-keyboard-o
 fa-krw
 fa-language
 fa-laptop
 fa-lastfm
 fa-lastfm-square
 fa-leaf
 fa-leanpub
 fa-legal
 fa-lemon-o
 fa-level-down
 fa-level-up
 fa-life-bouy
 fa-life-buoy
 fa-life-ring
 fa-life-saver
 fa-lightbulb-o
 fa-line-chart
 fa-link
 fa-linkedin
 fa-linkedin-square
 fa-linode
 fa-linux
 fa-list
 fa-list-alt
 fa-list-ol
 fa-list-ul
 fa-location-arrow
 fa-lock
 fa-long-arrow-down
 fa-long-arrow-left
 fa-long-arrow-right
 fa-long-arrow-up
 fa-low-vision
 fa-magic
 fa-magnet
 fa-mail-forward
 fa-mail-reply
 fa-mail-reply-all
 fa-male
 fa-map
 fa-map-marker
 fa-map-o
 fa-map-pin
 fa-map-signs
 fa-mars
 fa-mars-double
 fa-mars-stroke
 fa-mars-stroke-h
 fa-mars-stroke-v
 fa-maxcdn
 fa-meanpath
 fa-medium
 fa-medkit
 fa-meetup
 fa-meh-o
 fa-mercury
 fa-microchip
 fa-microphone
 fa-microphone-slash
 fa-minus
 fa-minus-circle
 fa-minus-square
 fa-minus-square-o
 fa-mixcloud
 fa-mobile
 fa-mobile-phone
 fa-modx
 fa-money
 fa-moon-o
 fa-mortar-board
 fa-motorcycle
 fa-mouse-pointer
 fa-music
 fa-navicon
 fa-neuter
 fa-newspaper-o
 fa-object-group
 fa-object-ungroup
 fa-odnoklassniki
 fa-odnoklassniki-square
 fa-opencart
 fa-openid
 fa-opera
 fa-optin-monster
 fa-outdent
 fa-pagelines
 fa-paint-brush
 fa-paper-plane
 fa-paper-plane-o
 fa-paperclip
 fa-paragraph
 fa-paste
 fa-pause
 fa-pause-circle
 fa-pause-circle-o
 fa-paw
 fa-paypal
 fa-pencil
 fa-pencil-square
 fa-pencil-square-o
 fa-percent
 fa-phone
 fa-phone-square
 fa-photo
 fa-picture-o
 fa-pie-chart
 fa-pied-piper
 fa-pied-piper-alt
 fa-pied-piper-pp
 fa-pinterest
 fa-pinterest-p
 fa-pinterest-square
 fa-plane
 fa-play
 fa-play-circle
 fa-play-circle-o
 fa-plug
 fa-plus
 fa-plus-circle
 fa-plus-square
 fa-plus-square-o
 fa-podcast
 fa-power-off
 fa-print
 fa-product-hunt
 fa-puzzle-piece
 fa-qq
 fa-qrcode
 fa-question
 fa-question-circle
 fa-question-circle-o
 fa-quora
 fa-quote-left
 fa-quote-right
 fa-ra
 fa-random
 fa-ravelry
 fa-rebel
 fa-recycle
 fa-reddit
 fa-reddit-alien
 fa-reddit-square
 fa-refresh
 fa-registered
 fa-remove
 fa-renren
 fa-reorder
 fa-repeat
 fa-reply
 fa-reply-all
 fa-resistance
 fa-retweet
 fa-rmb
 fa-road
 fa-rocket
 fa-rotate-left
 fa-rotate-right
 fa-rouble
 fa-rss
 fa-rss-square
 fa-rub
 fa-ruble
 fa-rupee
 fa-s15
 fa-safari
 fa-save
 fa-scissors
 fa-scribd
 fa-search
 fa-search-minus
 fa-search-plus
 fa-sellsy
 fa-send
 fa-send-o
 fa-server
 fa-share
 fa-share-alt
 fa-share-alt-square
 fa-share-square
 fa-share-square-o
 fa-shekel
 fa-sheqel
 fa-shield
 fa-ship
 fa-shirtsinbulk
 fa-shopping-bag
 fa-shopping-basket
 fa-shopping-cart
 fa-shower
 fa-sign-in
 fa-sign-language
 fa-sign-out
 fa-signal
 fa-signing
 fa-simplybuilt
 fa-sitemap
 fa-skyatlas
 fa-skype
 fa-slack
 fa-sliders
 fa-slideshare
 fa-smile-o
 fa-snapchat
 fa-snapchat-ghost
 fa-snapchat-square
 fa-snowflake-o
 fa-soccer-ball-o
 fa-sort
 fa-sort-alpha-asc
 fa-sort-alpha-desc
 fa-sort-amount-asc
 fa-sort-amount-desc
 fa-sort-asc
 fa-sort-desc
 fa-sort-down
 fa-sort-numeric-asc
 fa-sort-numeric-desc
 fa-sort-up
 fa-soundcloud
 fa-space-shuttle
 fa-spinner
 fa-spoon
 fa-spotify
 fa-square
 fa-square-o
 fa-stack-exchange
 fa-stack-overflow
 fa-star
 fa-star-half
 fa-star-half-empty
 fa-star-half-full
 fa-star-half-o
 fa-star-o
 fa-steam
 fa-steam-square
 fa-step-backward
 fa-step-forward
 fa-stethoscope
 fa-sticky-note
 fa-sticky-note-o
 fa-stop
 fa-stop-circle
 fa-stop-circle-o
 fa-street-view
 fa-strikethrough
 fa-stumbleupon
 fa-stumbleupon-circle
 fa-subscript
 fa-subway
 fa-suitcase
 fa-sun-o
 fa-superpowers
 fa-superscript
 fa-support
 fa-table
 fa-tablet
 fa-tachometer
 fa-tag
 fa-tags
 fa-tasks
 fa-taxi
 fa-telegram
 fa-television
 fa-tencent-weibo
 fa-terminal
 fa-text-height
 fa-text-width
 fa-th
 fa-th-large
 fa-th-list
 fa-themeisle
 fa-thermometer
 fa-thermometer-0
 fa-thermometer-1
 fa-thermometer-2
 fa-thermometer-3
 fa-thermometer-4
 fa-thermometer-empty
 fa-thermometer-full
 fa-thermometer-half
 fa-thermometer-quarter
 fa-thermometer-three-quarters
 fa-thumb-tack
 fa-thumbs-down
 fa-thumbs-o-down
 fa-thumbs-o-up
 fa-thumbs-up
 fa-ticket
 fa-times
 fa-times-circle
 fa-times-circle-o
 fa-times-rectangle
 fa-times-rectangle-o
 fa-tint
 fa-toggle-down
 fa-toggle-left
 fa-toggle-off
 fa-toggle-on
 fa-toggle-right
 fa-toggle-up
 fa-trademark
 fa-train
 fa-transgender
 fa-transgender-alt
 fa-trash
 fa-trash-o
 fa-tree
 fa-trello
 fa-tripadvisor
 fa-trophy
 fa-truck
 fa-try
 fa-tty
 fa-tumblr
 fa-tumblr-square
 fa-turkish-lira
 fa-tv
 fa-twitch
 fa-twitter
 fa-twitter-square
 fa-umbrella
 fa-underline
 fa-undo
 fa-universal-access
 fa-university
 fa-unlink
 fa-unlock
 fa-unlock-alt
 fa-unsorted
 fa-upload
 fa-usb
 fa-usd
 fa-user
 fa-user-circle
 fa-user-circle-o
 fa-user-md
 fa-user-o
 fa-user-plus
 fa-user-secret
 fa-user-times
 fa-users
 fa-vcard
 fa-vcard-o
 fa-venus
 fa-venus-double
 fa-venus-mars
 fa-viacoin
 fa-viadeo
 fa-viadeo-square
 fa-video-camera
 fa-vimeo
 fa-vimeo-square
 fa-vine
 fa-vk
 fa-volume-control-phone
 fa-volume-down
 fa-volume-off
 fa-volume-up
 fa-warning
 fa-wechat
 fa-weibo
 fa-weixin
 fa-whatsapp
 fa-wheelchair
 fa-wheelchair-alt
 fa-wifi
 fa-wikipedia-w
 fa-window-close
 fa-window-close-o
 fa-window-maximize
 fa-window-minimize
 fa-window-restore
 fa-windows
 fa-won
 fa-wordpress
 fa-wpbeginner
 fa-wpexplorer
 fa-wpforms
 fa-wrench
 fa-xing
 fa-xing-square
 fa-y-combinator
 fa-y-combinator-square
 fa-yahoo
 fa-yc
 fa-yc-square
 fa-yelp
 fa-yen
 fa-yoast
 fa-youtube
 fa-youtube-play
 fa-youtube-square

Twitter Feed

The Twitter feed element uses a HTML5 data attribute called "data-widget-id" to determine which feed to display. Changing it requires you to create a widget from your Twitter account.

If you want to create new Widget follow below steps:

  • Go to the "Settings" page of your Twitter account and clicking "Widgets"
  • Click "Create New" and select "Search" in dropdown
  • In Configuration page, Enter value of "Search Query" and Set all Configuration then click on "Create Widget"
  • Go back to the "Widgets" page and click "Edit" on your newly created widget
  • From here you need to copy the "data-widget-id" in Box. The "data-widget-id" is the long numerical string and paste it into the "data-widget-id" attribute on the tweets div.

Twitter element Markup

Once you've got your widget ID, paste it into the data-widget-id element of the tweets div. Leave the tweets div empty, it will be populated by the Twitter fetcher plugin when the page loads.


<div id="twitter-feed" data-widget-id="11111111111111111" class="twitter-feed alt-font text-transform-none"></div>

Counter

Counter is a jQuery plugin that animates a number from zero (counting up towards it).

Simply add counter block to page and switch to "Block Mode" and click on source button for counter block then change attributes like as "data-to" and "data-speed" as per your requirement, also fill that tag value same as which is put it in "data-to" attribute value and save it.


<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12 text-center">
    <!-- timer -->
    <div id="counter">
        <div class="col-md-3 col-sm-6 col-xs-12 sm-margin-fifteen-bottom xs-margin-seventeen-bottom">
            <div class="counter-content">                                          
                <span class="timer counter-number title-extra-large sm-title-extra-large-1 alt-font text-dark-gray margin-three-bottom xs-margin-one-half-bottom display-block tz-text appear" data-to="1500" data-speed="7000">1500</span>
                <span class="text-medium sm-text-medium display-block tz-text">Projects Completed</span>
                <div class="separator-line3 bg-pink center-col builder-bg margin-fifteen-top sm-margin-ten-top"></div>
            </div>
        </div>
        <div class="col-md-3 col-sm-6 col-xs-12 sm-margin-fifteen-bottom xs-margin-seventeen-bottom">
            <div class="counter-content">                                          
                <span class="timer counter-number title-extra-large sm-title-extra-large-1 alt-font text-dark-gray margin-three-bottom xs-margin-one-half-bottom display-block tz-text appear" data-to="1400" data-speed="7000">1400</span>
                <span class="text-medium sm-text-medium display-block tz-text">Happy Clients</span>
                <div class="separator-line3 bg-pink center-col builder-bg margin-fifteen-top sm-margin-ten-top"></div>
            </div>
        </div>
        <div class="col-md-3 col-sm-6 col-xs-12 xs-margin-seventeen-bottom">
            <div class="counter-content">                                          
                <span class="timer counter-number title-extra-large sm-title-extra-large-1 alt-font text-dark-gray margin-three-bottom xs-margin-one-half-bottom display-block tz-text appear" data-to="1250" data-speed="7000">1250</span>
                <span class="text-medium sm-text-medium display-block tz-text">Cups of Coffee</span>
                <div class="separator-line3 bg-pink center-col builder-bg margin-fifteen-top sm-margin-ten-top"></div>
            </div>
        </div>
        <div class="col-md-3 col-sm-6 col-xs-12 xs-no-margin-bottom">
            <div class="counter-content">                                          
                <span class="timer counter-number title-extra-large sm-title-extra-large-1 alt-font text-dark-gray margin-three-bottom xs-margin-one-half-bottom display-block tz-text appear" data-to="1600" data-speed="7000">1600</span>
                <span class="text-medium sm-text-medium display-block tz-text">Hours Worked</span>
                <div class="separator-line3 bg-pink center-col builder-bg margin-fifteen-top sm-margin-ten-top"></div>
            </div>
        </div>
    </div>
    <!-- end timer -->
</div>
</div>

Animation

Scroll to reveal animations are latest in the trends. You can do them too with PHB. You can use animations on any element you want. Here is the Sample Code:

<div class="wow bounceInUp">
  Content to Reveal Here
</div>

You can also use delays, duration and offset for your animations:

<section class="wow slideInLeft" data-wow-duration="1200ms" data-wow-delay="500ms">
    ...
</section>

NoteDelay duration is in milliseconds.

Here is the list of the Animation Types you can use:

  • bounce
  • flash
  • pulse
  • rubberBand
  • shake
  • swing
  • tada
  • wobble
  • bounceIn
  • bounceInDown
  • bounceInLeft
  • bounceInRight
  • bounceInUp
  • bounceOut
  • bounceOutDown
  • bounceOutLeft
  • bounceOutRight
  • bounceOutUp
  • fadeIn
  • fadeInDown
  • fadeInDownBig
  • fadeInLeft
  • fadeInLeftBig
  • fadeInRight
  • fadeInRightBig
  • fadeInUp
  • fadeInUpBig
  • fadeOut
  • fadeOutDown
  • fadeOutDownBig
  • fadeOutLeft
  • fadeOutLeftBig
  • fadeOutRight
  • fadeOutRightBig
  • fadeOutUp
  • fadeOutUpBig
  • flip
  • flipInX
  • flipInY
  • flipOutX
  • flipOutY
  • lightSpeedIn
  • lightSpeedOut
  • rotateIn
  • rotateInDownLeft
  • rotateInDownRight
  • rotateInUpLeft
  • rotateInUpRight
  • rotateOut
  • rotateOutDownLeft
  • rotateOutDownRight
  • rotateOutUpLeft
  • rotateOutUpRight
  • hinge
  • rollIn
  • rollOut
  • zoomIn
  • zoomInDown
  • zoomInLeft
  • zoomInRight
  • zoomInUp
  • zoomOut
  • zoomOutDown
  • zoomOutLeft
  • zoomOutRight
  • zoomOutUp

Carousel Slider

Touch enabled jQuery plugin that lets you create beautiful responsive carousel slider.

<div class="owl-slider-full owl-carousel owl-theme light-pagination xs-no-owl-buttons">
    <!-- slider item -->
    <div class="item owl-bg-img tz-builder-bg-image cover-background" id="tz-bg-4" data-img-size="(W)1920px X (H)994px" style="background:linear-gradient(rgba(15,15,15,0.75), rgba(15,15,15,0.75)), url('images/bg-image/restaurant-slider-01.jpg')">
        <div class="container one-sixth-screen xs-one-second-screen position-relative">
            <div class="col-md-7 col-sm-10 col-xs-12 margin-lr-auto slider-typography text-center">
                <div class="slider-text-middle-main">
                    <div class="slider-text-middle">
                        <div class="title-extra-large-9 font-weight-700 text-golden-yellow margin-ten-bottom alt-font slider-title tz-text" id="tz-slider-text13">CREATIVE AGENCY</div>
                        <div class="text-extra-large text-light-gray font-weight-400 margin-twelve-bottom xs-margin-twenty-bottom slider-text xs-title-small tz-text width-85 xs-width-95 margin-lr-auto" id="tz-slider-text14"> <p> Lorem Ipsum is simply dummy text of the typesetting industry. Lorem Ipsum has been industry's standard dummy. </p> </div>
                        <div class="btn-dual">
                            <a class="btn btn-large xs-btn-small btn-border btn-circle text-white highlight-button-white-border propClone font-weight-300" id="tz-slider-text15" href="#"><span class="tz-text" id="tz-btn-1">READ MORE</span></a>
                            <a class="btn btn-large xs-btn-small btn-border btn-circle text-white highlight-button-white-border propClone font-weight-300" id="tz-slider-text16" href="#"><span class="tz-text" id="tz-btn-2">DOWNLOAD</span></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- end slider item -->
    <!-- slider item -->
    <div class="item owl-bg-img tz-builder-bg-image cover-background" id="tz-bg-5" data-img-size="(W)1920px X (H)994px" style="background:linear-gradient(rgba(15,15,15,0.75), rgba(15,15,15,0.75)), url('images/bg-image/restaurant-slider-02.jpg')">
        <div class="container one-sixth-screen xs-one-second-screen position-relative">
            <div class="col-md-7 col-sm-10 col-xs-12 margin-lr-auto slider-typography text-center">
                <div class="slider-text-middle-main">
                    <div class="slider-text-middle">
                        <div class="title-extra-large-9 font-weight-700 text-golden-yellow margin-ten-bottom alt-font slider-title tz-text" id="tz-slider-text17">TANGIBLE RESULTS</div>
                        <div class="text-extra-large text-light-gray font-weight-400 margin-twelve-bottom xs-margin-twenty-bottom slider-text xs-title-small tz-text width-85 xs-width-95 margin-lr-auto" id="tz-slider-text18"> <p> Lorem Ipsum is simply dummy text of the typesetting industry. Lorem Ipsum has been industry's standard dummy. </p> </div>
                        <div class="btn-dual">
                            <a class="btn btn-large xs-btn-small btn-border btn-circle text-white highlight-button-white-border propClone font-weight-300" id="tz-slider-text266" href="#"><span class="tz-text" id="tz-btn-3">READ MORE</span></a>
                            <a class="btn btn-large xs-btn-small btn-border btn-circle text-white highlight-button-white-border propClone font-weight-300" id="tz-slider-text267" href="#"><span class="tz-text" id="tz-btn-4">DOWNLOAD</span></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- end slider item -->
    <!-- slider item -->
    <div class="item owl-bg-img tz-builder-bg-image cover-background" id="tz-bg-6" data-img-size="(W)1920px X (H)994px" style="background:linear-gradient(rgba(15,15,15,0.75), rgba(15,15,15,0.75)), url('images/bg-image/restaurant-slider-03.jpg')">
        <div class="container one-sixth-screen xs-one-second-screen position-relative">
            <div class="col-md-7 col-sm-10 col-xs-12 margin-lr-auto slider-typography text-center">
                <div class="slider-text-middle-main">
                    <div class="slider-text-middle">
                        <div class="title-extra-large-9 font-weight-700 text-golden-yellow margin-ten-bottom alt-font slider-title tz-text" id="tz-slider-text21">PREMIUM DESIGNS</div>
                        <div class="text-extra-large text-light-gray font-weight-400 margin-twelve-bottom xs-margin-twenty-bottom slider-text xs-title-small tz-text width-85 xs-width-95 margin-lr-auto" id="tz-slider-text22"> <p> Lorem Ipsum is simply dummy text of the typesetting industry. Lorem Ipsum has been industry's standard dummy. </p> </div>
                        <div class="btn-dual">
                            <a class="btn btn-large xs-btn-small btn-border btn-circle text-white highlight-button-white-border propClone font-weight-300" id="tz-slider-text268" href="#"><span class="tz-text" id="tz-btn-5">READ MORE</span></a>
                            <a class="btn btn-large xs-btn-small btn-border btn-circle text-white highlight-button-white-border propClone font-weight-300" id="tz-slider-text269" href="#"><span class="tz-text" id="tz-btn-6">DOWNLOAD</span></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- end slider item -->
</div>

Javascript

<script type="text/javascript">
    $(document).ready(function () {
        $('.owl-slider-full').owlCarousel({
            navigation: true, // Show next and prev buttons
            slideSpeed: 300,
            items: 3,
            paginationSpeed: 400,
            autoPlay: 5000,
            singleItem: true,
            navigationText: ['<i class="fa fa-long-arrow-left"></i>', '<i class="fa fa-long-arrow-right"></i>']
        });
    });
</script>

Helper Classes

We have created some really useful helper classes for you. Here are a few of them:

Text Size

  • .text-extra-small - For extra small size of text
  • .text-small2 - For small size of text
  • .text-small - For small size of text
  • .text-extra-medium - For extra medium size of text
  • .text-medium - For medium size of text
  • .text-large - For large size of text
  • .text-extra-large - For extra large size of text
  • .title-extra-large-2 - For extra large size of title
  • .title-extra-large-3 - For extra large size of title
  • .title-extra-large-4 - For extra large size of title
  • .title-extra-large-5 - For extra large size of title
  • .title-extra-large-6 - For extra large size of title
  • .title-extra-large-7 - For extra large size of title
  • .title-extra-large-8 - For extra large size of title
  • .title-extra-large-9 - For extra large size of title
  • .title-big - For very large size of title
  • .title-big-2 - For very large size of title
  • .title-big-3 - For very large size of title
  • .title-big-4 - For very large size of title
  • .title-big-5 - For very large size of title
  • .section-title-large - For large section size of title
  • .section-title-medium - For medium section size of title
  • .section-title-small - For small section size of title

Text Color

  • .text-white - For white color text
  • .text-black - For black color text
  • .text-dark-gray - For dark gray color text
  • .text-light-gray - For light gray color text
  • .text-light-gray2 - For light gray two color text
  • .text-medium-gray - For medium gray color text
  • .text-gray - For gray color text
  • .text-yellow - For yellow color text
  • .text-light-yellow - For light yellow color text
  • .text-golden-yellow - For golden yellow color text
  • .text-blue - For blue color text
  • .text-deep-blue - For deep blue color text
  • .text-dark-blue - For dark blue color text
  • .text-fast-blue - For fast blue color text
  • .text-sky-blue-dark - For sky blue dark color text
  • .text-blue-gray - For blue gary color text
  • .text-cyan - For cyan color text
  • .text-deep-red - For deep red color text
  • .text-pink - For pink color text
  • .text-dark-cherry - For dark cherry color text
  • .text-rosy-brown - For rosy brown color text
  • .text-light-red - For light red color text
  • .text-sky-blue - For sky blue color text
  • .text-light-green - For light green color text
  • .text-deep-green - For deep green color text
  • .text-dark-slate-blue - For dark slate blue color text
  • .text-bitter-sweet - For bitter sweet color text
  • .text-orange - For orange color text
  • .text-light-orange - For light orange color text
  • .text-deep-purple - For deep purple color text
  • .text-chrome-yellow - For chrome yellow color text
  • .text-turquoise-green - For turquoise green color text
  • .text-brown - For brown color text
  • .text-golden - For golden color text
  • .text-sand-yellow - For sand yellow color text
  • .text-light-purple-blue - For light purple blue color text
  • .text-light-blue - For light blue color text
  • .text-fast-blue2 - For fast blue two color text
  • .text-puerto-rico - For puerto rico color text
  • .text-orange-peel - For orange peel color text
  • .text-greenish-blue - For greenish blue color text
  • .text-dark-speech-blue - For dark speech blue color text
  • .text-yellow-ochre - For yellow ochre color text
  • .text-yellowish-gray - For yellowish gray color text
  • .text-light-deep-yellow - For light deep yellow color text
  • .text-dark-aqua - For dark aqua color text
  • .text-emerald - For emerald color text
  • .text-deep-green-dark - For deep green dark color text
  • .text-deep-blue-dark - For deep blue dark color text
  • .text-very-light-gray - For very light gray color text
  • .text-fast-pink - For fast pink color text
  • .text-meteorite - For meteorite color text
  • .text-cinnabar - For cinnabar color text
  • .text-poison-green - For poison green color text
  • .text-dark-bitter-sweet - For dark bitter sweet color text
  • .text-red - For red color text

Text Align

  • .text-left - For text align left
  • .text-right - For text align right
  • .text-center - For text align center
  • .text-justify - For text align justify

Text Transform

  • .text-lowercase - For text to lowercase
  • .text-uppercase - For text to uppercase

Letter Spacing

  • .no-letter-spacing - For letter spacing of none
  • .letter-spacing-1 - For letter spacing of 1 pixel
  • .letter-spacing-2 - For letter spacing of 2 pixel
  • .letter-spacing-3 - For letter spacing of 3 pixel
  • .letter-spacing-4 - For letter spacing of 4 pixel
  • .letter-spacing-5 - For letter spacing of 5 pixel
  • .letter-spacing-6 - For letter spacing of 6 pixel
  • .letter-spacing-7 - For letter spacing of 7 pixel
  • .letter-spacing-8 - For letter spacing of 8 pixel
  • .letter-spacing-9 - For letter spacing of 9 pixel
  • .letter-spacing-10 - For letter spacing of 10 pixel
  • .letter-spacing-minus-1 - For letter spacing of -1 pixel
  • .letter-spacing-minus-2 - For letter spacing of -2 pixel
  • .letter-spacing-minus-3 - For letter spacing of -3 pixel
  • .letter-spacing-minus-4 - For letter spacing of -4 pixel
  • .letter-spacing-minus-5 - For letter spacing of -5 pixel
  • .letter-spacing-minus-6 - For letter spacing of -6 pixel

Font Weight

  • .font-weight-100 - For font weight of 100
  • .font-weight-300 - For font weight of 300
  • .font-weight-400 - For font weight of 400
  • .font-weight-600 - For font weight of 600
  • .font-weight-700 - For font weight of 700

Icon Size

  • .icon-extra-big - For extra big icon size
  • .icon-big - For big icon size
  • .icon-extra-large - For extra large icon size
  • .icon-large - For large icon size
  • .icon-medium - For medium icon size
  • .icon-small - For small icon size
  • .icon-extra-small - For extra small icon size

Background Color

  • .bg-white - For background color of white
  • .bg-black - For background color of black
  • .bg-gray - For background color of gray
  • .bg-brown - For background color of brown
  • .bg-light-gray - For background color of light gray
  • .bg-dark-gray - For background color of dark gray
  • .bg-middle-gray - For background color of medium gray
  • .bg-dark-blue - For background color of dark blue
  • .bg-fast-blue - For background color of fast blue
  • .bg-blue - For background color of blue
  • .bg-deep-blue - For background color of deep blue
  • .bg-sky-blue - For background color of sky blue
  • .bg-sky-blue-dark - For background color of sky blue dark
  • .bg-cyan - For background color of cyan
  • .bg-light-cyan - For background color of light cyan
  • .bg-cream - For background color of cream
  • .bg-dark-cream - For background color of dark cream
  • .bg-dark-cherry - For background color of dark cherry
  • .bg-pink - For background color of pink
  • .bg-deep-red - For background color of deep red
  • .bg-rosy-brown - For background color of rosy brown
  • .bg-light-red - For background color of light red
  • .bg-deep-purple - For background color of deep purple
  • .bg-light-green - For background color of light green
  • .bg-medium-green - For background color of medium green
  • .bg-deep-green - For background color of deep green
  • .bg-yellow - For background color of yellow
  • .bg-light-yellow - For background color of light yellow
  • .bg-golden-yellow - For background color of golden yellow
  • .bg-purple - For background color of purple
  • .bg-dark-slate-blue - For background color of dark slate blue
  • .bg-bitter-sweet - For background color of bitter sweet
  • .bg-scarlet-gum - For background color of scarlet gum
  • .bg-orange - For background color of orange
  • .bg-light-orange - For background color of light orange
  • .bg-chrome-yellow - For background color of chrome yellow
  • .bg-gray-yellow - For background color of gray yellow
  • .bg-very-light-gray - For background color of very light gray
  • .bg-turquoise-green - For background color of turquoise green
  • .bg-golden - For background color of golden
  • .bg-deep-orange - For background color of deep orange
  • .bg-sand-yellow - For background color of sand yellow
  • .bg-sand-yellow-dark - For background color of dark sand yellow
  • .bg-dark-purple-blue - For background color of dark purple blue
  • .bg-light-blue - For background color of light blue
  • .bg-puerto-rico - For background color of puerto rico
  • .bg-orange-peel - For background color of orange peel
  • .bg-greenish-blue - For background color of greenish blue
  • .bg-dark-speech-blue - For background color of dark speech blue
  • .bg-light-deep-yellow - For background color of light deep yellow
  • .bg-yellow-ochre - For background color of yellow ochre
  • .bg-yellowish-gray - For background color of yellowish gray
  • .bg-aqua - For background color of aqua
  • .bg-emerald - For background color of emerald
  • .bg-mongoose - For background color of mongoose
  • .bg-deep-green-dark - For background color of deep green dark
  • .bg-deep-blue-dark - For background color of deep blue dark
  • .bg-light-purple-blue - For background color of light purple blue
  • .bg-middle-light-gray - For background color of middle light gray
  • .bg-cod-grey - For background color of cod grey
  • .bg-charcoal - For background color of charcol
  • .bg-black-russian - For background color of black russian
  • .bg-light-gray2 - For background color of light gray two
  • .bg-dark-gray2 - For background color of dark gray two
  • .bg-fast-pink - For background color of fast pink
  • .bg-fast-blue2 - For background color of fast blue two
  • .bg-meteorite - For background color of meteorite
  • .bg-cinnabar - For background color of cinnabar
  • .bg-poison-green - For background color of poison green
  • .bg-light-bitter-sweet - For background color of light bitter sweet
  • .bg-red - For background color of red

RGBA Background color

  • .bg-cyan-rgba - For background color of cyan
  • .bg-white-light-rgba - For background color of light white
  • .bg-black-light-rgba - For background color of light black
  • .bg-black-dark-rgba - For background color of dark black
  • .bg-greenish-blue-rgba - For background color of greenish blue
  • .bg-orange-rgba - For background color of orange
  • .bg-black-medium-rgba - For background color of medium black

Background Image

  • .fix-background - For background image attachment fixed
  • .cover-background - For background image cover

Opacity

  • .only-opacity-light - For only light opacity
  • .opacity-light - For light opacity
  • .opacity-medium - For medium opacity
  • .opacity-full - For full opacity
  • .opacity-full-dark - For extra full opacity

Margin

  • .margin-one-half - Margin of 0.5% on each side
  • .margin-one - Margin of 1% on each side
  • .margin-two - Margin of 1.5% on each side
  • .margin-three - Margin of 2% on each side
  • .margin-four - Margin of 2.5% on each side
  • .margin-five - Margin of 3% on each side
  • .margin-six - Margin of 3.5% on each side
  • .margin-seven - Margin of 4% on each side
  • .margin-eight - Margin of 4.5% on each side
  • .margin-nine - Margin of 5% on each side
  • .margin-ten - Margin of 5.5% on each side
  • .margin-eleven - Margin of 6% on each side
  • .margin-twelve - Margin of 6.5% on each side
  • .margin-thirteen - Margin of 7% on each side
  • .margin-fourteen - Margin of 7.5% on each side
  • .margin-fifteen - Margin of 8% on each side
  • .margin-sixteen - Margin of 8.5% on each side
  • .margin-seventeen - Margin of 9% on each side
  • .margin-eighteen - Margin of 9.5% on each side
  • .margin-nineteen - Margin of 10% on each side
  • .margin-twenty - Margin of 10.5% on each side
  • .margin-twenty-one - Margin of 11% on each side
  • .margin-twenty-two - Margin of 11.5% on each side
  • .margin-twenty-three - Margin of 12% on each side
  • .margin-twenty-four - Margin of 12.5% on each side
  • .margin-twenty-five - Margin of 13% on each side
  • .margin-twenty-six - Margin of 13.5% on each side
  • .margin-twenty-seven - Margin of 14% on each side
  • .margin-twenty-eight - Margin of 14.5% on each side
  • .margin-twenty-nine - Margin of 15% on each side
  • .margin-thirty - Margin of 15.5% on each side
  • .margin-thirty-one - Margin of 16% on each side
  • .margin-thirty-two - Margin of 16.5% on each side
  • .margin-thirty-three - Margin of 17% on each side
  • .margin-thirty-four - Margin of 17.5% on each side
  • .margin-thirty-five - Margin of 18% on each side
  • .no-margin - No margin of on the all side
  • .no-margin-lr - No margin of on the left and right side
  • .no-margin-tb - No margin of on the top and bottom side
  • .no-margin-top - No margin of on the top side
  • .no-margin-bottom - No margin of on the bottom side
  • .no-margin-left- No margin of on the left side
  • .no-margin-right- No margin of on the right side
  • .margin-lr-auto Margin auto of on the left and right side

Padding

  • .padding-one-half - Padding of 0.5% on each side
  • .padding-one - Padding of 1% on each side
  • .padding-two - Padding of 1.5% on each side
  • .padding-three - Padding of 2% on each side
  • .padding-four - Padding of 2.5% on each side
  • .padding-five - Padding of 3% on each side
  • .padding-six - Padding of 3.5% on each side
  • .padding-seven - Padding of 4% on each side
  • .padding-eight - Padding of 4.5% on each side
  • .padding-nine - Padding of 5% on each side
  • .padding-ten - Padding of 5.5% on each side
  • .padding-eleven - Padding of 6% on each side
  • .padding-twelve - Padding of 6.5% on each side
  • .padding-thirteen - Padding of 7% on each side
  • .padding-fourteen - Padding of 7.5% on each side
  • .padding-fifteen - Padding of 8% on each side
  • .padding-sixteen - Padding of 8.5% on each side
  • .padding-seventeen - Padding of 9% on each side
  • .padding-eighteen - Padding of 9.5% on each side
  • .padding-nineteen - Padding of 10% on each side
  • .padding-twenty - Padding of 10.5% on each side
  • .padding-twenty-one - Padding of 11% on each side
  • .padding-twenty-two - Padding of 11.5% on each side
  • .padding-twenty-three - Padding of 12% on each side
  • .padding-twenty-four - Padding of 12.5% on each side
  • .padding-twenty-five - Padding of 13% on each side
  • .padding-twenty-six - Padding of 13.5% on each side
  • .padding-twenty-seven - Padding of 14% on each side
  • .padding-twenty-eight - Padding of 14.5% on each side
  • .padding-twenty-nine - Padding of 15% on each side
  • .padding-thirty - Padding of 15.5% on each side
  • .padding-thirty-one - Padding of 16% on each side
  • .padding-thirty-two - Padding of 16.5% on each side
  • .padding-thirty-three - Padding of 17% on each side
  • .padding-thirty-four - Padding of 17.5% on each side
  • .padding-thirty-five - Padding of 18% on each side
  • .no-padding - No padding at all
  • .no-padding-lr - No padding in left and right
  • .no-padding-tb - No padding in top and bottom
  • .no-padding-top - No padding in top
  • .no-padding-bottom - No padding in bottom
  • .no-padding-left - No padding in left
  • .no-padding-right - No padding in right

Float

  • .pull-left - Float DIV to left
  • .pull-right - Float DIV to right

Display

  • .display-block - For display block
  • .display-inline-block - For display inline-block
  • .display-inline - For display inline
  • .display-inherit - For display inherit
  • .display-none - For display none
  • .display-table - For display table
  • .display-table-cell-vertical-middle - For display table vertical middle
  • .display-table-cell-vertical-bottom - For display table vertical bottom
  • .overflow-hidden - For overflow hidden
  • .overflow-auto - For overflow auto

Position

  • .position-relative - For element position relative
  • .position-absolute - For element position absolute
  • .position-fixed - For element position fixed
  • .position-inherit - For element position inherit
  • .position-static - For element position static
  • .position-right - For element position fixed to right of the body or parent element
  • .position-left - For element position fixed to left of the body or parent element
  • .position-top - For element position fixed to top of the body or parent element
  • .position-bottom - For element position fixed to bottom of the body or parent element

Position Top

  • .top-3 For element position 3px down from the top of the parent element/div
  • .top-4 For element position 4px down from the top of the parent element/div
  • .top-5 For element position 5px down from the top of the parent element/div
  • .top-6 For element position 6px down from the top of the parent element/div
  • .top-7 For element position 7px down from the top of the parent element/div
  • .top-8 For element position 8px down from the top of the parent element/div
  • .top-9 For element position 9px down from the top of the parent element/div
  • .top-10 For element position 10px down from the top of the parent element/div
  • .top-minus1 For element position 1px up from the top of the parent element/div
  • .top-minus2 For element position 2px up from the top of the parent element/div
  • .top-minus3 For element position 3px up from the top of the parent element/div
  • .top-minus4 For element position 4px up from the top of the parent element/div
  • .top-minus5 For element position 5px up from the top of the parent element/div
  • .top-minus6 For element position 6px up from the top of the parent element/div
  • .top-minus7 For element position 7px up from the top of the parent element/div
  • .top-minus8 For element position 8px up from the top of the parent element/div
  • .top-minus9 For element position 9px up from the top of the parent element/div
  • .top-minus10 For element position 10px up from the top of the parent element/div

Position left

  • .left-1 For element position 3px down from the left of the parent element/div
  • .left-2 For element position 3px down from the left of the parent element/div
  • .left-3 For element position 3px down from the left of the parent element/div
  • .left-4 For element position 4px down from the left of the parent element/div
  • .left-5 For element position 5px down from the left of the parent element/div
  • .left-6 For element position 6px down from the left of the parent element/div
  • .left-7 For element position 7px down from the left of the parent element/div
  • .left-8 For element position 8px down from the left of the parent element/div
  • .left-9 For element position 9px down from the left of the parent element/div
  • .left-10 For element position 10px down from the left of the parent element/div
  • .left-minus1 For element position 3px up from the left of the parent element/div
  • .left-minus2 For element position 3px up from the left of the parent element/div
  • .left-minus3 For element position 3px up from the left of the parent element/div
  • .left-minus4 For element position 4px up from the left of the parent element/div
  • .left-minus5 For element position 5px up from the left of the parent element/div
  • .left-minus6 For element position 6px up from the left of the parent element/div
  • .left-minus7 For element position 7px up from the left of the parent element/div
  • .left-minus8 For element position 8px up from the left of the parent element/div
  • .left-minus9 For element position 9px up from the left of the parent element/div
  • .left-minus10 For element position 10px up from the left of the parent element/div

Position bottom

  • .bottom-3 For element position 3px down from the bottom of the parent element/div
  • .bottom-4 For element position 4px down from the bottom of the parent element/div
  • .bottom-5 For element position 5px down from the bottom of the parent element/div
  • .bottom-6 For element position 6px down from the bottom of the parent element/div
  • .bottom-7 For element position 7px down from the bottom of the parent element/div
  • .bottom-8 For element position 8px down from the bottom of the parent element/div
  • .bottom-9 For element position 9px down from the bottom of the parent element/div
  • .bottom-10 For element position 10px down from the bottom of the parent element/div

Width

  • .width-15 - For width of 15% on DIV/Text
  • .width-20 - For width of 20% on DIV/Text
  • .width-25 - For width of 25% on DIV/Text
  • .width-30 - For width of 30% on DIV/Text
  • .width-35 - For width of 35% on DIV/Text
  • .width-40 - For width of 40% on DIV/Text
  • .width-45 - For width of 45% on DIV/Text
  • .width-50 - For width of 50% on DIV/Text
  • .width-55 - For width of 55% on DIV/Text
  • .width-60 - For width of 60% on DIV/Text
  • .width-65 - For width of 65% on DIV/Text
  • .width-70 - For width of 70% on DIV/Text
  • .width-75 - For width of 75% on DIV/Text
  • .width-80 - For width of 80% on DIV/Text
  • .width-85 - For width of 85% on DIV/Text
  • .width-90 - For width of 90% on DIV/Text
  • .width-95 - For width of 95% on DIV/Text
  • .width-100 - For width of 100% on DIV/Text
  • .width-auto - For width of auto on DIV/Text

Height

  • .height-20 - For height of 20% on DIV/Text
  • .height-25 - For height of 25% on DIV/Text
  • .height-30 - For height of 30% on DIV/Text
  • .height-35 - For height of 35% on DIV/Text
  • .height-40 - For height of 40% on DIV/Text
  • .height-45 - For height of 45% on DIV/Text
  • .height-50 - For height of 50% on DIV/Text
  • .height-55 - For height of 55% on DIV/Text
  • .height-60 - For height of 60% on DIV/Text
  • .height-65 - For height of 65% on DIV/Text
  • .height-70 - For height of 70% on DIV/Text
  • .height-75 - For height of 75% on DIV/Text
  • .height-80 - For height of 80% on DIV/Text
  • .height-85 - For height of 85% on DIV/Text
  • .height-90 - For height of 90% on DIV/Text
  • .height-95 - For height of 95% on DIV/Text
  • .height-100 - For height of 100% on DIV/Text
  • .min-height - For min height of 100% on DIV/Text

One Pixel Border

  • .border-light - For one pixel light border
  • .border-dark - For one pixel dark border
  • .border-top - For one pixel top border
  • .border-right - For one pixel right border
  • .border-top-light - For one pixel top light border
  • .border-bottom - For one pixel bottom border
  • .border-bottom-medium-dark - For one pixel bottom medium dark border
  • .border-bottom-light - For one pixel bottom light border

Two Pixel Border

  • .border-2-white - For two pixel white border
  • .border-2-fast-blue - For two pixel fast blue border
  • .border-2-light-green - For two pixel light green border
  • .border-2-medium-green - For two pixel medium green border
  • .border-2-deep-green - For two pixel deep green border
  • .border-2-light-green - For two pixel light green border
  • .border-2-sky-blue - For two pixel sky blue border
  • .border-2-sky-blue-dark - For two pixel dark sky blue border
  • .border-2-light-gray - For two pixel light gray border
  • .border-2-dark-gray - For two pixel dark gary border
  • .border-2-bitter-sweet - For two pixel bitter sweet border
  • .border-2-yellow - For two pixel yellow border
  • .border-2-chrome-yellow - For two pixel chrome yellow border
  • .border-2-turquoise-green - For two pixel turquoise green border
  • .border-2-golden - For two pixel golden border
  • .border-2-deep-orange - For two pixel deep orange border
  • .border-2-orange-peel - For two pixel peel orange border
  • .border-greenish-blue - For two pixel greenish blue border
  • .border-2-dark-aqua - For two pixel dark aqua border
  • .border-2-deep-green-dark - For two pixel dark green border
  • .border-2-deep-blue-dark - For two pixel dark deep blue border
  • .border-2-orange - For two pixel orange border
  • .border-2-fast-blue2 - For two pixel fast blue border
  • .border-2-red - For two pixel red border
  • .border-2-cinnabar - For two pixel cinnabar border
  • .border-2-poison-green - For two pixel poison green border
  • .border-3-bitter-sweet - For three pixel bitter sweet border
  • .border-10-light-red - For ten pixel light red border
  • .img-border - For image six pixel white border

Border Radius

  • .border-radius-0 - For zero pixel radius border
  • .border-radius-2 - For two pixel radius border
  • .border-radius-3 - For three pixel radius border
  • .border-radius-4 - For four pixel radius border
  • .border-radius-6 - For six pixel radius border
  • .border-radius-8 - For eight pixel radius border
  • .border-radius-10 - For ten pixel radius border
  • .border-radius-20 - For twenty pixel radius border
  • .border-radius-30 - For thirty pixel radius border
  • .border-radius-40 - For forty pixel radius border
  • .border-radius-50 - For fifty pixel radius border
  • .border-radius-100 - For hundred pixel radius border

Each Side Border None

  • .border-none - For border none
  • .border-top-none - For border top none
  • .border-bottom-none - For border bottom none
  • .border-left-none - For border left none
  • .border-right-none - For border right none

Useful Tip

You can add link/button which direct you to other section of the same page with smooth scroll effect like it is one page website. You just need to add class: inner-link and href should be the ID of the section as per the example shown below:

<a href="#home" class="inner-link">Home</a>

Note: Please note that destination section should have valid ID.

Form API Integration

We have implemented forms that connect with popular platforms like AWeber, Mailchimp, Active Campaign, Campaign Monitor, Get Response, Mailer Lite as well as custom form to email. We also provide Google Captcha integration in forms for security and to stop spams. Click on Export button and select form type (AWeber, ActiveCampaign, Custom Email, CampaginMonitor, GetResponse, Mailchimp or MailerLite) and simply choose the form type that you require and fill out your information,

Aweber

Integrate Aweber mail service in signup form, you have to enter the following information.

Active Campaign

Integrate Active Campaign mail service in signup form, you have to enter the following information.

Custom Email

Integrate Custom Email in signup form, you have to enter the following information.

  • Email - The email which will receive the leads.
  • Subject - The subject of the email.

Campagin Monitor

Integrate Campagin Monitor mail service in signup form, you have to enter the following information

Mailchimp

Integrate Mailchimp mail service in signup form, you have to enter the following information.

 

Mailchimp list default fields are EMAIL, FNAME and LNAME but If you have any other fields in the form you are using then you will need to do some code changes in this file: /tz_mail/mailchimp_api/Mailchimp.php and this function: themezaa_mailchimp_add_subscriber in your exported package to have your additional form fields data transferred properly to your Mailchimp list.

 

Get Response

Integrate GetResponse mail service in signup form, you have to enter the following information.

MailerLite

Integrate MailerLite mail service in signup form, you have to enter the following information.

How to Setup Forms After Export & in Predefined Demo

If you are using predefined landing pages or exported landing pages from LeadGen Builder and want to edit the Form Type for the forms in the page then please follow below steps.

  1. Open the folder "tz_mail".
  2. Open the file "api-config.php".
  3. In line number (2) input the email service provider that you want to use as following:
    • "tz_aweber" for AWeber.
    • "tz_active" for Active Campaign.
    • "tz_custom" for Custom Email.
    • "tz_campain" for Campaign Monitor.
    • "tz_response" for GetResponse.
    • "tz_mailchimp" for Mailchimp.
    • "tz_mailerlite" for MailerLite.
  4. For the used email service provider enter the required information as following:
    • Aweber setting line (11), enter your List Name.
    • Active Campaign setting lines (17 & 18 & 19), enter your API URL, API Key and List ID.
    • Custom Email setting lines (22 & 23), enter your Email address and Email's subject.
    • Campaign Monitor setting lines (31 & 32), enter API Key and List ID.
    • GetResponse setting lines (39 & 40), enter API Key and Campaign Token.
    • Mailchimp setting lines (47 & 48), enter API Key and List ID.
    • MailerLite setting lines (54 & 55), enter API Key and Group ID.
  5. Save the file and your form will be ready to use.

 

Your email subscription form will not work unless you have your files running on a hosting server with PHP / JS. When you have your files ready on your hosting server, you need to edit the settings to make the email function work.

Open "tz_mail/contact.php" and in line (131) change email address with "noreply@yourdomain.com" to your real email address, same way you can change subject line with replace of text "Contact us form details". Also replace yourdomain.com with your real domain name in logo image url in the email body template (http://www.yourdomain.com/images/logo-mail.png).

Demo Email Template

Open "tz_mail/demoname-contact.php" or "tz_mail/subscribe-contact.php" or "tz_mail/hero-contact.php" (depends on which form setup) change your from email address (Receiver Email Address) at the top with "info@yourdomain.com" to your real email address and also change with "noreply@yourdomain.com", same way you can change subject line with replace of text "Contact us form details". Also replace yourdomain.com with your real domain name in logo image url in the email body template (http://www.yourdomain.com/images/logo-mail.png).

Please feel free to contact us in case if your email feature does not work because some server settings do not allow normal PHP email function.

Note if you want to integrate API mail service in Predefined HTML demo then replace class "default-submit" , "subscribe-submit" and "hero-submit" to "tz_submit".

How to Setup Google reCAPTCHA in forms

Integrate reCAPTCHA in forms you should following below steps

  1. First, we need an API key, so head on over to https://www.google.com/recaptcha/admin. To gain access to this page you'll need to be logged into a Google account. You'll be asked to register your website, so give it a suitable name, then list domains (for example yourdomain.com) where this particular reCAPTCHA will be used. Subdomains (such as webdesign.yourdomain.com and code.yourdomain.com) are automatically taken into account.
  2. After above step complete successfully, you'll get a site key and its partner secret key:
  3. Underneath the keys you'll see some snippets for including reCAPTCHA on your page. First up there's the JavaScript:
    <script src='https://www.google.com/recaptcha/api.js'></script>
    You can also define which of the 40 supported languages you're using by adding a parameter to the string. Here we're adding es which will give us a Spanish language reCAPTCHA:
    <script src='https://www.google.com/recaptcha/api.js?hl=es'></script>
    Place this script tag at the footer of your page (or just underneath the form where the reCAPTCHA will appear, depending on how you prioritize your asset loading).
  4. You'll need to add to your form markup wherever you want the reCAPTCHA to appear:
  5. After that the reCAPTCHA will be ready to use.
    <div class="g-recaptcha" data-sitekey="6LfnBw4UAAAAAEgYvf2_11112143254544465"></div>
    
    
    

Create unlimited designs - one page websites, landing pages, contact forms, sliders, Facebook stores and more

Top