Structure

Here you can find the detailed structure of the downloaded archive and short descriptions of the included folders.

  • Documentation – folder contains the documentation to this work.
  • Builder – tool that helps you build your own pages in a minutes. Easy to install and use.
    • include – contains main builder files.
    • css – contains custom css.
    • sections – contains all sections.
    • fonts – contains the fonts used in templates.
    • default_font – contains the fonts used in the builder.
    • images – contains images used in the builder.
    • video – contains video used in the builder.
    • scripts – contains the PHP scripts.
    • js – contains the javascript files.
    • tmp – contains temporary files.
    • order.xml – in this file you can set wished order of the sections in the builder.
    • ajax.php, index.php – files with functions (not recommended to change).
    • main.html – main file.
    • index.php – index page.
  • Templates – contains the ready templates (demo pages).
    • service – contains page for online/offline services.
    • agency – contains page for agencies and portfolios.
      • css – here you will find theme style sheets.
      • fonts – folder contains fonts of the page.
      • images – contains images of the page.
      • scripts – contains the PHP scripts.
      • js – contains the javascript files.
      • video – contains videos of the page.
      • index.html – it's the main template file. It can be open with any browser on your computer.
    • app – contains page for applications.
    • ...

Installation

Simply upload it to your online server. To do it you can use the online FTP manager of your hosting (almost all the hosting companys has FAQ/support pages where they explain how to upload files via their own FTP managers) or use the desktop version (FileZilla for example).

Also the builder can work locally. To make it happens you need install the local server on your computer. The best choice for both platforms (Mac and Windows) is the local MAMP server. Here you can find detailed installation documentation or see a video tutorial: Mac or Windows.

After installation, check MAMP ports, they should be the same as in the screenshot below.

MAMP settings Requires for correct builder work:
  • PHP v5.3 (not less).
  • PHP ZIP Extension.
  • Apache webserver (Windows servers will probably work, but are not supported).
  • Don't forget about the permissions. For folders it's 755 and for files 644.

Demo Content

You can download demo content for Weber ready templates and Page Builder here.

For updating simply upload/replace new assets instead of existing ones.

The Page builder.

Supra (the Page Builder) it's a tool for creating stunning web pages in a minutes. It is designed so that you can create pages without touching a single line of code. The main interface of Supra consists of 3 modes: sections mode, edit mode, project mode. Let's look at this in detail.

Sections mode.

In this mode, we can add sections, delete, copy and configure them. To enable this mode - select the top icon in the left panel. To display the section options, just point to it in the work area and choose wished action.

Sections mode

Edit mode.

In this mode, we edit the elements globally (changing the parameters for all the like elements) and locally (changing one specific element).


Global editing.

For global editing, just select this mode (the second icon is on top of the panel) and select the element you want to edit from the list (see screen below).

Global editing

Local editing.

For local editing, simply click on the element you want to edit and select the desired action from the appeared control buttons. You can change the format of the element (for example, H1 - H4), add animation, work with style settings and prepare classes, copy and delete. If the element contains text, then a text editor will appear on the double-click on it. Some specific elements have special options (for example: images, forms, counters, video and map iframes).

Global editing

Project mode.

Here you can customize the pages, copy them, delete or add new ones. You can also manage the project: save, load, create new one or export the finished project in html format.

Project mode

Create new section

The best way to create a section - find a similar (in already existing) as a base and copy it. All sections should have a unique name/ID. So, you need to change: section ID in the html code, folder name, thumbnail name (in the section folder). All of them should be named the same and don't forget to change IDs in style.css (if it exists).

create new section

Congrats! Now you have a platform for your new section. To modify the html code of the section use index.html (located in the section folder). If you want change/add CSS code - use style.css (located in the section folder). For javascript - use custom.js (located in the section folder). If there is no style.css or custom.js - you have to create them yourself.

You can change the order of sections (and groups) in order.xml (located in the builder root folder).

Add new font (image or icon).

In the new version we have greatly simplified and improved for you the process of adding resources to the builder. Now all you need is just add a folder with a new font to the font folder (../Pagebuilder/fonts/).


Font files must be named this way "fontname-fonttype" (Example: Montserrat-BlackItalic.ttf).

For images use a similar trick, just add an image (or image folder) to the main images folder (../Pagebuilder/images/gallery/).

Shortcodes

This set is based on Bootstrap 4, so many useful components and utilities (grid systeem, flex classes and others) emigrated from there (but not all, some of them were removed for optimization). So, let's look at some of them in more detail.

Margins & Paddings

The logic for constructing the class name: Parameter - resolution - value. For example "mb-md-100", which means margin-bottom(mb) since the medium resolution(md) is 100px. The same logic for paddings (and not only).

Range of padding values: 0, 10, 20, 30, 50, 75, 100, 150, 200, 250, 300, 350, 400

Range of margin values:-300, -200, -100, -50, -30, 0, 10, 20, 30, 50, 75, 100, 150, 200, 250, 300

<section id="section-name" class="pt-75 pb-75 pt-md-150 pb-md-150 dark">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                SECTION CONTENT
            </div>
        </div>
    </div>
    <div class="bg-wrap"></div>
</section>

Color skins

The kit has 2 preset color skins, light and dark. To install them, just add to element class "light" or "dark".

<div class="col-12 dark"></div>

Block styles

List of common classes for blocks:

  • padding, padding-x2, padding-x3, padding-x4 – add all sides padding to the block.
  • margin, margin-x2, margin-x3, margin-x4 – add all sides margin to the block.
  • shadow – add shadow.
  • bg-default – set background color to default.
  • border, border-x2 – add borders to the block.
  • rounded, rounded-circle – rounded block corners ("rounded-circle" better use on the square shape blocks).
<div class="bg-default padding-x2 shadow"></div>

Typography

List of common classes for typography:

  • smalll – sets text size 80%.
  • lead – sets text size 120%.
  • text-left, text-center, text-right, text-justify – text align.
  • text-primary – sets text color to primary.
  • text-secondary – sets text color to secondary.

List with visual effects classes:

  • fx-text-shadow – simple text shadow.
  • fx-text-thin-shadow – thin/narrow text shadow.
  • fx-text-hard-shadow – text shadow without blur.
  • fx-text-pushed-shadow – text shadow with pushed effect.
  • fx-text-isometric-shadow – text shadow from flat design.
  • fx-text-glow – animated glow(white) effect.
  • fx-text-3d – 3D text effect.
  • fx-text-isometric – isometric text effect.
  • fx-text-anaglyphic – anaglyphic text effect.
<p class="lead text-primary fx-text-shadow"></p>

Buttons

List of common classes for buttons:

  • btn-sm – sets button size 80%.
  • btn-lg – sets button size 120%.
  • btn-block – sets button width 100%.

List with visual effects classes:

  • fx-btn-3d – 3D button effect.
  • fx-btn-pill – rounded button corners.
  • fx-btn-zoom – zoom effect on hover.
  • fx-btn-up – up effect on hover.
  • fx-btn-shadow – apply shadow to button.
  • fx-btn-hard-shadow – apply not blured shadow to button.
  • fx-btn-hidden-icon – show icon (if it exist).
  • fx-btn-blick – adds blick animation.
  • fx-btn-wave – adds wave animation.
  • fx-btn-glow – adds glow animation.

Color classes for buttons same as in bootstrap4.


<a class="btn btn-lg btn-primary fx-btn-3d fx-btn-pill">Button</a>

Forms

To optimize and simplify your work with forms we highly recommend you use our drag and drop form constructor which is included to Supra. It saves you a lot of time and nerves. You can connect popular mail services (Mailchimp, MailerLite, Activecampaing, GetResponse, CampaingMonitor) or use a secure SMTP method. Anyway, if you decided adjust form from the ready page this part will be helpful.

Open scripts/request.php file and replace "ENTER YOUR EMAIL ADDRESS" to your email address and "ENTER YOUR SUBJECT" to the letter subject. 

if($_POST['id'] === "contact-center-form-form") {
    
	$mailto = "ENTER YOUR EMAIL ADDRESS";

	$data_array = json_decode($_POST['data']);
	$message = "";
	foreach ($data_array as $key => $value) {
		if (isset($value->name) && $value->name !== "") {
			$message .= $value->name.': '.$value->value.'<br>';
		}
	}

	$subject = "ENTER YOUR SUBJECT";

The Form ID in the script (for example:"contact-center-form-form") must match with the Form ID on the page.

Credits

The following materials were used in order to create this work (we’d like to say that we are much obliged to their developers):